2026.10.17技術メモ

Webサイトのテスト・チェック項目をClaudeのスキル化した

Webサイトを納品する前や公開する前に、毎回同じチェックをしていました。metaが入っているか、OGP画像やファビコンはあるか、閉じタグを忘れていないか、ホバーを付け忘れていないか、ダークモードで文字が読めなくならないか。項目が多く、手で見ていると、どこかで漏れが出ます。

そこで、このチェックをClaude Codeのスキルにしました。名前は「web-site-check」です。ローカルで起動したサイトを検査して、問題点をレポートにまとめ、直してよいか確認してから修正まで進めてくれます。自分で作ったサイトの納品前チェックにも、改修で預かった既存サイトの洗い出しにも、同じ流れで使えます。

GitHubで公開しているので、Claude Codeを使っている人はそのまま試せます。

できること

/web-site-check と入力すると起動します。最初に質問がまとめて1回だけ出て、答えたあとは検査とレポートの作成まで止まらずに進みます。

レポートの4つの区分

見つけた問題は重大さで4つに分けて出します。

区分意味 🔴 要修正どんな案件でも直すべきもの 🟠 要判断案件の仕様やデザインの意図で、直すかどうかが変わるもの 🟡 目視確認スクリーンショットなどを見て人が判断するもの ⚪ 手動確認実機での確認やメールの到達など、スキルの外で行うもの

問題がなかった項目は「🟢 合格 42件」のように件数だけを出します。合格の内訳まで並べると、本当に直すべき項目が埋もれてしまうためです。

「要判断」を分けたのは、印刷用のCSSや計測タグのように、案件によって要るか要らないかが変わる項目があるからです。こうした項目はなぜ聞いているのかを添えて対応するかどうかを確認します。

3つの実行プロファイル

検査の範囲はクイック・標準・フルの3段階から選べます。

プロファイル時間の目安主な内容クイック数分 HTMLの構文エラー、meta・OGP・ファビコン、noindexの残り、画像、リンク切れ、見出し構造標準 5〜20分クイックに加えて、横スクロール、文字サイズ、ダークモード、JSが止まったときの表示、フォーム、Lighthouse フル 10〜40分標準に加えて、ホバー、キーボード操作、印刷、Safari・Firefoxでの差、低速回線、公開事故の確認

標準とフルは時間とトークンを使うので、選ぶ前にそのことを伝えるようにしています。

チェックしている項目

項目はかなり多いので、領域ごとに主なものを挙げます。

HTMLとmeta

閉じタグ忘れ、不正なネスト、IDの重複
title、description、viewport、canonical、hreflang
OGP画像とファビコンが実際に取得できるか、OGP画像が絶対URLか
構造化データ（JSON-LD）の書式と、主要なプロパティ

公開前の事故

noindexやrobots.txtの全拒否が残っていないか
ダミーテキスト、localhostのURL、sitemap.xmlの仮ドメインが残っていないか
.envや.gitが公開フォルダに入っていて、URLで取得できてしまわないか

画像

WebPやAVIFになっているか（ビルド後にJPEGやPNGのまま配信していないか）
表示サイズに対して実寸が大きすぎないか（2倍までは許容、3倍を超えたら要修正。ヒーロー画像などは要判断）
altの有無、altがファイル名になっていないか、widthとheightがあるか

表示崩れ

320〜1440pxで横スクロールが出ないか。出たら、はみ出している要素も示します
本文の文字が10px以下になっていないか
100vhを使っていて、スマホでアドレスバーに隠れる可能性がないか
固定ヘッダーの下に見出しが隠れていないか

表示モード

ダークモードにすると文字が読めなくならないか
背景色と文字色の片方だけを指定していないか（Android Chromeの強制ダークで、背景だけ黒くなる原因になります）
ブラウザの文字サイズを200%にしたときに崩れないか

JavaScriptが動かないとき

JSが無効のときや、JSファイルの読み込みに失敗したときに、ローディング画面が消えずに残らないか
フェードイン用のopacity: 0が外れず、本文が透明のままにならないか

フォーム

送信ボタンを連打したとき、二重に送信されないか
必須項目が空のまま送れてしまわないか
送信に失敗したとき、利用者にそれが伝わるか

読み上げ

全角スペースで字間を空けた見出し（「お　問　い　合　わ　せ」）
HTML上で全部大文字の英単語（CONTACTなど）
半角カナ、装飾の記号（★★★★☆）、日本語ページの中の英文に付いていないlang

操作（フル）

マウスを乗せても見た目が変わらないリンク（ホバーの付け忘れ）
Tabキーで移動したとき、フォーカスの位置が見えるか

ホバーの付け忘れはマウスを乗せる前と後のスタイルを比べて検出しています。変化がなかった要素には赤い点線を付けたスクリーンショットを残すので、どれが対象かを目で確かめられます。

