はじめに
本資料はCMSを活用した「動的ページ」について、基礎概念から実際の作成手順、種類、運用メリットまでをやさしく整理したガイドです。WixやStudio CMSなど、実務でよく使われるプラットフォームでの実装例も含めます。
目的
- 動的ページの仕組みを理解する
- 実際に作れるよう手順を把握する
- 運用上の利点と注意点を知る
対象読者
- ウェブ制作の基礎を持つ方
- サイト運用や更新を効率化したい担当者
- CMSを使って情報を自動化したい開発者や制作者
読み方の案内
第2章で概念を学び、第3章で種類と構造を確認します。第4章と第5章ではWixとStudio CMSでの具体手順を順を追って解説します。第6章で運用の効果を整理します。
具体例（イメージ）
商品データをCMSに入れておくと、商品ごとのページを自動で生成できます。更新はデータ編集だけで済み、手作業を減らせます。
この章は全体の地図を示します。以降の章で順に学んでいきましょう。
動的ページとCMSの基礎概念
動的ページとは
動的ページは、同じ見た目（レイアウトやデザイン）を使い、ページの中身だけを切り替えて表示する仕組みです。テンプレートに対して複数のデータを当てはめることで、短時間に多くのページを作成できます。例えば商品ページのテンプレートに商品ごとの情報を入れると、商品ごとに別々のページが自動でできます。
CMSの役割
CMSはコンテンツの保管庫として働きます。文章や画像、価格などのデータを項目ごとに保存し、動的ページはそのデータを呼び出して表示します。CMSは編集画面を通じて非技術者でもデータを更新できる点が便利です。
フィールドとデータの反映
各コンテンツはフィールド（項目）で構成されます。例として「タイトル」「本文」「画像」「価格」「公開日」などがあります。動的ページのテンプレートはこれらのフィールドを配置し、ページごとに異なる値を表示します。例えばタイトル欄にはCMSのタイトルフィールドを紐づけます。
静的ページとの違い
静的ページは手作業で作る固定のページです。内容を変えるには直接編集が必要です。一方、動的ページはデータを更新するだけで複数ページに反映でき、効率よく大量のコンテンツを扱えます。
具体例
- ブログ：記事データをCMSに入れ、記事ごとに自動生成
- 商品カタログ：商品情報をフィールド化して個別ページを自動生成
- イベント一覧：開催日時や会場をデータ化して表示
これらが基礎概念です。次章では動的ページの種類と構造を詳しく見ていきます。
動的ページの種類と構造
概要
動的ページは大きく2種類あります。動的リストページは複数のコンテンツを一覧表示し、動的アイテムページはその一覧から選んだ個別コンテンツの詳細を表示します。商品カタログと商品の詳細ページの関係が分かりやすい例です。
動的リストページ
役割：複数アイテムを並べて見せ、絞り込みや並び替えを提供します。
構成：同じレイアウトの繰り返し（カード表示）＋検索/フィルター＋ページネーション。データは一覧用のデータセットで供給します。
動的アイテムページ
役割：選んだアイテムの詳細を表示します。
構成：項目ごとのフィールド（画像、説明、価格など）をテンプレートに埋め込んで表示します。URLは通常スラグやIDで識別します。
データとテンプレートの連携
データベースの各レコードがアイテムに対応し、テンプレートはフィールドに結びつきます。リストからアイテムをクリックすると、そのレコードを参照するURLでアイテムページを開きます。
実用的な注意点
・URLスラグはわかりやすく一意にする。
・画像や説明はテンプレート化して共通で管理する。
・リストと詳細で同じデータを参照することで更新が一貫します。
以上の構造を意識すると、ユーザーが一覧からスムーズに詳細へ移動できる動的サイトを作れます。
Wixでの動的ページ作成手順
準備：目的を決める
どんな情報を表示するか決めます。例：店舗一覧、スタッフ紹介、ブログ記事など。項目（タイトル、画像、説明など）を想定しておくと後で作業が早くなります。
1. 動的ページを追加する
Wixのサイドメニューで「CMS（コンテンツ管理）」→「動的ページ」を選びます。「リストページ（一覧）」と「アイテムページ（個別）」を作成するテンプレートを選びます。リストは一覧表示、アイテムは個別詳細に使います。
2. データコレクションを作る
「データベース」または「コレクション」を作成し、項目（フィールド）を追加します。例：名前（テキスト）、画像（画像フィールド）、説明（リッチテキスト）。これがコンテンツの保存場所になります。
3. データセットをページに接続
作成したリストページとアイテムページにデータセットを挿入して、どのコレクションを表示するか指定します。リストは複数アイテム、アイテムは1件表示に設定します。
4. デザイン要素をCMSに接続
リピーターや画像、テキスト要素を選び、「接続」から対応するフィールドを選択します。リピーターにはタイトルやサムネイルを接続すると一覧が自動生成されます。
5. アイテムページへのリンクを設定
リピーター内にボタンやリンクを置き、リンク先をアイテムページの動的URL（通常は”:[id]」の形式）に設定します。これで一覧の各アイテムから個別ページへ移動できます。
6. コンテンツを追加して確認
CMSの管理画面でデータを追加し、一覧から個別ページに遷移して表示を確認します。表示が崩れる場合はフィールドの接続やレイアウトを調整してください。
よくある注意点
- フィールド名をわかりやすくすると管理が楽になります。
- 画像サイズを揃えると見た目が整います。
- 公開前にテストユーザーで動作確認を行ってください。
Studio CMSでの動的ページ作成手順
1. CMSダッシュボードでモデルを作る
まずダッシュボードを開き、コンテンツモデル（例：ブログ記事、商品、スタッフ）を作成します。モデルにはタイトル、本文、画像、日付、カテゴリなど必要なフィールドを追加します。フィールドは“テキスト”“画像”“参照（他モデルへのリンク）”などで設定します。
2. コンテンツを登録する
作成したモデルに対して個別のアイテムを追加します。例としてブログなら記事ごとにタイトルと本文・サムネイルを登録します。管理画面で編集・削除ができ、後から追加したデータは自動で反映されます。
3. デザインエディターで動的ページを作成
エディターで新しい動的ページテンプレートを作ります。テンプレート内のテキストや画像を選択し、「データを接続」して先ほど作ったモデルのフィールドに紐付けます。リスト表示はリピーターやカードを使い、1つのテンプレートで複数アイテムを表示できます。
4. プレビューと公開
プレビューで実際のデータが正しく表示されるか確認します。問題なければ公開して、URLごとに自動生成される個別ページにアクセスできます。
5. 管理と更新
ダッシュボードでコンテンツを追加・修正すると、動的ページは即時または短時間で更新されます。個別ページの管理や並び替え、フィルターの設定も可能です。
動的ページのメリットと活用効果
はじめに
動的ページは、テンプレートとデータを組み合わせて自動でページを生成します。一度設計すれば大量のページを短時間で作成でき、運用がとても楽になります。
主なメリット
-
作業効率の向上
テンプレートを使い回すため、デザイン作業が大幅に減ります。新しい商品や記事を追加するときは、データを入力するだけで済みます。 -
一貫したデザインと品質
テンプレートによりページの見た目が統一され、ユーザーにとって分かりやすいサイトになります。 -
大量コンテンツの管理が容易
CMSと連携すれば、一覧表示、フィルタ、並べ替えが簡単になり、編集や差し替えも効率的です。 -
更新・運用コストの削減
共通部分を一括で更新できるため、手作業で一つずつ直す必要がありません。 -
SEOやパーソナライズの活用
メタ情報や構造化データを自動で埋め込めます。ユーザーごとに表示内容を変えることも可能です。
具体的な活用例
- ECサイトの商品ページ：同じレイアウトで多数の商品を公開できます。
- 物件情報サイト：物件ごとに写真や仕様を差し替えるだけで完成します。
- ブログやニュース：投稿をテンプレートに流し込むだけで一覧と個別ページが生成されます。
運用時のポイント
- テンプレート設計を丁寧に行うこと。後で変更すると影響範囲が大きくなります。
- データ項目（フィールド）名はわかりやすく統一すること。
- 画像は最適化し、読み込み速度を意識すること。
- プレビューとテストを繰り返し、表示崩れを防ぐこと。
- URL設計とメタ情報の運用を決めておくこと。
