コーディングが完了して、見た目もデザイン通り。ですが、納品前にちょっと待ってください。
ブラウザで見た目が問題なくても、HTMLの文法エラーが残っていたり、SNSでシェアしたときにOGP画像（シェア時に表示されるサムネイル）が出なかったりすることがあります。こうした問題は目視では見つけにくいので、ツールを使ってチェックする習慣をつけておくと安心です。
今回は、僕が納品前に必ず使っている4つのチェックツールを紹介します。どれも無料で、数分でチェックできるものばかりです。
なぜ納品前チェックが必要なのか
「ブラウザでちゃんと表示されているなら問題ないのでは？」と思うかもしれません。でも、Webサイトを見ているのはブラウザだけではありません。
- GoogleのクローラーがHTMLを読んで検索順位を決めている
- SNSのシステムがOGPタグを読んでシェア時の表示を作っている
- スクリーンリーダーがHTMLの構造をもとにページを読み上げている
どれも「見た目」ではなく「HTMLのコード」を読んでいます。コードに問題があると、検索に引っかからない、シェアされたときに画像が出ない、アクセシビリティの品質が低い、といった問題につながります。
見た目のチェックだけでは拾えない問題を、ツールで機械的に見つける。これが納品前チェックの役割です。
W3Cバリデーター — HTMLの文法チェック
最初に紹介するのは、W3Cバリデーターです。W3C（World Wide Web Consortium）は、HTMLやCSSの仕様を策定している国際的な標準化団体です。このツールでは、自分が書いたHTMLがW3Cの仕様に沿っているかどうかをチェックできます。
使い方
W3Cバリデーターには3つのチェック方法があります。
- Address — 公開済みサイトのURLを入力してチェック
- File Upload — ローカルのHTMLファイルをアップロードしてチェック
- Direct Input — HTMLコードを直接貼り付けてチェック
テスト環境にアップ済みなら「Address」、ローカルでの確認なら「File Upload」が便利です。チェックボタンを押すと、エラーと警告がリストで表示されます。
よくあるエラーと直し方
閉じタグの漏れ
<div> を開いたのに閉じていない、</p> が足りない、といったケースです。コードが長くなるほど見落としやすいので、ツールで見つけると確実です。
alt 属性の未設定
<img> タグに alt 属性がないと警告が出ます。装飾用の画像であっても alt="" と空の値を設定しておくのがルールです。
タグの入れ子の間違い
たとえば <p> タグの中に <div> を入れるとエラーになります。HTMLの仕様で、<p> の中にはブロック要素（大きなまとまりの要素）を入れられないと決まっているためです。
重複した id 属性
同じページ内で同じ id を複数の要素に使ってしまうケースです。id はページ内で一意（1つだけ）でなければなりません。JavaScriptの動作にも影響するので、忘れずに修正しましょう。
エラーが0件になるまで直す必要はありませんが、赤色のエラー（Error）は修正必須です。黄色の警告（Warning）は内容を確認して、対応が必要かどうかを判断してください。
OGP確認ツール — SNSシェア時の表示チェック
OGP（Open Graph Protocol）は、WebページがSNSでシェアされたときに表示されるタイトル・説明文・画像を指定する仕組みです。OGPが正しく設定されていないと、シェアされたときにタイトルが出なかったり、意図しない画像が表示されたりします。
使い方
ラッコツールズのOGP確認ツールにURLを入力すると、以下の情報がまとめて表示されます。
og:title— シェア時に表示されるタイトルog:description— シェア時に表示される説明文og:image— シェア時に表示される画像og:url— ページの正規URL
実際のシェア画面に近いプレビューも表示されるので、「Xでシェアしたらどう見えるか」を納品前に確認できます。
よくある設定ミス
og:image のURLが相対パスになっている
OGP画像のURLは、https:// から始まる絶対パス（完全なURL）で指定する必要があります。/images/ogp.jpg のような相対パスだと、SNS側が画像を取得できません。
画像サイズが小さすぎる
Xでの表示を考えると、OGP画像は1200×630ピクセルがおすすめです。これより小さいと、サムネイルが粗く表示されたり、表示されないことがあります。
og:title と <title> が一致していない
意図的に変えている場合は問題ありませんが、設定忘れで中身が空になっていたり、テスト用のテキストが残っていたりすることがあります。納品前に実際の表示を確認しておきましょう。
見出しチェッカー — hタグの階層チェック
見出しタグ（h1〜h6）の使い方は、SEOの基本でありながら意外と間違いが多い部分です。ラッコツールズの見出し抽出ツールを使うと、ページ内の見出しタグを一覧で確認できます。
正しい見出しの階層とは
見出しタグは、本の「章・節・項」のように階層を守って使います。
h1: サイトのタイトル（ページに1つだけ）
h2: サービス紹介
h3: Web制作
h3: 保守運用
h2: 料金プラン
h3: ライトプラン
h3: スタンダードプラン
h2: お問い合わせこのように、h1 → h2 → h3 の順番で、飛ばさずに使うのが基本です。
よくあるNG例
番号が飛んでいる
h2 の次に h4 が来ている、h1 の直下に h3 がある、といったケースです。クローラーがページの構造を正しく理解できなくなります。
見出しの順番がバラバラ
h2 → h1 → h3 のように順序がおかしいケースです。特にヘッダーやフッターのロゴを h1 にして、本文の見出しが h2 から始まる構成自体は問題ありませんが、本文中で h1 が再度登場するのはNGです。
装飾目的で見出しタグを使っている
「文字を大きく太くしたいから h2 を使う」というのは間違った使い方です。見た目の調整はCSSで行い、見出しタグはあくまでコンテンツの階層構造を表すために使ってください。
Lighthouse — 総合的なパフォーマンス・アクセシビリティチェック
Lighthouse（ライトハウス）は、Googleが提供しているWebページの品質チェックツールです。Google Chromeの開発者ツール（DevTools）に標準で入っているので、追加のインストールなしで使えます。
使い方
- Google Chromeでチェックしたいページを開く
- 右クリック →「検証」で開発者ツールを開く
- 上部タブの「Lighthouse」を選択
- チェックしたいカテゴリを選んで「Analyze page」をクリック
数十秒で結果が表示され、各カテゴリが100点満点でスコア化されます。
見るべきカテゴリ
Performance（パフォーマンス）
ページの読み込み速度を計測します。画像のサイズが大きすぎる、使っていないCSSやJavaScriptが読み込まれている、といった問題を検出してくれます。特にLCP（最大コンテンツの表示時間）とCLS（レイアウトのズレ）は、Googleの検索ランキングにも影響するので要チェックです。
Accessibility（アクセシビリティ）
コントラスト比が低い、alt 属性が未設定、フォーム要素に label がない、といったアクセシビリティの問題を検出します。指摘された項目には「どう直せばいいか」の説明も付いているので、対応しやすいです。
SEO
meta description が設定されていない、リンクテキストが「こちら」になっている、ビューポートの設定がない、といったSEO上の基本的な問題をチェックします。
Best Practices（ベストプラクティス）
HTTPSが使われているか、非推奨のAPIを使っていないか、といったWebの標準的な慣行に沿っているかを確認します。
すべてのカテゴリで100点を目指す必要はありませんが、赤色（0〜49点）のカテゴリがあれば改善が必要です。特にパフォーマンスとアクセシビリティは、ユーザー体験に直結するので優先的に対応しましょう。
まとめ
今回紹介した4つのツールをおさらいします。
- W3Cバリデーター — HTMLの文法エラーをチェック
- OGP確認ツール — SNSシェア時の表示をチェック
- 見出しチェッカー — hタグの階層構造をチェック
- Lighthouse — パフォーマンス・アクセシビリティ・SEOを総合チェック
どれも数分あれば終わるチェックです。納品前のワークフローに組み込んでおけば、「あとから問題が見つかって修正する」という手戻りを防げます。
コーディングの品質は、見た目だけでは測れません。ブラウザに映らない部分にどれだけ気を配れるかが、サイトの検索評価やユーザー体験を左右します。チェックする習慣がつけば、それだけでコードの品質は確実に上がっていきます。