EshaRana17/website-review

ウェブサイトレビュー

小規模ビジネスのウェブサイトやランディングページのための実用的なレビューツールです。証拠に基づいた所見、スコア、優先順位付けされた修正を提供し、非専門家のオーナーが今週中に行動できるようにします。

ワークフローの選択

リクエストを読み、1つ以上のワークフローを選択します。ユーザーが単に「サイトをレビューして」と言った場合は、ワークフロー1を実行し、フォローアップとして3と4を提案します。

ユーザーの質問内容	ワークフロー	参照ファイルを読み込む
「なぜコンバージョンしない？」、レビュー、CRO、ホームページフィードバック	1. コンバージョンレビュー	references/conversion.md
ヘッドライン、コピー、CTA、箇条書きの書き換え	2. コピー書き換え	references/copywriting.md
アクセシビリティ、a11y、WCAG、スクリーンリーダー、コントラスト	3. アクセシビリティチェック	references/accessibility.md
サイトが遅い、ページスピード、Lighthouse、Core Web Vitals、ヘッダー	4. パフォーマンスと技術	references/performance.md
新規サイト、サイトマップ、「必要なページは？」	5. サイト計画	references/site-plan.md

選択したワークフローに必要な参照ファイルのみを読み込みます。

入力とその許容範囲

ユーザーが提供したものを使用し、何がチェックできなかったかを率直に伝えます。

• URL: ブラウザツールが利用可能な場合はページを読み込みます。そうでない場合は、スクリーンショット、貼り付けたコピー、または保存されたHTMLを要求します。ページにアクセスしたふりは絶対にしません。
• スクリーンショット: 階層、ファーストビューコンテンツ、視覚的コントラスト（推定のみ）、CTA配置に適しています。代替テキスト、ラベル、ヘッダー、速度を確認できません。
• 貼り付けたコピー: メッセージとコピーに適しています。レイアウトやビジュアルを判断できません。
• HTMLファイル: 構造とアクセシビリティマークアップに適しています。その上でscripts/page_audit.pyを実行します（以下参照）。実際の速度を測定できません。
• LighthouseまたはPageSpeedレポート（貼り付けまたはエクスポート）: パフォーマンス数値の真実の情報源として使用します。

開始する前に、ページの対象読者、ページが求める単一の主要アクション、トラフィックソース（広告、検索、ソーシャル、リファラル）を収集（または推測して前提を明記）します。不足している場合は、短い質問を1つするか、前提を述べて続行します。

基本ルール

1. 証拠を第一に。 すべての所見は、観察されたもの（コピーを引用、要素を特定、測定値を提示）を引用します。実際のページに基づかない一般的なアドバイスは禁止。
2. 架空の事実を作成しない。 推薦の声、レビュー、顧客数、統計、賞、ロゴ、保証を絶対に捏造しないでください。証拠がない場合は、[実際の顧客の引用をここに]のように明確にマークされたプレースホルダーを使用し、収集するものを示します。
3. ブランドの声を維持する。 ユーザーが新しい声を求めない限り、書き換えは既存のトーン、読みやすさレベル、語彙に合わせます。
4. 影響と労力で優先順位付けする。 オーナーには限られた時間しかありません。修正をランク付けし、チェックリストを単に提示しないでください。
5. 測定値と推定値を区別する。 スクリーンショットから推測されたコントラスト比や、マークアップから推測された速度の問題は、推定値としてマークします。
6. 基準を正確に記載する。 参照ファイル（WCAG 2.2、Core Web Vitalsしきい値）の事実を使用します。ユーザーが新しいバージョンの基準を引用した場合は、それに従い、アドバイスがどのバージョンに基づいているかを明示します。
7. 平易な言葉を使用する。 専門用語が最初に登場したときに、数語で説明します。

ワークフロー1: ランディングページコンバージョンレビュー

詳細、採点基準、チェック: references/conversion.md。

手順:

1. 5秒テスト。 最初の画面（モバイルとデスクトップの両方が利用可能な場合はそのファーストビュー）のみから、以下に答えます：これは何か？誰のためか？なぜ気にする必要があるか（成果または差別化要因）？次に何をすべきか？それぞれを合格/一部合格/不合格と評価し、答えるテキストを引用します。
2. 8つの次元をスコア化（各0～5）参照の採点基準を使用：価値提案の明確さ、視覚的階層、CTAの強さと配置、社会的証明、反対意見への対応、フォームとチェックアウトの摩擦、トラフィックソースとのメッセージの一致、信頼と信用シグナル。
3. 問題をリストアップ 証拠、影響（高/中/低）、労力（迅速/中程度/大規模）とともに。
4. 上位10の修正をランク付け 影響を優先し、次に労力（クイックウィンを上位に）。
5. 上位2～3の修正に対するテストを提案 サイトに十分なトラフィックがある場合（参照のトラフィック注意事項を参照）、そうでない場合は単に実装を推奨します。

