top of page
Rectangle 1711.png
Group-39215.jpg

最新Wixコラム

Wixのオートメーション設定とは?フォーム送信で自動返信メールが届くまでの設定方法をご紹介

Shop Now

Wix Studioのスクロールアニメーションとは?スクロールしても要素が動かない時の付け方を実例でご紹介

Shop Now

Wixの動的ページの作り方とは?「1ページ作るだけで全件表示される」仕組みをコレクション作成から実演解説

Shop Now

Wixのリピーター接続とは?データセットがうまくつながらず「表示されない」を解決するつなぎ込み手順

Shop Now

Wixの「パディング」と「マージン」とは?余白の違いがわからない人向けに内側・外側の使い分けをやさしく解説

Shop Now

Wixフォームでドロップダウンの選択肢ごとに質問項目を表示・非表示する方法

Shop Now
Pink Poppy Flowers
Group 163232.jpg

お気軽にご相談ください

お問い合わせはこちら
Group 163231 (1).png

詳細はコチラからご確認ください

資料ダウンロード

YouTubeやってます!

人気動画

他の動画はこちら

YouTube

やってます!

人気動画

他の動画はこちら

Wixの動的ページの作り方とは?「1ページ作るだけで全件表示される」仕組みをコレクション作成から実演解説

  • 19 時間前
  • 読了時間: 10分
記事イメージ

「制作実績が70件あるから、70ページ手作りしないといけないのだろうか」「商品が増えるたびにページを複製していたら、いつまで経っても終わらない」。


Wixでこうした悩みにぶつかったことはありませんか?


実は、Wixの動的ページを使えば、ページは1枚作るだけで済みます。


あとはデータを追加した分だけ、同じデザインのページが自動で増えていきます。


この記事では、対策キーワードである「Wix 動的ページ 作り方」に沿って、コレクションの作成からフィールドの設計、よくあるつまずきまでを、実際の制作実績ページを題材に順を追って解説します。




Wixの動的ページとは?1ページ作るだけで全アイテムに自動展開される仕組み

動的ページが1枚から複数ページへ自動展開される概念図

結論:Wixの動的ページとは、Wix CMSに登録したデータ(コレクション)をもとに、1ページのデザインを全アイテムぶんに自動で展開してくれる仕組みのことです。


作り方の核は「ページを何枚も作る」ことではなく「データを1か所にまとめ、そのデータに1つのページをつなぐ」ことにあります。


まずは言葉の整理をしておきます。


Wixの動的ページを理解するうえで、押さえておきたい要素は大きく4つです。


  1. コレクション:データのくくり(カテゴリー)。Excelの1シートに近く、たとえば「制作実績」がこれにあたります。1つのサイトに複数持てます。

  2. フィールド:コレクションの「列」にあたる項目。会社名・画像・URL・番号など、それぞれに型(データの種類)を選べます。

  3. アイテム:コレクションの「行」にあたる1件分のデータ。制作実績なら1社ぶんがアイテム1件です。

  4. 動的ページ:コレクションのデータをもとに自動生成されるページ。実体は1ページで、アイテムの件数ぶんに展開されます。

イメージとしては、コレクションが表計算ソフトの表、動的ページがその表を映し出す「型」です。


型を1つ用意しておけば、行(アイテム)が70件あっても700件あっても、同じ見た目のページが自動で並びます。


Wixの管理画面(ダッシュボード)側でデータを更新できるのも大きな利点です。


編集画面を触らなくても、表にアイテムを追加するだけで内容が反映されるため、サイトの構造がわからない担当者でも運用を続けられます。




エディタ側でコレクションを作成する手順(パーツを追加→CMS→0から始める)

Wixエディタのパーツ追加パネルからCMSを選ぶ操作画面

Wixの動的ページの作り方は、まず土台となるコレクションを用意することから始まります。


ここではエディタ(編集画面)側から新しくコレクションを作る流れを見ていきましょう。


注意点として、CMS(コンテンツ管理システム)はWixにデフォルトでは入っていないことがあります。


見当たらない場合は、ダッシュボードからCMSを追加してから進めてください。


エディタ側でコレクションを作成する手順は次のとおりです。


  1. エディタ左側の「パーツを追加」を開きます。

  2. メニューの下から3番目あたりにある「CMS」をクリックします。

  3. 「あなたのコレクション」から「コレクション作成」を選びます。

  4. 作成方法を聞かれたら「0から始める」を選択します。

  5. コレクション名を入力します(例:制作実績)。

  6. そのまま作成すると、Excelのような表形式のコレクションができあがります。

ここまでで、データを入れる「箱」が完成しました。


この時点ではまだ中身が空ですが、後からアイテム(行)を追加していけば、動的ページに反映されていきます。