使い方

インストール

リポジトリを、Claude Codeのスキルのフォルダに置くだけです。

git clone https://github.com/inarodev/web-site-check.git ~/.claude/skills/web-site-check

PlaywrightやLighthouseを手動で入れる必要はありません。初回の実行時に「インストールしてよいですか？」と聞かれ、承認すると自動で入ります。npmパッケージはスキルのフォルダの中に、ブラウザはPlaywrightの既定の場所に入るので、検査するプロジェクトには何も追加しません。

実行の流れ

チェックしたいサイトのフォルダでClaude Codeを起動して、次のように入力します。

/web-site-check

あとは次の流れで進みます。

サイトの構成（静的HTML、Next.js、Astro、WordPressのテーマ）と起動方法を自動で調べる
質問が1回だけ出る（プロファイル、インストールの可否、自動で判定できなかった項目）
サイトを起動して検査し、レポートを出す
「全部進める／選んで進める／レポートのみ」を聞かれ、承認した範囲だけ修正する

自分で作った案件でも、レポートを見てから直すかどうかを決めたいことがあります。そのため、修正の前には必ず確認が入るようにしました。

出力例

不具合をわざと入れたテスト用のサイトで、標準プロファイルを実行したときのレポートの一部です。

# Webサイトチェック レポート

- 対象：http://localhost:4174（3ページ）／構成：静的HTML
- プロファイル：標準
- 件数：🔴 要修正 23項目（38箇所） / 🟠 要判断 18項目 / 🟡 目視確認 6項目 / 🟢 合格 236件
- 優先して見る項目：
  - .env などの公開してはいけないファイルが見える
  - JavaScriptが動かないとローディング画面が消えない
  - 送信ボタンを連打すると、送信が複数回行われる

## 🔴 要修正

- [ ] **JavaScriptが動かないとローディング画面が消えない**（1箇所 / /）
  - 箇所：/ ／ div#loader「Loading...」 ／ 証跡：screenshots/top__nojs.png
  - 理由：JSでローディング画面を消す作りのため、JSが無効・エラーで止まると、画面全体が覆われたままになる。
  - 修正案：CSSアニメーションで数秒後に自動で消すなど、JSなしでも消える仕組みにする。

各項目には場所・理由・修正案が付き、アクセシビリティに関わる項目にはWCAGの達成基準の番号も添えます。スクリーンショットなどの証跡は .web-site-check/ に保存されます。

実際に使ってみて

まず、作業中で公開前のサイトで試しました。赤は0件で、オレンジの指摘がいくつか出たので、その中から対応するものを選んで直しました。

次に、公開済みのサイトでもフルでチェックしたところ、赤の指摘が出ました。原因はコードではなくCloudflareの設定で、レポートにはCloudflare側で何を変えればよいかまで書かれていました。その通りに直して解決です。コードだけでなく、ホスティング側で必要な作業も教えてくれます。

気をつけたこと

検査するのは、ローカルで起動したサイトだけです。公開中のサイトを外から巡回するものではないので、他人のサイトを勝手に調べることにはなりません。

フォームの検査では、送信リクエストをブラウザの中で止めています。テスト中に本番へ問い合わせが届くことはありません。

プライバシーポリシーや特定商取引法の表記のような法的な項目は、「必要です」と言い切らず、確認事項として挙げるだけにしています。判断するのはクライアントや専門家だと考えているからです。

できないこと

自動の検査で見つかる問題は一部です。スクリーンリーダーでの通し読みや、iPhone・Android・LINEのアプリ内ブラウザでの実機確認は、人が行う必要があります。レポートにはこうした項目を「手動確認」として毎回載せるようにしています。

また、ローカルで検査するため、本番のサーバーやCDNの設定（HTTPS、セキュリティヘッダー、圧縮など）は確かめられません。これも、本番のURLで確認する項目としてレポートに出します。

使っている技術

検査のスクリプトはTypeScriptで書いていて、中では次のものを使っています。

Playwright：ブラウザを動かして、表示崩れ、ダークモード、ホバー、キーボード操作などを確かめる
Lighthouse：アクセシビリティ、ベストプラクティス、SEO、パフォーマンスの監査
html-validate：閉じタグ忘れなどの構文チェック
cheerio：HTMLを読んで、metaやリンク、画像を調べる

Lighthouseのスコアは参考値として出し、合格ラインは設けていません。

個別の指摘を、4つの区分に振り分けて出します。

配布

スキルはGitHubで公開しています。

https://github.com/inarodev/web-site-check

納品前のチェックは、案件ごとに同じことの繰り返しになりがちです。同じように手でチェックしている人の手間が、少しでも減ればうれしいです。

スキルは今後も随時アップデートしていく予定です！

inaro.dev

Xで共有