2021.04.26

Google Chrome デベロッパーツールで納品前のエラーチェック！

こんにちは！Maromaroのディレクターoyucoです。

日に日に陽ざし強くなり新緑がまぶしいなぁ、夏がそこまでやってきています。
今は春の土用、季節と運気が変わる準備期間だそうです。

さて、この土用期間は月末月初にあたり連休前でもあるので、ホームページの更新業務が集中します。
複数の案件が走りてんやわんや、なかなか気が落ち着きません。
忙しするぎと凡ミスあったりするので、納品前の検証、クォリティチェックをしっかりおこなっていかないと。

納品前のチェックとは？

テスト確認や納品前のチェックでは、HTMLやCSSのバリデート、デザイン面では表示崩れや画像リンク切れ、余白や文字サイズ、行間やWebフォントを使用していればちゃんとあたっているかということもあれば、SEO対策面ではタイトルやディスクリプション（概要）、キーワードに画像の代替テキスト（alt属性）の設定に、FacebookやTwitterなどのSNSでシェアされやすくするOGP設定や、最近の案件ではよりツイートで目に留まるようTwitterカードの設定なども。また、スライドやプルダウンメニュー、遅延表示などの動きや検索機能があればその動作や機能検証も行います。もちろん目視での誤字脱字やリンク確認、MacやWindowsの各ブラウザにスマホやタブレットでの実機チェックなどなど、制作するコンテンツにもよりますが様々なチェック項目があげられ、デザイナーやコーダー目線でのチェックを行います。

特に納品前のチェックで、ミスに気づかず納品してしまうとお客様よりご指摘いただくことになってしまったり、公開後に「あっ！」となり大慌てで更新対応を行うことになるので重要な工程です。

案件によってはしっかり検証シートで問題か所をつぶしていくものもありますが、既存ページ更新や1ページもののランディングページなどではチェックシートなしでの確認となり、日ごろからチェックシートを作っておけばいいのですが・・（反省）。

このように、人によるチェックだけでは問題か所を見逃すこともあるので、納品前に必ず行うことがあります。

ブラウザのデベロッパーツール活用

ブラウザのデベロッパーツール（開発者ツール）を使ってページ内のエラーチェックをしています。
・Google Chrome：デベロッパーツール
・Firefox、Microsoft Edge、Internet Explorer：開発者ツール

各ブラウザのデベロッパーツールは下記で簡単に利用することができます。
・Windows：F12キー（Mac：Command＋Option＋Iキー）

このデベロッパーツール、機能が豊富で今回は深堀しませんが、ブラウザで表示しているページのHTMLやCSSがちゃちゃっと編集できるので、テキストを差し替えたり、文字色や文字サイズ変更などのちょっとした調整であれば、制作担当に依頼する際に、こんな感じにしてほしいと編集した画面キャプチャをとって修正依頼にも活用しています。

エラーチェックしてみた、方法はこちら

Google Chromeで確認することが多いので、今回はWindowsのGoogle Chromeのデベロッパーツールを使ってエラーチェックを行います。

① エラーチェックするページでF12キーを押してデベロッパーツールが開いたら、ツールバーの「Network」をクリックします。
② 「Disable cache」にチェックを入れてキャッシュを無効化してページをリロードすると、ページに画像やCSSなどが読み込まれてHTTPステータスコードが表示されます。
③ 一覧に「404」エラーがないかを確認します。
▼HTTPステータスコード
「200」OK：正常に読み込み完了です！
「404」アクセスできない：URLやパスミスなどで表示されない