Webディレクションのやり方、Webディレクター業務の流れを徹底的に解説します

Webディレクション Webディレクション やり方 Webディレクター 業務 流れ

「Web制作のWebディレクターって結局は何をする仕事なの?」
「Webディレクションの仕事内容を具体的に知りたい」

このようにWebディレクション業務についてお悩みではありませんか?

この業務を行う役職はWebディレクターといいます、
Web制作の進行役であるWebディレクターの仕事は、
簡単に言えば「Web制作の初めから終わりまでの流れを管理する」ことを指します。

Web制作においてはクライアントの要望に沿ったサイト制作を行います。
Webディレクターはクライアントの要望をヒアリングし、
納期に間に合うよう全体の管理を行います。

とはいえ、
「Web制作を進行する仕事なんだ」というのがわかっても、具体的な内容は正直見えてきませんよね。

そこで今回、Webディレクターが行うWebディレクション業務のやり方や全体の流れを徹底的に解説します。
現在はWeb制作の学習中や案件対応をしている方も、今後1人だけでは作業量に限界が来る時が必ず訪れます。

そんな時にも今回の記事で紹介するWebディレクションに関する知識があれば、
スムーズに案件対応することが可能です。

是非参考にしてくださいね。

目次

Webディレクション・Webディレクターとは?

WebディレクションとはWeb制作の全ての制作工程を管理すること
WebディレクターとはWebディレクションの進行役、管理者の立場です。

主にWeb制作に関わる
Webデザイン、エンジニア・ライティング・マーケティングなどの制作者をまとめ、
制作がスムーズに進むように調整・管理をします。

そのために、
クライアントからの要望などを的確なヒアリングで引き出し、
見積もり・予算管理・制作メンバー選定・スケジュール進行・品質管理などやることが多く、
仕事の範囲が広いのも特徴です。

そんなWebディレクションを行うWebディレクターに求められる主なスキルは以下です。

  • マネジメントスキル※要件定義・品質チェック・タスク進行など
  • コミュニケーションスキル
  • ワイヤーフレーム作成スキル
  • 基礎的な制作スキル※デザイン・コーディングなど

全体の制作進行管理がWebディレクターの仕事でもあるので、まとめられる知識と経験が必要です。

Webディレクター業務に性格的に向いている人の特徴

どんな人が性格的にWebディレクターに向いているか、以下にまとめました。

  • 調整・交渉が苦ではく、むしろ得意である
  • 複数のタスクや作業をこなせる
  • 臨機応変な対応ができる
  • ストレスを感じづらい、または発散方法を知っている

まとめると、
コミュニケーション能力がありマルチタスクに長けている人です。
また、ストレス耐性が高い、またはストレスを逃がす方法を知っている人が向いていると言えます。

ただしWebディレクターの誰しもが、
最初からコミュ力が高くマルチタスクが得意な器用な人、というわけではありません。
コミュニケーションが苦手だったり、
マルチタスクなんて考えられないと思っていたけど、意外と慣れてきた、という場合もあります。

上記はあくまでも、「向いている人の特徴」というだけです。
Webディレクション業務をするには絶対にこの性格の人でないとダメ!というわけではありません。

参考程度にとどめておいてくださいね。

Webディレクションのやり方・全体的な流れ

Webディレクションについて理解してきたところで、業務のやり方と全体的な流れを解説します。
大まかな流れは以下です。

  1. クライアントとの打ち合わせ・要件定義
  2. サイト制作の下準備・ワイヤーフレーム作成
  3. デザインを作成
  4. Webサイトを開発
  5. 修正
  6. 本番サイト公開
  7. 運用

それぞれどのようなことを行うのか、詳しく解説します。

①クライアントとの打ち合わせ・要件定義

Web制作の仕事が入り、まずクライアントとの打ち合わせを行います。
この時にクライアントからの情報をしっかり聞き出せるかどうかでサイトの出来が違ってきます

しっかりと実のある打ち合わせができるように、以下の内容は必ず聞いておくようにしましょう。

  • サイトを立ち上げる目的
  • サイトのコンセプト
  • サイトのデザインイメージ
  • サイト訪問者はどんな人が想定か
  • 静的サイト・動的サイトどちらにするか
  • コンテンツ・機能はどのようなものを考えているか
  • コーディング制作・テンプレート制作どちらで制作するか
  • 素材(画像やテキスト)は用意があるか
  • サーバーやドメインの契約はどうするか(すでにある・これから契約する・契約のサポートが必要かなど)
  • 納期はいつまでか

