「料金ページって、ただプランを並べればいいんでしょ？」
Google Stitch で料金プランページを設計し始めたとき、私はそう思っていた。フリー・スタンダード・プロの3プランを横に並べて、価格と機能を表示する——なんとなく「できそう」な気がしていた。
ところが実際に作り始めると、あらゆる判断に「心理学」が絡んできた。何プランを並べるか。どのプランを「おすすめ」として強調するか。価格は月額か年額か、どちらを先に見せるか。無料プランの制限はどう見せるか——。
料金プランページとは、ユーザーの意思決定を設計するUIだ。UIの中で最も「人の心理」を知っていないと作れないページの一つだということを、Stitchを通じて痛感した。
結論から言うと、料金プランページの設計において最も重要なのは「比較の軸」と「推薦の強度」のバランスだ。何を基準に比較させ、どのプランを選ばせたいかを明確にしてからUIを作らないと、「見た目はきれいだが誰も選べない料金ページ」が生まれる。Stitchはその判断を素早くビジュアルで試せる点で、非常に有効なツールだった。
料金プランページとは何か——意思決定を設計するUI
料金プランページ（Pricing Page）とは、サービスの料金・プラン・機能の違いを提示し、ユーザーに適切なプランを選ばせるためのUIです。SaaSサービス、サブスクリプションアプリ、会員制コンテンツなど、複数の料金プランを持つサービスのほぼ全てに存在する。
料金ページは単なる「情報提示のUI」ではない。ユーザーの意思決定プロセスに直接介入するUIだ。どのプランを見せ、どう比較させ、何を強調するかによって、ユーザーの選択は変わる。UIデザインの中で「コンバージョンへの影響」が最も直結するページの一つと言える。
Stitch で料金ページを設計した手順
Stitchで料金ページを設計する際、最初のプロンプトはこうだった。「SaaSツールの料金プランページ。フリー・スタンダード・プロの3プランを横並びで比較。スタンダードを推薦プランとして強調」。
生成された最初のUIは、機能的には正しかった。3プランが横に並び、価格と主要機能のリストが表示されていた。しかし見た瞬間に「選べない」と感じた。なぜか。全てのプランが同じ視覚的重みで表示されており、「どれを選べばいいか」という示唆がゼロだったからだ。
修正プロンプトで「スタンダードプランにバッジ（おすすめ）を付けて、視覚的に目立つように。カードの背景色か枠線で差別化」を追加した。2回目の生成で「推薦感」が出た。しかしここで次の問いが生まれた——「どのくらい強調するか」だ。
「推薦の強度」をどう設定するか
Stitchで料金ページを複数パターン生成してみて気づいたのは、推薦プランの強調強度には「効果的な範囲」があるということだ。
強調が弱すぎると：ユーザーがどれを選べばいいかわからず、迷って離脱する。
強調が強すぎると：「売りつけられている感」が生まれ、他のプランを検討する自由を奪われているように感じる。
Stitchで複数パターンを生成・比較した結果、「推薦プランのカードを他より少し大きく、背景色で差別化し、バッジを1つだけ付ける」という設計が最もバランスが良かった。「強調はしているが、押しつけ感はない」レベルの強度だ。この判断をビジュアルで確認できることが、Stitchを使う最大の利点だった。
プランの数と「選択のパラドックス」
「何プランを用意するか」という問いに、心理学の研究が示す答えがある。選択肢が増えすぎると、人は選べなくなる——「選択のパラドックス（Barry Schwartzが提唱した概念）」だ。
料金ページで最も多く採用されているのは「3プラン構成」だ。フリー・スタンダード・プロ、または ライト・スタンダード・エンタープライズのような構成。「3択」は人間が比較しやすい数であり、真ん中のプランを選ばせやすい「松竹梅効果」も働く。
Stitchで2プラン・3プラン・4プランのそれぞれの料金ページを生成して比較した。生成結果を見て気づいたのは、4プランになると「比較の認知コスト」が明らかに上がるということだ。情報量が増え、ユーザーの視線が「どこから読めばいいか」を探すようになる。料金ページに4つ以上のプランを並べる場合は、デフォルトで「おすすめプランのみ表示→全プランを見る」という折りたたみ構成にする方が良いことを、Stitchのビジュアル比較から確認できた。
年額・月額の表示順序が与える印象
「月額表示を先にするか、年額表示を先にするか」という問いも、料金ページ設計では重要な判断だ。
Stitchで両方のパターンを生成して比較した。月額が先に見える場合、ユーザーは「月1,000円か、安いな」と感じやすい。年額が先に見える場合、「年間12,000円か…」と判断が慎重になる。
多くのSaaSサービスが採用しているのは「月額表示をデフォルト、年額払いで〇%割引」というトグル形式だ。Stitchでこのトグルを含む料金ページを生成すると、「トグルの位置とラベル」がコンバージョンに影響することを視覚的に確認できた。「年額で支払う（2ヶ月分お得）」と書くか、「年額払いで20%OFF」と書くかで、クリック率に差が出る——UIがその誘導を設計している。
無料プランの制限をどう見せるか
「できないこと」を見せるか「できること」を見せるか
無料プランを含む料金ページで最も設計が難しいのは、「無料プランの制限をどう見せるか」だ。
選択肢は大きく2つある。「無料プランでできること」をポジティブに列挙する方法と、「無料プランでできないこと（制限）」を明示する方法だ。
Stitchで両方のパターンを生成して比較した。ポジティブ列挙は「無料でも十分」という印象を与えやすく、有料プランへのアップグレード意欲が低下するリスクがある。制限明示は「これは有料じゃないとできない」という認知が生まれるが、「制限だらけ」という印象を与えすぎると登録自体を躊躇させる。
Stitchでの比較検討を経て採用したのは「無料プランでできることをメインに列挙し、アップグレードが必要な機能にはロックアイコンを添える」という中間的な表現だった。ポジティブな印象を保ちながら「もっと使うなら有料」という示唆を自然に組み込める。
「よくある質問」セクションは料金ページに必要か
Stitchで料金ページを設計する際、FAQ（よくある質問）セクションを料金ページの下部に加えることを試みた。
料金ページのFAQに入れるべき質問は、「解約はいつでもできますか」「クレジットカードなしで始められますか」「チームでの使い方は」「企業・教育機関向けプランはありますか」など、支払いや継続への不安を解消するものが中心になる。
Stitchで料金ページ+FAQセクションを1画面で生成したとき、FAQの有無で「ページの信頼感」が大きく変わることを視覚的に確認できた。FAQがないと、価格と機能だけが並ぶ「営業感の強いページ」になりやすい。FAQを加えることで「ユーザーの疑問に答えようとしているサービス」という印象が生まれ、コンバージョンを阻む不安を事前に解消できる。
失敗したこと・気をつけるべきこと
1. 機能リストが長すぎて「比較できない」ページになった
最初のバージョンでは、各プランの機能リストに20項目以上を入れた。Stitchで生成するとそれっぽく見えたが、実際にユーザー目線で見ると「どれが重要な差分なのかわからない」状態だった。料金ページの機能リストは「比較に意味のある差分」だけに絞るべきで、全機能を羅列するのは逆効果だった。
2. CTAボタンのラベルで迷いすぎた
「今すぐ始める」「無料で試す」「プランを選択」「登録する」——ボタンラベルの選択で長時間迷った。Stitchで複数パターンを生成して比較したが、最終的には「そのボタンを押した後に何が起きるか」を明示するラベルが最も機能的だと判断した。「14日間無料で試す」「クレジットカード不要で始める」のように「その先」が見えるラベルが、クリック率を上げる。
3. モバイル表示を後から考えた
3プランの横並び比較表は、デスクトップでは自然に見えるが、モバイルでは横スクロールが発生するか、縦並びに変わる。Stitchでデスクトップ版のみを設計した後にモバイル表示を確認すると、縦並びになった際の「おすすめプランの強調表現」が弱くなる問題に気づいた。モバイル版は最初から別プロンプトで設計すべきだった。
4. エンタープライズプランの扱いを後回しにした
3プラン構成で設計を進めた後、「エンタープライズ向けはどうするか」という要求が後から出てきた。エンタープライズプランは「価格を表示せず、営業に問い合わせ」という形式が多いため、通常のプランカードと並べると視覚的な統一感が崩れやすい。最初から「エンタープライズは別扱いにするか、含めるか」を決めてから設計を始めるべきだった。
5. 「年額割引トグル」のデフォルト状態を間違えた
年額・月額を切り替えるトグルのデフォルトを「年額」に設定していた。意図は「年額の安さを先に見せる」だったが、ユーザーから「月額で払いたいのに最初から年額になっている」という違和感の声があった。サービスの性質にもよるが、多くの場合「月額をデフォルト、年額に切り替えるとお得感を見せる」という構成の方がユーザーの自律性を尊重できる。
よくある質問（FAQ）
Q1. 料金プランページを Stitch で設計するときの最初のプロンプトは？
「サービスの種類・プラン数・推薦プラン・主要な差分機能3つ」を含めると精度が上がります。例：「タスク管理SaaSの料金ページ。フリー・スタンダード・プロの3プラン横並び。スタンダードをおすすめプランとして強調。主な差分はメンバー数・ストレージ・APIアクセス」のように書くと、意図に近いUIが生成されやすいです。
Q2. プランは何個が最適ですか？
一般的には3プランが最も選びやすい構成です。2プランは「どちらかしか選べない」という制約感が生まれやすく、4プラン以上は比較の認知コストが上がります。3プランの場合、真ん中のプランを選ばせやすい「松竹梅効果」も働きます。4プラン以上が必要な場合は、おすすめプランをデフォルト表示し「他のプランも見る」という折りたたみ構成を検討してください。
Q3. 無料プランの制限はどう表示するのが良いですか？
「できること」をメインに表示し、有料プランが必要な機能にはロックアイコンや「Proプランで利用可能」のラベルを添える方法が、ポジティブな印象と有料プランへの誘導を両立しやすいです。制限だけをネガティブに並べると、無料プラン自体の魅力が失われ、登録の入口を塞ぐことになります。
Q4. 年額と月額、どちらをデフォルト表示にすべきですか？
ユーザーの自律性を考えると「月額デフォルト」が推奨です。「年額に切り替えると〇〇%OFF」というトグルを設けることで、コスト重視のユーザーに自然に年額の魅力を伝えられます。年額デフォルトは「最初から長期契約を求められている」という感覚を与えるリスクがあります。
Q5. おすすめプランの強調はどの程度にすればいいですか？
「見た瞬間にどれが推薦か分かる」が最低ライン、「他プランの選択を妨げない」が上限です。具体的には「カードを少し大きくする」「背景色か枠線で差別化する」「バッジ（おすすめ・人気など）を1つ付ける」の組み合わせが、強調と自然さのバランスを保ちやすいです。Stitchで複数の強調強度を生成して比較するのが最速の判断方法です。
Q6. 料金ページのCTAボタンは何と書くのが効果的ですか？
「その先に何が起きるか」が明示されているラベルが最も機能します。「始める」より「14日間無料で試す」、「登録する」より「クレジットカード不要で始める」のように、ユーザーの不安を先取りして解消する表現が有効です。各プランのCTAを全て同じラベルにせず、プランの性格に合わせて変えると（フリー「無料で始める」、プロ「プロを試す」）、選択の文脈が明確になります。
Q7. エンタープライズプランは同じページに含めるべきですか？
含める場合は「別扱い」にするのが一般的です。エンタープライズは価格を非公開にして「営業に問い合わせ」とすることが多く、通常のプランカードと同じ形式で並べると視覚的な統一感が崩れます。よくある表現は、3プランカードの下に「大規模チーム向け：詳細はお問い合わせ」という独立したセクションを置く方法です。
Q8. 料金ページに「よくある質問」セクションは必要ですか？
コンバージョンを上げたいなら追加することを推奨します。「解約はいつでもできますか」「支払い方法は？」「チームでの使い方は？」などの疑問は、料金ページを離れる理由になります。FAQでこれらを事前に解消することで、ユーザーが「確認のために別ページへ行く」機会を減らし、その場での意思決定を促せます。
まとめ
「料金ページって、ただプランを並べればいいんでしょ？」——そう思っていた自分が、Google Stitch で料金プランページを設計してみて気づいたのは、このページがサービスの中で最も「心理設計」が必要なUIだということだった。
何プランを並べるか、どれを推薦するか、制限をどう見せるか、価格表示の順番、CTAのラベル——全ての判断が「ユーザーの意思決定プロセス」に介入する。Stitchはその各判断をビジュアルで素早く試せる点で、料金ページ設計に特に有効なツールだった。
- 料金ページは「意思決定を設計するUI」であり、心理設計が全ての判断に絡む
- プランは3つが比較しやすく、真ん中を選ばせやすい松竹梅効果が働く
- 推薦プランの強調は「どれか分かる強さ」と「押しつけない程度」のバランスが重要
- 無料プランの制限は「できることメイン＋ロックアイコン」でポジティブに見せる
- CTAラベルは「その先に何が起きるか」を明示する表現が最も機能する
料金ページを作るたびに、「ユーザーに選ばせる体験を設計している」という感覚が強くなる。UIデザインの中で最も「意思決定への責任」を感じるページだ。Stitchを使いながら、この責任の重さと向き合い続けることが、料金ページを設計する醍醐味だと今は思っている。
