料金ページの設計

料金ページは「買うか買わないか」を決める最重要ページ。

料金ページの目的

1. 明確さ: 何がいくらかすぐわかる
2. 比較: プラン間の違いが明確
3. 安心: 隠れた費用がない
4. 行動: 次のステップが明確

基本レイアウト

3カラム構成（推奨）

┌─────────┬─────────┬─────────┐
│ ベーシック │ スタンダード │   プロ   │
│   980円  │  1,980円  │  4,980円 │
│         │  人気No.1  │         │
├─────────┼─────────┼─────────┤
│ 機能A ✓ │ 機能A ✓  │ 機能A ✓ │
│ 機能B ✗ │ 機能B ✓  │ 機能B ✓ │
│ 機能C ✗ │ 機能C ✗  │ 機能C ✓ │
├─────────┼─────────┼─────────┤
│ [始める] │ [始める]  │ [始める] │
└─────────┴─────────┴─────────┘

真ん中を目立たせる

<div className="pricing-card popular">
  <span className="badge">人気No.1</span>
  {/* カードを少し大きく、影を強く */}
</div>

価格表示のコツ

月額 vs 年額

⭕ 月額で表示し、年払いで割引

月額: 1,980円/月
年額: 19,800円/年（2ヶ月無料）

年額を月換算で表示

⭕「月あたり1,650円」（年19,800円）

月額払いより安く見える

切り替えスイッチ

<div className="billing-toggle">
  <span>月払い</span>
  <Switch checked={isYearly} onChange={setIsYearly} />
  <span>年払い（17%お得）</span>
</div>

機能比較表

わかりやすい比較

| 機能           | Free | Pro  | Team |
|---------------|------|------|------|
| 基本機能       | ✓    | ✓    | ✓    |
| エクスポート   | 月5回 | 無制限| 無制限|
| API連携       | ✗    | ✓    | ✓    |
| チームメンバー | 1人   | 1人  | 無制限|
| 優先サポート   | ✗    | ✓    | ✓    |

アイコンの使い方

✓ (緑) = 含まれる
✗ (グレー) = 含まれない
数字 = 制限あり

心理テクニック

1. アンカリング

最初に高いプランを見せる
→ 中間プランが「お得」に見える

❌ 安い順: 980円 → 1,980円 → 4,980円
⭕ 高い順: 4,980円 → 1,980円 → 980円
　 または中央を大きく表示

2. デコイ効果

A: 980円（機能限定）
B: 2,980円（全機能）←これを売りたい
C: 2,480円（Bとほぼ同じ）←デコイ

CがあるとBが選ばれやすい

3. 社会的証明

「10,000社以上が導入」
「スタンダードプランが人気No.1」
「○○業界でシェアNo.1」

4. 損失回避

❌「500円お得」
⭕「年払いにしないと6,000円損」

必須要素

ヘッダー

<section>
  <h1>シンプルな料金体系</h1>
  <p>14日間の無料トライアル。クレジットカード不要。</p>
</section>

FAQ

<section>
  <h2>よくある質問</h2>
  <details>
    <summary>いつでも解約できますか？</summary>
    <p>はい、いつでも解約可能です...</p>
  </details>
</section>

信頼要素

<section>
  <div>🔒 SSLで保護されています</div>
  <div>💳 Stripeで安全に決済</div>
  <div>📧 30日間返金保証</div>
</section>

CTAボタン

効果的なラベル

⭕「無料で始める」
⭕「14日間無料トライアル」
⭕「今すぐ始める」

❌「購入する」（ハードル高い）
❌「申し込む」（曖昧）

ボタンの階層

// 売りたいプラン
<button className="btn-primary">無料で始める</button>

// それ以外
<button className="btn-secondary">始める</button>

エンタープライズプラン

別枠で表示

<section className="enterprise">
  <h2>大規模導入をお考えですか？</h2>
  <p>専任担当によるサポート、カスタマイズ対応</p>
  <button>お問い合わせ</button>
</section>

含める要素

□ カスタム価格（要問い合わせ）
□ 専任サポート
□ SLA保証
□ セキュリティ対応
□ 導入支援

モバイル対応

スマホでの表示

3カラム → 1カラム（スワイプ or タブ切替）

・タブ切替: ベーシック | スタンダード | プロ
・スワイプ: カード形式で横スクロール

タッチしやすいボタン

.pricing-cta {
  min-height: 48px;
  width: 100%;
  font-size: 16px;
}

A/Bテストすべき要素

1. プランの数: 2つ vs 3つ vs 4つ
2. 価格表示: 月額 vs 年額換算
3. CTAラベル: 「始める」vs「無料トライアル」
4. おすすめ表示: バッジ vs 枠 vs 色
5. 機能の並び順: 重要順 vs カテゴリ順

チェックリスト

• 3秒で価格がわかる
• プラン間の違いが明確
• おすすめプランが目立つ
• 無料トライアルを強調
• FAQで不安を解消
• 信頼要素を表示
• CTAが明確
• モバイルで見やすい

次のステップ

• 価格設定戦略
• サブスク価格の決め方