SWELLで料金表の作り方完全ガイド！業種別サンプル7パターン

SWELLで料金表を作りたいのに、いざ画面を開くと「どんな表にすれば分かりやすいんだろう」と手が止まってしまうことはありませんか。

この記事では、SWELLでの具体的な作り方、業種別のサンプルまでまとめてお伝えします。

結論から言うと、料金表は最初に設計をしっかり決めてから、SWELLのテーブルやブロックパターンを使って形にしていくと、初心者でも十分に成約につながる表を作れます。

SWELLで料金表を作る前に押さえたいポイント

SWELLで料金表を作りたい人のよくある悩み

まずは、SWELLで料金表を作ろうとしている人が、どんなところでつまずきやすいのかを整理してみます。自分がどのパターンに近いか、軽くチェックしてみてください。

悩みのタイプ	状態・よくあるパターン
文章ベタ打ち型	料金説明を本文の中だけでしていて、どこにいくらと書いてあるのか一目で分からない
情報詰め込み型	プランやメニューを全部1つの表に入れようとして、見た瞬間に読む気がなくなる
デザイン迷子型	色や装飾をたくさん使いすぎて、何が重要なのか分かりにくくなっている
スマホ崩れ型	パソコンでは良く見えるのに、スマホだと横スクロールだらけで読みにくい

こういった悩みは、実は「SWELLの機能不足」ではなく、「料金表の設計」や「情報の整理」でつまずいていることがほとんどです。このあと、設計→作り方→デザインの順で見ていくので、一緒に整えていきましょう。

料金表は「値段を並べる表」ではない

料金表というと、つい「価格の一覧」と思いがちですが、実際はもっと役割があります。

• どのプラン・メニューを選べばいいかを、一目で判断しやすくする
• 自分に合うプランがあると感じてもらい、不安を減らす
• 特に選んでほしいプランに視線が集まるようにする

この3つを意識して料金表を作ると、ただの「値段リスト」から「申し込みを後押ししてくれる表」に変わっていきます。

SWELLで料金表を作るメリット

WordPressには標準のテーブルブロックがありますが、SWELLを使うと料金表をいろいろな形で作りやすくなります。

• 標準のテーブルブロックでも、装飾やスタイルをきれいに整えやすい
• 比較表や料金プラン表に使いやすいレイアウトのブロックパターンが用意されている
• 追加のテーブル専用プラグインがなくても、スマホで読みやすい表が作りやすい

つまり、道具としてのSWELLは十分なので、「料金表の設計」と「どういうブロックを選ぶか」を押さえておけば、あとは組み合わせでかなりきれいに仕上がります。

SWELLの料金表ブロックとテーブル機能の基本

SWELLのテーブルブロックの種類と特徴

料金表の作り方を考えるとき、まずは「どのブロックを使って表現するか」を決めるところから始まります。

ブロック名	向いている用途	特徴
テーブル（表）ブロック	シンプルな料金表、メニュー表	行と列を自由に増減でき、スタイルや罫線をさっと変更できる
カラム・リッチカラム	プランごとの料金ボックス	カード型のプランを横並びにしやすく、見出しやボタンを入れやすい
料金・比較向けのブロックパターン	料金プラン比較表、機能比較表	あらかじめ整ったレイアウトが用意されていて、文字や色を変えるだけで使える

最初はテーブルブロックだけでも十分ですが、「カード型の料金プランを作りたい」「ボタンも一緒に見せたい」といった場合は、カラムや料金・比較向けのブロックパターンを組み合わせたほうが見やすくなります。

料金表に向いているブロックパターン

SWELLには、あらかじめデザインされたブロックパターンがいくつか用意されています。正式名称はテーマのバージョンなどによって変わることがありますが、料金表でよく使うのは次のようなタイプです。

イメージ	主な用途	使いどころ
複数プランの比較レイアウト	サービスのプラン比較	いわゆる松竹梅の3プランを横並びで見せたいとき
料金とボタンがセットのレイアウト	単発メニューの料金表	各メニューの下に申込ボタンをまとめて置きたいとき
○×などで機能を比較する表	プランごとの機能・特典比較	どのプランで何ができるかを直感的に示したいとき

ブロックパターンは、あくまで「たたき台」です。列数を変えたり、色味を自分のブランドカラーに寄せたりしながら、自分のサービス用に調整して使っていきます。

失敗しない料金表の設計と作り方の流れ

料金表の目的とゴールを決める

最初に決めておきたいのは、「この料金表を見た人にどうしてほしいか」です。たとえば、次のようなゴールが考えられます。

