WEBディレクターとして働く上で、見積もり、スケジュール作成、最終チェックなど、多数あるタスクのなかで、コーディングの知識がなく、自分では判断できない…そんな経験ありませんか？ということで、今回はツール編。ディレクターが押さえておくと便利なチェック時にツールでわかるコーディングチェックのポイントをまとめていこうと思います。
ARCHETYP Staffingでは現在クリエイターを募集しています。
エンジニア、デザイナー、ディレクター以外に、生成AI人材など幅広い職種を募集していますのでぜひチェックしてみてください！
ボタンから募集中の求人一覧ページに移動できます。
コーディングチェックポイント４選
✔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コードをその場で吐き出してくれるので、それをカメラで読み込めばそんな手間も省けます！
まとめ
いかがだったでしょうか？
今回はディレクターが押さえておくと便利なチェック時にツールでわかるコーディングチェックツールをまとめて行きましたが、今の時代だと拡張機能よりAIに情報を読み込ませる方が早いかもしれませんね。時代の流れに合わせつつ、本当に必要だと思うツールはどんどん活用していきましょう！
ARCHETYP Staffingではクリエイターを募集しています！
私たちはお客様の課題を解決するweb制作会社です。現在webサイト制作以外にも、動画編集者や生成AI人材など幅広い職種を募集していますのでぜひチェックしてみてください！
また、アーキタイプではスタッフ１人１人が「AI脳を持ったクリエイター集団」としてこれからもクライアントへのサービス向上を図り、事業会社の生成AI利活用の支援及び、業界全体の生成AIリテラシー向上に貢献していきます。
生成AIの活用方法がわからない、セミナーを開催してほしい、業務を効率化させたいなどご相談ベースからお気軽にお問い合わせください！
ボタンから募集中の求人一覧ページに移動できます。
