ux-pricing

料金ページスキル

このスキルの動作 (最初にお読みください)

これは生成型スキルであり、料金はすべてのベストプラクティスを適用するのではなくゲーティングする典型例です。このレッスンでは、料金ページを際立たせる多くの方法を紹介しています — バッジ、階層ごとのグラフィック、インタラクティブなスライダー、チャームプライシング、アンカリング、ソーシャルプルーフ。これらをすべて一度に適用すると、過剰にデザインされ、雑然として、心理的に圧倒的なページになり、コンバージョンと信頼を損ないます。したがって:

1. コンテキストを確立する (ステップ 0) — 料金の意思決定は、他のほとんどどの画面よりもコンテキストに左右されます。
2. 常に当てはまる核心を適用する — ほぼすべての料金ページで正しいパターンです。
3. コンテキスト依存の意思決定をメニューとして提示する — それぞれをトレードオフと推奨事項とともに示し、ユーザーに合った少数を選んでもらいます。多くを積み重ねることが失敗のパターンです。

その後、結果を監査スキルに渡して、雑然としたりダークパターンに陥っていないことを検証します。

スコープとコンポジション (docs/orchestration-policy.md §9 準拠): このスキルは料金ページそのものを所有し、下位スコープのスキルを再導出するのではなくコンポーズします。コア子スキル (ページの一部として構築): ux-cards (階層カードの仕組み — シャドウ、パディング、クリック可能なカード) と ux-buttons (CTA)。ダウンストリーム (提供するが自動構築しない): クリック後の ux-checkout-payment。継承し、再生成しない: 既存のデザインシステムの下では、そのトークンから色/タイポグラフィ/スペーシングを取得します — ゼロからデザインする場合にのみ、これらを設定してください。

---

ステップ 0 — デザインの前にコンテキストを確立する

料金の出力は、これらによって大きく変わります。不明な場合は尋ねてください。進める場合は前提を明示してください。

• 料金モデル — サブスクリプション、買い切り、使用量ベース、フリーミアム、ハイブリッドのどれですか？ 請求の切り替え、無料枠のトリガー、そしてそもそも「プラン」とは何かを左右します。
• ポジショニング — お買い得/バリュー vs. プレミアム/エンタープライズ？ チャームプライシング vs. ラウンドプライシング、そしてビジュアルをどれだけ豊かにすべきかを左右します。
• 市場と取引規模 — グローバル (PPP？) vs. 単一市場; 高額/複雑 (営業支援あり) vs. 低額セルフサーブ。プラン数、ライブサポート、「営業に相談」を左右します。
• ビジネス目標 — どのプランに最も多くのユーザーを誘導したいですか？ (倫理的に) 強調を左右します。

---

常に適用する核心 (ほぼすべての料金ページで正しい)

プラン表

• 階層ごとに主要な差別化機能のみを表示する — 各階層は、下の階層と何が違うかを先頭に持ってきます。長い機能マトリクスは削り、代わりに完全な比較へのリンクを置きます。30 行のチェックマークの壁は認知負荷を高め、意思決定を停滞させます。
• 違いを明確に伝える — 各階層の固有の価値を上部に記載します (例: 「1 プロジェクト / 3 プロジェクト / 無制限」)、詳細は下に。
• 意味があり価値を伝えるプラン名 — 「Standard」/「Advanced」ではなく「Basic Website」/「E-commerce Powerhouse」。名前は、どのプランがそのユーザー向けなのかを伝えるべきです。
• 読みやすく、雑然とさせない — シンプルなフォント、限定されたパレット、ゆとりのあるスペーシング。明瞭さを装飾のために犠牲にしてはいけません。

並び順と誠実さ

• 安い → 高い の順に、左から右へ。 ユーザーは最初に見た選択肢を選ぶ傾向があります。最も高額なプランではなく、そのユーザーに本当に合うプランへ向けて並べます。
• 高額でアンカリングするために順序を逆 (高い → 安い) にしないでください — それは信頼を損なうダークパターンです (倫理ガードレールを参照)。

CTA