ただしこれらの情報を聞くだけでは、サイトの本来の雰囲気や個性を引き出すことはできません。

ではどうしたらいいかというと、
この他にも会社やクライアントのことを掘り下げながら聞いてみることです。

言ってしまえば雑談ですね。
社長の人柄や趣味、今後の目標や最近嬉しかったことなど、
サイト制作には関係ないと思われることも積極的に聞いておきたいところです。

上記で紹介した
「サイト制作をするにあたって聞きたいこと」はサイトの骨組みの定量的な情報です。
しかし、そこに肉付けし魂を吹き込むためにはクライアント自身の情報など定性的な情報は欠かせません

何より、必要な情報だけ淡々と聞いたとしてもクライアントも畏まってしまい、
うまく話せないばかりかサイトが出来上がった後に
「本当はこんなサイトにしたかったのにうまく伝えられなかった……」ということにもなりかねません。
から、クライアントとのコミュニケーションを大切にしながら丁寧なヒアリングを行いましょう。

見積もり書・作業内容・スケジュール案・契約書の提出

クライアントとの打ち合わせを元に正式な見積書を提出します。
見積もりとあわせて、作業内容とスケジュール案も出すようにしましょう。

スケジュール案などはGoogleスプレッドシートなどでの共有が情報をまとめてシェアしやすく、おすすめです。
打ち合わせの際に出た情報も含めて、まとめておきましょう。

契約書には、
作業内容と追加料金が発生する例、修正回数や大幅なデザイン変更はNGであることなども含めれば安心です。

契約書を作る際におすすめの記事

②サイト制作する上での下準備

見積もりや企画書などを提出し、契約も無事に結べたらサイト制作の下準備に入ります。
サイト制作の下準備とは、以下の作業をさします。

  • ワイヤーフレーム作成
  • チームでスケジュール・課題管理表を共有
  • 開発環境の準備

打ち合わせで確定した内容をワイヤーフレームに落とし込みます。
ワイヤーフレームの仮作成後はクライアントへ確認を取り、修正を加えて正式に完成させます。

ちなみに、ノーコード・ローコード制作の場合は、
そのままブロックエディタで直接サイトを作成し、そちらをワイヤーフレーム扱いとすることもあります。
受注単価が低い、または希望納期が詰まっている場合などに有効な方法です。

ワイヤーフレーム作成におすすめの記事

ワイヤーフレームを作成する場合は、
作成後はクライアントに提出した作業内容やスケジュール、
そして作成したワイヤーフレームを制作チームでも共有します。

必要であれば、クライアントに提出したものとは別のスプレッドシートなどを用意し共有すると、クライアントと共有したスケジュールとチームで共有するスケジュールとで分けられるので使い勝手も良いでしょう。

課題管理表は、作業項目・問題点などを管理する表になります。
懸念事項・課題点を先にまとめておくことで、プロジェクトを進める上での指針になり進行もブレづらくなります。

デザイナー・コーダーへの開発環境準備の指示も済ませましょう。

下準備の段階で制作チームから疑問点が出ることも多々あります。
その場合は質問をまとめて、クライアントへ再度確認を取りましょう。

確認後はチームへ内容を共有して、疑問が解消された状態で下準備を終えられるようにすることが重要です。
曖昧な項目を残したまま作業を開始してしまうと、修正の繰り返しとなってしまうリスクがあるので注意しましょう。

③サイトのデザインを作成する

ワイヤーフレームが出来上がり、制作チームの疑問も解消されたらサイトのデザイン作成に入ります。
ここからはWebデザイナーと連携して作業します。

TOPページやカテゴリーページといったサイトの要を基本デザインとして、
作成後はクライアントに確認してもらい、修正をして作りこんでいきます。
※修正項目はWebディレクターがまとめておくとスムーズです。

基本デザインにクライアントからの了承が出たら、
ページ分のデザインを作成してクライアントの最終了承を取ります。

これでデザインは完成です。

次に開発へ進みましょう。

④開発

Web制作での開発は、全ページコーディング、
またはWordPressテンプレートをもとに追加CSSカスタマイズ、この2パターンになる場合が多いです。

コーディングはデザインの通りサイトを構築する作業です。
デザインをコーダーに渡し進捗状況を確認しましょう。

コーディングとテンプレートどちらも兼ねている場合は
デザインを渡して開発についても指示を細かく伝えられるようにしておきましょう。

テンプレートでノーコード・ローコード制作のみの場合は
ワイヤーフレームを兼ねて作成したWEBサイトに画像やテキストを加えて、見た目を整えて完成を目指しましょう。

