.png)
Wix Studioのテーブルが空のまま表示されない？CMSコレクション(データセット)に接続してカラムを紐づける方法
- 5 分前
- 読了時間: 8分
「料金表や比較表をきれいに作りたくてテーブル要素を置いたのに、枠だけ出て中身が真っ白のまま」という経験はありませんか？
Wix Studioのテーブルは、置いただけでは何も表示されません。
表の中身はテーブル自体が持っているのではなく、CMSコレクション（データセット）という「データの入れ物」から流し込む仕組みになっているからです。
ここを知らずにセルへ直接文字を打とうとして、手が止まってしまう方がとても多いです。
この記事では、テーブルとCMSの関係を整理したうえで、コレクションの作成からデータセットの接続、カラム（列）の紐づけ、そして「入力したのに表示されない」ときの確認ポイントまで、Wix Studio テーブル CMS 連携の一連の流れを順番に解説します。
テーブルに直接文字を打てず「どう中身を入れるのか」で手が止まってしまう
Wix Studioのテーブルは、中身を自分で持たない「表示専用の器」です。
だからセルを直接編集するのではなく、データの本体はCMSコレクション（データセット）側で管理し、テーブルはそこに接続して映すだけ、という役割分担になっています。
この関係が腹落ちすると、後の手順は一気にわかりやすくなります。
登場する3つの要素を整理します。
テーブル（表）要素｜ページ上に置く「表の見た目」。料金表や比較表を、リピーターやボックスで自作しなくても専用要素として配置できます。
CMSコレクション（データセット）｜表の中身を保管する「データの入れ物」。行がそのまま表の行になります。
フィールド｜コレクション内の項目（タイトル・テキスト・画像など）。これをテーブルの各カラムに割り当てます。
つまり、テーブルが空なのは故障ではなく「まだデータの入れ物とつないでいない」だけ、というのがこの記事の答えです。
テーブルは器、CMSコレクションは中身。この2つを接続し、カラムをフィールドに紐づけて初めて表が表示されます。
従来は料金表を作るのにボックスやリピーターを並べて手作業していましたが、テーブル要素＋CMS接続にすれば、あとから項目を足したり文言を直したりする運用がぐっと楽になります。
Wixは機能が非常に多く、この専用テーブル機能自体を見落として自作してしまうケースが多いので、まずは「表はCMSにつなぐもの」と覚えておくと安心です。
表の中身を入れる箱がない、まずは「ゼロから始める」でコレクションを用意する
表示させる中身を用意するには、最初にCMSコレクションを新しく作ります。
テーブルを先に置いていても構いませんが、接続先となるコレクションがなければ表は空のままなので、ここが実質のスタート地点です。
手順は次のとおりです。
CMSのパネルを開き、「あなたのコレクション」の一番下にある「コレクションを作成」をクリックします。
作成方法の選択肢が出るので、「ゼロから始める」を選びます。テンプレートに引っ張られず、料金表・比較表に必要な項目だけを自分で設計できます。
コレクション名を、後から見てわかりやすい名前にします（例：「表テスト」）。
名前は運用のなかで何度も目にする部分です。
「料金表」「比較表」など中身が想像できる名前にしておくと、コレクションが増えても迷いません。
初期フィールドがそのままだと表がごちゃつく、タイトルとテキストに整える
コレクションを作った直後は不要な初期フィールドが入っていることがあるので、まず使わない項目を削除し、必要なフィールドだけに整えます。
表の列は基本的にフィールドと1対1で対応するため、ここを整理しておくほど後のカラム割り当てが迷いません。
最初はシンプルに2つのフィールドから始めるのがおすすめです。
タイトル｜各行の見出しになる項目（プラン名・項目名など）。
テキスト｜その行の説明や値が入る項目（内容・価格の補足など）。
料金表なら「プラン名（タイトル）」と「料金・内容（テキスト）」の2列から作り始め、必要になったら後から画像などのフィールドを足していくと、構造が破綻しにくくなります。
まずは最小構成で「表示される状態」を作ることを優先しましょう。
コレクションはあるのに表につながらない、テーブルにデータセットを追加して接続する
コレクションを作っただけでは、テーブルはまだそのデータを見に行きません。
テーブルを選択してデータセットを接続することで、初めて「どの入れ物の中身を映すか」が決まります。
ここが空表示から抜け出す最大の分岐点です。
接続の流れは次のとおりです。
ページ上のテーブルを選択します。
「データセットを選択」を開きます。
使いたいデータセットが一覧にない場合は「データセットを追加」をクリックします。
先ほど作ったコレクション（例：「表テスト」）を選んで作成します。
データセットは、テーブルとコレクションをつなぐ「配管」のようなものだと考えるとイメージしやすいです。
この配管を通したうえで、次のカラム割り当てをして初めて中身が表に流れ込みます。
どのフィールドをどの列に出すかが決まっていない、「カラムを追加」で割り当てる
データセットを接続したら、「カラムを追加」でテーブルの各列にフィールドを割り当てます。
テーブル側でカラムを1つ追加し、そこへコレクションのどのフィールドを表示するかを指定する、という作業を列の数だけ繰り返します。
具体的な割り当ては次のように進めます。
テーブルで「カラムを追加」を押し、1列目にタイトルフィールドを割り当てます。
もう一度「カラムを追加」を押し、2列目にテキストフィールドを割り当てます。
画像も表示したい場合は、コレクションに画像フィールドを用意したうえで、再度カラムを追加して画像フィールドに接続します。
カラムにはテキストだけでなく画像も割り当てられるので、ロゴ付きの比較表やアイコン入りの料金表も作れます。
列幅はパーセント（%）またはピクセル（px）で指定して「適用」を押すと反映されます。
なお行の高さ・範囲は均一に固定される仕様で、1行目だけ狭めるといった個別調整はできない点だけ覚えておきましょう。
データを入れても表が変わらない、反映されないときの3つの確認ポイント
入力したのに表に出ないときは、たいてい「接続」か「割り当て」のどこかが抜けています。
CMSコレクション側に文言を入力すればテーブルには自動で反映される仕組みなので、映らない場合は入力そのものより配線を疑うのが近道です。
チェックすべきは大きく3つです。
データセットが接続されているか｜テーブルにデータセットが追加されていないと、中身は一切表示されません。「データセットを選択」で対象コレクションがひも付いているか確認します。
カラムにフィールドが割り当てられているか｜カラムはあってもフィールド未割り当てだと空欄になります。各列に正しいフィールドが指定されているか見直します。
コレクションに実データが入っているか｜行が空、または画像フィールドが未入力だと、その部分だけ表示されません。仮の文言や画像を入れて表示を確認します。
補足として、パソコンで正しく表示されていてもモバイルで崩れて見えることがあります。
モバイルは自動で最適化されないため、レイアウト変更から手動で調整が必要です。
「PCは出るのにスマホで崩れる」ときは、この手動調整を思い出してください。
FAQ｜Wix StudioのテーブルとCMS連携でよくある質問
Q1. テーブルのセルに直接文字を入力できないのはなぜですか？
A. テーブルは中身を持たない表示専用の器で、データはCMSコレクション（データセット）側で管理する仕組みだからです。
セルへ直接打つのではなく、コレクションに入力した内容がテーブルに映る形になります。
Q2. テーブルを置いたのに空のまま表示されないときは、どこを見ればいいですか？
A. まずテーブルにデータセットが接続されているかを確認してください。
接続済みなら、各カラムにフィールドが割り当てられているか、コレクションに実データが入っているか、の順にたどると原因が絞れます。
Q3. コレクションは「ゼロから始める」と他の選択肢のどちらで作るべきですか？
A. 料金表や比較表のように自分で項目を設計したい場合は「ゼロから始める」が扱いやすいです。
不要な初期フィールドを削り、タイトル・テキストなど必要なフィールドだけに整えてから使いましょう。
Q4. テーブルのカラムには画像も表示できますか？
A. できます。
コレクションに画像フィールドを用意し、「カラムを追加」でそのフィールドに接続すれば、テキストと同じように画像も表に表示されます。
ロゴ入りの比較表などに向いています。
Q5. 列の幅や行の高さは自由に変えられますか？
A. 列幅はパーセント（%）またはピクセル（px）で指定し「適用」で反映できます。
一方で行の高さ・範囲は均一に固定される仕様で、特定の行だけ狭める・広げるといった個別調整はできません。
Q6. パソコンでは表示されるのに、スマホで表が崩れるのはなぜですか？
A. Wix Studioのテーブルはモバイル表示が自動最適化されないためです。
レイアウト変更からモバイル用に手動で調整すると、スマホでも見やすい表に整えられます。
Q7. 料金表や比較表を、リピーターやボックスで自作するのと何が違いますか？
A. テーブル要素＋CMS接続にすると、項目の追加や文言の修正をコレクション側でまとめて行え、運用がぐっと楽になります。
自作のボックス並べは見た目は作れても、後の更新に手間がかかりがちです。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