コレクション名は後から見返してもわかる名前にしておくと、サイトが育って複数のコレクションを持つようになったときに迷いません。


実際の制作現場でも、制作実績・導入実績といった単位でコレクションを分け、1サイトで4つほど運用するケースがあります。





コレクションに必要なフィールドを追加する(画像・URL・番号など型の選び方)

コレクションのフィールドと型の選択を示すUIモック

コレクションという箱ができたら、次は中に「どんな項目を持たせるか」を決めます。


これがフィールドの追加です。


フィールドはコレクションの列にあたり、動的ページに表示したい情報の数だけ用意します。


たとえば制作実績を扱うなら、次のようなフィールド構成が考えられます。


  1. 会社名(タイトル):実績の見出しになるテキスト項目。

  2. ハッシュタグ:業種や特徴を示すテキスト項目。

  3. 画像:実績のキャプチャやサムネイルを入れる画像項目。

フィールドを追加するときに重要なのが「型」の選択です。


型とは、そのフィールドに入るデータの種類のことです。


ここを適切に選んでおかないと、後で画像を入れたいのにテキストしか入らない、といったズレが起きます。


代表的な型には次のようなものがあります。


主な用途

使う場面の例

テキスト

短い文章・見出し

会社名、ハッシュタグ、キャッチコピー

画像

写真・キャプチャ

実績サムネイル、商品画像

動画

動画コンテンツ

事例紹介ムービー

URL

リンク先

公開サイトへのリンク、外部ページ

番号

数値

価格、並び順、年度

型を選ぶコツは「そのデータで後から何をしたいか」から逆算することです。


たとえば価格を番号型で入れておけば、金額の高い順に並べ替えるといった処理がしやすくなります。


一方で、電話番号のように「先頭のゼロを残したい」「計算しない」データは、あえてテキスト型にしておくほうが安全です。


フィールドの設計は、動的ページの完成度をそのまま左右します。


表示したい情報を洗い出し、それぞれに合った型を割り当てておくことが、後戻りの少ない作り方につながります。




作った動的ページが空白になる原因と確認ポイント

リピーターとデータセットの接続関係を示す概念図

コレクションもフィールドも用意したのに、動的ページを開くと何も表示されない。


この空白は、Wixの動的ページ作りで多くの人がつまずくポイントです。


原因のほとんどは「データのつなぎ込み(接続)」にあります。


動的にデータを並べるには、リピーターという要素が欠かせません。


リピーターは、アイテムを件数ぶんくり返し表示するための入れ物です。


1件なら1つ、70件なら70個へと自動で増減します。


これを使わずにパーツを個別に置いただけでは、そもそもコレクションと接続されず、ページは空白のままになります。


空白になったときの確認ポイントは、大きく3つあります。


  1. リピーターを配置しているか:個別のパーツではなく、リピーターを使っているかを確認します。動的表示にはリピーターが必須です。

  2. 親要素にデータセットが接続されているか:まず親であるリピーター自体に、対象コレクションのデータセットが接続されているかを見ます。接続には、パーツを選ぶと出る接続アイコン(通称「にょろにょろ」)を使い、「CMS」から「リピーターを接続」を選んでコレクションを指定します。

  3. アイテム内の各パーツにフィールドを割り当てたか:リピーターのアイテム内(ピンク枠の中)にある画像やテキストを1つずつ選び、それぞれ表示するフィールドを指定します。画像パーツには画像フィールド、会社名テキストにはタイトルフィールド、という具合です。

ここで大切なのが接続の順番です。


かならず「親(リピーター)→子(アイテム内の各パーツ)」の順でつなぎます。


親の接続を飛ばして子だけをつないでも、データの出どころが定まらないため正しく表示されません。


逆に、この順番さえ守って1つのアイテムを完成させれば、あとはコレクションのアイテム数に応じて全件が自動で展開されます。


もう1つ見落としがちなのが、コレクションにアイテムが入っているかどうかです。


箱とページを正しくつないでも、中身のデータが0件なら当然ながら表示するものがありません。


ダッシュボード側の表にアイテムが登録されているかも、あわせて確認してみてください。




静的ページの複製運用が件数増加で破綻する理由

静的ページの複製が積み上がり管理が破綻する様子の概念図

「動的は難しそうだから、静的ページを複製して増やせばいい」。


この発想は一見すると手軽ですが、件数が増えるほど破綻に近づいていきます。


最後に、なぜ複製運用が行き詰まるのかを整理しておきましょう。


