3プラン比較型 料金表

通称：プライシングテーブルThree-tier pricing table

見本の中のメニューやボタンは押して動きを試せます（リンク先へは移動しません）。

料金表でもっとも見かける形で、3つのプランを左右に並べ、値段と内容の差を見比べて選んでもらいます。真ん中をおすすめにして、迷った人の行き先を決めておきます。

自分のサイトの中身で、この形を作らせる指示文です。最初の「サイトの情報」を書き換えてから渡します。今あるページを直させるときは、その HTML を貼ります。

この形で作る 
# サイトの情報（ここを書き換える）
- どんなサイトか：〈例：工務店のサイト、税理士事務所のサイト、ネットショップ〉
- 入れたい文言・項目：〈見出し・ボタンの文言・項目の数など。決まっていなければ空けてよい〉
- 今あるページ：〈今のページを直すなら、その HTML を貼る。新しく作るなら空ける〉

# 部品の呼び名
一般に「プライシングテーブル」（Three-tier pricing table）と呼ばれる部品です。

# 作ってほしいもの
3プラン比較型の料金表（Three-tier pricing table）。3つのプランを横に並べ、価格と中身の差を比べて選んでもらう。

# 並べるもの（各プランの上から順に）
- プラン名
- 向いている人を1行
- 月額（税込）。数字を大きく、「円／月（税込）」を小さく添える
- 申し込みボタン
- 中身の一覧を4行。どのプランも同じ項目を同じ順で並べる（保存容量／利用できる人数／サポート／外部サービスとの連携）

# 守ってほしいこと
- 真ん中のプランをおすすめにする：背景の色を変え、上に「いちばん選ばれています」の札を出し、ボタンだけを塗りにする
- 3つのプランで、プラン名・価格・ボタン・一覧の縦の位置をそろえる（CSS Grid の subgrid を使う）
- 各プランは article、中身の一覧は ul にする。プラン名は見出し（h3）
- ボタンは高さ 48px 以上
- 角丸のカードと細い枠で囲まない。プランの区切りは背景の色と、上辺の太い線（4px）で付ける

# SP（画面幅 767px 以下）
- 1列に縦に並べ、おすすめのプランをいちばん上に出す
- 縦の位置そろえは外し、プランごとに上から読めるようにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 色は CSS 変数（--accent など）にまとめ、あとから変えやすくする
- 文言は「サイトの情報」に合わせて考える。決まっていないところは〈 〉で囲んだ仮の文言にする
- 「並べるもの」に書いた項目の名前（エリア・間取りなど）は一例。サイトに合うものに置き換える
- 今あるページを渡したときは、そのページの色・文字・余白に合わせ、変えた場所を最後に箇条書きで知らせる

料金表を18の型に分け、AIへの指示文・動く見本・コードを載せています。

料金表はどの型を選ぶか

料金表の型は、先に「価格がどう決まるか」を見て選びます。価格が1つなのか、見積もりで決まるのか、使った量や人数で変わるのか、いくつかの条件の組み合わせなのか。そのうえで、プランが複数あるなら「どう選んでもらうか」の型を重ね、年払い・初期費用・割引・無料期間のような支払いの条件があれば、その型を足します。

こんなとき 向いている型
プランが3つ前後で、違いを人数や容量などの数で言える3プラン比較型
機能が多く、プランごとの違いが細かい機能比較表型
2つの条件（広さ×コースなど）で料金が決まる早見表型
年齢や立場で料金が変わる区分別料金型
料金は一本だけ単一料金型
見積もりで決まるが、「〇〇円から」の目安は出せる下限価格型
始めるときに、月額とは別の費用がかかる初期費用＋月額型
案件ごとに内容がまったく違い、価格を出せない見積もり案内型
使った量で請求が決まる従量課金型
使う人の数で料金が決まる人数課金型
商品を決まった間隔で届ける定期購入型
基本料金に、必要な機能を足していくオプション追加型
月払いと年払いを選べる月額／年額切り替え型
期間を決めて割り引くキャンペーン価格型
無料期間のあと、自動で有料に切り替わる無料トライアル型
続けて使うサービスで、やめるときの条件を先に伝えたい返金・解約条件併記型
どのプランを選べばいいか迷う人が多いプラン診断型
選ぶ項目を掛け合わせて金額が出るシミュレーション型

「期間と割引」の4つの型（月額／年額切り替え型から返金・解約条件併記型まで）は、3プラン比較型や単一料金型などと組み合わせて使います。プラン診断型とシミュレーション型は、ほかの型で示した料金から選ぶのを手伝う型です。

どの型でも守ること

  1. 消費者向けの価格は税込で書く。消費税法で、消費者に向けて表示する価格は税込の総額で示すことになっています。税抜きを並べるときも、税込の価格がはっきりわかるようにします。
  2. 単位と期間を、数字のすぐそばに置く。「／月」「1回」「1人あたり」「最初の3か月」のような単位が離れていると、同じ数字でも意味が変わって読まれます。
  3. 別にかかる費用と条件を、料金と同じ画面に書く。送料・交通費・最低契約期間・解約の期限などを、ページの下の小さな注意書きに回しません。
  4. 表は table で作り、SP で横にスクロールさせない。列を切り替えて見せるか、行ごとのまとまりに組み替えます。
  5. 打ち消し価格や「いちばん人気」は、根拠のあるものだけにする。販売の実績がない元値と並べると、景品表示法が禁じる不当な二重価格表示にあたりかねません。

よくある質問 (FAQ)

消費者に向けた料金は、税込で書きます。消費税法には総額表示の義務があり、一般の消費者に前もって示す価格は、消費税を含めた金額で書く必要があります。会社どうしの取引だけを相手にする場合は税抜きで書くこともありますが、そのときは「税抜き」と必ず添えます。

真ん中に置くのは、そのプランがいちばん多くの人に合うときです。両隣と比べやすいので選ばれやすくなりますが、実際に合う人が少ないプランをおすすめにすると、申し込んだあとの解約や問い合わせが増えます。おすすめは1つだけにし、誰に向いているかを1行で添えます。

作ったほうがよいです。金額を出せなくても、決まり方と流れは出せます。「〇〇円から」の目安が出せるなら下限価格型、出せないなら見積もり案内型で、価格が変わる条件・見積もりが届くまでの日数・依頼に必要な情報を示します。何もないと、問い合わせる前に離れていく人が増えます。

横にスクロールさせず、列を切り替えるか、行ごとのまとまりに組み替えます。プランを比べる表なら、表の上にプランの切り替えボタンを置いて1列ずつ見せます。区分や間取りの表なら、行をまとまりにして、各値の前に列の名前を小さく出します。どちらも 390px 前後の幅で確かめます。