competitor-experience-audit

競合サイトのエクスペリエンス監査

ある業界の主要サイトに共通して見られるブランド、UX、サイトデザインと、それらに欠けている点を記録します。出力するのは、見た目に関する主観ではなく、複数サイトに見られるパターンに基づいた、新しいサイトが満たすべき、あるいは上回るべきエクスペリエンスの基準です。

スタックに依存しません。あらゆる SiteShape（ecommerce-catalog、inventory-listing、hospitality-food、b2b-manufacturer など）に対応します。最初のテストケースは自動車部品カタログですが、対象はそれだけではありません。

このスキルは、seo-onpage や accessibility-audit のような技術監査に対する、ブランド／UX／デザインの観点からの対応物です。技術的な指摘は客観的です（canonical が欠けていれば、欠けています）。デザインにはより主観的な側面があるため、このスキルでは主観的な内容を評価可能にすることを意図しています。主要サイトが実際にどう対応しているかについて、観察可能な質問を使って各項目を判断し、パターンとギャップとして報告します。また、判断を裏付ける証拠がない場合は not_assessable と記します。

---

使用する場面

• これまで構築したことのない業界で、新しいサイトを構築する際のエクスペリエンス基準を定める
• そのカテゴリーで信頼されるサイトに求められるデザインや UX の慣例を記録する
• SEO とアクセシビリティは確認済みだが、デザインやエクスペリエンスは未確認の分野について、批評や戦略レビュー向けに競合状況を監査する
• 主要サイトに共通して見られるポジショニングの機会（主要サイトでさえ共有しているギャップ）を明らかにする
• 技術監査（SEO、アクセシビリティ）と組み合わせ、競合レビューで両方の軸を扱う

使用しない場面

• 単独のページや、特定のブランドのデザインの好みを単独で評価する（既知のサイトの制作におけるデザイン上の判断には、design-standards または brand-style-guide を使います）
• 被リンク、キーワード、SERP の重複に関する競合分析（seo-competitor を使います）
• 新しいブランドのクリエイティブな方向性をゼロから作る（creative-direction と brand-discovery を使います）
• 自社プロダクトについて、実際の参加者を対象にユーザーリサーチを行う（ux-research、usability-testing を使います）
• 監査スイートを使って、単一ページのオンページ SEO やアクセシビリティを監査する（seo-onpage、accessibility-audit を使います）

---

必須入力

• 業界と、その業界の主要サイトのリスト（3～6 サイト。6 サイトを超えると、新たなパターンが見つかりにくくなります）
• レンダリングされたサイトへのアクセス（静的 HTML だけでなく、実際のブラウザー表示。「静的表示とレンダリング表示」の項を参照）
• 監査結果が反映されるサイトの形状（ecommerce-catalog、inventory-listing など。わかっている場合）。これにより、どの項目を重視するかが定まります
• 以降の構築に関する明確な制約（ブランドの語調、対象ユーザー、構築するサイトが担うコンバージョンなど）

主要サイトのリストが不明な場合は、尋ねてください。対象サイトの選定を誤ると、間違った業界を基準にしたエクスペリエンス基準が設定されます。

静的表示とレンダリング表示

主要ナビゲーション、カタログ／カテゴリーのページ数、検索機能の有無など、一部の項目は静的 HTML から部分的に評価できます。ほとんどの項目はそうではありません。レイアウトの密度、ブランドの語調、動き、信頼性を示す要素の目立ちやすさ、ファーストビューのレンダリング後の階層構造を適切に評価するには、レンダリングされたページが必要です。サイトの静的 HTML しかない場合は、推測せず、そのサイトのレンダリング後にしか評価できないすべての項目に not_assessable と記します。

---

フレームワーク：7 つのエクスペリエンス項目

業界の主要サイト全体で観察可能な質問を通じて各項目を評価し、複数サイトに共通するパターンとギャップ（主要サイトが共通している点と、それらでさえ不十分な点）を報告します。

