.png)
Wix StudioでCMSを使った導入事例ページ（制作実績ページ）の作り方を最初から最後まで解説
- 6 日前
- 読了時間: 12分
BtoBのサイトで問い合わせにつながるコンテンツといえば、やはり「導入事例」や「制作実績」のページです。
取引先の名前や成果が並んでいると、初めて訪れた見込み客も安心して検討を進められます。
ところが、この事例ページは案件が増えるたびに追加していくものなので、作り方を間違えると更新のたびに膨大な手間がかかってしまいます。
この記事では、Wix StudioのCMSを使って導入事例ページ（制作実績ページ）を作る方法を、コレクションの作成からリストページ・アイテムページの構築、公開後の運用まで、最初から最後まで順を追って解説します。
「Wix Studio 導入事例ページ 作り方」を調べている方が、この1本で全体像をつかめる内容を目指します。
結論：導入事例ページはCMSで作れば「複製ゼロ・追加するだけ」で量産できる
先に結論をお伝えします。
Wix Studioで導入事例ページを作るなら、ページを1枚ずつ複製するのではなく、CMS（コンテンツ管理システム）で作るのが正解です。
CMSで作っておけば、事例が増えても新しいページを作る必要はありません。
ダッシュボードの管理画面から事例データを1件追加するだけで、一覧ページにも詳細ページにも自動で反映されます。
CMSとは、データの入れ物である「コレクション」を用意し、そこに入れたデータをページ側の表示要素に接続して見せる仕組みのことです。
Excelのように行を1件追加すれば、それがそのままWebページになるとイメージすると分かりやすいです。
文章や修正はデザインの編集画面に入らず、ダッシュボードだけで完結します。
つまり、導入事例ページはCMSで作れば、複製せずダッシュボードから事例を追加するだけで量産・更新できる、というのがこの記事でいちばん伝えたいことです。
以下で、なぜ複製がよくないのか、そして具体的にどう作るのかを見ていきます。
導入事例ページをCMSで作るメリット（複製での量産が修正地獄になる理由）
導入事例ページの作り方には、大きく分けて2つのやり方があります。
1つはページを複製して1枚ずつ作っていく方法、もう1つがCMSで作る方法です。
まずはこの違いを整理しましょう。
ページを複製する方法は、最初の1〜2ページを作るだけならシンプルです。
ところが事例が10件になれば10ページ、50件になれば50ページを別々に管理することになります。
そして問題は修正のときに起きます。
たとえば「事例カードのボタンの文言を変えたい」「レイアウトを少し直したい」となったとき、複製で作っていると、その1箇所の変更を10ページ、50ページすべてに手作業で反映しなければなりません。
1箇所の変更が全ページの修正作業に膨れ上がる、いわゆる修正地獄です。
一方、CMSで作っておけば、レイアウトは1つのテンプレートで共通管理されます。
ボタンの文言もデザインも、大元を1箇所直せば全ページに一斉反映されます。
さらに、事例の追加はデザインの編集画面に入らず、ダッシュボードのCMS画面からデータを1件足すだけで済みます。
編集画面を触らないので、レイアウトを誤って壊してしまう心配もありません。
両者の違いを表にまとめます。
比較項目 | ページ複製で量産 | CMS（コレクション）で作成 |
事例の追加方法 | 編集画面でページを1枚ずつ複製 | ダッシュボードでデータを1件追加 |
レイアウト修正 | 全ページを1枚ずつ手作業で修正 | 大元を1箇所直せば全ページ反映 |
更新のしやすさ | 編集画面に入る必要あり | ダッシュボードだけで完結 |
大量データへの対応 | 手作業で限界がくる | CSV/スプレッドシートで一括取り込み可 |
向いているケース | ページ数が固定で少ない | 更新頻度が高く件数が増える事例・実績 |
導入事例や制作実績は、これからも件数が増えていくコンテンツです。
だからこそ、レイアウトが共通で更新頻度の高いページはCMSで作るのが向いています。
実際、当社でも制作実績ページや社員インタビューページはCMSで運用しており、納品のたびにダッシュボードから1件追加するだけで公開できる状態にしています。
なお、Wix Studioは容量面でも導入事例ページ向きです。
動画内で紹介された数値では、Wix Studioは月額2,500円ほどで2万アイテムまでのCMSが使えるとされていました（通常版のWixは約4,000円で5,000件ほど）。
事例が数百・数千件に増えても十分に収まる規模です。
料金や上限は変更されることがあるため、契約前に最新のプラン内容を確認してください。
CMSの構築は少し概念の理解が必要ですが、一度組んでしまえば運用がとても楽になります。
「自社の事例ページをCMSで作りたいが、設計から任せたい」という場合は、お気軽にご相談ください。
STEP1：コレクションを作りリストページを追加する（導入事例ページの土台づくり）
ここからは実際の作り方です。
導入事例ページ作りの第一歩は、データの入れ物である「コレクション」を作り、事例が一覧で並ぶ「リストページ」を追加することです。
まずコレクションを作成します。
エディタ画面の左側のバーから「CMS」を開きます。
「あなたのコレクション」を選び、「コレクション作成」に進みます。
「ゼロから始める」を選んで「次へ」を押します。
コレクション名を入力します（例として「制作実績」など、中身が分かる名前にします）。
これで、事例データを入れる箱ができました。
次に、事例が並ぶ一覧ページ（リストページ）を追加します。
「ページ」から「新規ページを追加」を開きます。
ページの種類として「動的ページ」を選びます。
対象のコレクションに、先ほど作った「制作実績」を指定します。
「リストページをサイトに追加」を押すと、一覧ページが自動で生成されます。
ここで押さえておきたいのが、CMSの2つのページの考え方です。
「リストページ」は事例が複数並ぶ一覧ページ、「アイテムページ」は1件ごとの詳細ページを指します。
リスト＝一覧、アイテム＝詳細1件、と覚えておけば大丈夫です。
この概念は独学だとつまずきやすいところですが、実際に一度作ってみると一気に腑に落ちます。
解説者自身も最初は理解に苦労したと語っていたポイントなので、分かりにくくても心配いりません。
まずは手を動かしてみましょう。
STEP2：リピーターでカードのレイアウトを組む（導入事例ページの見た目を作る）
土台ができたら、次は一覧ページに並ぶ事例カードの見た目を作ります。
ここで使うのが「リピーター」という要素です。
リピーターは、同じレイアウトのカードを繰り返し表示するための要素です。
1枚のカードのデザインを作れば、それがデータの件数分だけ自動で並びます。
Wix Studioのリピーターは、カード内の文字量や画像の高さがバラバラでも、余白などが全カードで均等にそろうのが強みです。
事例のように内容の長さが1件ごとに違うコンテンツでも、見た目が崩れにくくなっています。
手順は次のとおりです。
リストページに自動生成されたセクションを、いったん削除します。
「リピーター」を配置します。
リピーターの中に、事例カードの中身を並べます。具体的には、画像（サムネイル）、会社名やタイトルのテキスト、業種などを示すハッシュタグ、詳細ページへ進むボタン、といった要素です。
この段階では、まずデザインとレイアウトを組むことに集中します。データはこの後つなぎます。
補足として、通常版のエディタでこうしたカードを並べると、自動伸縮がうまく効かず、隣り合うカードの高さがそろわないことがよくあります。
事例や実績のように中身が可変のコンテンツこそ、レイアウトが均等にそろうWix Studioで作るのが安全です。
見た目が組めたら、カードに表示するデータの受け皿となる「フィールド」をコレクションに用意します。
フィールドとは、コレクション内の各項目のことです。
ここでは画像、名前（会社名/タイトル）、ハッシュタグといった項目を作っておきます。
まずはテストとして3件ほどデータを入れておくと、この後の接続作業で表示を確認しやすくなります。
STEP3：アイテムページ（詳細）を作りリストから遷移させる（導入事例の詳細ページを自動生成する）
レイアウトができたら、次はデータをつなぎ、1件ごとの詳細ページ（アイテムページ）を用意して、カードから詳細へ飛べるようにします。
ここが導入事例ページの心臓部です。
まず、STEP2で組んだリピーターにデータをつなぎます。
リピーターを選び、「データセットを接続」から、作成したコレクション（制作実績）を指定します。データセット接続とは、表示要素にCMSのデータを紐づける操作のことで、この接続は必ず必要です。
接続すると、カードの数はデータの件数に合わせて自動で増減するようになります。
カード内の各要素を、対応するフィールドに1つずつ紐づけます。画像は画像フィールドへ、会社名のテキストは名前フィールドへ、ハッシュタグはタグ用のフィールドへ、という具合です。
次に、1件ごとの詳細ページ（アイテムページ）を追加します。
リストページのときと同じ手順で「動的ページ」を選びます。
同じコレクション（制作実績）を指定し、今度は「アイテムページ」を追加します。
アイテムページは、データの件数と1対1で対応します。事例データが10件あれば、詳細ページが10ページ自動生成される、というのがポイントです。手作業でページを作る必要はありません。
最後に、一覧のカードから詳細ページへ遷移させます。
リストページのカード内のボタンを選びます。
ボタンをクリックしたときの動作として、「該当アイテムの詳細ページに飛ばす」設定を選びます。
これだけで、各カードのボタンが、それぞれの事例の詳細ページへ正しく遷移するようになります。
あとは詳細ページの中身を作り込みます。
名前・タイトル・ハッシュタグ・サムネイルは、リストと同じフィールドを接続すればそのまま表示されます。
詳細ページだけに載せたい項目、たとえば公開サイトのURLや制作期間などは、コレクションに新しいフィールドを追加して接続します。
ここまでで、導入事例ページの骨格は完成です。
一覧に事例が並び、カードをクリックすると各事例の詳細に飛ぶ、という一連の流れが自動でつながった状態になります。
公開後の運用：ダッシュボードから事例を追加するだけで反映される
CMSで作る最大の恩恵は、公開したあとの運用で実感できます。
新しい事例ができたときにやることは、デザインの編集画面に入ることではありません。
ダッシュボードのCMS画面を開き、コレクションに事例データを1行追加するだけです。
追加した内容は、一覧ページのカードにも、自動生成される詳細ページにも即座に反映されます。
デザインを触らないので、レイアウトを崩してしまう心配もありません。
この運用のしやすさこそが、導入事例ページをCMSで作る本当の価値です。
実際、CMS単体の構築だけでも3万〜5万円ほどの制作費に見合う価値があると言われるほど、運用フェーズでの効きが大きい仕組みです。
運用を続けていくと、次のような場面も出てきます。
あらかじめ知っておくと安心です。
過去分の事例をまとめて登録したいとき：CMSはExcelやスプレッドシートから一括で取り込めます。1件ずつ手打ちする必要はなく、過去に700件規模のデータをCSVからインポートした例もあります。移行やリニューアルで大量の実績を一度に載せたいときに便利です。
カテゴリー別に表示を出し分けたいとき：1つのコレクションから、コーポレート・採用・ブランドといったカテゴリーごとに表示を絞り込む「フィルター」という機能があります。「業種別」「サービス別」に事例を見せたいときに使います。
CMSが増えて複雑になってきたとき：サイトが大きくなり、コレクションが5個などに増えてくると、フィルターやデータのつなぎ方の設計を誤ると表示のバグや参照ミスが起きやすくなります。どう絞り込むかを最初に設計してから組むのが安全です。
導入事例ページは、一度きちんとCMSで作っておけば、あとは事例を足していくだけで資産のように育っていきます。
「自社でも導入事例ページをCMSで作りたい」「フィルター設計まで含めて相談したい」という場合は、Wix Studioでの制作実績が豊富な当社にお任せください。
よくある質問（FAQ）
Q. 導入事例ページはページを複製して作るのとCMSで作るの、どちらがいいですか？
A. 更新頻度が高く件数が増えていく導入事例や制作実績は、CMSで作るのがおすすめです。
複製で10ページ作ると、1箇所の修正に10ページ分の手直しが必要になりますが、CMSなら大元を1箇所直すだけで全ページに反映され、追加もダッシュボードから1件足すだけで済みます。
Q. リストページとアイテムページの違いは何ですか？
A. リストページは事例が複数並ぶ一覧ページ、アイテムページは1件ごとの詳細ページです。
「リスト＝一覧、アイテム＝詳細1件」と覚えると分かりやすいです。
アイテムページはデータの件数と1対1で対応し、事例が10件あれば詳細ページが10ページ自動生成されます。
Q. リピーターとデータセット接続とは何ですか？
A. リピーターは同じレイアウトのカードを繰り返し表示する要素で、Wix Studioでは中身の量が違っても余白が均等にそろいます。
データセット接続は、そのリピーターなどの表示要素にCMSのデータを紐づける操作で、カードにデータを表示するには必ずこの接続が必要です。
Q. 過去の事例が数百件あります。
手入力せずに登録できますか？
A. できます。
CMSはExcelやスプレッドシートからの一括インポートに対応しており、過去には700件規模のデータをCSVから取り込んだ事例もあります。
リニューアルや移行で大量の実績を一度に載せたい場合に有効です。
Q. 業種やサービスのカテゴリーごとに事例を出し分けられますか？
A. できます。
1つのコレクションから「フィルター」機能を使い、コーポレート・採用・ブランドなどのカテゴリー別に表示を絞り込めます。
ただしCMSが増えて複雑になると設計を誤るとバグの原因になるため、絞り込み方を先に設計してから組むのがおすすめです。
Q. Wix StudioのCMSは通常版のWixと何が違いますか？
A. 動画内で紹介された数値では、Wix Studioは月額2,500円ほどで2万アイテムまで、通常版のWixは約4,000円で5,000件ほどとされていました。
Wix Studioは料金が抑えめでアイテム数の上限も大きく、事例が増えても収まりやすいのが特長です。
料金や上限は変更される場合があるため、契約前に最新のプランをご確認ください。
Q. 公開後に新しい事例を追加するのは難しいですか？
A. 難しくありません。
デザインの編集画面に入る必要はなく、ダッシュボードのCMS画面でデータを1行追加するだけです。
一覧ページにも自動生成される詳細ページにも自動反映され、レイアウトを崩す心配もありません。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
