Webディレクターになるには?調べるなら【ディレタマ】 » 「Webディレクターとは?」なんでも事典 奥深きWebディレクターの世界 » WebディレクターとWeb制作工程 » Webディレクションの
一般的な工程は?

Webディレクションの
一般的な工程は?

Webディレクターが行う「Webディレクション」とはどんな仕事なのでしょうか。この記事では、一般的なWeb制作の工程に沿って発生するWebディレクションの業務フローを紹介します。

目次

Webディレクションとは?

「Webディレクション」とは、クライアントや自社が叶えたい目的(成果)を達成するためのWebサイトを構築するために、戦略設計やコンテンツ企画から、原稿編集、デザイン、プログラミングなどの制作全工程を指揮・管理し、Webサイトを公開・納品へと導く業務のことです。このWebディレクションを担当する職種のことを「Webディレクター」と呼びます。
プロジェクトを成功に導くために、WebディレクターはWebサイト制作の最初から最後まで、幅広い業務を担当します。
例えば、Web制作の工程管理をはじめ、現状分析や競合調査、検索キーワード選定などのWebマーケティング、成果を出すためのサイト戦略設計、戦略に基づいたコンテンツ企画、そしてその企画を具現化させていく制作マネジメント、制作スタッフを引っ張るチームマネジメントなど、Webディレクション業務の中で様々なスキルや知識を身に着ける必要があります。

新規制作するWebサイトのWebディレクション工程例

Webディレクションの工程は、制作するサイトのページ数やコンテンツボリューム、デザインの範囲、開発などの仕様や、新規で制作するのか既存サイトを運用していくのかなどによっても大きく違います。
ここでは、新規で数十ページ規模のWebサイトを制作する場合のオーソドックスなWebディレクション工程を紹介します。

工程1:ヒアリング

まずはクライアントにヒアリングを行います。 Webサイトを作る目的、現状の課題や要望、商材やサービスの強みや独自性、クライアントを取り巻く市場状況や業界の慣習、競合についてなどなど、サイトを制作する上で必要なクライアントに関する情報を深くお聞きします。
またWebサイトについても、とくに訴求したいターゲット層、デザインの方向性やコンテンツで希望されること、期待されている目標数値なども忘れずお聞きします。
聞き漏れることのないように事前にヒアリングシートを用意して臨みます。

工程2:戦略設計・サイトマップ作成

ねらった成果(課題解決)を出すためにどのようなサイトを作るか、マーケティング戦略からそれに基づいた企画、サイト全体のコンセプトを打ち立てます。この中で、誰に対して訴求するのかのターゲットとペルソナ設計を行い、このWebサイトでアプローチしていくコアターゲットユーザーも設定します。
それらの情報をもとに、サイト全体のコンテンツや記事の構造をより詳細に計画した「サイトマップ」を作成します。

この戦略設計・企画内容をクライアントにご提案し、承諾をいただけたら、サイト制作がいよいよスタートします。

工程3:要件定義書の作成

制作スタッフに、今回のサイト制作で必要となる情報を伝えるための資料です。サイトの制作背景や最終的な数値目標、コンセプトやデザインイメージ、画像やテキストは誰が用意するのか(クライアント側か制作側か、など)、撮影の有無、動画やアニメーションやイラスト発注の有無、対応言語やサイトに実装したい機能、対象のブラウザ、サーバー要件、公開後の運用方針などなど、サイト構築の中で共有しなくてはいけない情報や制作・開発要望をまとめます。
エンジニアとの開発ミーティングや、デザイナーとのデザインミーティングなど、制作パートごとに詳細な打ち合わせを行うケースもあります。(もちろんすべてWebディレクターが主導です)

工程4:スケジュール作成

サイト制作全体の制作スケジュールを引きます。誰がいつまでに何を作り、いつテストアップして、いつ公開(納品)するかを細かく記したカレンダーです。スケジュールが完成し、クライアントと制作スタッフに共有したあとは、Webサイト制作全体のスケジュールの進捗を逐一管理するのもWebディレション業務のひとつになります。個々のメンバーからの提出物や指示確認日なども細かく把握し、サイト制作の現在地を追い続けます。万が一遅れやイレギュラーが発生した場合には速やかに調整するなど、臨機応変かつ柔軟な管理が求められます。

工程5:構成案・ワイヤーフレーム作成

画面設計と呼ぶこともあります。ページの中にどんなコンテンツをどのような構成・動線で掲載するかを記したものです。完成したらデザイナーやエンジニアに共有し、この構成案をもとにデザイン制作や開発を進めてもらうことになるので、とても重要な業務です。

