価格ページ
ルール
- 最大3段階: Free/Starter、Pro、Enterprise — 推奨する段階には「最も人気」バッジを付ける
- 月間/年間トグル: 両方の価格を表示し、年間払いの節約額（「20%割引」）を表示 — デフォルトは年間
- 価格表示: 価格は大きなフォント、期間（「/月」）は小さなフォント — 年間価格は月額換算で表示
- 機能比較表: 含まれる機能にはチェックマーク、除外される機能にはダッシュ — カテゴリ別にグループ化
- 段階ごとのCTA: 「今すぐ始める」（Free）、「無料トライアルを開始」（Pro）、「営業に問い合わせ」（Enterprise） — カードごとに1つのCTA
- 機能ゲート: 設定オブジェクトでプランごとの機能を定義 — 実行時に
user.plan と照合
- 使用量ベースの課金: 使用量段階に応じた計算機/スライダーを表示 — ユーザーの調整に合わせて価格を動的に更新
- 社会的証明: 価格近くに顧客数やロゴを表示 — 「5,000以上のチームに信頼されています」
- よくある質問セクション: 価格ページ下部に配置 — 解約、返金、アップグレードに関する一般的な懸念に対応
機能ゲートのパターン
const PLAN_FEATURES = {
free: { maxProjects: 3, analytics: false, api: false },
pro: { maxProjects: 50, analytics: true, api: true },
enterprise: { maxProjects: Infinity, analytics: true, api: true },
} as const;
function hasFeature(plan: string, feature: string): boolean {
return !!PLAN_FEATURES[plan]?.[feature];
}
価格カードのレイアウト
[バッジ: 「最も人気」]
プラン名
$XX/月（年間請求）
$YY/月（月間請求）
- 機能1 ✓
- 機能2 ✓
- 機能3 ✗
[CTAボタン]
避けるべきこと
- 4段階以上のプラン — 意思決定麻痺を引き起こす
- 全プランで価格を「営業に問い合わせ」の背後に隠す — 開発者は離脱する
- 年間割引がない — 年間プランは解約率を下げ、キャッシュフローを改善する
- 機能比較の明確なグループ化がない — 10機能以上で判読不能になる