フロントエンドエンジニアがやるWebディレクションの流れ【Webディレクターになりたい人必見】

Webディレクションがどんなことやっているのかわからない人、普段フロントエンド開発やっているがWebディレクターをやったこと無い人向けにフロントエンドエンジニアがWebディレクターをやった際の1例をご紹介します。（会社、業種、案件等の内容・状況によりフローは変わります）
※企業のオフィシャルサイト制作（30ページ程度）で行うWebディレクションを想定してます。

Webディレクションのフロー

おおまかなフローは以下になります。

要件定義・提案

「要件定義・提案」の詳細は以下の通りです。
※システム開発がメインなWebサービス案件の要件定義とは異なります。

ヒアリング

まずは顔合わせもかねてクライアントとの打合せを行います。
打合せのヒアリング内容は以下の通りです。

・クライアントがやりたいこと
・現状の問題点
・Webサイトの目的
・デザインの方向性
・サイトの掲載情報、素材
・サーバー、ドメイン状況
・対応ブラウザ、端末
・予算感
・納期、スケジュール

等の情報を元に今後の進め方が大枠決まります。

要件整理

ヒアリングした内容を元に、Webサイトを作る上で何が必要か洗い出す必要があります。
洗い出す内容は以下の通りです。

・何が目的なのか（仕事のお問い合わせを増やしたい、情報発信したい、営業ツールとしてカッコよく見せたい等）
・予算感が決まってるのであれば、予算内で何がどこまでできるか
・ページ数はどれ位になるか
・CMSやシステムは必要か
・撮影が必要か
・インタビューやコピーライティングは必要か
・サーバー環境は必要か
・納期、スケジュール調整は大丈夫か
・デザインの方向性
等

予算感・見積

「要件整理」した内容を元に、

・ディレクション、進行管理
・設計
・デザイン
・サーバー
・コーディング、開発
・テスト
・外部パートナー
　見積を出す際に規模感によって、外部パートナー（カメラマン、デザイナー、システム会社等）に見積依頼を出すことがあります。

費用を算出します。

提案

提案書（コンセプト、デザイン、CMSの有無、機能等）、スケジュール、見積を算出しクライアントに提案します。
依頼することが決まってたりすると、提案書は出さないこともあります。

設計

提案が通ったら、制作を行う上での設計を行い、設計内容で問題無いかクライアントに確認します。
ワイヤーフレーム、サイト設計、システム設計は同列で一緒に考えて設計することが多いです。
小規模の案件だと納期が短かったりするのでクライアントに確認しつつ、設計し同時進行で制作・開発を進めるケースも多くあります。

ワイヤーフレーム作成

サイトの主要ページのレイアウト、コンテンツ配置等の設計資料を作成します。
サイト全体のサイトマップ作成し、どのページがどんな役割で見せ方や演出を入れるのかを決めます。

デザインラフ提案

デザイナーがワイヤーフレームやヒアリングしたデザインの方向性を元にデザインラフ案を作成し提案します。

CMSのシステム設計

CMSを入れる場合はどのページをCMSで更新しやすくするのか等を決めます。
CMSをフルスクラッチで作るのかオープンソースのWordPress等を使用するのかで作業工数が結構かわるので、この場合、見積提案の段階で決めておく必要があります。
サーバー等も必要であれば要件を満たしたサーバー選定や設計を行いますがこちらも見積提案の段階で決めておいた方がよいです。

制作・開発

「設計」内容を元に制作・開発を行います。
この段階で仕様変更や戻しが入ると、変更内容によってかなりの作業時間のロスになるので「設計」内容をクライアントに確認・了承を貰って進める必要があります。
また、サイトに掲載する情報（テキストや写真素材等）をデザイナーやコーダーに渡す必要があるので、この段階までには揃える必要があります。

デザイン制作

デザイナーが「デザインラフ提案」で決まった内容でWebサイトの主要ページデザインを行います。
下層ページで同じようなレイアウトのページが複数ある様であれば、ベースを1ページ作ってコーダーに渡します。

コーディング

デザイナーが作ったデザインを元にコーダーがhtml＋css＋JavaScriptコーディングを行います。

システム開発

CMSやお問い合わせフォーム等が必要な場合、プログラマーが開発を行います。
複雑はシステムで無ければ「コーディング」「システム開発」両方を同時進行でフロントエンドエンジニアがやるケースが多いです。

テスト

Webサイトが一通り出来上がったら、各種対応ブラウザや端末、バージョンで確認を行い、不具合があれば修正をします。
同時にクライアントにもWebサイトやCMSの確認を行って貰います。
クライアントへの確認は全てのページやCMS出来上がったタイミングでの確認は行わず、主要数ページが出来たタイミングで随時確認を取っていくと進捗状況の報告・確認も取れ、また認識の相違があった場合の戻しを最小限に抑えることができます。

公開（ローンチ）

「テスト」段階での確認が問題無ければ、公開日に公開となります。
公開後に多くの色んな人が見始めるので、そこで今まで見つかって無かった不具合や場合によっては変更が発生するケースがあります。

運用・保守

サイト「公開」後の「運用・保守」として、見積・費用を掛けて行います。
クライアントによっては予算の都合で毎月の費用が出せないこともあるので、都度依頼があって見積・提案を行うケースもあります。

サイト更新

サイト「公開」後に出てくるクライアントからのリクエストや月日が経つと掲載情報も変える必要があるので、変えた方が良い内容の提案・見積を出してサイトの更新を行います。

サーバー・セキュリティ保守

サイト「公開」後、月日が経つとサーバーのバージョンやセキュリティの脆弱性が出たり、同様にCMSの脆弱性が出てくるのでバージョンアップやセキュリティパッチあてる対応を行う必要があります。

まとめ

以上あくまで、私が担当してきた案件の1例となりますので、所属する会社や業種、案件等の内容・状況により流れ（フロー）は変わります。Webディレクターは色んな人とコミュニケーションしたり、全体の進行も管理する必要があるのでスケジュールの先読みをし、先手をうって対応していくのが重要では無いでしょうか。Webの知識やコミュニケーション能力等全てにおいてのバランス感覚が必要な仕事ですね。
これからWebディレクターを目指す人の1例として参考になれば幸いです。

　
※このフローを仕事で流用される場合は自己責任でお願いします。