• 中くらいの価格帯の「スタンダード」プランを一番選んでほしい
• 回数券や継続プランなど、長く続けてもらえるプランに誘導したい
• 料金をしっかり明示して、不安を減らしながら問い合わせにつなげたい

ゴールが決まると、「どのプランを一番目立たせるか」「どこにボタンを置くか」「どこまで表に書いて、どこから下に補足を書くか」といった判断がはっきりします。ここを曖昧にしたまま料金表を作ると、どうしても「全部同じように見える表」になりがちです。

列と行をどう分けるかを先に決める

料金表の作り方で多くの人が迷うのが、「縦と横に何を書けば分かりやすいか」です。基本の考え方を表にまとめておきます。

パターン	列（横方向）に入れるもの	行（縦方向）に入れるもの
プラン比較型	ライト・スタンダード・プレミアムなどのプラン名	料金、期間、含まれる内容、サポート有無など
メニュー一覧型	必要に応じて、カテゴリごとにテーブルを分ける	メニュー名、料金、所要時間、対象など
制作物別型	LP、サイト制作、バナー制作などの制作物	料金、納期、修正回数、オプションの有無など

この表を見ながら、自分のサービスに一番近いパターンを決めておくと、SWELLのテーブルブロックを挿入するときに「列が足りなかった」「行が多すぎた」といった迷いが少なくなります。

料金表に入れるべき項目チェックリスト

料金表には、最低限、次のような項目が入っていると親切です。

これらを全部1つの表に押し込めるのではなく、「比較に絶対必要なもの」だけを表に入れて、細かい条件や注意事項は表の下に箇条書きで補足するイメージです。そのほうが見た目もすっきりしますし、読む側のストレスも減ります。

実践編1：基本の料金表の作り方（サービスプラン）

3プランの料金表をSWELLで作る手順

ここでは、ライト・スタンダード・プレミアムの3プランがあると仮定して、料金表を作る流れをざっくり書いてみます。

• 投稿や固定ページの編集画面を開く
• 「＋」ボタンからテーブル（表）ブロックを追加する
• 列を「3」に、行を「必要な項目数＋1（ヘッダー行）」に設定する
• 1行目（ヘッダー行）にプラン名、2行目以降に料金や内容などの項目を入れる
• ヘッダー行にチェックを入れ、見出し部分が分かりやすいように装飾する
• 各プランの列ごとに、文字の強弱や背景色で差をつける

イメージとしては、次のような表になります。

プラン名	ライト	スタンダード	プレミアム
料金（税込）	〇〇円	〇〇円	〇〇円
内容	必要最低限の内容	多くの人に合いやすい標準プラン	サポートが充実した安心プラン
おすすめ度	△	◎	○

このとき、スタンダードの列だけ背景色を薄く変えたり、帯に「おすすめ」と入れたりすると、自然とそこに目が行くようになります。細かい装飾は控えめでも、視線の流れを意識するだけで伝わり方が変わります。

おすすめプランを目立たせるデザインのコツ

料金表の作り方で、成約率に直結しやすいのが「どのプランを一番目立たせるか」です。私がよくやっている、シンプルで使いやすい工夫をいくつか挙げます。

あまり派手な色や大げさな言葉を使うと、押し売りのような印象になってしまうので、あくまで「少しだけ目立たせる」がポイントです。見比べたときに、自然と真ん中のプランに視線が行く状態を目指します。

実践編2：業種別料金表の作り方サンプル

制作フリーランス向け料金表の例

Web制作やデザインなどのフリーランスの場合は、「制作物ごと」に料金を分けたほうが、依頼する側もイメージしやすくなります。たとえば、次のような表です。

制作物	料金の目安	含まれる内容	納期の目安
LP制作	〇〇円〜	ライティング＋デザイン＋コーディング	約〇週間
バナー制作	〇〇円〜	静止バナー1点	約〇日
サイト一式	〇〇円〜	トップページ＋下層〇ページ	約〇週間〜

この料金表の作り方は、テーブルブロックに「行＝制作物」「列＝項目」という形で素直に入れていくだけです。そのうえで、表の下に「※要件によって料金は変動します」「詳細はお問い合わせください」といった一文を入れておくと、柔軟に対応できる印象も伝えられます。

サロン・教室向け料金表の例

サロンや教室の料金表では、「料金」と「時間」がセットになっていると、予約のイメージが湧きやすくなります。次のような構成が使いやすいです。

メニュー	料金（税込）	所要時間	対象・一言説明
体験レッスン	〇〇円	約〇分	初めての方向けのお試しレッスン
通常レッスン	〇〇円	約〇分	習慣化したい方向けの継続コース
集中コース	〇〇円	約〇分	短期間でしっかり取り組みたい方向け

