HTMLのコーディングが終わり、見た目もデザイン通りに仕上がった。それだけでは、納品前のチェックとしてまだ足りません。
ブラウザでの表示に問題がなくても、HTMLの文法エラーが残っていることがあります。SNSでシェアしたときにOGP画像（シェア時に表示されるサムネイル）が出ないこともあります。こうした不具合は目視では見つけにくいものです。
僕が納品前に必ず使っているチェックツールがあります。どれも無料で、数分あれば確認できます。
なぜ納品前チェックが必要なのか
ブラウザで正しく表示されていれば十分だと思われがちですが、Webサイトを見ているのはブラウザだけではありません。
- GoogleのクローラーがHTMLを読んで検索順位を決めている
- SNSのシステムがOGPタグを読んでシェア時の表示を作っている
- スクリーンリーダーがHTMLの構造をもとにページを読み上げている
どれも「見た目」ではなく「HTMLのコード」を読んでいます。コードに問題があると、検索に引っかからない、シェア時に画像が出ない、アクセシビリティの質が低い。そういった不具合につながります。
目視では拾えない問題を、ツールで機械的に洗い出す。納品前チェックはそのための工程です。
W3Cバリデーター — HTMLの文法チェック
最初に紹介するのはW3Cバリデーターです。W3C（World Wide Web Consortium）は、HTMLやCSSの仕様を策定する国際的な標準化団体です。このツールでは、自分が書いたHTMLが仕様に沿っているかを確認できます。
使い方
チェック方法は用途によって使い分けます。
- Address — 公開済みサイトのURLを入力してチェック
- File Upload — ローカルのHTMLファイルをアップロードしてチェック
- Direct Input — HTMLコードを直接貼り付けてチェック
テスト環境にアップ済みなら「Address」、ローカルでの確認なら「File Upload」が便利です。チェックボタンを押すと、エラーと警告がリストで表示されます。
よくあるエラーと直し方
閉じタグの漏れ
<div> を開いたのに閉じていない、</p> が足りない、というケースです。コードが長くなるほど見落としやすく、ツールで見つけると確実です。
alt 属性の未設定
<img> タグに alt 属性がないと警告が出ます。装飾用の画像でも alt="" と空の値を入れておくのがルールです。
タグの入れ子の間違い
<p> タグの中に <div> を入れるとエラーになります。<p> の中にはブロック要素（大きなまとまりの要素）を入れられないと、HTMLの仕様で決まっているためです。
重複した id 属性
同じページ内で同じ id を複数の要素に使ってしまうケースです。id はページ内で一意（1つだけ）でなければなりません。JavaScriptの動作にも影響するので、見つけたら直しておきます。
エラーが0件になるまで直す必要はありませんが、赤色のエラー（Error）は修正必須です。黄色の警告（Warning）は、内容を見て対応が必要かどうかを判断してください。
OGP確認ツール — SNSシェア時の表示チェック
OGP（Open Graph Protocol）は、SNSでシェアされたときの表示を決める仕組みです。タイトル・説明文・画像をそれぞれ指定できます。
正しく設定されていないと、シェア時にタイトルが出なかったり、意図しない画像が表示されたりします。
使い方
ラッコツールズの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 load」をクリック
数十秒で結果が表示され、各カテゴリが100点満点でスコア化されます。
見るべきカテゴリ
Performance（パフォーマンス）
ページの読み込み速度を計測します。
画像のサイズが大きすぎる、使っていないCSSやJavaScriptが読み込まれている、といった問題を検出してくれます。
LCP（最大コンテンツの表示時間）とCLS（レイアウトのズレ）は、Googleの検索ランキングにも影響します。僕はここを特にチェックしています。
Accessibility（アクセシビリティ）
コントラスト比が低い、alt 属性が未設定、フォーム要素に label がない、といった問題を検出します。指摘された項目には直し方の説明も付いているので、対応しやすいです。
SEO
meta description が設定されていない、リンクテキストが「こちら」になっている、ビューポートの設定がない。こうしたSEO上の基本的な問題をチェックします。
Best Practices（ベストプラクティス）
HTTPSが使われているか、非推奨のAPIを使っていないか。Webの標準的な慣行に沿っているかを確認します。
すべてのカテゴリで100点を目指す必要はありませんが、赤色（0〜49点）のカテゴリがあれば改善が必要です。パフォーマンスとアクセシビリティはユーザー体験に直結するので、僕はこの2つを優先しています。
おわりに
W3Cバリデーター、OGP確認ツール、見出しチェッカー、Lighthouseで機械的にチェックする方法でした。
サイトの規模や案件によっては、ここまで全部見なくても困らないこともあると思います。
ただ、公開前の数分でこれだけ拾えるなら価値はあると思っていて、僕は納品直前ではなくコーディングの区切りごとに回すようにしています。ぜひ試してみてください！