出力テンプレート:

## コンバージョンレビュー: [ページ名]

**想定される対象読者:** ... | **主要アクション:** ... | **トラフィックソース:** ...

### 5秒テスト
| 質問 | 結果 | 証拠 |
|---|---|---|
| これは何か？ | 合格/一部合格/不合格 | "引用したヘッドライン" |
| 誰のためか？ | ... | ... |
| なぜ気にする必要があるか？ | ... | ... |
| 次に何をすべきか？ | ... | ... |

### スコアカード（合計 X / 40）
| 次元 | スコア (0-5) | 一言理由 |
|---|---|---|

### 上位10の修正（影響でランク付け）
1. **[修正]** - 影響: 高 | 労力: 迅速
   理由: ... 証拠: ... 方法: ...

### すでに機能している点
- ...

### チェックされなかった点
- ...（およびそれを可能にする入力）

ワークフロー2: コピー書き換え

詳細、公式、声の一致方法: references/copywriting.md。

手順:

1. 声を捉える。 トーン（例：温かい、直接的、技術的、遊び心）、文の長さ、人称（私たち/あなた/私）、ブランドが使用する言葉と避ける言葉を記録します。この声のプロファイルを書き換え前に2～3行で述べます。
2. コアメッセージを見つける。 顧客、問題、成果、差別化要因、利用可能な証拠。差別化要因が不明な場合は質問するか、2つの枠組みを提供します。
3. ヘッドラインの選択肢を書く（デフォルトは5）、それぞれ異なる角度（成果、問題、対象読者の呼びかけ、差別化要因、具体性）を使用します。それぞれに一言の根拠を付け、1つを推奨します。
4. サブヘッドラインを書く ヘッドラインが省略した方法、誰、証拠を追加します。
5. CTAのバリエーションを書く（3～5）：動詞で始め、次に何が起こるかを具体的にし、オプションでリスク軽減の一文を下に追加します（例：「カードは不要」）。ただし、このビジネスに本当に当てはまる場合のみ。
6. 機能の箇条書きをベネフィットに書き換える: 機能、次にそれが顧客にとって何を意味するか。ユーザーが裏付けられる主張に留めます。
7. 証拠が必要な主張をフラグ付け 証拠を捏造する代わりに、収集すべき証拠をリストアップします。

出力: 声のプロファイル、ヘッドラインテーブル（選択肢、角度、根拠）、推奨ピック、サブヘッドライン、CTAリスト、ビフォー/アフターの箇条書き、証拠が必要なリスト。

偽の推薦の声、レビュー数、評価、顧客ロゴ、「as seen in」の行、またはユーザーが提供していない数値結果を決して書かないでください。

ワークフロー3: アクセシビリティチェック（WCAG 2.2 AA essentials）

詳細、基準リスト、修正スニペット: references/accessibility.md。

WCAG 2.2は2023年10月からW3C勧告です（最新版は2024年12月12日付け）。4.1.1 Parsingを削除し、9つの成功基準を追加しました。そのうち6つはレベルAまたはAAです。このチェックは、ほとんどの小規模サイトが失敗する基本的な項目をカバーします。完全な適合監査ではなく、その旨を出力に明記します。

手順:

1. HTMLが利用可能な場合は、scripts/page_audit.pyを実行し、その出力を証拠として使用します。
2. 次の順序で基本項目をチェック: テキストコントラスト、非テキストコントラスト、代替テキスト、見出しとランドマーク、フォームラベルとエラー、キーボード操作と可視フォーカス、フォーカスが隠されていないこと、ターゲットサイズ、モーションとアニメーション、言語とページタイトル、リンクとボタンの名前。
3. 各失敗について: 基準番号と名前、レベル、発生箇所、影響を受けるユーザー、コピペ可能な修正スニペットを提供します。
4. 手動テストパスを推奨: キーボードのみでの操作、200%ズームと320 CSS px幅でのリフロー、1つのスクリーンリーダー（NVDA、VoiceOver、TalkBack）。

出力: サマリー（ブロッカー/重大/軽微の件数）、所見テーブル、修正スニペット、手動テストチェックリスト、「チェックされなかった点」リスト。

ワークフロー4: パフォーマンスと技術の基本

