.png)
Wix Studioで料金表を作る方法とは？プラン変更に強い「テーブル＋CMS」で価格表を運用しやすく作る手順
- 7月16日
- 読了時間: 7分
Wix Studioで料金表を作るなら、ボックスの組み合わせで見た目を作り込むのではなく、テーブル要素とCMSコレクションを組み合わせて中身をデータで管理するのが正解です。
価格や特徴をCMS側にまとめておけば、料金改定やプラン追加のたびに数値を1か所直すだけで表全体へ反映され、運用がぐっと楽になります。
この記事では、その土台づくりから見やすく仕上げるコツまでを、実際の操作の流れに沿って解説していきます。
料金表をボックスで自作すると更新が大変になるお悩みの正体
料金表を毎回ボックスやテキストの手組みで作ってしまうと、価格を変えるたびに全部のセルを手作業で直す羽目になります。
「プランを1つ足したいだけなのに、レイアウトごと崩れて作り直し」という経験はありませんか？
原因は大きく2つに集約されます。
原因① 見た目とデータが一体化していて、数字を直すたびにデザインも触ることになる 原因② セルが独立したボックスの集まりなので、行や列を増やすと配置が総崩れしやすい
Wix Studioには専用の「テーブル（表）」要素が用意されているのに、機能が多いぶん見落とされがちで、つい慣れたボックスで自作してしまう方がとても多いのです。
このようなお悩みのときは、テーブル要素とCMSを組み合わせて「見た目」と「中身」を分けて持つ作り方が効果的です。
テーブル要素で料金表の土台をかんたんに作る
料金表の土台は、テーブル要素をドラッグ&ドロップで置くところから始まります。
専用要素なので、セルを1つずつ並べる必要がありません。
ページにテーブル要素をドラッグ&ドロップで配置する（初期状態の表が表示されます）
この時点ではまだ中身は仮の状態なので、次にデータの入れ物となるCMSに接続していく
ここで大事なのは、テーブルの中身を直接打ち込まない、という点です。
テーブルはあくまで「表示する枠」で、実際のプラン名や価格はこのあと作るCMSコレクションに持たせます。
この分業こそが、あとで料金表をラクに運用できる土台になります。
CMSコレクションにプラン名・価格・特徴フィールドを用意する
料金表の中身は、CMSコレクション（データセット）というデータの入れ物で管理します。
ここに項目を用意しておくと、テーブルはその項目を呼び出して表示するだけになります。
左側の「あなたのコレクション」の一番下にある「コレクションを作成」をクリックする
「ゼロから始める」を選ぶ
コレクション名をわかりやすく付ける（例：「料金プラン」）
初期で入っている不要なフィールドを削除し、料金表に必要なフィールドを整える
料金表なら、用意しておきたいフィールドは次の3つが基本です。
プラン名（例：ライト／スタンダード／プレミアム）
価格（例：月額の金額）
特徴（そのプランで使える内容や条件）
フィールドはテキストだけでなく画像も設定できるので、「対応マーク」や「ロゴ」を列に入れたい場合も同じコレクションで一元管理できます。
カラムを料金項目に割り当てて価格表を組み立てる
コレクションができたら、テーブルとつないで列を料金項目に割り当てます。
ここで表の骨格が一気に組み上がります。
テーブルを選択し、「データセットを選択」を開く
対象のデータセットがなければ「データセットを追加」から先ほどのコレクション（例：「料金プラン」）を選んで作成する
テーブルの「カラムを追加」を押し、1列目にプラン名フィールドを割り当てる
同じ手順で価格・特徴のフィールドも列として追加していく
コレクションに仮の文言や金額を入力すると、テーブルへ自動で反映される
列を増やしたいときは、もう一度「カラムを追加」を押してフィールドを選ぶだけです。
画像フィールドを割り当てれば、価格表の中にマークやアイコンを表示することもできます。
手打ちで整える作業がなくなるので、プラン数が多い比較表ほど恩恵が大きくなります。
価格改定のときCMSの数値を直すだけで料金表全体へ反映させる
この作り方の最大のメリットは、価格改定への強さです。
値上げやプラン内容の変更があっても、直すのはCMSコレクションの数値だけ。
テーブルのデザインには一切触れずに、表示がまるごと切り替わります。
たとえば次のような場面でも、作業は最小限で済みます。
月額を改定する→コレクションの価格フィールドを書き換えるだけ
新プランを追加する→コレクションに1行足すだけで表に列（項目）が増える
特徴の文言を見直す→該当セルのテキストを直すだけで全ページに反映
同じ料金表を複数ページに載せている場合でも、参照元のコレクションが1つなら更新は1回で完了します。
「あちこちの表を直し忘れて価格がバラバラ」という事故を防げるのが、テーブル＋CMSで運用する一番の価値ではないでしょうか？
料金表が見やすくなるデザイン設定のコツ
中身の仕組みが整ったら、最後は見やすさの調整です。
テーブルは右パネルのデザイン設定で、料金表らしい整った見た目に仕上げられます。
読みやすさを上げる設定のポイントは次の4つです。
奇数行の背景をグレーにして、行ごとの視線移動をしやすくする
最初・最後のカラムの色を変えて、プラン名や合計金額を目立たせる
列幅をパーセント（%）またはピクセル（px）で指定し「適用」で反映する
セル背景色・ボーダー色・ホバー時の色を整えて、指を置いた行を分かりやすくする
一点だけ注意したいのが、行の高さです。
テーブルは行ごとの範囲（高さ）を個別に変えられず、均一に保たれる仕様になっています。
列幅は自由に調整できますが、「1行目だけ狭める」といった調整はできない点を踏まえてデザインしましょう。
またモバイル表示は自動では最適化されないため、レイアウト変更から手動で整える必要があります。
スマホで料金表が横に溢れていないか、公開前に必ず確認しておくと安心です。
よくある質問（FAQ）
Q1. Wix Studioの料金表は、テーブルとリピーターのどちらで作るべきですか？
A. 価格や特徴をデータとして管理したい料金表・比較表なら、専用のテーブル要素がおすすめです。
CMSコレクションに接続して中身をデータで持てるため、更新のたびに手作業でセルを直す必要がなくなります。
自由なカードレイアウトを重視する場合はリピーターも選択肢になりますが、価格改定の多い料金表はテーブル＋CMSのほうが運用しやすくなります。
Q2. テーブルの列には文字しか入れられませんか？
A. いいえ、画像フィールドも割り当てられます。
プランごとの対応マークやアイコン、ロゴなどを列に表示でき、テキストと画像を同じ料金表の中で混在させられます。
Q3. 料金表の行の高さを、1行だけ変えることはできますか？
A. できません。
テーブルは行の範囲（高さ）が均一に固定される仕様で、特定の行だけ狭く・広くする調整には対応していません。
一方で列幅はパーセント（%）またはピクセル（px）で自由に指定できます。
Q4. 価格を変更したら、料金表を全部作り直す必要がありますか？
A. 必要ありません。
CMSコレクションの価格フィールドを書き換えるだけで、接続されているテーブルの表示が自動で更新されます。
同じコレクションを複数ページで使っていれば、1回の修正で全ページに反映されます。
Q5. スマホで料金表が崩れて見えるのはなぜですか？
A. モバイル表示は自動最適化されないためです。
パソコン向けのレイアウトのままだと横に溢れることがあるので、レイアウト変更からモバイル用に手動で調整してください。
公開前にスマホ幅での見え方を確認するのがおすすめです。
Q6. プランを1つ増やしたいときはどうすればいいですか？
A. CMSコレクションに新しい行を1つ追加するだけです。
デザインを組み直す必要はなく、テーブル側に項目が反映されます。
列（料金項目）を増やしたい場合は、テーブルの「カラムを追加」からフィールドを割り当てます。
料金表の設計や、CMSを使った運用しやすいサイトづくりでお悩みの際は、お気軽にご相談ください。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
