目次 ／ 制作・開発ディレクション ／ QA（品質管理）

コーディングチェック

項目番号 067

10秒でわかる！要点まとめ

• 「見た目が同じ」なら合格ではない。裏側の「汚いコード」は将来の負債になる

• Googleは「ソースコード」を見ている。SEO順位を守るための技術的な検品作業

• Safari、Chrome、Edge。ブラウザごとの「微妙なズレ」を許容するか修正するかを決める

1. 概要：Webサイトの「建築構造」を検査する

コーディングチェックとは、エンジニアが実装したHTML、CSS、JavaScriptなどのソースコードが、デザインデータや仕様書通りに正しく構築されているか、そしてWeb標準（W3C勧告）やSEOの観点から適切な記述になっているかを確認する業務です。

単に画面を見て「デザイン通りになっているか」を確認する表示チェック（ビジュアルチェック）に加え、ツールや目視でソースコードの中身を覗き、「正しいタグが使われているか」「不要な記述がないか」「読み込み速度は適正か」といった内部品質（内部対策）を検証します。

2. なぜ重要なのか：SEO評価とメンテナンス性の担保

ブラウザ上で綺麗に表示されていても、裏側のコードがぐちゃぐちゃ（文法違反だらけ）だと、検索エンジン（Google）はサイトの内容を正しく理解できず、検索順位が上がらない原因になります。

また、不適切なクラス名や重複したCSS記述は、将来の更新作業を困難にします。「ちょっと文字色を変えるだけでレイアウトが崩れる」といったスパゲッティコードを見逃して納品してしまうと、運用フェーズで修正コストが膨らみ、クライアントに迷惑をかけ続けることになります。コーディングチェックは、サイトの「資産価値」を守るための品質保証です。

3. 実務のポイント：バリデーターとセマンティクス

実務では、人間の目と機械のチェックを併用します。

1. バリデーションツールの活用：「W3C Markup Validation Service」などの無料ツールにURLを通し、タグの閉じ忘れや構文エラーがないかを機械的に判定します。エラーゼロを目指すのが基本です。

2. セマンティック（意味論的）な記述：<h1>から<h6>の見出しタグが順序よく使われているか、画像に適切なalt属性が入っているか、ボタンは<div>ではなく<button>や<a>で作られているかなど、文書構造の正しさをチェックします。

3. クロスブラウザチェック：WindowsとMac、iOSとAndroid、ChromeとSafariなど、異なる環境で表示崩れがないかを確認します。特にiPhone（Safari）特有のバグは頻出するため、実機確認が必須です。

4. スキルアップのヒント：「検証ツール」で構造を透視する

Google Chromeの右クリック→「検証」で、プロが書いたコードを見てみましょう。 「なぜここはFlexboxを使っているのか？」「Gridレイアウトはどう動いているのか？」といった最新のCSS技術に触れることで、エンジニアに対して「ここはGridで組んだ方がスマホ対応しやすいのでは？」といった技術的な提案ができるようになります。

また、画像の容量チェックも重要です。見た目が綺麗でも、巨大な画像ファイル（数MB）をそのままアップロードしていないか、Networkタブで通信量を確認する癖をつけましょう。