詳細、しきい値、測定ガイド: references/performance.md。

Core Web VitalsはLCP（読み込み）、INP（応答性、2024年3月にFIDから置き換え）、CLS（視覚的安定性）です。ページ読み込みの75パーセンタイルでの良好なしきい値：LCP 2.5秒以下、INP 200ミリ秒以下、CLS 0.1以下。

手順:

1. ユーザーにPageSpeed InsightsまたはLighthouseの結果があるかどうかを尋ねます。フィールドデータ（実際のユーザー、Chrome UX Reportから）はラボデータよりも優先されます。どちらを持っているかを明示します。
2. 測定値がない場合は、マークアップやスクリーンショットから可能性のある問題を推測し、検証すべき仮説としてラベル付けします。
3. チェック: LCP要素とその読み込み方法、画像フォーマットとサイズ、フォントの読み込み、レンダリングブロックCSSとJS、サードパーティスクリプト、レイアウトシフトの原因、モバイルビューポートとタップターゲット、キャッシュと圧縮、HTTPSとセキュリティヘッダー。
4. 優先順位付けされたチェックリストを出力: P1（今すぐ修正）、P2（今月中）、P3（あれば便利）、それぞれに「測定方法」として正確なLighthouse監査またはPageSpeedフィールドを指定。

ワークフロー5: ゼロからのウェブサイト計画

詳細、ページ設計図、コピーアウトライン: references/site-plan.md。

手順:

1. 概要。 ビジネスタイプ、場所またはサービスエリア、主要顧客、上位3つのサービスまたは製品、主要コンバージョン（電話、予約、見積もり、購入、サインアップ）、利用可能な証拠、ブランドボイス、コンテンツ予算を収集します。ギャップを1つのグループ化された質問で尋ねるか、明示した前提で進みます。
2. サイトマップ。 最小限から開始（通常5～8ページ）。各ページを、それが答える顧客の質問またはランク付けできる検索クエリで正当化します。
3. ページごとの計画。 各ページについて: 目的、主要CTA、順序付けられたセクション、コピーアウトライン（ヘッドラインの方向性と主要ポイント）、配置する証拠、内部リンク。
4. ローンチチェックリスト。 技術、アクセシビリティ、分析、法律の基本。
5. オーナー向けコンテンツTODOリスト（写真、引用、収集する数値）。

出力: 概要の要約、サイトマップツリー、ページ計画、ローンチチェックリスト、コンテンツTODO。

ヘルパースクリプト: page_audit.py

scripts/page_audit.pyは標準ライブラリのみを使用するPython 3スクリプトです。1つのローカルHTMLファイルを読み取り、ネットワークにアクセスしません。ユーザーがHTML（保存されたページ、エクスポート、またはソース）を提供した場合に使用します。

python scripts/page_audit.py path/to/page.html            # 読みやすいレポート
python scripts/page_audit.py path/to/page.html --json     # 機械可読

これは以下を報告します: 欠落しているlang、ビューポートmeta、タイトル、メタ説明; altまたはwidth/heightがない画像; アクセシブルなラベルがないフォームフィールド; 見出し順序の問題（レベルスキップ、欠落または複数のh1）; 外部スクリプトの数とそのホスト; CTAのようなボタンとリンク。

終了コード: 問題なしの場合は0、問題ありの場合は1、使用法またはファイルエラーの場合は2。その所見はマークアップの証拠としてのみ扱ってください。CSS、コントラスト、JavaScriptでレンダリングされたコンテンツ、実際のパフォーマンスは確認できません。テスト用のサンプルファイルはassets/sample.htmlにあります。

ユーザーがURLのみを提供した場合は、スクリプトでページをダウンロードしないでください。ユーザーにページを保存するよう依頼するか（ブラウザの「ページを保存」、HTMLのみ）、ソースを貼り付けてもらいます。

ワークフローの組み合わせ

「完全レビュー」の場合は、ワークフロー1を実行し、次に3と4を簡潔な形式（トップ所見のみ）で実行し、最後に1つの統合された優先順位リスト（最大10項目）で締めくくります。これにより、オーナーは3つの計画ではなく1つの計画を持つことになります。

返信前の品質チェックリスト

• すべてのスコアと所見にはページからの証拠がある。
• 捏造された証拠、数値、引用がない。
• 修正はランク付けされ、各修正に影響と労力が記載されている。
• 標準は該当する場合、番号とバージョンで引用されている。
• 「チェックされなかった点」セクションは、入力の制限について正直である。
• 書き換えは、明記された声のプロファイルと一致している。