この料金表は、テーブルブロックでも作れますし、料金とボタンがセットになったブロックパターンをベースにアレンジしてもOKです。体験メニューの行だけ背景色を変えたり、「まずはここから」と一言添えたりすると、初めての人が選びやすくなります。

飲食店・メニュー風の料金表の作り方

飲食店のようにメニュー数が多い場合は、テーブルブロックでシンプルに「メニュー名＋価格」を並べる形が扱いやすいです。基本形の例を挙げてみます。

メニュー	料金（税込）	説明
日替わりランチ	〇〇円	メイン＋小鉢＋ドリンク付き
パスタセット	〇〇円	サラダ＋ドリンク付き
デザートセット	〇〇円	ケーキ＋ドリンク

この料金表の作り方自体はシンプルですが、「ランチ」「デザート」などのカテゴリごとに見出しを分け、テーブルもカテゴリ単位で複数用意したほうが読みやすくなります。メニュー数が多いときは、1つの表に詰め込みすぎないことがポイントです。

デザインとスマホ表示で読みやすい料金表の作り方

色・余白・装飾の基本ルール

料金表のデザインは、やろうと思えばいくらでも派手にできますが、多くの場合はシンプルなほうが伝わります。私が意識している、基本的なルールは次の通りです。

料金表の作り方として、「装飾で目立たせる」よりも、「情報を厳選して整理する」ほうが、結果的に読みやすくなります。色や太字は、本当に強調したいところだけに使うイメージです。

スマホで崩れない料金表チェックリスト

料金表は、パソコンよりもスマホで見られる割合が高いことが多いです。公開前に、スマホ表示で次のポイントをチェックしてみてください。

• 列が多すぎて、横スクロールが長くなりすぎていないか
• 1つのセルに文章を詰め込みすぎて、文字が小さくなっていないか
• 重要な項目が、スマホ表示だと下のほうに追いやられていないか
• ボタンやリンクが、指で押しやすいサイズ・余白になっているか

どうしても列数が多くなってしまう場合は、テーブルだけで見せようとせず、カラムやボックスを使ってプランを縦に積んでいくレイアウトに切り替えたほうが、スマホでは読みやすくなることが多いです。

よくある質問｜SWELLの料金表の作り方Q&A

Q1. SWELLで料金表を作るとき、テーブルとカラムのどちらを使うのが良いですか？

A1. メニュー名と料金を一覧で見せたいだけなら、テーブルブロックが分かりやすくて扱いやすいです。一方、料金に加えてメリットや画像、ボタンもまとめて見せたいときは、カラムや料金向けのブロックパターンを使って、プランごとにボックスを作るほうがきれいにまとまります。どちらもSWELLでの料金表の作り方としてよく使われるので、「比較を重視するのか」「カード型で見せたいのか」で選ぶと迷いにくくなります。

Q2. 料金表に入れたい情報が多すぎて、SWELLの表がゴチャゴチャしてしまいます。どう作り直せばよいですか？

A2. ありがちなのが、料金表に注意事項や細かい条件まで全部入れようとしてしまうパターンです。料金表は「比較に必要な項目だけ」に絞り、それ以外の細かい条件は表の下に箇条書きでまとめるのがおすすめです。さらに、基本プランの料金表と、オプションの料金表を分けるだけでも、見た目はかなりすっきりします。SWELLのテーブルブロックは複数置けるので、「表を分ける」という発想を持っておくと楽になります。

Q3. 料金変更のたびにSWELLの表を直すのが大変です。少しでも楽に運用する方法はありますか？

A3. 料金を見直すことが多い場合は、まず「自分のサイトでよく使う料金表の型」を1つ決めておくと良いです。その表を再利用ブロックとして保存しておけば、新しいページではそのブロックを呼び出し、料金部分だけを書き換えれば済みます。また、料金だけをまとめたページを1つ作り、各ページの料金表からは「詳しい料金はこちら」とリンクで飛ばす形にしておくと、修正漏れも防ぎやすくなります。

まとめ｜SWELLで伝わる料金表の作り方と最初の一歩

この記事のポイントをまとめます

今日からできる最初の一歩としては、「自分のサービスに合う料金表の型を1つ決める」ことをおすすめします。紙やメモアプリで構わないので、「列に何を書くか」「行に何を書くか」をざっくり書き出してみてください。そのメモを見ながらSWELLのテーブルブロックを作っていけば、頭の中が整理された状態で作業できるので、途中で迷子になりにくくなります。自分のサービスに合った料金表を少しずつ整えていきましょう。