coastdigitalgroup/coastai-skills

レビュー＆評価UIシステム

目的

レビュー＆評価UIシステムは、ユーザー生成フィードバックのビジュアルおよび構造的フレームワークを設計するための方法論を提供します。これにより、定量データ（星評価）と定性データ（テキストレビュー）が、スキャンしやすく、信頼性が高く、アクセシブルなインターフェースに整理されます。このシステムは、最も関連性の高いフィードバックを表面化し、より広範なサイトデザインとの視覚的一貫性を維持することで、ユーザーが情報に基づいた意思決定を行うのを支援します。

ユースケース

• Eコマース商品ページ: 製品の満足度と詳細なカスタマーエクスペリエンスを表示します。
• サービス/SaaSマーケットプレイス: プロバイダー、ツール、またはアプリケーションを評価します。
• コンテンツプラットフォーム: ユーザーが記事、コース、メディアを評価できるようにします。
• フィードバック収集フォーム: 評価システムの入力側を設計します。
• レビューサマリー: 「一目でわかる」評価分布（例：5つ星の棒グラフ）を作成します。

使用すべきでないケース

• 内部品質監査: フィードバックが非公開で、パブリックUIなしで内部処理のみに使用される場合。
• 二択フィードバック: 目標が単純な「参考になった/ならなかった」や「賛成/反対」である場合、interactive-state-systemからよりシンプルなインタラクションパターンを使用します。
• 低ボリュームコンテンツ: サイトが通常アイテムあたり0～2件のレビューしか持たない場合、複雑な分布サマリーは「空っぽ」または「やる気を削ぐ」ように見える可能性があります。
• 厳密に定量的なデータ: パフォーマンス指標やシステムヘルス（例：「99.9%アップタイム」）の場合、シンプルなbadge-and-tag-systemまたはデータ可視化を使用します。

入力

1. フィードバックスキーマ: キャプチャ/表示するデータ（評価1～5、タイトル、本文、日付、ユーザーID、確認済みステータス、写真）。
2. 集計メタデータ: 総レビュー数と平均スコア。
3. 分布データ: 各星レベルのレビュー数（5、4、3、2、1）。
4. インタラクション要件: ソート（新しい順、評価高い順）、フィルタリング（確認済みのみ、写真付きのみ）、「参考になった」投票。

出力

1. 評価コンポーネント仕様: 「星の行」のビジュアルデザイン（空、半分、満杯の状態を含む）。
2. レビューサマリーの構造: 集計スコアと分布棒グラフのレイアウト。
3. 個別レビューブループリント: 個々のレビューエントリの構造的レイアウト（ユーザー、評価、コンテンツ、アクション）。
4. 入力インタラクション仕様: 評価選択とレビュー送信フォームのデザイン。

ワークフロー

1. 集計サマリーの設計（スナップショット）

個別レビューを表示する前に、精神的なショートカットを提供します：

• 平均スコア: 大きく目立つ数字（例：「4.8」）。
• 星の可視化: 平均を反映した5つの星の行。
• 総数: 「1,240件のレビューに基づく」。
• 分布バー: 5、4、3、2、1つ星レビューの割合を示す垂直または水平のリスト。理想的にはインタラクティブ（バーをクリックするとリストがフィルタリングされる）。

2. 個別レビューの構造を確立する

visual-hierarchy-systemをレビューカードに適用します：

• ヘッダー: ユーザー名（オプションで匿名化）と「確認済み購入」バッジ。
• 評価と日付: 星評価と投稿日時。
• タイトルと本文: コアな感情を示す太字のタイトルと、それに続く説明テキスト。
• メディア（オプション）: ユーザーがアップロードした写真のサムネイル。
• フッター/アクション: 「参考になりましたか？（はい/いいえ）」と「報告」ボタン。

3. インタラクションと発見パターンを選択する

ユーザーが自分に最も関連性の高いフィードバックを見つけられるようにします：

