Webディレクターにコーディング知識・スキルは必要なのか？
結論。Webディレクターはコーディングの知識レベルはあった方が良いです。Webディレクターはコーディングができなくても仕事はできますが、要件定義、デザイナーやエンジニアへの指示、品質チェック、納品・公開時などで、業務の幅が格段に広がるからです。
今回はそんな疑問を持っている人向けに、元Webディレクターの僕がWebディレクターにコーディング知識・スキルが必要なのか、実務での活かし方、勉強方法を紹介します。
Webディレクターにコーディング知識・スキルがあることのメリット
Webディレクターにプログラミング知識があると、こんなメリットがあります↓
・コーダー、Webエンジニアに正確に指示を出せる
・作業工数の見積もり精度が上がる
・余裕を持ったスケジュールが引ける
・出来上がりの品質を担保できる
・自分で作業に入れるので回せる案件が増える
Webディレクターは、プログラミングスキルがあるとWebディレクションをする上で大きなアドバンテージになります。
Webディレクターの実務でコーディング知識が活かせる場面
Webディレクターが実務でどんなコーディング知識が必要なのか？を僕の経験から紹介します。
デザイン通りにコーディングされているか
デザインカンプ（デザイン完成図）通りにコーディングされているかをチェックします。
デザインとテストアップされたWebページを見比べて、デザインが反映されているかを目視で確認します。
レスポンシブデザインが適切か
レスポンシブデザインが適切かをチェックします。
パソコン、スマートフォン（、タブレット）でのデザイン表示が最適かを確認します。
テキストのサイズ、画像内の文字の可読性、表は見やすいか、要素の過不足はないか、自然な構成になっているかなどを確認します。
パソコン用のデザインだけ固めて、スマートフォン版についてはコーディング時に確認することも多いです。
検証時はGoogle Chromeなどのブラウザの検証モードや、実機で確認します。
モバイル対応についてはモバイル フレンドリー テストを利用するといいです。
改善案も提示してくれます。
メタ情報（title、description、OGP）は適切か
title、description、OGPなどのメタ情報が適切かを確認します。
HTMLのhead内に記述されているこれらの内容が問題ないか確認します。
titleとdescriptionはSEOでも重要です。
HTMLタグが適切に使われているか
HTMLで正しくマークアップされているかを確認します。
特に、h1〜h6、画像のalt はSEO対策としても重要です。
また、header、nav、aside、main、footerなど、ページ内の役割を明示するために適切にマークアップしているか確認します。
パスの記述は適切か
パスの記述が適切か確認します。
パスは一般的に https からはじまる絶対パスと、/service/ などのディレクトリから始まる相対パスの2種類があります。
外部リンクは絶対パスになっているか、内部リンクは相対パスになっているかを確認します。
Webパーツの動きや、ホバー時のアクションは適切か
Webパーツの動きや、ホバー時のアクションが適切かを確認します。
スライダー、アコーディオンパネル、タブ切り替え、フェード効果、ボタン上にマウスをホバーしたとき/クリック時の挙動などを確認します。
タップ可能エリアは十分か
タップ可能エリアは十分かを確認します。
グローバルナビゲーション、リンクテキスト、ボタンなどの要素の大きさが適切かを確認します。
とくにスマートフォン時のデザインが重要です。
タップ可能エリアのGoogle推奨サイズは 48px × 48px 以上となります。
アクセス解析タグの設置確認
指定のアクセス解析タグが設定されているかを確認します。
Googleアナリティクスでは head内 への記述が必要です。
タグが正確に設置されているか、計測できているかを確認します。
ページスピードのチェック
ページスピードが極端に遅くないことをチェックします。
重たすぎる画像、動画、ソースコードの書き方、JavaScriptの処理など、さまざまな要因でWebページは重たくなり、表示速度が遅くなります。
アクセスしてページ表示が遅すぎるWebページはユーザビリティを低下させ、離脱にもつながるため、ページスピードは重要です。
ページスピードはPageSpeed Insightsで計測可能です。
遅い場合は改善案を提示してくれるのでエンジニアと相談しましょう。
アクセシビリティ
アクセシビリティが適切かを確認します。
アクセシビリティは、利用するすべての人が不自由なくWebページを使えるようにする考え方です。
文字サイズの変更が容易にできること、文字と背景の色のコントラストがはっきりしていること、画像が見れなくても代替文字で理解できる状態であること、スクリーンリーダーなどの音声読み上げソフトに対応していることなど、誰もが不自由なくWebページを利用できるようにするための対応です。
※プロジェクトによってはアクセシビリティの基準を設けており、一定レベルをクリアする必要があります
Webディレクターが知っておきたいプログラミング言語
HTML
HTMLはWebページの構造を作るマークアップ言語です。
簡単に言うと、ドキュメントにリンクや画像、動画などを埋め込める「ハイパーなテキスト」という意味です。
タグを用いて文章に意味や役割を持たせます。
CSS
CSSはWebページの色やサイズ、レイアウト、要素の大きさなどのデザインを作るマークアップ言語です。
html文書内で装飾したい部分に class や id といった目印をつけて、その目印に対して大きさ・色・配置などのデザインを設定します。
JavaScript
JavaScriptはWebページに動きをつけるプログラミング言語です。
JavaScriptを使うことで、Webデザインでよく使う自動的に画像が切り替わるスライダー、ポップアップ、アコーディオンパネル、タブ切り替え、クリック時の挙動などの動作をつけることができます。
jQueryやBootstrapなどのライブラリ・フレームワークをよく使います。
PHP
PHPはサーバーサイドでコードを実行するプログラミング言語です。
PHPを使うことでオススメ記事、新着記事、会員ごとに情報を出しわけるなどの動的なWebページ生成が可能です。
HTMLに埋め込んで使うことができたり、問合せフォームから送信されたデータを受け取ることができたり、データベースと連携するなどの機能が実装できます。
Webディレクターにおすすめなコーディング学習法
本
コーディングを体系的に学ぶには本が一番。
中でも、WebデザインとHTML・CSSの基礎知識を学べるベストセラー本の「1冊ですべて身につくHTML & CSSとWebデザイン入門」がおすすめです。
この本ではWebの仕組みから、HTMLとCSSって何？、レスポンシブデザイン、Flexbox、グリッドレイアウトなどの最新のWebデザイン技術までを学ぶことができます。
実際に手を動かしてWebサイトを作りながら学べるので知識が定着しますよ。
・1冊ですべて身につくHTML & CSSとWebデザイン入門講座
続編では、CSSの応用や、JavaScriptライブラリについて学べるので、こちらもおすすめです。
・ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
学習サイト
学習サイトではプログラミング入門の定番のProgateがおすすめ。
以下のコースを一通りやっておくと、プログラミングの言語やコーディングの基礎知識、制作の流れなど、プログラミングのイメージがつきます。
月1,500円程度で学べるのは、正直激安です。
・HTML & CSS
・JavaScript
・jQuery
・HTML & CSS の開発環境を用意しよう！（Windows用）
・検証ツール（デベロッパーモード）の使い方
（以下、必要に応じて）
・Sass
・PHP
スクール
プログラミングの知識レベルであれば独学でも十分です。
ただ、どこまでのプログラミングスキルを身につけたいのかによりますが、将来プログラミングの仕事がしたい人はスクールを使うのも手です。
まとめ：Webディレクターがコーディングできるメリットは大きい
あらためて結論。Webディレクターはコーディングの知識レベルはあった方が良いです。Webディレクターはコーディングができなくても仕事はできますが、要件定義、デザイナーやエンジニアへの指示、品質チェック、納品・公開時などで、業務の幅が格段に広がるからです。
プログラミングの知識レベルであれば独学でも十分できるので、ぜひ勉強してみてください。
未経験からWebディレクターになる方法については以下の記事にまとめています。
