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

最新Wixコラム

Wix Studioで要素が自由に配置できない…左・中央・右しか選べない時にボックス(DIV)で狙った位置に置く方法

Shop Now

Wix StudioでCMSを使った導入事例ページ(制作実績ページ)の作り方を最初から最後まで解説

Shop Now

Wix Studioのアニメーションの付け方とは?稲妻マークが見つからない・どこで設定するのか分からない悩みをまるっと解決

Shop Now

Wix Studioとクラシックエディタは編集方法が違う?要素が思い通りに置けない理由とツールの選び方

Shop Now

Wixのリストページとアイテムページとは?「一覧」と「詳細」の違いを初心者がつまずかない順序で解説

Shop Now

Wix Studioで文字にグラデーションをかける方法とは?「画像化しないと無理」を解決するテキストマスク活用術

Shop Now
Pink Poppy Flowers
Group 163232.jpg

お気軽にご相談ください

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

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

資料ダウンロード

YouTubeやってます!

人気動画

他の動画はこちら

YouTube

やってます!

人気動画

他の動画はこちら

Wixのリストページとアイテムページとは?「一覧」と「詳細」の違いを初心者がつまずかない順序で解説

  • 6 日前
  • 読了時間: 7分
記事イメージ

Wix Studioで制作実績やお知らせ、社員インタビューといった「同じ形のページがいくつも並ぶコンテンツ」を作ろうとすると、必ず出てくるのが「リストページ」と「アイテムページ」という言葉です。


この2つの関係がつかめないまま作業を進めると、どこに何を置けばいいのか分からなくなり、途中で手が止まってしまいます。


逆に言えば、この2つの関係さえ腹落ちすれば、Wix StudioのCMS(コンテンツ管理)は驚くほど扱いやすくなります。


この記事では「Wix リストページ アイテムページ とは」という疑問に、初心者がつまずかない順序でお答えします。




結論:Wixのリストページは一覧、アイテムページは詳細1件

リストページとアイテムページの関係を示す概念図

先に結論からお伝えします。


リストページは「一覧」、アイテムページは「詳細1件」です。


そして、アイテムを追加すれば詳細ページが自動で増えます。


この一文が、この記事でいちばん覚えていただきたいポイントです。


言葉を置き換えると、次のようになります。


種類

役割

イメージ

リストページ

複数のアイテムが並ぶ一覧ページ

制作実績が一覧で並ぶトップ

アイテムページ

1件ごとの詳細ページ

「A社の事例」の詳細1枚

たとえば制作実績のページを思い浮かべてください。


実績がカード状に並んでいる画面が「リストページ」です。


そのうちの1枚をクリックすると、その案件だけの詳しい内容が表示されます。


これが「アイテムページ」です。


一覧と詳細。


この2階建ての構造がWix StudioのCMSの基本形であり、リストページとアイテムページはその一覧と詳細をそれぞれ担当している、と捉えると一気に見通しが良くなります。


解説者自身も最初は概念でつまずいたと明言しており、ここでつまずくのはごく自然なことです。




アイテムが10件あれば詳細ページが10ページ自動生成される仕組み

CMSのアイテム件数に応じてアイテムページが自動で増える様子

リストページとアイテムページを理解するうえで、いちばん「便利さ」を実感できるのがこの仕組みです。


アイテムページは、1枚1枚を手で作るわけではありません。


CMSに登録したアイテムの件数だけ、詳細ページが自動的に生成されます。




具体的には、CMSに登録したアイテムが10件あれば、アイテムページは10ページ分が自動でできあがります。


あなたが作るのは「詳細ページの型(テンプレート)」1つだけ。


あとはCMSに入っているデータの中身が、その型に流し込まれて1件ずつのページになります。


ここがWix StudioのCMSの本質です。


従来のように「ページを複製して10ページ作る」やり方だと、後から1箇所を直したいときに10ページすべてを手で修正する羽目になります。


これは実務ではかなりの負担です。


CMSであれば、型を1箇所変えるだけで全ページに反映され、しかも中身の追加や修正はダッシュボードから行えます。


編集画面に入らず、Excel感覚でデータを足していける感覚に近いものです。


つまり、リストページとアイテムページは「見た目」だけの話ではなく、更新のしやすさに直結する仕組みでもあります。


制作実績やお知らせのように今後も件数が増えていくコンテンツほど、この自動生成の恩恵は大きくなります。





リストページとアイテムページの追加手順(動的ページの選び方)

Wix Studioで動的ページとしてリストページとアイテムページを追加する操作画面

概念がつかめたら、実際にリストページとアイテムページを追加してみましょう。


どちらも「動的ページ」という仕組みから追加します。


動的ページとは、CMSのデータと連動して中身が変わるページのことです。


手順は次のとおりです。


  1. あらかじめCMSでコレクション(データの入れ物)を用意しておきます。制作実績なら、たとえば「制作実績」というコレクションを作ります。

  2. 左側のメニューから「ページ」を開き、「新規ページを追加」を選びます。

  3. ページの種類として「動的ページ」を選択します。

  4. どのコレクションと連動させるかを聞かれるので、先ほど用意したコレクション(制作実績)を指定します。

  5. 「リストページ」を追加すると、一覧ページが自動生成されます。

  6. 同じ要領で、もう一度「動的ページ」から同じコレクションを指定し、今度は「アイテムページ」を追加します。

