coastdigitalgroup/coastai-skills

お客様の声と引用システム

目的

お客様の声と引用システムは、定性的な顧客の声とクライアントの引用のための体系的なデザインと空間の枠組みを提供します。ソーシャルプルーフを後付けとして扱うのではなく、このシステムは、完全なアクセシビリティを確保しながら、視覚的な信頼性と真正性を最大化する構造的、タイポグラフィ、および引用のルールを確立します。これは、生のユーザー生成レビュー（review-and-rating-system で処理）と、厳選されたマーケティングの証明ポイントとの間のギャップを埋めます。

ユースケース

• ランディングページ: プライマリおよびセカンダリのCTAをサポートするために、目立つ顧客の成功事例の引用を配置します。
• サービス/製品詳細ページ: 一般的な摩擦点や反論に直接対処する、文脈に沿った顧客の引用を統合します。
• ケーススタディハブ＆サクセスストーリー: 顧客のストーリーの主な成果やROIを要約するヒーローのプルクォートをデザインします。
• アバウトページとチームページ: 創業者、主要パートナー、または従業員からの引用を表示します。
• エンタープライズ営業資料: 影響力の大きいクライアント担当者（VP、ディレクター、Cスイート）からのハイインパクトな引用を構成します。

使用すべきでない場合

• 定量的なフィードバックリスト: 大量のユーザー生成レビュー（例：500件の個別の1〜5つ星の製品レビュー）の場合。代わりに review-and-rating-system を使用します。
• データテーブル/製品属性グリッド: ハードな仕様属性を表示する場合。代わりに property-and-attribute-system または data-table-ui-system を使用します。
• ページのプライマリコンテンツ: お客様の声は、製品の主要情報や中核となる価値提案を補完するものであり、それらを置き換えるものではありません。
• 法的免責事項と利用規約: 正式で非物語的な処理を必要とする、厳格な法的拘束力のあるテキストの場合。

入力

効果的なお客様の声または引用コンポーネントをデザインするには、以下の情報が必要です。

1. 引用コンテンツ: お客様の声の実際のコピー。理想的には簡潔で、単一の重要な成果やメリットに焦点を当てています。
2. 著者の身元: 個人の名前、役職、および会社。
3. ビジュアルアセット: 高解像度のヘッドショット、会社のロゴ（SVG推奨）、またはオプションのビデオ/オーディオリンク。
4. 使用コンテキスト: 特定のページと配置（例：ヒーロースポットライト、マルチカードグリッド、サイドバーのプルクォート）。
5. 信頼マーカー: 検証可能な詳細（例：元のケーススタディへのリンク、「確認済み顧客」ステータス、またはG2/Trustpilotなどのサードパーティプラットフォームのロゴ）。

出力

このシステムを適用すると、以下が生成されます。

1. アナトミー仕様: 引用テキスト、引用符、アバター、名前、役職、ロゴ、および信頼マーカーの定義された相対的なレイアウト位置。
2. レイアウト構成:
   • シングルスポットライト: ヒーロー配置用のハイインパクトで全幅または半幅のレイアウト。
   • お客様の声グリッド/カード: 複数のお客様の声を表示するための非対称または構造化されたカードのグリッド。
   • インラインプルクォート: 長編の編集コンテンツに統合された、コンパクトでサイドアラインされた引用。
3. セマンティックマークアップブループリント: <figure>、<blockquote>、<figcaption> を使用して、正しいスクリーンリーダー解釈を保証する標準化されたHTML構造。
4. タイポグラフィ階層ルール: 引用と引用メタデータ間のウェイト、行高、スタイル（イタリックの乱用を制限）、およびスケールコントラストのガイドライン。

---

ワークフロー

1. 引用アナトミーの監査と構造化

すべてのお客様の声は、DOMとスタイルシートで構造化する必要がある3つの異なるゾーンで構成されています。

┌─────────────────────────────────────────────────────────┐
│  [1] 引用コンテナ（セマンティックblockquoteを使用）      │
│      "SentryFlowを導入してから、監査準備のオーバーヘッド  │
│       が80%削減されました。"                             │
├─────────────────────────────────────────────────────────┤
│  [2] 引用エリア（セマンティックfigcaptionを使用）        │
│      (👤 アバター)  山田 太郎                             │
│                   SentryCorp コンプライアンス担当VP      │
├─────────────────────────────────────────────────────────┤
│  [3] 信頼/検証マーカー                                   │
│      (✓ 確認済み顧客)   [SentryCorp ロゴ]               │
└─────────────────────────────────────────────────────────┘

• 引用: 中核となる定性的な記述。長さは2〜3文（約40〜60単語）に制限します。
• 引用情報: 著者の名前、役職、および組織。
• ビジュアルアンカー: 目を引き、引用に人間味を与えるためのヘッドショット（アバター）またはブランドロゴ。

