Webディレクションとは？普通・一般的な制作工程について解説

Webディレクターとして、活躍するには、Webディレクションの制作工程を学ぶことが重要です。

 Webディレクションとは…

Webサイトの制作や運営をするプロジェクトにおいて、指揮監督業務を行うこと。

Webサイトの見やすさや使いやすさが、商品・サービスの売上などへ与える影響が大きくなったことで、Webディレクションの重要性が高まっています。

今回は、接客業、IT業界を経て、現役Webディレクターである私が、Webディレクションの一般的な工程10ステップについてご紹介します。

ぜひ最後までご覧ください。

Webディレクションの一般的な制作工程10ステップ

Webディレクションとは、Webサイトなどの戦略設計やコンテンツ企画から、原稿編集、デザイン、プログラミングなどの制作工程を指揮・管理し、公開・納品へと導く業務のことです。

Webディレクションの一般的な制作工程はこちらの10ステップです。

クライアントや自社の目的を達成するために、クライアントやチームの間に入り、制作スケジュールの管理や各工程の指揮をとります。

Webディレクターはプロジェクトの責任者であり、ディレクション能力やスキルで、Webサイトの質が大きく変わります。

Webディレクターの仕事内容について詳しく知りたい方は、こちらの記事をご覧ください！

Webディレクション工程「契約前フェーズ」

契約前フェーズは、クライアントから制作依頼を受ける前の段階を指します。

実際にWebデザインやサイトを作る前に、クライアントとWebディレクターの打ち合わせなどを行います。

契約前フェーズでは、主に以下の4つの作業を行います。

Webディレクションでは、クライアントの課題解決や、目標を達成する制作を行います。

契約前フェーズにおける取り決めが不十分だと、後々大きなトラブルへ発展しかねません。

工程1：クライアントへのヒアリング

最初にクライアントと打ち合わせを行い、今回の課題や目標などについてヒアリングします。

クライアントからの課題や要望を打ち合わせでヒアリングし、現状のサイト分析と照らし合わせます。

例えば、サイト制作する目的、現状の課題や要望、商材やサービスの強みや独自性、取り巻く市場や業界など必要な情報を洗い出します。

Webディレクターの市場調査・業界分析について詳しく知りたい方は、こちらの記事をご覧ください！

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

ヒアリングした結果をもとにどのような成果物を作るか、企画、コンセプトを打ち立てます。

特にどの層に対して訴求するのかのターゲット設定とペルソナ設計を行います。分析した情報をもとに、サイト全体のコンテンツやサイトマップを作成します。

とくに訴求したいターゲット層、デザインの方向性やコンテンツで希望されること、期待されている目標数値など、ヒアリング結果から得られた情報をもとに企画・立案できるようにしましょう。

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

要件定義とは、実際にWeb制作を行う前に、クライアントの要望に応じて全体の仕様を決めることです。

主に取り組める内容はこちらの5つです。

要件定義書は、制作側に今回の制作で必要となる情報を伝えるための資料です。

サイトの制作背景や最終的な数値目標、コンセプトやデザインイメージはもちろんのこと、クライアント側と制作側の対応する範囲を取り決めます。

Webサイトの要件定義について詳しく知りたい方は、こちらの記事をご覧ください！

工程4：制作スケジュール作成

サイト制作がスタートすることになれば、今回の制作スケジュールをたてます。

スケジュールが完成し、クライアントと制作スタッフに共有したあとは、Webサイト制作全体のスケジュールの進捗を逐一管理するのがWebディレクターとしての大きな仕事です。

万が一遅れた場合のリカバリーや、イレギュラーが発生した場合に速やかに対応するなど、臨機応変かつ柔軟な管理が求められます。

Webディレクターの進行管理について詳しく知りたい方は、こちらの記事をご覧ください！

Webディレクション工程「制作フェーズ」

制作フェーズでは、契約前フェーズで作成した企画を基に、制作スケジュールにそって制作を行うフェーズです。

次の3つの工程を上から順に取り組んでいきます。

要件定義を行ったあとこの内容をもとに、構成案・ワイヤーフレーム作成、デザインディレクションやライティング・編集ディレクションを開始します。

デザイン制作では、構成案・ワイヤーフレームに準じてページサイトを設計し成果物のデザインを制作します。

また、デザインのディレクションと並行して、ライティング・編集などのディレクションを進めるのが一般的です。

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

戦略設計・サイトマップ、サイト構成が決まったら、構成案・ワイヤーフレームを作成します。

 構成案・ワイヤーフレーム（WF）とは…

ページの中にどんなコンテンツをどのような構成・動線で掲載するかを記したもの。