各項目は、Pattern present（業界で認識可能な慣例が定着している）、Mixed（業界内で 2～3 種類のアプローチに分かれている）、または Gap（慣例が見いだせない、あるいはすべての主要サイトが対応できていない）として評価します。証拠から判断できない場合は not_assessable と記します。

「良いデザイン」や「悪いデザイン」といった表現や、審美的な評価は絶対に記しません。各項目で扱うのは、業界で観察できる実際の対応状況であり、好みの問題ではありません。

1. 主なタスクの目立ちやすさ

サイトは訪問者が最も達成したいことを先に提示していますか。それとも目立たない場所に埋もれていますか？

• 最初のビューポートで、最も大きく、最初に目に入るインタラクティブ要素は何ですか？（自動車部品なら、通常は適合確認セレクター。宿泊・食品なら、メニューまたは予約への入り口です。）
• 主要なタスクを実行するまでに、何回クリックまたはスクロールする必要がありますか？
• サイトはヒーローで競合する CTA から主要なタスクを守れていますか？

観察できる指標：最初の注目を奪い合う要素の数を数え、レイアウトで実際に優先されている要素を特定し、この分野で主要なタスクとして収束しているものを挙げます。

2. レイアウトの傾向と密度

レイアウトは小売店のように情報密度が高いのか、エディトリアルなのか、マーケティングサイトのようにゆったりしているのか？用語については creative-direction の美的スタンス（抑制されたエディトリアル、洗練された標準、抑制されたマキシマリスト、表現豊かなマキシマリスト）を参照してください。ここでは定義し直さないでください。

• ファーストビュー内に、独立したモジュールはいくつありますか？
• ビューポートあたりのコンテンツ比率はどの程度ですか？（情報密度の高いストアフロント、落ち着いたエディトリアル、ゆとりのあるマーケティング）
• ページはストアフロント、カタログ、ランディングページ、パンフレットのどれとして映りますか？

観察できる指標：この分野全体でファーストビュー内のモジュール数を数え、各サイトの魅力ではなく、主要サイトに共通する傾向を説明します。

3. 商品構成とカテゴリーの見せ方

カタログや商品ラインナップは、一度にどれだけ、どのような形で表示されていますか？

• スクロール前に、カテゴリー、コレクション、またはエントリーポイントとなるモジュールはいくつありますか？
• 階層の深さはどのように示されていますか？（メガメニュー、グリッド、サイドレール、ファセット検索）
• 画面に表示される階層はフラットですか（1 階層のみ）、それとも階層構造ですか（親カテゴリーと子カテゴリーが同時に表示される）？

観察できる指標：カテゴリーへのエントリーポイント数を数え、この分野で使われているナビゲーションの階層パターンを説明します。

4. 主要なナビゲーションと検索経路

サイトは、欲しいものが決まっている人向けと、見て回りたい人向けの両方の経路を提供していますか？

• 検索は目立つ位置にあり、主要な要素ですか、補助的な要素ですか、それともありませんか？
• どのような経路が用意されていますか？（カテゴリー別、ブランド別、属性別、車両別、場所別、用途別）
• 主要ナビゲーションはどこにありますか？（上部、サイド、固定表示、メガメニュー）

観察できる指標：この分野で用意されている経路を列挙し、それぞれを主要、補助的、またはなしと評価します。

5. ブランドの傾向と確立度

主要サイトはどのようなブランド姿勢を取っていますか。また、それはページ全体で一貫していますか？

• 色、書体、画像は、実用的、高級、親しみやすい、組織的、技術的、表現豊かのどれですか？
• 見出しやマイクロコピーの文体は、直接的、説得的、技術的、温かみのある、簡潔のどれですか？
• 信頼性を示す要素は、組織的なもの（長い歴史、団体の認定バッジ）、ソーシャルなもの（レビュー、コミュニティ）、それとも運用面のもの（在庫あり、保証、適合確認）ですか？