2. 空間レイアウトパターンの選択

情報密度と視覚的な優先順位に基づいて、次のレイアウトのいずれかを選択します。

• スポットライトヒーローパターン:

  • 使用タイミング: ハイインパクトなランディングページやケーススタディのヒーロー。
  • レイアウト: 中央揃えまたは50/50の水平分割。大きく、ハイコントラストなタイポグラフィ（--text-xl または --text-xxl）。
  • 使用方法: 希釈を防ぐために、ページセクションごとに正確に1つのスポットライトのお客様の声を使用します。

• お客様の声カードグリッド:

  • 使用タイミング: 専用の「ソーシャルプルーフ」セクションや「お客様の声」ブロック。
  • レイアウト: 2列または3列のレスポンシブグリッド。
  • 使用方法: 3〜6件の高品質な引用がある場合に最適です。さまざまな高さ（またはBentoスタイルの配置）を使用して、ページに有機的な印象を与えます。

• インラインプルクォート:

  • 使用タイミング: 長編のケーススタディ、記事、ブログ投稿内。
  • レイアウト: マージンをインデントし、左ボーダーのアクティブ状態のハイライト。段落列内にフローティングまたは埋め込み。
  • 使用方法: 密度の高いテキストブロックを分割し、価値の高いクライアントの引用を強調します。

3. タイポグラフィ階層の確立

スキャンしやすさを確保するため（ユーザーは読む前にスキャンします）：

• 引用のスタイリング: 引用全体を細く、薄いグレーのイタリックフォントでスタイリングすることは避けてください。数語を超えるテキストブロックをイタリックにすると、読みやすさが低下します。代わりに、やや大きめのサイズ（--font-size-lg）の通常のフォントスタイルまたは表現力豊かなディスプレイセリフ書体を使用し、ハイコントラストなニュートラルカラーで設定します。
• 直接引用の表示: CSS疑似要素（::before/::after）を使用して装飾的な引用符をレンダリングするか、引用の背後に大きく不透明度の低い背景の引用符を配置します。スクリーンリーダーが二重にアナウンスするのを避けるために、テキストにリテラルの " マークをハードコードしないでください。
• 引用情報のコントラスト: 著者の名前は太字（font-weight: 600）にし、役職/会社はミュートされたセカンダリカラー（color: var(--text-muted)）で、より小さいフォントサイズ（--font-size-sm）でスタイリングします。

4. 信頼と検証インジケーターの統合

「偽のお客様の声」という懐疑論に対抗するため：

• 実際のビジュアル: 汎用のアバター、ストックイラスト、または空のプレースホルダーよりも、実際のプロフェッショナルなヘッドショットを常に優先します。
• ロゴの統合: 顧客の会社のロゴを役職と一緒に配置し、ブランドの権威を借ります。
• 検証バッジ: 検証済みのサードパーティソース（例：G2、Capterra）から取得する場合は、出所を示す小さなブランドアイコンを含めます。

5. レスポンシブアダプテーションの適用

流動的なリサイズとスタッキングのルールを設定します。

• モバイルでの折りたたみ: すべての水平（50/50分割）スポットライトのお客様の声は、768px未満のビューポートでは単一の垂直列に折りたたまれ、ビジュアルのヘッドショット/ロゴは引用テキストの下に配置され、価値のあるステートメントが目立つようにします。
• グリッドレイアウトのシフト: マルチカラムのお客様の声グリッドは、モバイルではシングルカラムスタックに移行する必要があります。タッチスワイプカルーセルを実装する場合を除き、ユーザーに小さなカードを水平スクロールさせることはしないでください。
• カルーセルコントロール（使用する場合）: カルーセルスライダーパターンは、標準のタッチジェスチャー、キーボード矢印（左/右）をサポートし、自動再生する場合（強く推奨されません）は、視認性の高い一時停止/再生コントロールを含める必要があります。

6. WCAG AA アクセシビリティの確保

• セマンティック構造: コンポーネント全体を常に <figure> 要素でラップします。引用テキストを <blockquote> でラップし、引用情報を <figcaption> でラップします。<figcaption> には、著者の役職や会社を示す <cite> を含めます。
• 色のコントラスト: すべての要素をテストします。引用テキストと著者の引用情報は、少なくとも4.5:1のコントラスト比を維持する必要があります。装飾要素（大きな背景の引用符など）は、コントラストを低くするか、aria-hidden="true" を使用して支援技術から隠す必要があります。
• キーボードとフォーカス: お客様の声がタブ付きパネルやスライダーにある場合、すべてのコントロールインジケーター（ドット、矢印）には、視認性の高い :focus-visible アウトラインが必要であり、タッチターゲットの最小サイズを満たしている必要があります。