• プランごとに主要 CTA を 1 つ、カード内に競合するアクションを置かないこと。
• 具体的で価値主導のラベル — 「Get Pro」「Choose Team」「Start Free Trial」 — 「Buy Now」や「Submit」は決して使わないこと。
• 見えて、明確にクリック可能、他の要素と重ならないこと。長いページでは下部にも繰り返します。

明瞭さと信頼のベースライン

• 料金の前に成果/ベネフィットを先頭に持ってくる — ユーザーは何を達成できるのか？
• コストの懸念に FAQ で対応する (請求サイクル、解約、返金、トライアル条件) — 不安と土壇場での離脱を減らします。
• 保証 / 無料トライアル / 「クレジットカード不要」を目立つように提示する、細かい注意書きではなく。

---

状況依存の判断項目（メニュー — 合うものを選び、すべてを積み重ねないこと）

それぞれについてトレードオフとステップ0に関連づけた推奨を提示し、ユーザーに選ばせます。これらすべてを一度に適用することは、過剰設計という失敗モードです。

判断項目	適用すべきとき	避ける／適応すべきとき	既定の推奨
価格モデル（サブスクリプション／買い切り／従量課金／フリーミアム／ハイブリッド）	価値の提供方法に合わせる（継続的 → サブスクリプション、消費型 → 従量課金）	買い切り価値の製品にサブスクリプションを無理強いする	習慣ではなく、価値提供のパターンから選ぶ
プラン数	2〜4が最適	それ以上 → 意思決定麻痺。製品がシンプルならそれ以下	まず約3から始めるが、既定値に頼らずプラン数をユーザーテストする
プランの強調／「一番人気」バッジ	明確な最適プランや中間プランへ誘導したいとき	何も強調しない（誘導なし）または 複数にバッジを付ける（シグナルなし）	1つだけ強調する — 最適プランまたは中間プラン。リサーチで検証する
請求切り替え（月払い／年払い）	実際に両方を提供しているとき	年払いオプションがない	提供するなら、年払いの節約額を明確にする（「20%お得」「2か月無料」）
端数価格かキリの良い価格か	価値志向・お買い得志向のポジショニングには端数価格（$9.99）、プレミアム・エンタープライズにはキリの良い価格（$100）	ブランド階層とミスマッチ	ステップ0のポジショニングに合わせる
価格アンカリング	価値を誠実に枠づけるため、先に上位プランを見せるとき	偽の「元値」取り消し線価格をでっち上げる	本物のアンカーだけを使う
フリーミアム／無料トライアル	価値を実証する無料枠と、価値実感の瞬間（ストレージ、席数、機能）にアップグレードのトリガーを置く	恣意的な期間制限、有料への導線がない無料枠	制限を成功の瞬間に結びつける。無料には必ず有料オプションを組み合わせる
バンドル／パッケージ化	提供物の組み合わせが本当の価値を加え、選択を簡素化するとき	弱い項目のコストを覆い隠すためのバンドル	隠すためではなく、簡素化のためにバンドルする
国際価格／PPP価格	購買力が大きく異なるグローバルなオーディエンス	単一市場向け製品（不要な複雑さを加える）	PPPに合わせて調整し、グローバルなら現地通貨で表示する
プランごとのグラフィック／イラスト	ビジュアルがプランの性格を一目で本当に明確にするとき	比較の妨げになる装飾	控えめに使う。明確さを最優先
インタラクティブ要素（席数スライダー、使用量見積もり）	ユーザーが席数や使用量で自己選択し、それが意思決定を助けるとき	シンプルな3プランページに「エンゲージメント」のために追加する	ユーザーの自己選別を助けるときにのみ
社会的証明（価格付近の testimonial／ロゴ）	スペースがあり、証明が実際の懸念に対処するとき	比較を圧迫する。FAQの下に埋もれさせる	表の近くに焦点を絞った具体的な testimonial 1つが、多数の一般論より勝る
ライブチャット／電話サポート	購入者に疑問がある複雑または高額な製品	シンプルで低額なセルフサーブ（インラインのヘルプリンクを使う）	サポートチャネルを商談の複雑さに合わせる

この表はチェックリストではなくメニューです。これらを一度に多くオンにするほど、このゲートが防ごうとしている、圧倒的で操作的だと感じられるページに近づきます。ステップ0の状況が正当化する少数だけを選んでください。

