市場価値診断ならミイダス!

Webディレクターが覚えておきたいコーディングの基礎知識

Webディレクターが覚えておきたいコーディングの基礎知識を紹介します。

Webディレクターにコーディング知識が必要な場面

Webディレクターがコーディング知識が必要な場面はWebサイトの仕様を決めるとき、コーダーに指示を出すとき、品質チェックのときなどです。

コーディング知識があるとWebディレクションをするに当たって大きなアドバンテージになります。

  • コーダーに意図を正確に伝えることができる
  • 工数の見積もりが現実的になる
  • スケジュール作成が的確になる

Webディレクターが覚えておきたいコーディングの基礎知識

コーディングとはプログラミングの一連の作業の中でソースコードを書くことです。

具体的にはデザインカンプをもとにソースコードを書いてWebページを構築する作業です。

コーディングは基本的にコーダー(フロントエンドエンジニア)が担当します。

Webディレクションの現場では主にHTML、CSS、JavaScript、PHPなどのコーディング知識があると業務が捗ります。

  • HTML
  • CSS
  • JavaScript
  • PHP

それぞれの言語の特徴を確認しておきましょう。

HTMLとは

HTMLはWebページの構造を作るマークアップ言語です。

簡単に言うと、ドキュメントにリンクや画像、動画などを埋め込める「ハイパーなテキスト」という意味です。

タグを用いて文章に意味や役割を持たせます。

CSSとは

CSSは色やサイズ、要素の大きさなどを調整するマークアップ言語です。

html文書内で装飾したい部分に class や id といった目印をつけて、その目印に対して大きさ・色・配置などのデザインを設定します。

JavaScriptとは

JavaScriptはWebページに動きをつけるプログラミング言語です。

JavaScriptを使うことで、自動的に画像が切り替わるスライダー、ポップアップ、アコーディオンパネル、タブ切り替え、クリック時の挙動などの動作をつけることができます。

JavaScriptはクライアントサイド(ブラウザ)で動作します。

PHPとは

PHPはサーバーサイドでコードを実行するプログラミング言語です。

PHPを使うことでオススメ記事、新着記事、会員ごとに情報を出しわけるなどの動的なWebページ生成が可能です。

HTMLに埋め込んで使うことができたり、問合せフォームから送信されたデータを受け取ることができたり、データベースと連携するなどの機能が実装できます。

Webディレクターが現場で必要なコーディングの基礎知識

Webディレクターがコーディングのどこをチェックするのか?を解説します。

デザインカンプ通りにコーディングされているか

デザインカンプ(デザイン完成図)通りにコーディングされているかをチェックします。

デザインとテストアップされたWebページを見比べて、デザインが反映されているかを目視で確認します。

レスポンシブデザインが適切か

レスポンシブデザインが適切かをチェックします。

パソコン、スマートフォン(、タブレット)でのデザイン表示が最適かを確認します。

テキストのサイズ、画像内の文字の可読性、表は見やすいか、要素の過不足はないか、自然な構成になっているかなどを確認します。

パソコン用のデザインだけ固めて、スマートフォン版についてはコーディング時に確認することも多いです。

検証時はGoogle Chromeなどのブラウザの検証モードや、実機で確認します。

モバイル対応についてはモバイル フレンドリー テストを利用するといいです。
改善案も提示してくれます。

HTMLタグが適切に使われているか

HTMLで正しくマークアップされているかを確認します。

とくに見出しタグ h1〜h6 はSEO対策でも重要です。

また、header、nav、aside、main、footerなど、ページ内の役割を明示するために適切にマークアップしているかの確認が必要です。

パスの記述は適切か

パスの記述が適切か確認します。

パスは一般的に https からはじまる絶対パスの場合と、ディレクトリから始まる相対パスの2種類があります。

一般的に外部リンクは絶対パスで、内部リンクは相対パス(※)で記入します。

※ドメイン移行時に修正が不要のため。また、テストサイト→本番サイトと開発をすすめる上で、内部リンクを絶対パスで記述していると本番公開時にパスを書き換える必要があるため、また、テストサイトへのリンクが残ると事故につながるため

Webパーツの動きや、ホバー時のアクションは適切か

Webパーツの動きや、ホバー時のアクションが適切かを確認します。

スライダー、アコーディオンパネル、タブ切り替え、フェード効果、ボタン上にマウスをホバーしたとき/クリック時の挙動などを確認します。

画像のaltは入っているか・適切か

画像のalt(代替テキスト)は入っているか・適切かを確認します。

altは画像が表示されないときのテキスト情報。

画像のSEO対策にもなるため、画像を表す内容が適切に記載されていることを確認します。

タップ可能エリアは十分か

タップ可能エリアは十分かを確認します。

グローバルナビゲーション、リンクテキスト、ボタンなどの要素の大きさが適切かを確認します。

とくにスマートフォン時のデザインが重要です。

タップ可能エリアのGoogle推奨サイズは 48px × 48px 以上となります。

メタ情報(title、description、OGP)は適切か

title、description、OGPなどのメタ情報が適切かを確認します。

HTMLのhead内に記述されているこれらの内容が問題ないか確認します。

アクセス解析タグの設置確認

指定のアクセス解析タグが設定されているかを確認します。

Googleアナリティクスでは head内 への記述が必要です。

タグが正確に設置されているか、計測できているかを確認します。

ページスピードのチェック

ページスピードが極端に遅くないことをチェックします。

重たすぎる画像、動画、ソースコードの書き方、JavaScriptの処理など、さまざまな要因でWebページは重たくなり、表示速度が遅くなります。

アクセスしてページ表示が遅すぎるWebページはユーザビリティを低下させ、離脱にもつながるため、ページスピードは重要です。

ページスピードはPageSpeed Insightsで計測可能です。
遅い場合は改善案を提示してくれるのでエンジニアと相談しましょう。

アクセシビリティ

アクセシビリティが適切かを確認します。

アクセシビリティは、利用するすべての人が不自由なくWebページを使えるようにする考え方です。

文字サイズの変更が容易にできること、文字と背景の色のコントラストがはっきりしていること、画像が見れなくても代替文字で理解できる状態であること、スクリーンリーダーなどの音声読み上げソフトに対応していることなど、誰もが不自由なくWebページを利用できるようにするための対応です。

※プロジェクトによってはアクセシビリティの基準を設けており、一定レベルをクリアする必要があります

Webディレクターはコーディングの基礎を身につけておくと良い

Webディレクターはコーディングの基礎を身につけておくと良いです。

オンライン学習サイトで手を動かしながら学ぶこと、技術ブログで知識をインプットすることの両方を普段から取り入れておくとスキルアップできます。

以下にオススメのサイトを載せておきます。

オンラインで学習できるサイト

情報収集サイト

まとめ

コーディング時のチェック項目はここで紹介した以外にもたくさんあります。

Webディレクターとしてできることは最大限できるようにすると、現場で重宝されるWebディレクターになれます。

自分でコーディングを覚える事、日々の情報収集も欠かさずに、日々スキルアップしてきましょう。

Webディレクターになるための勉強方法はこちらにまとめています。

Webディレクターになるための勉強法
Webディレクターになるためのデザイン、プログラミング、SEO対策、Webディレクションの勉強方法を解説します。セミナーや勉強会を探せるサイトや、仕事を受けながら勉強する方法もあります。勉強がんばりましょう!