Claude for Chrome × Claude Code で、Webサイトを校正する方法｜プロンプトつき実践ガイド

前の記事で「Claude for Chrome で誤字が見つかる」という話を書いた。
今回はさらに踏み込んで、Claude Code の /chrome 接続と組み合わせた、
より網羅的な校正フローを実践してみた結果をレポートする。

2つは得意分野が違う

Claude for Chrome と Claude Code + /chrome は、
「どちらが優れているか」ではなく、チェックできる領域が根本的に異なる。

チェック内容	Claude for Chrome	Claude Code + /chrome
誤字・脱字・表記ゆれ	◎	◯
会社名・電話番号・メールの正確性	◎	◯
レイアウト崩れ・余白の詰まり	◎	△
数値の整合性（テキスト同士）	◎	◯
リンク切れ（実際に404確認）	△	◎
meta / OGP / canonical	×	◎
GA4 / GTM タグ出力確認	×	◎
Noindex 確認	×	◎
タブ・スライダーの動作確認	△	◎
コンソールエラー	×	◎
未置換ショートコード	△	◎

ひとことで言えば、
「見た目・テキスト系 → Claude for Chrome」「技術・構造系 → Claude Code」だ。

📍 Claude for Chrome 用プロンプト

ブラウザで対象ページを開いた状態でサイドパネルから投げる。
対象ページが複数ある場合は、ページごとに実行するのが確実。

サイト名：[サイト名]
URL: https://mysite.jp

の全ページを校正してください。全ページを順番に開いてチェック、
フォームページは、送信直前のページまで確認してください。

---

【チェック1】テキストの誤字脱字・表記ゆれ
・明らかな誤字・脱字
・同じ名称が箇所によって表記が違う
・全角・半角の混在など表記ゆれ（数字・記号・スペース）
・会社名・住所・電話番号・FAX・メールアドレスに誤りや表記ゆれがないか
・[company_name] や [tel] のような未置換のショートコードが残っていないか

【チェック2】数値の整合性
複数箇所で同じ数値（所要時間・距離・価格・従業員数・YYYY年MM月DD日時点...など）
が掲載されている場合、
数値が一致しているか照合してください。
不一致があれば「項目名：A箇所の値 → B箇所の値」の形式で列挙してください。

【チェック3】レイアウトの異常
・各セクション間の余白が、他と比べて明らかに詰まっている箇所
  （「ここは詰まっていますが意図的ですか？」程度の指摘でOK）
・テキストや画像が明らかにズレている・揃っていない箇所
  （「ここは位置がずれていないですか？」程度の指摘でOK）

----

全ページのチェックが終わったら、以下のフォーマットでまとめてください。

**フォーマット**
```markdown
# 校正レポート（Claude for Chrome）：[サイト名]_YYYY-MM-DD
実施日：[今日の日付]

## チェック1：誤字脱字・表記ゆれ
| ページ | 箇所 | 内容 |

## チェック2：数値の整合性
- 問題あり / 問題なし

## チェック3：レイアウトの異常
| ページ | 箇所 | 内容 |

## 総括（優先度の目安）
**要修正（明確な不具合）**
**要確認（表記統一・整合）**
**問題なし**
```

問題なければ「問題なし」と記載してください。

Claude for Chrome のポイント

robots.txt は関係ない。ブラウザで表示しているページをそのまま渡すため、テスト環境のページでも問題なくチェックできる
ソースコードは読めないため、<meta> タグや GA タグの確認は不向き

📍 Claude Code + /chrome 用プロンプト

まず /chrome でブラウザと接続してから投げる。
全ページを自動巡回してスクリーンショットを撮りながらチェックできる。

接続後、以下のプロンプトを実行する。

# 新しいセッション開始
claude --dangerously-skip-permissions  # パーミッションをスキップ
/chrome                                # ブラウザと接続

プロジェクト名：[プロジェクト名]
Task X.X: 【[サイト名]】校正レポートの作成 を開始します。

