WEBディレクターが押さえておくと役立つかも　- よく使用するツール【基本編】

こんにちは。ディレクターのNです。

WEBディレクターとして働く上で、見積もり、スケジュール作成、最終チェックなど、多数あるタスクのなかで、コーディングの知識がなく、自分では判断できない…そんな経験ありませんか？

ということで、今回はツール編。ディレクターが押さえておくと便利なチェック時にツールでわかるコーディングチェックのポイントをまとめていこうと思います。

✔HTMLのタグの記述ミスはないか

Google chromeの拡張機能であるHTMLエラーチェッカー

HTMLのマークアップが正しく出来ているかの確認は、表示崩れなどを防ぐのに必須です。
こちらのツールは、閲覧しているページのHTMLのタグの記述ミスなどをエラー表示してくれます。
閉じタグは合っているか？入れ子になっていないか？などコードが分からなくても基本的な記述ミスが発見できるのでとても便利です。

✔レイアウトの崩れはないか

Google chromeの拡張機能であるPesticide for Chrome

ページ上の全ての要素のアウトラインを要素ごとに異なるカラーで表示することで、cssが分からなくても、わずかなズレなども目で見て判断できます。
レスポンシブの確認もすごくはかどります。

✔バリデートは正しいか

外部ツールであるW3C Markup Validation Service

コーディングしたHTMLがW3Cに準拠した記述になっているのかを確認します。
正しくない文法で書かれたコーディングをエラーとして原因も含めて確認でき、また、正しいコードを使用することでその後の運用におけるWebページ管理の複雑化も防ぐことができます。

✔見出しの文法は正しいか

Google chromeの拡張機能であるHTML5 Outliner

見出しタグとは､見出しを記述するためのHTMLタグです｡
見出しタグにはh1からh6までがあり､正しい順番､構造で使う必要があり、SEO的にも､ユーザビリティ的にも必須と言えます。
・HTMLファイル
・URL
・HTMLソース
を入力するとアウトライン構造が表示されるので、HTMLがわからなくても正しくアウトライン化されているかひと目で判断することができます。

✔おまけ

スマホやタブレットなどで検証をするときに、サイトのURLを打ってページを開いている方はいませんか？
Google chromeの拡張機能であるThe QR Code Extension

チェックするサイトを開いた状態で、The QR Code ExtensionをクリックするとQRコードをその場で吐き出してくれるので、それをカメラで読み込めばそんな手間も省けます！

アドレスバーに地道に入力している方、これでサクッと確認に進みましょう！