必要なパーツのフォーマット、コールトゥアクション（CTA）、ヘッダー・フッターなどが分かるように作成します。ワイヤーフレームが完成したら、クライアントや制作側へサイト構成を説明します。

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

構成案・ワイヤーフレームをクライアントに確認し承認を得たら、デザイン作成にはいっていきます。

Webデザインは、ユーザーインタフェース(UI)やユーザーエクスペリエンス(UX)が大事になっています。

具体的には、サイトの使いやすさや可読性、情報の探しやすさ、読ませたいキャッチやボタンが明確か、狙ったターゲットに刺さるかなど、成果が出せるデザインかを総合的に判断していきます。

近年ではPCだけではなく、スマホやタブレットで閲覧することを想定したデザインを制作することも求められます。

クライアントの求める意向を伝えたり、デバイスに応じた最新の技術の共有をしたり、きめ細やかな対応をしていきましょう。

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

Webサイトは、デザインだけではなくライティング・編集が必要な場合があります。

Webライターから上がってきた原稿の内容をチェックし、修正や加筆の指示を出します。

クライアント側でテキストが用意できない場合は、制作側でWebライターに原稿作成を依頼したりします。

Webディレクターで対応できるようであれば、文字の装飾やリンク設定などの編集作業を行います。

Webディレクション工程「開発フェーズ」

開発フェーズでは、制作フェーズで制作したデザインを実際のWebサイトとして出力するための作業です。

次の3つの工程を上から順に取り組んでいきます。

Webディレクターが行う業務は、開発フェーズ各工程の進捗管理や出来上がった成果物のチェックです。

表示検証や動作検証などを実施して、不具合やバグを修正し正しく動作する状態に仕上げます。テストアップや、本番公開で問題がなければ、制作スケジュール期限内に成果物を納品します。

開発フェーズでは、さらにクライアントから要望が具体的になるため、要件定義での範囲で対応できるかをしっかり確認します。

工程8：コーディング・システム設計・開発

コーディングや、システム設計・プログラム開発をエンジニアに依頼します。

Webディレクターとしてコーディングやプログラミング内容などを確認し、修正指示や調整を依頼します。

特に、問い合わせフォームやエントリーフォーム、登録画面、検索など、特定の選択をした場合にだけ反映される出し分けに該当するものは注意が必要です。

予算内での対応が可能かどうか、特定の場合の仕様が適切かどうか、検証作業を外部に委託する試行回数かどうかなど、あらゆる選択肢から最善の選択ができるようにしましょう。

工程9：テストアップ・検証修正対応

完成したWebサイトをサーバーにアップし、実際のパソコンモニターやスマートフォンなどで確認します。

制作されたWebサイトを確認し、動作や機能に不具合がないか、リンクの貼り忘れや間違いがないか、メールの送受信ができるかなどを見ていきます。

例えば、複数のブラウザで確認したり、スマホやタブレットで標準とされる画面・画質サイズでの見え方などを確認します。

成果物の納品スケジュールにゆとりをもたせ、確認・検証作業を無理なく重点的に行うことが求められます。

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

テストアップ・検証後、問題がないことが確認されたら、Webサイトの本番公開となります。

クライアント、制作側と本番公開の時間を事前に決定しておき、当日になって焦らないよう対応します。

本番公開後問題がなければ、クライアント、制作側にお礼をし、制作スケジュールとして終了となります。

Webディレクション工程「運用フェーズ」

Webサイトの納品後にクライアントと協力し、リサーチ・分析・改善を繰り返して課題を解決していくことが、運用フェーズのWebディレクターの役割です。

本番公開後は、クライアントの要望に応じて、機能改善を目的とした追加実装や、Google アナリティクスなどの定月分析による改善策の提案をします。

分析の項目として、アクセス数、問い合わせ数、目標数値を計測し、想定通りに進んでいるかをチェックします。

クライアントやユーザーから新しい機能の開発を行ったり、順次サービスをアップデートしていきます。

Webディレクターの運用・について詳しく知りたい方は、こちらの記事をご覧ください！

ディレクションスキルは、Webスクールで効果的に学ぼう！

Webスクールについて詳しく知りたい方は、こちらの記事をご覧ください！

まとめ：Webディレクターとして、プロジェクト工程を効果的・効率化しよう！

今回は、Webディレクションの一般的な工程についてご紹介しました。

Webディレクションの一般的な制作工程はこちらの10ステップです。

Webディレクターは、このような一般的な工程を、多数のツールやテンプレートを用いてスキームを効果的・効率化することが求められます。

効率化することで、複数のプロジェクトを同時並行で回す事ができ、制作物のクオリティの向上に力を入れることができるようになります。

経験がナレッジとしてストックされていけば、似たようなプロジェクトで、Webディレクターとしての成長を感じることができるでしょう。