進捗状況はなるべく都度確認にして、
スケジュールが予定通り進んでいるかどうか確認するのもWebディレクターの仕事になります。

Webサイトの各種システム・設定が動くかどうか品質チェックも必要

構築したサイトが動くかどうかの品質チェックも必ず行いましょう。
いざ出来上がったのに、
本番サイトへ移行してから「動かなかった!」では全員が困ってまいます。

思った通りに動くか、サイトに当てはめた時に問題ないか調整するのも忘れないようにしてください。
Webディレクターはこの時、修正がある場合は指示を出します。

このタイミングまでにクライアントからサイトのサーバーやドメイン情報を受け取る

クライアントからサイトのサーバーやドメイン情報を受け取っていない場合は
このタイミングで受け取っておきましょう。

サーバーやドメイン契約のサポートが必要であれば、サポートも開発期間に行います。

⑤修正

サイトが出来上がったら本番サイトへテストアップを行います。
開発は大体がローカルで行いますが、
ネットワークに乗せたら不具合が出たということはありえますので、修正することを前提に行います。

この時、「noindex設定」をしておくようにします。
※noindex設定をしなければGoogle検索に載ってしまいますので気を付けましょう。

テストアップしたら、サイトに不具合が出ていないか調べます。
ブラウザごとにデザイン崩れがないかもチェックしておきましょう。

ここで気づいた点をまとめて修正作業を行います。

クライアントにチェックしてもらう

テストアップしたら、クライアントにもチェックしてもらうようにします。
ここでは必ず修正箇所が出てきますので、クライアントからの意見を元に修正点をまとめます。

まとめたらデザイナーやエンジニアへ修正点をシェアし、
修正後にクライアントへ再度チェックしてもらうようにしましょう。

ここで大切なのが、
修正箇所が見つかる都度に修正依頼をするのではなく、まとめて依頼するという点です。

都度修正は非常に効率が悪く、
また終わりが見えないため全体の士気が下がりやすくなります。

ミスの元にもなりうるので、
できるだけ指示はまとめて出すようにしたいですね。

修正が間に合わなそうであればスケジュールの見直しも行う

修正が間に合わなさそうな場合、スケジュールの見直しも必要となります。
スケジュールを見直したらクライアント・チーム両方に共有しましょう。

大幅なデザイン変更は追加料金を頂く

クライアントによっては大幅なデザイン変更を求めてくる場合もあります。
大幅なデザイン変更は不可であると契約に含めていますから、契約を一緒に振り返りながら「デザイン変更は不可であること、変更するのであれば追加料金が必要であること」を伝えるようにします。

⑥本番サイト公開

修正も終わったら、いよいよ本番サイト公開です。
noindex設定をindex設定に変更し、公開状態にしましょう。

公開が終わった後も、今一度サイトのチェックを行います。

修正の時点では問題なかったけれど、
公開後に見直したら修正箇所が見つかったということもよくある話です。

修正箇所が見つかったら修正箇所をリスト化し、
修正し終えたらこのプロジェクトは完了となります。

⑦運用

サイト公開後も、
サイトの目的を達成できているかのチェックまでプロジェクトに組み込まれている場合、
運用できる状態まで構築しましょう。

チェックには、以下のサービスを活用します。

  • Googleアナリティクス
  • Google Search Console

アナリティクスとGoogle Search Consoleの導入方法については、下記の記事を参考にしてください。

Googleアナリティクス

Google Search Console

Webディレクション業務をうまく行うコツ

Webディレクション業務の流れは見えてきましたね。
ではこれらを円滑に進めていくためのコツを紹介します。

以下のポイントを押さえておくと、うまくいきやすくなります。

  • こまめな連絡
  • 電話で伝えたことも後にメールで送る
  • 制作スケジュールには品質チェックや修正作業時間も含める
  • 制作メンバーへの修正指示はまとめて送る
  • 修正理由を明確にする

それぞれ分けて解説します。

①こまめな連絡

Webディレクションがうまい人は、
連絡がマメですぐに連絡がつき、更に返信も早いという特徴があります。

Webディレクターは進行役です。
連絡が滞る人がその役目をしてしまうとプロジェクト自体が止まってしまいます。

つまり、

「連絡が早いWebディレクター」

というだけでうまくいきやすくなるんですね。

メッセージを開封したらなるべく早く返信をする、
どうしても忙しい場合でも、
「◯◯時頃までに返信いたします。」と一言返すように心がけていきましょう。

すると、
クライアントや制作パートナーにも安心してもらえるようになります。

②電話で伝えたことも後でメールで送る