工程6:デザインディレクション

Webデザイナーにデザイン作成を依頼します。Webディレクターが作成した構成案と要件定義(またはデザインMTGでの共有事項)をもとに、Webデザイナーがサイトのデザインを制作します。そうしてデザイナーから上がってきたデザインに修正点や問題点がないかをチェックし、修正箇所がある場合は赤入れして修正指示をだします。
Webデザインではとくにユーザーインタフェース(UI)やユーザーエクスペリエンス(UX)が大事ですので、使いやすさや可読性、情報の探しやすさ、読ませたいキャッチやボタンにきちんと目が行くか、狙ったターゲットに好まれる世界観か、成果が出せるデザインになっているかなどを厳しくチェックします。

工程7:Webライティング・編集ディレクション

制作側でテキストを用意する場合は、ライターに原稿作成を依頼します。どのような記事をどのような構成で作成するかや、執筆するための参考資料の準備なども行い、ライターに共有します。ライターから上がってきた原稿は内容をチェックし、修正や加筆の指示を出します。最終的に納品された原稿はCMS等に流し込みを行い、Webディレクターのほうで対応できるようであれば、文字の装飾やリンクの設定などの編集作業を行います。

工程8:コーディング・システム設計・開発ディレクション

Webサイトとして組み立てていくためのコーディングや、システム設計・プログラム開発をエンジニアに依頼します。システム設計・開発が必要なのは、例えば問い合わせフォームやエントリーフォーム、個人情報の登録画面、記事の絞り込み検索などなど。
上がってきたコーディングやプログラミング設計内容をチェックし、修正指示や調整を依頼します。

工程9:テストアップ・検証修正

完成したWebサイトをサーバーにアップし、実際のパソコンモニターやスマートフォンなどで確認する工程です。
テストアップ、仮アップ、テストサーバーにアップ、など様々な呼び方をします。
実機でWebサイトを確認して、動作や機能に不具合がないか、リンクの貼り忘れや間違いがないか、フォームを実装した場合にはきちんとメールの送受信ができるかなどを見ていきます。様々なPCブラウザや各種スマートフォン機種から全ページを開いてチェックし、デザインやコーディングの崩れやエラーを無くしたり、最後の細かな調整や修正をしたりします。こうした検証作業のことを、デバッグということもあります。

工程10:Webサイトの本番公開

テストアップして検証した結果、問題がなくなったことが確認されたら、いよいよWebサイトの本番公開です。本番公開の時間を事前に決定しておき、エンジニアが公開作業を済ませたら、直後からすぐ公開後チェックをします。万が一クリティカルなミスやエラーが発見された場合、再度速やかに非公開状態に戻し、大急ぎで修正を行う必要があるからです。
素早く公開後チェックを済ませ、問題ないことが確認出来れば、ようやく公開完了。
クライアントに公開連絡を行い、運用フェーズへと移行していきます。

Point
【ひとこと】
ディレクションと進捗管理はちがう?

Webディレクターの仕事は、プロジェクトの進捗管理だと考えている人も少なくありません。しかし進捗管理は、あくまでも「Webディレクターの数ある業務内容のひとつ」だと思っていてください。
Webディレクション業務では、Webサイト制作の進捗管理を含め、実際にWebディレクターが手を動かして制作作業を行ったり、品質管理やアクセス解析といったWebサイト全体の管理を行ったりすることも。Webサイト制作の現場監督役として、すべての業務にまんべんなく関わるといっても過言ではないでしょう。

未経験からWebディレクターに
なれる会社の求人を見てみる!

新人Webディレクターの働く現場に突撃!
デスクでカメラ目線で微笑むさとゆり
先輩とミーティング中のさとゆり
構成ラフ考え中… 先輩とミーティング

「Webサイト制作ってどう進めているの?」
「Webディレクターはどんな仕事をするの?」
 これを読めばイメージが掴めます!

クライアントの課題解決のために、市場を分析、ターゲットを設定して企画を練り、コンテンツを創るWebディレクター。…と言われても、「Web制作がよくわからないから、いまいちイメージが湧かない!」という皆さんに、新人Webディレクターの一日を追いかけながら、Web制作の現場やWebディレクターの仕事の一部をご紹介します♪

hello 新人Webディレクターさとゆり
新人Webディレクター

さとゆり

前職はラジオディレクター兼ライター。Web業界未経験でWebディレクターになり丸1年♪ガッツと取材力が武器!

デスクでカメラ目線で微笑むさとゆり
先輩とミーティング中のさとゆり
構成ラフ考え中… 先輩とミーティング