サイト名：[サイト名]
URL: https://mysite.jp
* Google tag: G-4XXXXXXXXX
* Google Tag Manager: GTM-NXXXXXXX

の全ページを校正してください。全ページを順番に開いてチェック、
フォームページは、送信直前のページまで確認してください。

---

**Task X.X.1: Check & Plan（チェック・改善計画）**

【チェック1】テキストの誤字脱字・表記ゆれ
・明らかな誤字・脱字
・同じ名称が箇所によって表記が違う
・全角・半角の混在など表記ゆれ
・会社名・住所・電話番号・FAX・メールアドレスの正確性
  （送信元メールアドレスと、ページ内のお問い合わせ先メールアドレスの一致も確認）
・[company_name] や [tel] のような未置換ショートコードが残っていないか

---

【チェック2】数値の整合性
複数ページにまたがって同じ数値（所要時間・距離・価格・従業員数・YYYY年MM月DD日時点...など）
が掲載されている場合、
ページ間で数値が一致しているか照合してください。

---

【チェック3】レイアウトの異常（スクリーンショットで確認）
・各セクション間の余白が、他と比べて明らかに詰まっている箇所
・テキストや画像が明らかにズレている・揃っていない箇所
・タブ切り替えがあるページは、全タブをクリックして表示内容も確認してください
  （※ `class="tabs-item"`, `class="tabpanel"` がある場合は、`invisible-tabPanel.js` が正常に動作しそうか確認してください）

---

【チェック4】リンク
全リンクのhref属性を確認して、以下を指摘してください。
・URLにパスの重複がある（例：/example/example/ のようなもの）
・実際にアクセスして 404 になるリンク
・URLがそのままリンクテキストになっているもの
・「こちら」「ここ」だけで内容が不明なリンク
・PDFや外部リンクに target="_blank" があるか
  （※ `class="tgt-blank"` がある場合は、`_classify-tgtBlank.js` が正常に動作しそうか確認してください）

---

【チェック5】画像
全ページで、以下を確認してください。

・画像が表示されているか
  （壊れた画像アイコン、または代替テキスト（alt）の文字だけが表示されている箇所がないか）
  （※ `class="lazy"` の画像は、ページを最下部までスクロールして読み込ませてから確認してください）
・全画像のURLにアクセスして、404 / 0バイト / 読み込み失敗（ERR_FAILED など）がないか
  （※ FTPアップロード時に、ファイルサイズが0バイトになることがあります）
・自サイトのドメイン以外から読み込んでいる画像・アイコンをすべてリストアップし、
  そのドメインが現在アクセスできるか
  （対象：`<img>`、CSS の `background-image`、`<picture>` / `srcset`、SVG）
  （※ 画像提供サイトやアイコン配信サービスが閉鎖・停止することがあります）
・OGP画像（og:image）とファビコンが表示できるか
・表示幅によって画像が切り替わる箇所は、PC・SP 両方の幅で確認してください

---

【チェック6】技術的な確認
各ページのソースとコンソールを確認して、以下をチェックしてください。

・title タグの内容に誤字・サイト名の表記ミスがないか
・meta description が設定されているか・極端に短すぎ／長すぎないか
  （※title, meta description は、一番最後の項目を参考にするようにする）
・OGP タグ（og:title / og:description / og:image）が設定されているか
・canonical が正しい URL を向いているか
・コンソールエラーが出ていないか
・ファーストビューの画像に `loading="lazy"`, `class="lazy"` が使われていないか

**テストサイトの場合は確認しなくてよい項目**
・Noindex になっていないか（本番公開後は必ず確認）
・Google Analytics タグ（トラッキングID：[G-XXXXXXXXXX]）が出力されているか
・GTM タグ（コンテナID：[GTM-XXXXXXX]）が出力されているか
・GA4 と GTM の二重計測になっていないか

全ページのチェックが終わったら、Task X.X.2: Report（レポート作成） に進んでください。

---

**Task X.X.2: Report（レポート作成）**

以下のフォーマットでまとめて、
「【[サイト名]】校正レポート（Claude Code）_YYYY-MM-DD.md」として書き出してください。

