coastdigitalgroup/coastai-skills

価格表 UI システム

目的

Pricing Table UI System は、価格段階（ティア）の視覚的・構造的組織化のための方法論を提供します。これにより、ユーザーがプランを簡単に比較し、価値の違いを理解し、認知的な負荷を感じることなく適切なオプションを選択できるようになります。このシステムは、ティアの空間的配置、機能の階層構造、および購入判断を支援するインタラクティブなアフォーダンス（請求トグルなど）に焦点を当てています。

ユースケース

• SaaS アプリケーション向けサブスクリプションプラングリッドの設計
• 段階的サービス提供（例：代理店パッケージ）の構造化
• 物理製品バンドル向け比較マトリックスの作成
• 複数製品を展開する企業における価格レイアウトの標準化
• モバイルでもコンテキストを維持するレスポンシブ価格「カード」の実装

使用すべきでない場合

• 単一製品のEコマース: 競合ティアのない単一アイテムには product-page-optimization を使用します。
• エンタープライズ専用カスタム見積もり: すべての価格が「お問い合わせ」の場合は、リード獲得フォームの設計に集中します。
• 純粋なデータ比較: 10 個以上の技術仕様を比較する場合は、data-table-ui-system を使用します。
• 動的/オークション価格: 入札やリアルタイムの市場変動によって価格が決まる場合。

入力

1. プランティア: 各ティアの名前、価格、対象ユーザー。
2. 機能インベントリ: 優先度で分類された包括的な機能リスト。
3. 請求サイクル: 月額 vs 年額のオプションと、関連する割引。
4. 主要ターゲット: どのプランが「ゴルディロックス」または「ベストバリュー」のオプションか。
5. ブランドスタイルトークン: 親システムからのスペーシング、タイポグラフィ、カラースケール。

出力

1. 価格グリッドの構造: ティアカードの定義（ヘッダー、価格、機能、CTA）。
2. 請求トグル仕様: 異なる支払い条件を切り替えるためのデザイン。
3. 機能比較ロジック: 機能をティア間で表示、非表示、または要約するためのルール。
4. ティア強調戦略: 推奨プランを視覚的に強調する方法。
5. レスポンシブスタッキング計画: グリッドがモバイルビューポートに適応する方法。

ワークフロー

1. ティアの構造を定義する

visual-hierarchy-system を個々の価格カードに適用します。

• ヘッダー: プラン名と簡単なバリュープロポジション（例：「成長するチームに」）。
• 価格ブロック: 通貨、金額、および間隔（例：「/月」）。金額が最も目立つ要素になるようにします。
• 機能リスト: 最も重要な 5～7 個の機能。
• CTA: プランを選択するためのハイコントラストなボタン。

2. 「アンカー」ティアを設計する（強調）

主要プランを特定し、視覚的に目立たせます。

• 標高: 微妙なボックスシャドウやボーダーを使用して「浮き出させる」。
• 色: ヘッダーまたは CTA ボタンにブランドカラーを使用します。
• バッジ: 「最も人気」または「ベストバリュー」のリボン/バッジを追加します。
• スケール: 隣接するカードよりもカードの高さをわずかに大きくします。

3. 請求ロジックを確立する

請求サイクル（例：月額 vs 年額）を切り替えるメカニズムを設計します。

• トグル: 明確なスイッチまたはタブ付きインターフェースを使用します。
• 割引表示: 年額オプションの近くに割引額を明確に表示します（例：「20% 割引」）。
• コンテキストに応じた価格: トグルが切り替えられたときに、カード内の価格が即座に更新されるようにします。

4. 機能比較を管理する

「テキストの壁」を防ぐために機能を整理します。

• 主要機能: 独自の価値ドライバーを上部にリストします。
• 機能グループ化: リストが長い場合は、類似機能をグループ化します（例：「サポート」、「セキュリティ」）。
• チェックマーク vs テキスト: バイナリ機能（あり/なし）にはアイコンを、制限（例：「最大10ユーザー」）にはテキストを使用します。
• 「すべて表示」リンク: 複雑なティアの場合は、カードを短く保ち、下に完全な比較表へのリンクを提供します。

5. レスポンシブスタッキングを定義する

小さな画面でグリッドが折りたたまれる方法をマッピングします。

• 水平スクロール vs 垂直スタック: モバイルでは、読みやすさを確保するためにティアを垂直にスタックします。
• スティッキーヘッダー: 垂直スタックの場合、ユーザーが機能をスクロールしている間、プラン名と価格を表示し続けるスティッキーバーを検討します。
• プラン比較モード: モバイルでは、垂直スタックが長すぎる場合、ユーザーがティア間を「スワイプ」して水平方向に比較できるようにします。
• コンテナクエリ: 価格グリッドは多くの場合、異なる幅のコンテキスト（例：ホームページセクション vs 完全な価格ページ）に埋め込まれるため、ティアカード自体にはビューポートブレークポイントよりもコンテナクエリを優先します。

決定ルール

• 3つの力: 3つのティア（例：Basic、Pro、Enterprise）が、選択肢のパラリシスを軽減するのに最適な数です。
• 価格の卓越性: 価格は、「ベストバリュー」バッジに次いで2番目に目立つ要素である必要があります。
• 一貫したCTA: すべてのティアで、CTAを同じ垂直位置（通常はカードの下部に揃える）に配置する必要があります。
• 「隠れた条件なし」ルール: 価格の近くに常に請求頻度を表示します（例：「年間一括払いの場合 $29/月」）。
• バイナリの明確さ: 含まれる機能には明確でハイコントラストなチェックマークを使用し、含まれない機能にはグレーの「X」を使用するか、単に省略してネガティブな視覚的ノイズを避けます。

制約

• アクセシビリティ: トグルはキーボードでアクセス可能であり、aria-checked または aria-pressed で状態を公開する必要があります。価格テキストは WCAG AA コントラスト（4.5:1）を満たす必要があり、すべてのインタラクティブターゲット（トグル、CTA ボタン）は WCAG 2.2 の 24x24px 最小ターゲットサイズ（2.5.8）を満たす必要があります。
• レスポンシブ: 価格カードは固定幅にしてはならず、responsive-grid-system 内で流動的である必要があります。
• 通貨サポート: さまざまな通貨記号の長さ（例：「$10」 vs 「1,000 kr」）に対応するために設計し、論理 CSS プロパティ（margin-inline、padding-inline）を使用して、RTL ロケールでもレイアウトが正しく適応するようにします。

よくある失敗パターン

• 機能過多: 1つのカードに20以上の機能をリストアップし、スキャンできなくなる。
• 見えないトグル: 請求サイクル切り替えが小さすぎて、ユーザーが割引を受けられることに気づかない。
• 「浮遊するCTA」: ボタンがカード間で揃っておらず、グリッドが乱雑に見える。
• 曖昧な価格表示: チェックアウトまで価格がユーザーあたりなのか定額なのかが明確でない。
• ティアの差別化不足: プランが非常に似ていて、どれを選べばよいかユーザーがわからない。

検証基準

• ティア間に明確な視覚的階層が存在する（推奨ティアが強調されている）。
• 価格はティア名に次いで最も目立つ要素である。
• 請求トグルが明確に表示され、価格が即座に更新される。
• 機能はカードあたり上位5〜7個に制限されている。
• CTA がグリッド内のすべてのカードで水平方向に揃っている。
• モバイルビューではカードが垂直にスタックされるか、アクセス可能なスワイプパターンが提供されている。
• すべてのインタラクティブ要素（トグル、ボタン）がキーボードでアクセス可能である。
• 価格とバッジのコントラスト比が WCAG AA を満たしている。