用語については creative-direction と brand-archetype-system のスキルを参照してください。この分野で共通する傾向を報告します。好みを評価するのではなく、主要サイトが取っている姿勢を説明してください。

6. 信頼性とコンバージョンを示す要素

この分野で繰り返し使われている、信頼性とコンバージョンの慣例は何ですか？

• レビュー、保証、ソーシャルプルーフ、バッジ
• 価格の透明性（価格の表示、予想外の費用がないこと、総費用の提示）
• 在庫と入手可能性の表示
• 適合性、サイズ、利用資格、互換性の確認（業種上必要な場合）
• 返品、配送、サービス水準に関する約束

観察できる指標：この分野全体でどの指標が、どこに表示されているか、また主要サイトに共通する指標は何かを確認します。

7. 業種で繰り返し見られる慣例（総合）

主要サイトに共通して繰り返し現れ、この業種で信頼されるサイトに備わっていると期待されるパターンです。これは、1〜6 の各項目を統合したもので、「これを実装しなければ、業種に合わない印象を与える」という短いリストにまとめます。

観察できる指標：主要サイト N 件のうち 3 件以上で繰り返し見られる慣例と、この分野全体に見られない慣例（ポジショニングの機会につながるギャップ）を特定します。

---

誠実さのガードレール（最重要）

これは譲れません。体験監査の信頼性は、好みの問題に踏み込んだ瞬間に損なわれます。

• 主要サイトで観察できることと、明らかに不足している点を、サイト横断のパターンとして報告してください。個人的な美的評価（「これは醜い」「デザインが良い」「タイポグラフィが整っている」など）はしないでください。美的評価は、ここではなく art-direction または design-standards の領域です。
• 証拠から判断できない場合は、そう明記し、そのサイトまたはパターンの該当する次元を not_assessable としてください。よくある例として、レンダリングされていない静的 HTML ではレイアウトや情報密度を評価できない、スクリーンショットでは動きやアニメーションを評価できない、1 ページだけではブランドの語り口を評価できない、などがあります。
• 1 つのサイトに見られる慣例に名前を付けないでください。パターンとは、フィールド全体で繰り返し見られるもの（N サイト中 3 サイト以上）です。1 つのサイト独自の取り組みは、単一サイトの観察結果であり、慣例ではありません。
• 出力は、根拠に基づいた体験基準です。現場の慣例と不足点を示し、構築するものが満たすべき基準として活用できるものにしてください。意見表明ではありません。

ユーザーが「このデザインは良いですか」と尋ねた場合は、観察可能なパターンへと話を戻してください（「この分野の主要サイトには X、Y、Z が共通しています。このビルドでは X と W を実現していますが、Y と Z は実現していません。そこがギャップです」）。美的評価を求められた場合は、design-standards または art-direction を案内してください。

---

ワークフロー

1. 分野と主要サイトを確認します。 どちらかが不明確な場合は尋ねてください。間違った分野を対象に監査するくらいなら、監査しない方がよいでしょう。
2. 各サイトを、ユーザーと同じようにレンダリングして表示します。 実際のブラウザーで、その分野の訪問者が使用するデバイスクラス（EC ならデスクトップとモバイル、ホスピタリティ・フードならモバイルファーストなど）で開いてください。レンダリング後にのみ評価できる次元については、静的 HTML だけを根拠にしないでください。
3. 分野全体を通じて各次元を評価します。 references/experience-dimensions-checklist.md を使い、各サイトの各次元を採点してください。証拠が不十分な場合は not_assessable としてください。
4. サイト横断のパターンをまとめます。 各次元について、繰り返し見られる慣例（または相違点、あるいは不足点）を示してください。分野全体で収束しているパターンと、単一サイト独自の取り組みを区別してください。
5. ギャップ（ポジショニングの機会）を示します。 主要サイトでさえ不足している点はどこでしょうか。そこが、新しいビルドが分野内で差別化を図れる機会です。
6. 基準を記述します。 references/audit-template.md のテンプレートを使ってください。デフォルトの出力は、Markdown 形式の体験基準です。公開ショーケース用の制作資料に使用する場合は、パターンレベルに一般化してください（公開版では競合他社の名前を出しません）。
7. 基準をビルドスキルに引き渡します。 出力を、creative-direction、design-standards、information-architecture、および関連するビルドスキル（landing-page-copy、frontend-component-build）が満たすべき体験基準として読み取れるようにしてください。