電話での打ち合わせの際に、電話で要件を伝えたとします。
要件を終えた後に、メールで内容を送るようにすると相手にとっても親切です。

こちらも伝えたことを残るので後から
「あれ言ったっけ?」「これ伝えたよな?」と悩まず済みます。

何より、後から「言った、言わない」のトラブル防止にも役立ちます。

電話で伝えたことを、
わざわざメールで送るのは手間に思えて、後からの手間削減に繋がります

電話で伝えた後には必ず文章で送るようにしましょう。

③スケジュールにはWebディレクターの品質チェックや修正作業時間も含める

スケジュールをクライアントとチームでシェアしますが、
ディレクターの品質チェックや修正作業時間も組み込むようにしましょう。

品質チェックはすぐ終わると仮定してスケジュールに含めない場合がありますが、
含めた方が
「この期間はチェックの時間」となるので含た方が適切です。

また、修正は必ず入るものなので修正作業時間も入れておかないと、
後から見直す手間が発生するので入れたほうが無難です。

クライアントの希望に合わせて納期を設定することも大切ですが、
現実的なスケジュールを組むこともWebディレクターの仕事です。

理想を掲げて遅れるよりも、
最初に定めた余裕のあるスケジュールで進む方が心象も良いのです。

チェック時間・修正作業時間を含めて
実際にかかる作業時間に余裕を持ったスケジュールを組めるようにしましょう。

④制作チームへの修正指示はまとめて送る

修正指示は必ずまとめて送るようにします。

自分がチェックした時はもちろん、
クライアントからの修正依頼であっても、五月雨ではなく、まとめて送るようにしましょう。

「都度 修正指示を出したほうがスピード感があり良い」という考えもありますが、
実際に修正する立場からしてみると終わりの見えない指示は精神的にも疲弊するものです。

Webディレクションする立場でスケジュールを出しますが、
出された方もそれぞれ各々でスケジュールを立てるものです。

まとまらない修正指示はそれだけで作業のリズムを崩す原因になります。
控えましょう。

必ず修正指示はまとめること。

クライアントからの修正依頼も、まとめて修正箇所を教えてもらうようにしましょう。
難しい場合は、修正依頼がまとまった段階で制作チームへ指示を出すようにしてください。

⑤理由のある修正を依頼する

修正の際には、
「なぜ修正したいのか」をクライアントにも確認してから制作チームへ指示を出せるようにしましょう。

例えば強調したい文字や画像があった時、に画像や文字を目立たせる修正指示を出すわけですが、
これを伝えないと修正する側はなんとなく修正作業をすることになります。

するとどうなるかというと、
クライアントの思い描いたイメージ通りにはならず修正後に
「やっぱりなんか違う」
と再度修正依頼が飛ぶなんてこともあり得るのです。

では理由込みで修正を出すとどうなるかというと、
修正側からも
「目立たせたいならこうしたらいいんじゃないですか?」
「これは目立ちすぎます。この色の方が良いと思うのですがどうですか?」
と提案しやすくなり、
サイトデザインにもマッチする修正になる可能性が高くなります。

こちらも後々の手間を減らすうえで重要なことなので、意識して行うようにしたいですね。

ただし、
そもそも論ですが、
要件定義とデザイン確認を徹底して、途中修正なく制作完了までできるのがベストです。

まとめ

Webディレクション業務について、概要と流れ、コツをまとめました。
この過程はWeb制作においてとても重要す。

うまくいけば全体的な流れもスムーズになりやすい一方で、
うまくいかない場合はダラダラと案件が長引くという事もあり得ます。

気持ちのいいプロジェクトにするためにも、
今回の内容をしっかりつかみ、コツも押さえてスムーズな制作進行を目指していきましょう!

Web制作を通じて自由な人生をつかむ方法を公式LINEで配信しています。

無料登録でプレゼント

筆者としが運営するWEB制作支援コミュニティの公式LINEでは、無料登録でプレゼントを複数手に入れることができます。興味がある方は下記よりご登録ください。

\ LINE登録はこちら /

プレゼントの例はこちら。

・有益情報が満載の動画が多数のYouTube『とし Web制作フリーランス育成コーチ 』
・あなたの性格タイプがわかり営業に活かせる『ソーシャルスタイル診断』
・案件獲得ができるようになる『案件獲得ロードマップ』
・副業、フリーランスで成功した人たちの成功インタビューを集めた『講座生実績』

など様々なコンテンツを提供中です。

ご興味ある方は、ぜひ確認してみてください。

\ LINE登録はこちら /

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次