---

決定ルール

レイアウト選択マトリックス

コンテンツ量	ターゲット配置	優先度	推奨パターン
1件のキークォート	ヒーロー / プライマリCTA	高	スポットライトヒーロー（中央揃え/大）
3〜6件の引用	機能 / 証明ゾーン	中	お客様の声カードグリッド（非対称またはBento）
6件以上の引用	カスタマーサクセスハブ	高密度	カテゴリ別タブグリッド または 切り詰められた「さらに読む」カード
編集コピー	ケーススタディ本文 / ブログ	コンテキスト依存	インラインプルクォート（インデント、左アクセントボーダー）

ヘッドショットとロゴの優先順位

• ヘッドショットを使用する場合: 人間的な感情的なつながりが最も重要な場合（B2C、パーソナルコーチング、クリエイタープラットフォーム、個人消費者向けアプリ）。
• 会社のロゴを使用する場合: 企業の信頼性と組織的な権威が主な推進力である場合（エンタープライズSaaS、B2Bサービス、工業製品）。
• 両方を使用する場合: 特定の購入者ペルソナ（例：CTO）とその会社のブランドの両方が大きな重みを持つ、高額なB2Bステークホルダーに売り込む場合。

---

制約

• アクセシビリティ:
  • セマンティックマークアップ: <figure>、<blockquote>、<figcaption>、<cite>。
  • コントラスト: すべての読み取り可能なテキストで最低4.5:1のコントラスト。
  • スクリーンリーダー: CSSまたは aria-hidden="true" を使用して、装飾的な引用疑似要素を非表示にします。
  • フォーカス: フォーカスがスライダー内でトラップされたり、隠されたりしてはなりません。
• レスポンシブ性:
  • 絶対的なモバイルコンテナ幅の制約: 100vw を超えてはなりません。
  • スライダーコントロールのタッチターゲット: 最低24x24px（WCAG 2.2 SC 2.5.8）、推奨44x44px。
  • テキストの折り返し: 長い名前や役職は、クリッピングされることなく優雅に折り返す必要があります。
• 視覚的階層:
  • スポットライトレイアウトでは、引用テキストのサイズは本文テキストサイズの少なくとも120%である必要があります。
  • 装飾的な引用符は、テキストと衝突したり重なったりしないように、不透明度を低く（例：opacity: 0.1 から 0.2）保ちます。

---

よくある失敗パターン

• 「イタリックの壁」の誤り: イタリック体は読む速度を低下させ、認知負荷を増加させます。100ワードの引用全体をイタリック体で、コントラストの低いグレーのテキストで設定すると、ユーザーは完全にスキップしてしまいます。
• 匿名性とストック要素: 「John D.」に帰属する引用や、明らかなストックフォトの笑顔のモデルを伴う引用は、偽物に見え、サイトの信頼性を著しく損なう可能性があります。
• 「過剰装飾」の罠: CSSの引用符を大きく、ハイコントラストにしすぎて、実際の引用の最初または最後の文字を隠したり、モバイルビューポートでスピーカーのアバターと重なったりする。
• 水平スクロールのロック: モバイルユーザーに、オーバーフローの視覚的なインジケーター（例：カードの一部が見える）やアクセス可能なフォールバックのドットインジケーターなしで、お客様の声を読むために水平にスワイプすることを強制する。
• 美観優先、アクセシビリティ軽視（セマンティックdivスープ）: 標準的なセマンティックタグを使用せずに、任意の <div> ネストを使用してお客様の声を構造化し、スクリーンリーダーがその部分を引用としてアナウンスするのを防ぐ。

---

検証基準

• セマンティックマークアップ: HTMLは、ラッパーとして <figure>、テキストに <blockquote>、帰属の詳細に <figcaption> を使用している。
• コントラスト検証: 引用テキスト、スピーカー名、スピーカーの役職すべてのコントラスト比が少なくとも4.5:1である。
• レスポンシブトランジション: スポットライトレイアウトはビューポート < 768px で垂直にスタックし、マルチカラムグリッドは1列に折りたたまれる。
• タイポグラフィの読みやすさ: 引用本文テキストはノーマル/ローマンのフォントスタイルで設定され、長いイタリックブロックを避けている。
• ハードコードされた引用文字がない: 引用符は、装飾的なCSS背景パターンまたは疑似要素（::before/::after）を使用して content: "" とスタイリングでレンダリングされるか、スクリーンリーダーから隠されている。
• 比例的なスペーシング: 引用本文と引用ブロックの間のスペーシングは、一貫した相対変数（例：margin-top: var(--space-m)）を使用している。
• 視覚的な信頼性: 帰属には、検証可能な資格情報（フルネーム、役職、会社、またはロゴ）が含まれており、プレースホルダーグラフィックを避けている。