見出し画像

WEBディレクターが押さえておくと役立つかもーコーディングのポイント【基本編】

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

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

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

✔ hタグの使用は適切か

hタグとは、ユーザーや検索エンジンに対して文章の中で重要な文章を伝えるために、HTMLでマークアップを行う見出しタグです。見出しタグのhはheadを表し、見出しタグの種類は<h1>から<h6>まで6種類あり、ページの構成に合わせて使用します。きちんと記述することで、SEO対策でも重要な役割を果たします。
そのほかにも、header, nav, main, section, article, footerなども適切に使用されているかの確認も重要です。

✔ リンク、画像のパスは正しく記述されているか

パスには2種類あります。
絶対パス:http://〜 パスが全てフルで書かれている
相対パス:/〜/ 現在のディレクトリからのパスで書かれている
一般的には相対パスが使用されます。例外として、外部リンクの場合は絶対パスになります。
テストサイトで確認→本番化という流れをとる際など、絶対パスで内部リンクが書かれていると、本番化した際にパスを書き換えないと表示されないなどといった事故につながるので、絶対に確認しましょう。

✔ altの記述は正しいか

alt属性(オルト属性)とは、HTMLのimg要素の中に記述される、画像の代替となるテキスト情報です。 テキストブラウザや音声読み上げブラウザでは、画像ではなくalt属性に記載された内容がテキストとして表示、または読み上げられることになります。
また、例えばMV(h1)が画像の場合、altタグを必ず設定する。などSEO的な観点でも重要になってきますので、画像と同じ意味のテキストがきちんと入っているかの確認は必須です。

✔ meta情報は適切か

metaタグは、Googleをはじめとする検索エンジンやブラウザ等のシステムに向けて書くHTMLコードのことで、システム向けの情報のため、ユーザーがWEBサイトを訪れた際に見ることは決して多くありません。ただし、SEO対策においては間接的に影響するので非常に重要な要素です。
headタグ内に記述がありますので、title(タイトル)、description(ディスクリプション)、keyword(キーワード)、OGP画像など
必要なmeta要素がきちんと入っているか忘れずに確認しましょう。
ついでにといってはアレですが、head内でfavicon画像の設定もお忘れなく。

✔ アクセス解析用タグは埋め込まれているか

一般的に多く使用されているのは、GTM(Googleタグマネージャ)だと思いますので、今回はGTMで説明します。
GTMの埋め込みは2箇所あります。
1つ目はhead内、もう1つはbody直下になりますので、2箇所とも適切に埋め込まれているか確認してみてください。

今回は、コードが書けなくても見て判断できる記述のチェックポイントに関してでした。
コーディングの知識は、作りたいサイトのイメージを伝えやすくなり、より具体的な指示が出せるようになるなど、Webディレクションをするに当たって大きなアドバンテージになります。
興味がある方はぜひもっと深く勉強してみてはいかがでしょうか。

この記事が気に入ったらサポートをしてみませんか?