**フォーマット**
```markdown
# 【[サイト名]】校正レポート（Claude Code）_YYYY-MM-DD
実施日：[今日の日付]

## チェック1：誤字脱字・表記ゆれ
| ページ | 箇所 | 内容 |

## チェック2：数値の整合性
- 問題あり / 問題なし

## チェック3：レイアウトの異常
| ページ | 箇所 | 内容 |

## チェック4：リンク
| ページ | リンクテキスト | URL | 問題内容 |

## チェック5：画像
| ページ | 画像URL | 表示箇所 | 問題内容（404 / 0バイト / 接続不可 など） |

**外部ドメインから読み込んでいる画像**
| ドメイン | 点数 | 状態 |

## チェック6：技術的な確認
| ページ | 項目 | 状態 |

## 総括（優先度の目安）
**要修正（明確な不具合）**
**要確認（表記統一・整合）**
**問題なし**
```

問題なければ「問題なし」と記載してください。

完了後、Task X.X.3: Record（記録） に進んでください。

--------

**Task X.X.3: Record（記録）**

**開発日誌**：
- /devlog Task X.X: 【[サイト名]】校正レポートの作成   # Slash Command

**ドキュメント更新**：
- @docs/proofreading-guide.md          # 校正ガイド
- @logs/CHANGELOG.md                   # 実装内容・進捗状況の記録
- @logs/ERRORLOG.md                    # エラー・問題解決策の記録
- @logs/PATTERNS.md                    # 新しい知見・コーディングパターンの記録
- @logs/devlog/YYYY-MM-DD_TaskX.X_【[サイト名]】校正レポートの作成.md    # 詳細な振り返り

**Self-Improvement**：
今回のタスクでユーザーから修正・指摘を受けた場合は、必ず以下を記録してください：
- 同じミスを繰り返さないためのルールを `@logs/PATTERNS.md` に追記
- エラー・問題の根本原因と解決策を `@logs/ERRORLOG.md` に追記

「Task X.X: 【[サイト名]】校正レポートの作成 → ✅完了」と報告してください。

開始してください。

Claude Code + /chrome のポイント

複数ページを自動巡回できる
リンクを実際にfetchして404確認できる
タブ切り替えを自動クリックして検証できる
<meta> タグや GA タグをソースから直接確認できる
コンソールエラーを直接読める
ただし視覚的な誤字の検出精度は Claude for Chrome に劣る場合がある

実際に使った結果

Claude for Chrome が検出したもの

「ファザード」→「ファサード」の誤字（同ページに「ファサード」表記も混在）
表記ゆれ（まち／街、括弧【】／（）、スラッシュ前後スペース）
撮影時期の記載不整合（「11月・12月」と「10月」が同一ページに併記）

Claude Code + /chrome が検出したもの

フッターのリンク切れ
スラッグの typo（famiry → family）
タブ切り替え動作の不安定さ

どちらも検出できなかったもの

所要時間の画像内テキスト（施設写真に焼き込まれているため）→ 手動確認が必要

手動確認が必要なもの

AIに任せにくい項目は引き続き手動で確認する：

画像に焼き込まれたテキストの数値照合（スライドショーの施設写真内など）
フォームのスパムフィルター確認（実際に送信してメールが届くか）
意図的な仕様の判断（特殊文字・特殊スタイルなどが「バグ」か「仕様」かの切り分け）

推奨フロー

① Claude for Chrome（ページごとに実行）
   → テキスト誤字・表記ゆれ・レイアウト崩れ・数値整合

② Claude Code + /chrome（全ページ一括）
   → リンク切れ・meta/OGP/タグ確認・Noindex・GA/GTM・タブ動作

③ 手動
   → 画像内テキスト・フォーム送信テスト・意図的仕様の判断

特にリリース前は②の技術的チェックを忘れずに。
リンク切れは目視では気付きずらい部分です。

Claude for Chrome・Claude Code の /chrome 連携はベータ機能のため、今後仕様が変わる可能性があります。