SaaSの料金ページを Google Stitch で設計するとき、何を先に決めておくか

2026.04.14

料金ページは、ユーザーが「このサービスに課金するかどうか」を決める最重要ページだ。情報量が多く、比較が複雑で、「本当に自分に合ったプランはどれか」が分かりにくいと、ユーザーは離脱する。

Google Stitch でSaaSの料金ページを初めて設計したとき、プロンプトをどう書けばいいか迷った。「料金ページを作ってください」だけでは、何が出てくるか分からない。プランの数・機能比較の粒度・CTAの設計・トグル（月払い/年払い切り替え）の有無——これらを先に決めていないと、生成されたデザインが的外れになる。

この記事では、Stitch で料金ページを設計するときに「先に決めておくこと」と、それをもとに効果的なプロンプトを書くための考え方を整理する。

結論から言うと

一言で言えば、Google Stitch で質の高い料金ページを生成するには「プランの構成・各プランの推奨ターゲット・CTAのテキスト・比較したい機能の優先順位」を事前に整理してからプロンプトを書くことが最重要だ。この事前整理なしに生成されたデザインは、見た目は整っていてもビジネス的に機能しない料金ページになりやすい。

料金ページ設計の前に決めること

Stitch を開く前に、以下の5つを決めておくことを強く推奨する。これらが決まっていれば、Stitch へのプロンプトが明確になり、生成物の精度が上がる。

1. プランの数と名前

料金ページで最初に決めるのはプランの数だ。一般的には3プラン（無料/スタータ/プロ、または個人/チーム/エンタープライズなど）が最も多い構成で、「松竹梅」の論理でユーザーを中間プランに誘導しやすい。

プランの名前はユーザーのセルフセレクション（自分に合ったプランを自分で選ぶ）を助ける。「個人向け」「小規模チーム向け」「大企業向け」という機能的な名前より、「スタータ」「プロ」「エンタープライズ」という進捗を示す名前の方が、アップグレードを促しやすい傾向がある。

2. 「おすすめ」プランの指定

3プラン中どれをハイライトするかを決めておく。一般的に中間プランを「最も人気」「おすすめ」として視覚的に強調することで、そのプランへの誘導効果が生まれる。Stitch のプロンプトに「真ん中のプロプランを「最も人気」バッジ付きで強調表示」と指定することで、視覚的に目立つカードが生成される。

3. 月払い/年払いトグルの有無

年払いの割引を訴求したい場合、月払い/年払いを切り替えるトグルが効果的だ。「年払いで20%オフ」といった訴求を組み合わせることで、年払いへの誘導ができる。Stitch でこれを生成するには「ページ上部に月払い/年払い切り替えトグル（年払い選択時に「2ヶ月分無料」バッジを表示）」と指定する。

4. 機能比較の優先順位

料金カード内に掲載する機能リストは「多ければいい」わけではない。ユーザーが最も重視する機能5〜8つに絞り、それをシンプルに比較表示することが転換率を高める。Stitch のプロンプトに「各プランに含まれる機能リスト（チェックマーク付き）。項目は8つ以内に絞る」と指定する。

5. CTAのテキストと色

各プランのCTAボタンの文言は、プランごとに変えることが有効だ。無料プランは「無料で始める（クレジットカード不要）」、有料プランは「14日間無料で試す」、エンタープライズは「営業担当に相談する」——それぞれの意思決定のハードルが異なるため、CTAも変える。Stitch のプロンプトに各プランのCTA文言を明示することで、適切なボタンが生成される。

効果的なプロンプトの書き方

上記5つの事前決定をもとにしたプロンプト例を示す。

「SaaSプロジェクト管理ツールの料金ページ。3プラン構成：スタータ（無料・個人向け）・プロ（月2,980円・小規模チーム向け・「最も人気」バッジ）・エンタープライズ（要問い合わせ・大企業向け）。ページ上部に月払い/年払い切り替えトグル（年払い20%オフ）。各プランのカードに機能リスト（チェックマーク付き・最大7項目）。CTA：スタータ「無料で始める」・プロ「14日間無料で試す」・エンタープライズ「営業担当に相談する」。プロプランのカードを視覚的に強調（背景を少し暗く・影付き）。FAQセクションを下部に配置。」

このプロンプトで生成すると、ビジネス的な意図が反映された料金ページのたたき台が出てくる。実際に使ってみて分かったのは、料金ページは「何を載せるか」の情報設計が8割であり、Stitch はその情報を正しく視覚化してくれるツールだということだ。

FAQセクションの設計

料金ページの下部には、ユーザーが持つ疑問に答えるFAQセクションを設けることが効果的だ。「キャンセルはいつでもできますか？」「クレジットカードなしで試せますか？」「プランの変更はどうすればできますか？」——これらの疑問が解消されると、購入の障壁が下がる。

Stitch でFAQセクションを生成するときは「アコーディオン形式のFAQ（クリックで展開）を5問以上」と指定すると、コンパクトにまとまったFAQ UIが生成される。

よくある質問（FAQ）

Q1. 料金ページの転換率を上げるためにStitchで試せることは何ですか？

まず「おすすめプランの視覚的強調」を試してください。中間プランに「最も人気」バッジ・強調カラー・影を付けることで、そのプランへの誘導効果が生まれます。次に「CTAのテキスト最適化」——「今すぐ申し込む」より「14日間無料で試す」の方が転換率が高いケースが多いです。これらのバリアントをStitchで素早く複数生成して比較検討できます。

Q2. 料金ページにロゴウォール（導入企業のロゴ一覧）を追加すべきですか？

信頼感の向上に有効です。料金カードの上部または下部に「〇〇社・〇〇社・〇〇社など3,000社以上が利用中」というロゴウォールを置くことで、社会的証明（ソーシャルプルーフ）を示せます。Stitch のプロンプトに「料金セクションの上部に利用企業ロゴウォール（グレースケール・横並び6社）を追加」と指定して生成できます。

Q3. エンタープライズプランに「要問い合わせ」を置くのはなぜ有効ですか？

大企業向けの契約は通常、カスタム価格・ボリュームディスカウント・専用サポートなどの個別交渉が必要なため、価格を公開するより「営業担当に相談する」という動線の方が適切です。ただし問い合わせのハードルが高く感じられると離脱されるため、「24時間以内に回答します」「まず資料を送るだけでも歓迎です」という安心感のある文言をStitchで添えることをおすすめします。

Q4. 無料トライアルと無料プランはどう使い分けますか？

無料プランは制限付きで永続的に無料（Freemium）。無料トライアルは全機能を一定期間（14〜30日）試せる時間制限型。料金ページの設計でどちらを前面に出すかはビジネスモデルによって異なります。「今のユーザーに永続的な無料体験より、フル体験を短期間で提供したい」ならトライアルを強調する設計が向いています。Stitch でどちらの設計も生成して比較検討できます。

Q5. 料金ページのモバイル最適化で特に注意することは？

モバイルでは3プランのカードを横並びにすると小さくて読みにくくなります。「スマートフォン用：プランカードは縦スクロール（1カラム）で表示。おすすめプランを最初に表示」というプロンプトで、モバイル最適化された料金ページが生成されます。モバイルでは情報の優先順位が特に重要になるため、デスクトップ版と別々に設計して比較することをおすすめします。