---

失敗パターン

次のいずれかに気づいたら、成果物を提出する前に異議を唱えてください。

• 「これらのサイトのデザインを評価してください。」 曖昧です。好みの問題ではなく、その分野を代表するサイトが7つのディメンション全体でどのようなパターンを示しているか、という観察可能な傾向へ話を導いてください。
• レンダリングされていないページのレイアウト、情報密度、動きを評価する。 not_assessable とマークし、レンダリングされた表示を確認してください。静的 HTML でできる評価は一部に限られます。見えないデザインの質を推測してはいけません。
• 1つのサイトをもとに慣例を名付ける。 パターンとは、その分野で繰り返し見られるものです。1つのサイトだけが特徴的なことをしている場合、それは単一サイトの観察結果として扱い、慣例としてではなく、そのように明示してください。
• 分野に見られるパターンを個人的な好みで置き換える。 「色使いがよいと思います」は監査結果ではありません。「この分野ではネイビーと錆色の配色が主流で、このサイトもそれを採用しています」は監査結果です。
• 観察結果を装った美的評価。 具体的に観察できる根拠を伴わない「すっきりした」「現代的」「プロフェッショナル」「高級感がある」といった表現に注意してください。具体的に観察できるものを指摘できないなら、それはパターンではなく好みを述べていることになります。
• ギャップを見落とす。 代表的なサイトの優れた点だけを挙げる監査は、価値の半分しかありません。この分野全体に繰り返し見られる弱点にこそ、ポジショニングの機会があります。それを明示してください。
• 一般化を急ぐ。 2サイトのサンプルは、その分野全体を示すものではありません。代表的な5サイトのうちレンダリングできたのが2サイトだけなら、監査を partial とマークし、評価できた点とできなかった点を明記してください。

---

出力形式

既定の出力は、プロジェクトのルートに experience-audit-[vertical-slug].md として保存する、Markdown 形式のエクスペリエンスバーです。構成は次のとおりです。

1. 分野と調査対象（評価したサイト、レンダリングできなかったサイト）
2. 分野全体における各ディメンションのスコア
3. サイト横断のパターン（代表的なサイトに共通する慣例）
4. ギャップ（分野が不足している点、ポジショニングの機会）
5. エクスペリエンスバー（要約：この分野で信頼されるプロダクトを構築するために必要なこと）
6. Not_assessable 項目（評価できなかった内容とその理由）

1500語未満に収めてください。あるディメンションを詳しく扱う必要がある場合は、本文を膨らませるのではなく、詳細な付録へのリンクを掲載してください。

ショーケースでの利用に向けた情報削除

監査結果を公開用ショーケースの作成に利用する場合は、公開前に競合他社名を削除してください。競合他社名を含む版は運営側で保持し、公開用の成果物には一般化したパターンとギャップを掲載します。これは、Basano のモデルを活用した監査における競合レビューで、すでに競合サイト名を扱っている方法に倣ったものです。

---

参考ファイル

• references/audit-template.md - 記入式のエクスペリエンス監査テンプレートです。コピーして使用してください。一般化版と競合他社名入り版の両方が用意されています。
• references/experience-dimensions-checklist.md - 各ディメンションの観察可能な確認項目を、採点順に記載しています。