今回は現役のWEBディレクターが”WEBディレクターに必要な知識”と”あった方が良い知識”を正直にぶっちゃけます。
将来WEB系の仕事をしたい人や現在エンジニアやWEB制作会社の作業者として勤務している方でWEBディレクターになりたいと思っている方は必見です。
- 将来WEBディレクターを目指している
- 技術者に限界を感じているがWEBの仕事は続けたい
- WEBディレクターは何をする人なのか知りたい
WEBディレクターってどんな仕事？
まずWEBディレクターってどんな仕事でしょうか？
世間のイメージでは”WEB制作の一番偉い人”やら”何でも仕切る人”、”管理職”やら何かと偉そうにした立場で、年功序列がものを言う様な、WEBの仕事の最終進化みたいに思っている人が多いのではないでしょうか？
結論から言うと、全くそんなんではありません。
実は、新卒でもWEBディレクターになれますし、WEBの知識がそんなに無くてもなれます。
WEBディレクターの仕事内容は、WEB制作の現場で”プロジェクトを監督・指揮・管理する人“です。
偉そうな書き方ですが、部活のマネージャーの様な立場に近いと思います。（偉いと言う訳ではないです）
WEB制作の実務では、お客様の要望（ヒアリング）からデザインを起こし、HTML/CSSでのWEB制作のコーディングで実際の形を作っていきます。そしてお客様の要望の動きをプログラミングで実装していきます。と一つのサイトを作成するのに沢山の知識が必要になります。
しかしこれら全てをこなせる様なスーパーマンは滅多に居ません。
WEB制作の実務フローでは、お客様とのやり取りは営業、デザインの書き起こしはWEBデザイナー、フロントエンドの技術者が実際にWEB制作をして、エンジニアがシステムを作り出すといった感じで細分化されています。
そしてWEBディレクターはこれらの人の全ての間に入り進行を管理する人間です。
営業と一緒にお客様のスケジュールを把握して、作業者のスケジュールを組みます。そしてデザイナーにお客様のイメージを理解しやすく伝えてデザインを書き起こしてもらいます。そのデザインを元にフロントエンドの技術者にWEB制作をしてもらい、同時にエンジニアと一緒にシステムの定義を考えていきます。
そして最後には、お客様に完成したものを見せて色々とダメ出しをくらって、それを作業者全員に伝えて改修作業などをスケジュールと共に組み立て直していきます。
以下はWEBディレクターのWEB制作案件の流れです。
| ① | 営業がお客様へヒアリング |
| ② | 営業とWEBディレクターが打ち合わせ （お客様の完成イメージ） |
| ③ | WEBディレクターとデザイナー 打ち合わせ（スケジュールの確認とデザインイメージの作成） |
| ④ | WEBディレクターとフロントエンドエンジニア 打ち合わせ （スケジュールの確認） |
| ⑤ | WEBディレクターとエンジニアと一緒にシステムの定義を考える |
| ⑥ | スケジュールの作成 |
| ⑦ | デザイナーのデザインを元にレイアウトの作成（ワイヤーフレーム） |
| ⑧ | ワイヤーフレームと指示書をフロントエンドエンジニアに提出してWEB制作開始 |
| ⑨ | エンジニアのシステムをフロントエンドエンジニアに導入してもらう |
| 10 | 完成したものをお客様に提出（営業を介して） |
| 11 | フィードバックを受けて全作業者に共有、改修作業 |
この様にWEBディレクターは実際に作業をする訳ではないが、全作業者の状況を把握して、お客様のイメージを正確に伝えていかなくてはいけません。
なのでWEBディレクターは営業的な感覚とHTMLやPHPなどのフロントエンド、バックエンドのエンジニアさん達の技術的な知識、そして作業者が円滑に作業が出来る様にするための様々なツールの知識などかなり幅広い知識が必要になってきます。
しかしこれらの知識が絶対に必要と言われても、そうでも無く、、微妙な部分なので次でWEBディレクターに必要な知識について紹介します。
WEBディレクターに必要な知識の概要
WEBディレクターに必要な知識は大きく分けて以下の様な分類に分ける事が出来ると思っていいます。
| Adobeソフトの知識全般 | Officeソフトの知識全般 |
| Googleサービスの知識全般 | フロントエンドの知識 |
| バックエンドの知識 | Markup言語 |
| Programming言語 | サーバー関連 |
| WEBリテラシー | ビジネスフレームワーク |
| 問題解決能力 | コミュニケーションスキル |
| マネジメントスキル |
こんなに！？と思うかもしれませんが大丈夫です。
WEBディレクターは作業はほとんどする事はないので、上記の使い方や意味などを知っておけば役に立ちます。
（もちろん作業も出来ると便利な場面もありますが。）
これらを少し具体的に説明します。
Adobeソフトの知識全般
Adobeソフトの知識全般は、そのままです。
Illustrator、Photoshop、XD、InDesignなどのクリエイティブなソフトの使い方や、どの様な事が出来るかは一通り把握しておきましょう。
またAdobeソフトに関してはXDを除き、そこまで作業が出来るレベルまでは求められていませんので教養程度で大丈夫です。
Officeソフトの知識全般
Officeソフトの知識全般もそのままです。
Excel、PowerPoint、Word、このくらいは覚えておきましょう。
これに関してはWEBディレクターだからと言うよりかは、社会人としてしっかり身につけるスキルです。
Googleサービスの知識全般
Googleサービスの知識全般は、スプレットシートやスライドやドライブなどのアプリケーションの知識や、Gsuite、Google analytics、サーチコンソールなどのWEBサービスなどの知識などです。
Googleは他にも様々なサービスやアプリがあるので、それらも全体的に知識として入れておくべきです。
フロントエンドの知識
フロントエンドの知識は、HTML、CSS、Java Script、PHP、RubyなどのWEB制作で使用する表向きの言語達（Markup言語とProgramming言語）です。
また、ただ言語を覚えるだけでなく、BootstrapやjQueryなどフレームワークの仕様なども覚えていきましょう。
バックエンドの知識
バックエンドの知識は、ApacheやMySQL（データベース）やJava/C言語/C＋＋などのサーバー関連（裏側）の知識です。
これに関しては正直WEBディレクターが踏み入れられる領域のレベルじゃないので専門家に任せるのがベタだが、これらがどの様なものなのか？どんなものが必要になってくるのか？などの基本知識程度は付けておきましょう。
WEBリテラシー
WEBリテラシーに関しては、WEBの仕組みや様々なWEBサービスを知る事です。
他にも、現状のWEBのトレンドはどの様なものなのか？SNSで流行しているものは何なのか？ニュースや政治情勢からWEBへの影響的なものは無いのか？など常にアンテナを張っていられる精神力です。
ビジネスフレームワーク
ビジネスフレームワークは、ABテストやマインドマップや環境マップなどの使えるフレームワークは情報共有の場で役立ちます。何か自分の表現のし易いフレームを見つけ出して使っていきましょう。
問題解決能力
システム構築やWEB制作のプログラミングで問題が生じたときに、アドバイス出来る様に、デベロッパーツールなどのデバックツールの使い方は覚えておきましょう。
またお客様（営業）に対して、この仕様だとバグが生じてしまう、といったことを先手で伝えられる能力や、実際にバグに対して的確な代用案を示せるリテラシーが必要になります。
コミュニケーションスキル
コミュニケーションスキルはそのままです。いろんな人と関わる仕事なので、皆に信頼され頼りにされる人間を目指しましょう。
マネジメントスキル
スケジュールや進行度合いの管理把握は当たり前。他にも作業者のタスクがどの程度なのか？を把握。
作業者は、あなたがお願いした制作案件でお給料をもらっているので沢山仕事が欲しいと思ってます。
しかし多すぎたらパンク状態になるので、多すぎず少なすぎずな最適な量を管理してあげましょう。
また今まで挑戦してこなかった難解な案件などをあえて出来ない人に降って育ててあげる事は、今後の仕事のやり易さにも繋がり、作業者は新たなスキルが身に付きどちらもハッピーなので良い事です。この様に人材育成の点もマネジメントに含まれます。
WEBディレクターに必須な知識
次いWEBディレクターに必須な知識をいくつか紹介します。
実際にWEBディレクター募集の面接の際には必要スキルとして記載されている場合は少ないが、実務で確実に使用するものなので必須だと感じています。
| XD | Excel |
| スプレットシート | Google analytics |
| Google search console | HTML/CSS |
| 環境構築（サーバー/DNS） | ドキュメント作成能力（企画書/指示書） |
XD
WEBディレクターは指示書と同時にワイヤーフレームを作成する場合が殆どなので、XDの知識は必須です。
ただXDはまだまだ新しいクリエイティブソフトなので、達人たる人は少ないです。自分なりにわかり易いワイヤーを作成する様に色々と試行錯誤していきながら学んでいきましょう。
Excel・スプレットシート
Excelはどんな仕事でも必須です。スプレットシートに関しては共有がし易いので、WEBディレクターの様ないろんな人と情報共有が必要な仕事では必須な知識になります。
Google analytics・Google search console
基本的にWEB制作完了後にアクセス解析として両者のタグを埋め込みます。
両者の見方を知っていないと、現状のサイトがどの様な状態なのかが把握できず、的確なアドアイスや提案が出来ません。
WEBディレクターはアドバイザー的な立ち位置も含んでいるので解析ツールの知識は必須です。
HTML/CSS
WEB制作の仕事に携わる以上、HTML/CSSくらいの知識は持つべきでしょう。
JSやPHPなどは時間があれば学べば良いと思いますが、HTML/CSSは簡単ですし、知っておけば簡単な改修作業も出来る様になるのでスムーズに仕事が進む様になります。
環境構築（サーバー・DNS）
パートナー（技術者）に環境を提供する事が多いので、その作成の仕方くらいは知っておきましょう。
基本的にレンタルサーバーを使う事が多いので、そのレンタルサーバーでの環境構築方法を覚えていきましょう。
ドキュメント作成能力
主に、企画書/指示書の作成能力です。他に要件定義所や提案書など、お客様に見せる書類もあれば、技術者に提出する書類も作ります。
わかりやすくまとめる能力が必須なので訓練していきましょう。
WEBディレクターとしてあった方が良い知識
次にWEBディレクターとしてあった方が良い知識を紹介っします。
WEBディレクターとして必要な知識は正直再現なく出てきてしまうので、先述の必須知識をまずは覚えてから、次に今回の”あった方が良い知識”を習得しましょう。
| SEOの知識 | JavaScript/PHP |
| Apache | Illustrator/Photoshop |
| ビジネスフレームワーク | 色んなWEBサービスの知識 |
SEOの知識
SEOの知識はあれば、色々と提案できる様になるでしょう。
ただあまりSEOの理論を語っても何にもならないので、考え方を覚える程度で良いと思います。
JavaScript/PHP
時間があればプログラム言語も覚えておけば強いでしょう。
実際の作業は行わないが、バグの原因などが理解できる様になります。
Apache
リダイレクト処理はWEBディレクターがやってしまうところもあります。
Apacheの基本的な記述を覚えれば大体のサーバーで対応できる様になります。
Illustrator/Photoshop
デザインはデザイナーに頼んだ方がいいが、そこまでの費用を当てたく無いお客様も中にはいます。
一部の簡単なテキストpng程度ならやってしまう場合とかもあります。こういった臨機応変さに対応するならば学ぶべきソフトでしょう。
ビジネスフレームワーク
色んな表現方法を知っていると、そのお客様に一番伝わり易い型が見えてくるかと思います。
また今後の計画やイメージの共有にも使えるフレームワークもあるので覚えておくと業務の効率化に繋がります。
WEBサービスの知識
WEBのテキスト・画像圧縮ツールやテキスト比較ツールなどの便利ツールの知識や、GitHubやドキュメントサイトなどの技術情報がわかるサイトなどを知っている事は強みです。
他にもメルマガやブックマークでトレンドをすぐにキャッチできる情報網を常に確保しておきましょう。
以上が「WEBディレクターの必須知識とあった方が良い知識をぶっちゃけます」でした。
今回の記事でWEBディレクターに必要な知識がわかったかと思いますが、これはあくまで実務上に自然と必要になってくる知識です。誰もすべての知識を持ってくださいとは思っていないので安心してください。
就活でWEBディレクターを目指す場合はこの中から何か一つの特化した知識があると強いと思います。
WEBディレクターの価値は今回紹介した幅広い知識＋自分の得意分野（色味）です。
これがあなたと言うWEBディレクターに仕事を選ぶ理由になります。