理由は主に3つあります。


  1. ページ数の物理的な上限がある:Wixで作れる静的ページには上限があり、100ページまでとされています。製品が100種類を超えるような規模では、静的ページだけでは作りきれません。大量のページが必要な場面では、動的ページ(CMS)が事実上の前提になります。

  2. 修正がすべて手作業になる:静的ページを複製した場合、共通デザインを1か所直したくなっても、複製したページの数だけ同じ修正をくり返すことになります。20ページあれば20回。件数が増えるほど、修正コストが雪だるま式に膨らみます。

  3. 更新に専門知識が必要になる:静的ページは編集画面を開いて直す前提のため、サイトの構造がわからない担当者には手が出しにくくなります。動的ページなら、ダッシュボードの表にデータを足すだけで済むため、更新のハードルが下がります。

作業時間の差も見過ごせません。


静的なら20ページぶんの内容も、動的なら1ページの制作で済みます。


単純計算で作業時間はおよそ20分の1、体感でも大きく短縮されます。


一度この効率を知ると、複製運用には戻れなくなる、という声は少なくありません。


もちろん、ページ数が数枚しかなく今後も増えないなら、静的ページで問題ありません。


判断の分かれ目は「同じ型のページが今後どれだけ増えそうか」です。


増えていく見込みがあるなら、早い段階で動的ページに切り替えておくほうが、後の運用がずっと楽になります。


数が増えるほど強みを発揮するのが、Wixの動的ページの作り方の本質です。


まずは1つ、小さなコレクションから試してみてはいかがでしょうか?





よくある質問(FAQ)

Q1. Wixで動的ページを作るには、最低何ページ作る必要がありますか?

A. 最低1ページです。


動的ページは1ページ作れば、その1枚がコレクションのアイテム件数ぶんに自動展開されます。


70件のアイテムがあっても、作るページは1枚で済みます。


Q2. Wixの静的ページに上限はありますか?

A. あります。


Wixで作れる静的ページは100ページまでとされています。


製品100種類超などの大量ページを静的で作ろうとすると、この上限に突き当たります。


そうした規模では動的ページ(CMS)が必須になります。


Q3. コレクションのアイテム数にも上限はありますか?

A. デフォルトでは100個と表示されることがありますが、この数は設定で増やせます。


1万件、さらには1000万件まで設定できるとされており、静的ページの100という上限とは桁が違います。


実際の運用では、制作実績を約70件のアイテムで動かしているケースもあります。


Q4. 動的ページが空白で何も表示されません。何を確認すればいいですか?

A. まずリピーターを使っているかを確認してください。


次に、親であるリピーターにデータセットが接続されているか、その後アイテム内の各パーツにフィールドを割り当てたかを順に見ます。


接続は「親→子」の順が鉄則です。


加えて、コレクションにアイテムが登録されているか(0件になっていないか)もあわせて確認します。


Q5. リピーターは必ず使わないといけませんか?

A. 複数のアイテムを動的に並べたい場合は、リピーターが必須です。


パーツを個別に配置しただけではコレクションと接続されず、データが表示されません。


リピーターを使えば、アイテム数に応じて表示が自動で増減します。


Q6. CMSがエディタに見当たりません。どうすればいいですか?

A. CMSはWixにデフォルトでは入っていないことがあります。


その場合はダッシュボードからCMSを追加してから、エディタの「パーツを追加」→「CMS」で操作を進めてください。


Q7. 1つのサイトにコレクションはいくつまで持てますか?

A. 1サイトに複数のコレクションを持てます。


たとえば制作実績・導入実績といった単位で分け、1サイトで4つほど運用するケースがあります。


持てる数や容量は契約プランによって変わるため、規模に応じてプランを確認してください。


Q8. ExcelのデータをまとめてWixに登録できますか?

A. できます。


ExcelのデータをCSV形式に書き出し、Wix内へCSVインポートすることで、アイテムを一括登録できます。


1件ずつ手入力する必要がなく、既存のデータ資産をそのまま動的ページに活かせます。


【この記事の監修者】


中田ディレクター(株式会社ラジャ|SEO担当監修)


保有資格・実績:Wixレジェンドレベルパートナー/サイト制作400サイト以上/Wix Studio制作100サイト以上(日本トップクラス)/Wix Studio専門スクール「ノコド道場」運営


お問い合わせ・資料DLはこちら

お問い合わせ

・HP制作に関するお悩み
・Wixサイトに関するお悩み

資料DL

・弊社のサービス内容について
分かりやすくまとめた資料をお送りします

Group 163232.jpg

\簡単30秒!強引な営業などは一切行いません/

関連記事

Wixを使いたい

2025年10月9日

WixのPDF埋め込み方法とは?PDFデータ掲載方法と、PDFアイコンの使用方法も合わせてご紹介

Send
Wixを使いたい

2025年6月16日

最新版WixでInstagramをフル活用!簡単ステップでインスタフィードを埋め込む方法

Send
Wixを使いたい

2023年12月20日

Wixで簡単に表を作成する活用術!Wixテーブルマスターアプリを使った表の作成とカスタマイズ方法をご紹介

Send
bottom of page