.png)
Wix Studioで表を作る方法とは？リピーターで自作せずテーブル要素＋CMSで作る基本手順をご紹介
- 6 時間前
- 読了時間: 8分
料金表やプラン比較表、スペック一覧をサイトに載せたいのに、どう組めばきれいに収まるのか分からず手が止まっていませんか？ボックスを並べて無理やり表の形にしてみたものの、項目をひとつ足すだけでレイアウトが崩れて最初からやり直し、という経験はありませんか？
Wix Studioには、こうした表を専用でつくるための「テーブル（表）」要素が用意されています。
この記事では、テーブル要素とは何かから、配置の手順、CMS（データセット）への接続、そしてつまずきやすいポイントまでを、はじめて触る方にも分かるように順を追って解説します。
読み終えるころには、料金表や比較表を「崩れず・更新しやすい」形で自分で作れるようになっているはずです。
そもそもWix Studioの「テーブル（表）」要素とは？
Wix Studioで表を作るなら、ボックスやリピーターで自作せず、専用の「テーブル要素」を配置してCMS（データセット）に接続するのが基本です。
これがこの記事の答えであり、料金表・比較表・プラン表をきれいに、そして後から楽に更新できる形で作るための土台になります。
Wix Studioの表作りの正解は「テーブル要素＋CMS」。 見た目はテーブル要素が担い、中身はCMS（データセット）が管理する。この役割分担が崩れない表・直しやすい表をつくります。
テーブル要素は、行と列で構成された枠を1つのパーツとしてページに置ける機能です。
これまで多くの方がボックスやリピーターを組み合わせて手作業でつくっていた表を、専用の要素としてまとめて扱えるようになります。
大きな特徴は次の2つです。
表の骨組み（行・列・セル）を1つの要素として配置できる
表の中身をCMSコレクション（データセット）から流し込める
つまり「見た目の枠」と「中身のデータ」を分けて管理できるのがテーブル要素の本質です。
テキストだけでなく画像も列に表示できるため、写真付きの比較表やロゴ入りのプラン表にも対応できます。
なぜ表はリピーターやボックスで自作してはいけないのか
データはちゃんとあるのに、いざ表にすると崩れる・更新が重い。
この悩みの原因は、大きく2つに集約されます。
原因①｜見た目を手作業で組むため、項目をひとつ増減しただけで全体のレイアウトが崩れる 原因②｜中身とデザインが一体化していて、文言を直すたびに要素を直接いじる必要があり、運用が重くなる
ボックスやリピーターで表を「再現」しようとすると、セルに見える1マスずつを手で配置・調整することになります。
行や列を後から足すたびに位置合わせが必要になり、少し増えただけでガタつく、というのはよくあるつまずきです。
このようなお悩みのときは、テーブル要素＋CMSでの管理が効果的です。
骨組みと中身を分けておけば、中身はCMS側で書き換えるだけで表に反映され、レイアウトはテーブル要素が保ってくれます。
両者の違いを整理すると次のとおりです。
観点 | ボックス／リピーターで自作 | テーブル要素＋CMS |
項目を増減したとき | 位置がずれて崩れやすい | 崩れにくく整ったまま |
中身の更新 | 要素を直接編集する | CMSでまとめて管理 |
画像の表示 | 1つずつ手で配置 | カラムに画像フィールドを割当 |
デザインの統一 | 手作業でばらつきやすい | 右パネルで一括設定 |
Wix Studioは機能が非常に多く、テーブル要素の存在自体を見落としてしまう方も少なくありません。
だからこそ「表はテーブル要素で作る」と最初に知っておくことが、遠回りを防ぐいちばんの近道です。
テーブル要素をドラッグ＆ドロップで配置する表の作り方の第一歩
表づくりの第一歩は、テーブル要素をページにドラッグ＆ドロップで置くだけで完了します。
難しい設定は不要で、まずは初期状態の表を画面に出すところから始めます。
エディタ左側の要素を追加するパネルを開く
一覧から「テーブル（表）」の要素を探す
表を置きたい位置へドラッグ＆ドロップする
配置すると、あらかじめ行と列が入った初期状態の表が表示されます。
この時点ではまだ中身はサンプルの状態ですが、枠組みができたことで、ここから中身をCMSでつないでいく準備が整います。
この最初の一手が「ボックスを並べて表に見せる」作業を丸ごと省略してくれます。
まずは深く考えず、表を1つ置いてみるところから進めましょう。
表の中身を管理するCMS接続の全体像と作り方
テーブル要素は、CMSコレクション（データセット）に接続してはじめて「運用しやすい表」になります。
中身をCMSで持たせることで、表の文言や画像をデータ側から差し替えられるようになるからです。
全体の流れは次のとおりです。
「あなたのコレクション」の一番下にある「コレクションを作成」をクリックし、「ゼロから始める」を選ぶ
コレクション名を分かりやすく付ける（例：「表テスト」）
不要な初期フィールドを削除し、必要なフィールド（例：タイトル／テキスト）を残して整える
テーブルを選択し、「データセットを選択」を押す。対象がなければ「データセットを追加」から先ほどのコレクションを選ぶ
テーブルの「カラムを追加」を押し、フィールド（例：タイトル）を割り当てて1列目を接続する
同じ手順で2列目（例：テキストフィールド）を追加して接続する
CMSコレクションに仮の文言・データを入力すると、テーブルへ自動で反映される
列を増やすときは再び「カラムを追加」を押し、画像フィールドに接続する（画像もそのまま表示できる）
ポイントは、テーブルの「カラム（列）」とコレクションの「フィールド（項目）」を1対1でひも付けていく感覚です。
列を1つ足したいときは、カラムを追加してどのフィールドを表示するかを指定するだけ。
テキストの列も画像の列も、同じ考え方でつないでいけます。
中身をCMSで管理できると、料金改定や項目追加のたびにデザインを触る必要がなくなり、データを直すだけで表が最新になります。
ここまで作れれば、更新に強い表の完成です。
つまずきやすい点と、運用しやすい表にする作り方のコツ
最後に押さえておきたいのが、テーブル要素ならではの制限と、見やすく仕上げるためのコツです。
仕様を知らずに進めると「なぜ思いどおりにならないのか」でつまずきやすいので、先回りして共有します。
とくに注意したいのは次の3点です。
行の高さは均一に固定される。1行目だけ範囲を狭める、といった個別調整はできません
列幅はパーセント（％）またはピクセル（px）で指定し、「適用」を押すと反映される
モバイル表示は自動で最適化されないため、レイアウト変更から手動で整える必要がある
行の高さを個別に変えられない点は、デザインを詰めるときにつまずきやすいところです。
表全体で高さがそろう前提で、載せる情報量を調整しておくと仕上がりが安定します。
見やすさを高めるデザイン設定は、要素を選んだときの右パネルから細かく調整できます。
左サイドバーの下の辺りに設定項目がまとまっており、たとえば次のような調整が可能です。
セルの背景色や、最初・最後のカラムだけ色を変える
奇数行だけをグレーにして、行を目で追いやすくする
ボーダー（枠線）の色や、マウスを乗せたときのホバー色を変える
スマートフォンでの見え方は、必ず自分の目で確認しておきましょう。
PCではきれいに見えても、モバイルでは横に収まりきらないことがあります。
レイアウト変更から手動で整えることで、どの画面でも読みやすい表に仕上がります。
「表を置く」「CMSでつなぐ」「デザインと制限を押さえる」。
この3ステップを踏めば、料金表も比較表も、崩れず・直しやすい形で運用できるようになります。
もし自社サイトでどう組むか迷ったら、私たちがご一緒に設計します。
よくある質問（FAQ）
Q1. Wix Studioの表は追加の費用なしで作れますか？
A. テーブル要素はWix Studioの標準機能として用意されており、要素を配置してCMSに接続する基本的な作り方であれば、専用のアプリを別途購入しなくても表を作成できます。
まずは1つ配置して試すのがおすすめです。
Q2. 列の幅は自由に変えられますか？
A. はい。
列幅はパーセント（％）またはピクセル（px）で数値指定でき、「適用」を押すと反映されます。
全体を100％で分ける考え方でも、特定の列だけpxで固定する考え方でも調整できます。
Q3. 行ごとに高さを変えることはできますか？
A. できません。
テーブル要素では行の高さ（範囲）は均一に固定される仕様で、1行目だけ狭くするといった個別調整は非対応です。
情報量を行ごとにそろえておくと、見た目が安定します。
Q4. 表の中に画像を入れられますか？
A. はい。
カラム（列）に画像フィールドを割り当てれば、テキストと同じ要領で画像を表示できます。
ロゴ付きの比較表や写真入りのプラン表など、テキストだけでない表現が可能です。
Q5. スマートフォン表示は自動で最適化されますか？
A. 自動では最適化されません。
モバイルでは横幅に収まりきらないことがあるため、レイアウト変更から手動で調整する必要があります。
公開前にスマホでの見え方を必ず確認してください。
Q6. CMSに接続しないと表は作れませんか？
A. テーブル要素の中身を運用しやすく管理するには、CMSコレクション（データセット）への接続がおすすめです。
データ側で文言や画像を差し替えられるため、更新のたびにデザインを触らずに済みます。
Q7. 奇数行だけ色を変えて見やすくできますか？
A. はい。
要素を選んだときの右側のデザイン設定から、奇数行の背景色をグレーにするなどの調整ができます。
ほかにもセル背景色、先頭・末尾カラムの色、ボーダー色、ホバー時の色などを細かく設定できます。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