ポイントは、リストページもアイテムページも、同じ1つのコレクションに対して追加するという点です。


一覧(リスト)と詳細(アイテム)は、同じデータを別の見せ方で表示しているだけなので、つなぐ先のコレクションは共通になります。


ここを別々のコレクションにしてしまうと、一覧から詳細への流れがつながらなくなります。


なお、追加直後はレイアウトが自動で置かれた状態になっています。


実際の制作では、この自動生成部分を土台にしながら、一覧側はリピーターでカードを並べ、詳細側は必要な項目を配置していく流れになります。


詳しいレイアウトの組み方は別の機会にゆずりますが、まずは「動的ページから、同じコレクションに対してリストとアイテムを1つずつ追加する」という骨格を押さえておけば十分です。




概念でつまずく人へ:一度作って覚えるのが一番の近道

Wix Studioで実際にリストページとアイテムページを作りながら概念を理解する様子

ここまで読んでも「まだ完全にはピンとこない」という方もいらっしゃるはずです。


それはまったく問題ありません。


リストページとアイテムページの概念は、フリーランスの方や独学で学んでいる方がつまずきやすい、いわば最初の関門だからです。


言葉だけで100%理解しようとすると、かえって難しく感じます。


おすすめは、テスト用のコレクションを1つ作り、アイテムを2〜3件だけ入れて、実際にリストページとアイテムページを追加してみることです。


一覧に並んだカードをクリックすると、その1件の詳細ページに飛ぶ。


この動きを自分の手で一度体験すると、「なるほど、これが一覧と詳細か」と腹落ちします。


大切なのは、最初から本番のデータで完璧に作ろうとしないことです。


捨てても良いテスト用のコレクションで気軽に試すほうが、結果的に理解が早く進みます。


件数も多くなくてかまいません。


3件もあれば、一覧に3枚並び、詳細が3ページ自動生成される様子が確認できます。


概念は、手を動かした瞬間にいちばん深く定着します。


リストページとアイテムページも、一度作ってしまえば「なんだ、こういうことか」と思えるはずです。


もし自社サイトで制作実績やお知らせのページを本格的に運用したい、あるいは設計から相談したいという場合は、お気軽にご相談ください。





よくある質問(FAQ)

Q. リストページとアイテムページは、それぞれ何ページ作ればいいですか?


A. リストページは通常1ページ(一覧)です。


アイテムページも、あなたが作るのは型となる1ページだけです。


実際の詳細ページはCMSのアイテム件数に応じて自動生成されるため、アイテムが10件あれば10ページ分が自動でできあがります。


Q. リストページとアイテムページは、別々のコレクションにつなぐのですか?


A. いいえ、同じ1つのコレクションにつなぎます。


一覧と詳細は同じデータを別の見せ方で表示しているだけなので、つなぐ先は共通です。


別々にすると一覧から詳細への遷移がつながらなくなります。


Q. アイテムを追加したら、詳細ページは自分で作り直す必要がありますか?


A. 必要ありません。


CMSにアイテムを1件追加すれば、その分のアイテムページが自動的に増えます。


ダッシュボードからデータを足すだけで、編集画面に入る必要はありません。


Q. 通常版のWixでもリストページとアイテムページは作れますか?


A. 作れますが、実績や事例のように中身の長さがバラバラなカードを並べる場合、通常版のエディタでは高さが揃わずレイアウトが崩れやすい傾向があります。


Wix Studioなら各カードの中身が違っても余白などが均等に揃うため、可変コンテンツはWix Studioで作るのが安全です。


Q. リストページとアイテムページを使うと、更新はどれくらいラクになりますか?


A. ページを複製して量産する方式だと、1箇所の修正に全ページ分の手直しが必要です。


CMSであれば型を1箇所変えるだけで全ページに反映され、中身の追加や修正もダッシュボードから行えます。


件数が増えるコンテンツほど工数削減の効果が大きくなります。


Q. データが大量にある場合も、1件ずつ手入力するのですか?


A. いいえ。


ExcelやスプレッドシートからCSVで一括インポートできます。


過去には700件規模のデータを一括で取り込んだ実績もあり、大量データでも手打ちは不要です。


Q. どんなページがリストページ・アイテムページ向きですか?


A. 制作実績、お知らせ、社員インタビュー、導入事例のように「同じレイアウトで件数が増えていくページ」に最適です。


更新頻度が高く、レイアウトが共通しているコンテンツほど効果を発揮します。


【この記事の監修者】


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


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


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

お問い合わせ

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

資料DL

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

Group 163232.jpg

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

関連記事

Wixを使いたい

2025年11月3日

【2025年最新版】Wix退会方法と注意点まとめ|サイトの削除する際に行う手順を1つづつご紹介

Send
Wixを使いたい

2025年6月19日

電話で対応してくれるの?Wixサポートセンターへ電話で問い合わせしよう!

Send
Wixを使いたい

2025年6月9日

2026年最新!【プロが伝える】Wixの使い方と機能を解説!ここだけは抑えてほしい「初心者」にもおすすめ完全ガイド

Send
bottom of page