---

倫理ガードレール（価格ページが越えてはならない一線）

価格はダークパターンが集中する場所です。決して行わないこと:

• 逆順プラン（高額 → 安価）で高値にアンカリングする。
• 偽のアンカー — 実際には存在しなかった「元値」の取り消し線価格。
• 隠れた料金 — 席数ごとの課金、超過料金、必須のアドオンをチェックアウト時に初めて明かす。
• 緊急性の演出 — 偽のカウントダウンや、無制限のデジタル製品における「残り2点」。
• ダウングレード／解約時のコンファームシェイミング（「いいえ、お金を節約したくありません」） — 中立な拒否表現を使う。

ここでの短期的なコンバージョン向上は、長期的な信頼を犠牲にします。ux-dark-patterns-audit スキルがこれを体系的にチェックします。

---

結果を検証する（オーケストレーション）

引き継ぎでは、各レンズをインストール可能なスキルの name で指定します。呼び出すのはそのスキルがインストールされている場合のみです。インストールされていない場合、このスキル自体のコアにすでにこれらのルールが含まれているため、ブロックせずにそのまま進めます。

生成または改訂した後は、完了と宣言するのではなく、結果を監査レンズに引き継いでください。これらは候補のレンズです。姿勢は docs/orchestration-policy.md で設定するか、ページ全体を ux-design-review に通してください。ここでは、**dark-patterns、heuristics、microcopy が Tier A（自動実行）、aesthetics が Tier B（提案され、既存のデザインシステムの下では抑制される）**です。ユーザーが特定の目的でこのスキルを呼び出した場合は、その範囲を尊重してください — それ以外を持ち込まないでください。

• ux-dark-patterns-audit (Tier A) — 上記の倫理ガードレール（逆順序、偽のアンカー、隠れた料金、緊急性の演出、コンファームシェイミング）を検証します。
• ux-heuristics-audit (Tier A) — ユーザビリティの失敗モード：一貫性、認識性（明確なティアの違い）、可視性（CTA の状態）。
• ux-microcopy-audit (Tier A) — プラン名、バリューライン、CTA の文言が意思決定を左右します。曖昧なラベル（「Standard」/「Advanced」）はそれを停滞させます。
• ux-aesthetics-audit (Tier B — 提案、デザインシステムの下では抑制) — このスキルが最も必要とする過剰デザインのチェック：ゲートされたレバー（バッジ、ティアごとのグラフィック、スライダー、過剰な社会的証明）が clutter や競合するフォーカルポイントを生んでいないか、そして推奨プランが依然として明確なフォーカルポイントであるか。

監査が clutter を指摘した場合は、主タスクに立ち返って解決してください：ユーザーがプランを比較し選択できるように支援することです。明確さが戻るまで、オプションのレバーを引き戻してください。

---

よくある do/don't パターン

❌ しない	✅ する
すべてのティアにすべての機能を列挙する	主要な差別化要因を示し、完全な比較へのリンクを張る
プランを「Basic / Standard / Premium」と名付ける	誰向けかに基づいて名付ける：「Solo / Team / Agency」
高値から安値へ並べて高値にアンカリングする	安値から高値へ、最適なプランに向けて並べる
「Buy Now」/「Subscribe」/ すべてのプランに同じ CTA	プランごとに独自の、価値重視の CTA（「Get Team」）
複数のプランに「Most Popular」バッジを付ける	ステップ 0 で選んだ 1 つだけを強調する
バッジ + グラフィック + スライダー + 過剰な社会的証明を積み重ねる	コンテキストが正当化する少数のレバーを選ぶ
プレミアム/エンタープライズブランドにチャーム価格を付ける	価格スタイルをポジショニングに合わせる
年間節約額や実際のコストを隠す	節約額を目立つように示す。隠れた料金なし
逆順序 / 偽の「元」価格 / 偽の緊急性	倫理ガードレールの範囲内にとどまる
確認せずに出荷する	ヒューリスティクス監査に引き継ぐ

---

ソースの教訓（Uxcel）

• 価格ページ設計のベストプラクティス
• 価格設定とマネタイズ戦略
• アクションベースのメッセージを書く