• ソート: デフォルトは「最も関連性が高い」（新しさと参考になったの混合）。「新しい順」または「評価高い/低い順」に切り替え可能。
• フィルタリング: 「画像付き」「確認済みのみ」、または特定の星数のクイックトグルを提供します。

4. フィードバック入力の設計（フォーム）

収集プロセスがスムーズであることを確認します：

• 初期トリガー: ホバーで状態が変わる大きくインタラクティブな星を使用します。:has()セレクター（例：label:has(~ input:checked)）でスタイル設定された星の入力のラジオグループは、余分なJavaScriptなしでホバー/選択された塗りつぶし状態を提供します。
• 段階的開示: 星評価が選択された後にのみテキスト入力エリアを表示します。
• コンテキストに応じたガイダンス: 「何が好きでしたか、または嫌いでしたか？」などのプレースホルダーを使用して、役立つフィードバックを促します。

5. コンテンツのバリエーションを計画する

• 空の状態: 「まだレビューはありません—最初にレビューを投稿しましょう」という状態を設計します。
• 長いレビュー: 非常に長い定性的フィードバックには「続きを読む」のトランケーションを実装します。
• レスポンシブスタッキング: モバイルでは、分布サマリーを折りたたみ可能なセクションに移動するか、レビューリストの上にスタックします。

決定ルール

• 星の「細目テスト」: 星は小さくても区別できる必要があります。背景に対して高コントラストな色（例：琥珀色/ゴールド）を使用します。
• 確認済みの優先: 「確認済み購入」バッジは、即座に信頼を構築するために視覚的に明確に区別できる（多くの場合緑色またはチェックアイコン付き）必要があります。
• 平均の精度: 数値平均は小数点第1位に丸めます（例：4.7）が、星の行は半星を正しく視覚的に表現するようにします。
• 参考になったロジック: 「参考になった」投票を使用して最高のレビューを表面化しますが、UIが二次的なアクションで乱雑になりすぎないようにします。
• 画像のアスペクト比: ユーザーがアップロードしたレビュー画像には正方形（1:1）のサムネイルを使用して、レビューリストを整理整頓します。

制約事項

• アクセシビリティ: 星評価はaria-labelを使用する必要があります（例：「5つ星中4つ星」）。インタラクティブな星の入力はキーボードでアクセス可能であり、role="radiogroup"などを使用し、各星は少なくとも24x24px（WCAG 2.2、2.5.8）である必要があります—小さな星のターゲットが誤ってタップされやすいため、44x44pxが推奨されます。
• コントラスト: 空の星（背景）はページ背景に対して3:1のコントラストが必要です。塗りつぶされた星は背景に対して4.5:1のコントラスト、または強い境界線が必要です。
• レスポンシブ性: レビューリストは流動的である必要があります。モバイルで複数列のレビューカードは避け、すべてのメタデータを垂直にスタックします。

一般的な失敗パターン

• 「バイナリースター」の間違い: 半星の状態なしに「オン」または「オフ」のみの星を使用し、4.3のような平均を誤って表現します。
• 隠れた分布: 平均スコアを表示するが内訳を表示せず、ユーザーがネガティブとポジティブのボリュームを確認できなくします。
• 確認の欠如: 確認済み購入者と一般ユーザーを区別できず、システム全体の信頼性を低下させます。
• 「レビューの壁」: ソートやフィルタリングを提供せず、ユーザーに何百もの無関係なエントリをスクロールさせることを強制します。
• アクセス不可な入力: アイコンのみの星評価入力で、キーボードのみのユーザーが到達または選択できません。

検証基準

• 平均評価と分布サマリーが存在し、スキャン可能である。
• 個別レビューに明確な階層がある（ユーザー -> 評価 -> コンテンツ）。
• 「確認済み購入」ステータスが視覚的に示されている。
• 高ボリュームシナリオのためにソートおよびフィルタリングコントロールが存在する。
• アクセシビリティ：星評価に説明的なARIAラベルがある。
• インタラクティブな評価入力がキーボードでナビゲート可能で、フォーカス状態がある。
• レイアウトがレスポンシブであり、小さい画面では要素が論理的にスタックされる。