Webディレクターの仕事内容とは【受注から納品まで全部まとめ】

この記事では、Webディレクターの仕事内容を、受注から納品まで一連の流れで具体的にまとめました。ここで解説している仕事は、制作会社のWebディレクターを想定しています。社内ディレクターではありません。

なお、Webディレクターの仕事は所属会社や個人の資質によって違いが出てきます。なので、本記事で挙げられた内容を全てこなすかというと、そうでない場合もあります。逆もしかりで、もっと仕事が多い場合もあります。

この記事を読んで、Webディレクターの仕事を具体的にイメージすることができたら幸いです。

この記事を書いているのは、Webデザイナー歴17年、フリーランス歴は10年超えのデザイナーです。たくさんのWebディレクターとお仕事してきました。自身もWebディレクター経験あります。

目次

最初に:Webディレクターの立ち位置

Webサイトの構築案件で、全体を管理する総監督の立場になります。具体的には

  • クライアントとの窓口となり、要望をまとめて現場に落とし込む
  • デザイナーやプログラマ等に仕事を割り振りし、スケジュール通りに進行するよう制作全体を管理

する役目になります。

キックオフ

クライアントとの顔合わせ

まず最初に行われるのは、クライアントとの顔合わせです。Webディレクターは、クライアントと一番コミュニケーションを取る立場になります。制作の顔として恥ずかしくないようにしましょう。

顔合わせの後は、本格的なMTGに入ります。クライアントの要望をヒアリングしますが、ここが一番肝心で、ここでうまいヒアリングができないと案件が失敗します。

  • どういうサイトを作りたいのか
  • サイトで得たいこと(ゴールの選定。顧客獲得、資料請求、ブランディングなど)

上記はまず最初に確認する様にしましょう。初回打ち合わせには、確認漏れがないようヒアリングシートがあるといいです。

また、先方の案を聞くだけでなく、こちらからも良い提案ができるといいですね。

制作メンバーの選定

クライアントから聞き出した内容を元に、必要なスタッフを選定します。

Webサイトの制作スタッフは、デザイナー、プログラマ、コーダー、イラストレーターあたりになります。社内でスタッフが複数いた場合はどの人材を当てるか何人必要かを決め、そのスタッフのスケジュール調整もします。

また、外注業者が必要な場合はどの会社(もしくはフリーランス)に頼むかを考えるのも、Webディレクターの仕事です。

スケジュールの作成

サイトの内容とスタッフがほぼ確定したら、制作スケジュールを立てます。

スケジュール管理表を作る場合は、まずはゴール(納期)を仮でもいいので明確にします。

  • どのスタッフがいつまでにどの作業を終えるべきか
  • クライアントからの素材提供・確認作業のデッドエンドはいつまでか

といったサイトに関わるメンバー全員のタスクを洗い出し、漏れがないようなタスク表を作ります。

また、出来上がったスケジュール表は、メンバー全員が進捗状況を把握しながら進める必要があります。

Web制作のスケジュールは、少人数なら Excel (Googleスプレッドシート)での共有管理でも十分ですが、たくさんのスタッフが関わっている場合は、管理ツールを使うのも便利です。

backlog

スケジュール管理だけでなくGitHubによるファイル管理やチーム内のコミュニケーション管理もばっちり。チーム管理に最適なツールですが有料

Jooto

直感的に使えるアプリっぽいインタフェースが魅力。エクセルではいちいち書き直していたのが、ドラッグ&ドロップで簡単に修正できるので使いやすいです。4名まで無料

なお、細かいスケジュール表を作る前に、おそらくクライアントから「だいたいどのくらいでできそう?」という軽い打診は受ける可能性が高いと思います。そのため、サイトの規模ごとの大体の目安は打ち合わせ前に想定して考えておくといいでしょう。

予算の見積もりの確定

予算の御見積はキックオフ前の場合と後の場合がありますが、とりあえず最初のどこかの段階で見積書を作成しなければいけません。営業がいる場合は、営業担当が見積もりを作る場合があります。

しかし、制作スタッフの具体的な稼働率や制作ボリュームに関してはWebディレクターが一番知っている立場ですので、営業と相談して具体的なコストを出すことになります。

ツールの選定

クライアントやチーム内でのコミュニケーションツールを選定するのもディレクターの仕事です。近年では、SlackやChatWorkといったチャットツールが一般的ですね。Web会議であれば、zoomでいいかと思います。

ツールを選定したらさっそくグループ等を作って、メンバーを招待しましょう。

基本的には、2つに分けて運用します。

営業用

クライアントの担当者と自分、制作スタッフ代表を数名

内部用

制作スタッフのみで使う。

※外注業者を内部用に入れるか、また別にチーム分けするかはディレクター次第

データ管理の方法

クライアントからもらった素材データや制作データをどう管理するかを選定します。

まず、クライアントと素材データの受け渡しをどうするかを考えます。Googleドライブ等の共有できるクラウドスペースがあればそこで、スペースがない場合やファイルデータがかなりの重さの場合は、ギガファイル便といったファイル転送サービスを使うことが多いです。

また、スタッフが作成したファイルの管理も重要です。特にチームの場合は、デザイナー→Webコーダー→エンジニア間でのファイルの受け渡しがあり、エンジニアが複数いる場合もあります。チーム作業、特に外注業者も入ると、ファイルの先祖返り等のトラブルも起こり得ますので、クラウドスペースを使ってしっかりとバージョン管理する必要があります。

Googleドライブ

誰でも導入でき無料で15GBまで使える。シンプルなファイルの受け渡しやバックアップに便利

backlog

GitHubによるファイル管理でソースコードの同期管理も可能

本番環境の選定と開発環境の準備

クライアントからのヒアリング後、どんなサイトになるか大体のイメージがついたら、本番環境をどうするかを考えます。サーバーはどれがベストかを選定しなくてはいけません。

サーバーはアクセス数やシステム負荷によってどれがいいかが変わりますし、先方の予算の問題もありますので、専門職のエンジニアの意見を聞くことも大事です。

また本番環境が決まったら具体的にどう環境を準備していくか(サーバーはいつ契約する?ドメインはいつまでに決める?)を洗い出して、スケジュール表に入れていきます。

同時に、エンジニアにお願いして、本番環境と同じ環境で開発環境を構築してもらいます。

設計フェーズ

環境が整いスタッフが揃ったら、いよいよサイト制作が本格的に指導します。

このキックオフと設計フェーズがWebディレクターの一番忙しい段階です。制作が軌道に乗ると少し楽になりますので、後一踏ん張りです。

サイトマップの作成

サイトマップとは、サイト全体の地図です。新規サイトを作る場合、どのコンテンツが必要か、どういう分類をするかというのを考えなくてはいけません。

必要なページ全てを洗い出し、最適な導線を考えて、サイトマップの形にします。

要件定義

要件定義とは、クライアントの要望を引き出し、サイトやサービスに必要な機能をまとめることです。

初回で聞ききれなかったことや、社内会議で出た疑問点などを再度まとめ、何度でもクライアントと打ち合わせを重ねましょう。

要件定義がきちんとできているかどうかで、プロジェクトの成功が決まります。

UI/UXの設計

UI=ユーザーインターフェース

UX=ユーザーエクスペリエンス

といい、近年のWebサービスにおいて欠かせない概念の一つです。

UIはユーザーがわかりやすく操作しやすい画面を設計することです。具体的にはユーザーに伝わるレイアウト・ボタン等にこだわり、ユーザーが目的地(商品購入等)にスムーズに移動できるサイトデザインを構築します。

デザインをはめる前に、画面の要素やコンテンツの選定や導線、レイアウトを考えて、ワイヤーフレームを起こす仕事です。会社によっては、UIデザイナーがいますが、いない場合はWebディレクターが考えることが多いです。

また、UXはユーザーがベストと思える体験をサイトでできるよう設計することが仕事内容です。

これは過去のサイト解析を参考にしたりマーケティングやペルソナ設定を重ねて、よりよいサイトに近づけていく作業です。これもWebディレクターは常に意識していなければいけません。

ワイヤーフレームの制作

先ほど考えたUI、画面の要素やコンテンツの選定や導線、適切なレイアウトを、実際に紙(データ)に起こす作業です。このワイヤーフレームがサイトの肝になります。

ワイヤーフレームの作成にはいろいろなツールがあります。昔ながらのパワーポイントの人もいれば、XDやfigmaといった新しいツールを使う人もいます。紙に手書きの人もいます。

使い慣れたものでいいと思いますが、XDやfigmaであればそのままデザイナーに渡せて、プロトタイプも作れますので便利かと思います。

必要なシステムの洗い出しと準備

今はほとんどのサイトがCMS構築を主軸としていますので、もしCMSを使うか使うならどれにするかを選定します。また、それ以外のプログラムが必要かどうかも考えます。プログラムならどの言語?フレームワークは?といったことも決めなくてはいけません。

これらはWebディレクターが一人で考える必要はなく、チームで考えていきます。

制作フェーズ

制作フェーズに入ると、Webディレクターは手を動かさず、基本的に進捗管理が大きな仕事となります。

制作スタッフへの指示

スケジュール表通りに制作スタッフへの指示を行います。基本的に制作スタッフは自分のタスクしか見えいませんので、もし連携が必要な時はWebディレクターが間に入ったり、うまく調整して指示を出したりします。特に外注業者への指示は、Webディレクターが都度行うことが多いです。

クライアントとの調整

デザインカンプができた時等、クライアントに確認してもらうタイミングが都度あります。また、出来上がったデザインに対して修正も入ってきますので、クライアントと制作スタッフの間に立ち、Webディレクターが調整をしていきます。

さらに、制作進行中でも、クライアントは「こんな内容も載せたい」「こんなふうにしたい」と希望をどんどん投げかけてくるパターンが多いです。意見をヒアリングし、大丈夫そうならスケジュール工程を変更し、制作スタッフへ新しい指示を出す。予算やスケジュール的に難があればクライアントと交渉するといった仕事もあります。

必要素材をなかなか出しこないクライアントも多いので、督促も必要です。

全体的な進捗管理

制作スケジュールが遅れないよう、全体的な進捗管理を行います。遅れたらうまく調整する、もしくはクライアントへ説明するといった全体管理を行います。

定期的に社内MTGを持つWebディレクターもいれば、日々の作業の確認のみのディレクターもいますし、スタッフに任せきりのディレクターもいます。人それぞれです。

テストフェーズ

制作フェーズが完了したら、テストフェーズに入ります。

テスト・プロトタイプのアップ

まずは形になったWebサイトをテストサイトの形でアップします。アップするのは制作スタッフで、Webディレクターは指示を出します。全体公開にならないよう、パスワードはかけましょう。

テスト・デバッグ

クライアントに見せる前に、内部スタッフでテストします。

Webディレクターは、エクセル等で修正項目の管理表を作り、テストで出てきたバグや修正項目をひとつひとつ羅列していきます。修正項目に対して担当者を当てて、つぶしていく作業を繰り返します。

クライアントとの調整

内部テストが終わったら、クライアントに連絡して、最終チェックをしてもらいます。

ここで修正がクライアントから上がってきたら、それも修正管理表にまとめて、ひとつひとつ潰していきます。

本番サイトの公開

公開日を決める

サイトの完了が近づいてきたら、本番公開日を決定します。

クライアントの社内的にこの日!というのが決まっている場合もありますし、お互いの予定の合う日を調整して決定する場合もあります。

もし自由に決められる場合は、できれば不具合が出た場合でもすぐに対応可能な日や時間がいいです。長期休みの前日とかだと、仮にトラブルが起こった時に対応が厳しいので、双方の損になります。

公開にあたって必要な手順の洗い出し

公開が決まったら、改めて本番公開の手順を見直ししましょう。必要なスタッフや実際の作業手順、必要であれば手順をクライアントと共有します。

当日の確認

公開当日はWebディレクターも同席しているのがベストです。公開後はすみやかにクライアントに連絡しましょう。

万が一のトラブル対応

公開後数日は、万が一のトラブルに備えておくといいです。Webサイトにトラブルはつきものなので、必要以上に構えず、何かあったら即対応できるスタンスでいるといいと思います。

運用フェーズ

Webサイトは公開して終わりではありません。Webサイトは生き物です。案件によっては納品して終わりの場合もありますが、制作後の運用も任されるケースも多いです。

クライアントの窓口

クライアントの窓口は引き続きWebディレクターの仕事です。

運用後もWeb業界はトレンドが変わっていきますので、積極的に新しい技術やサービスを提案できるディレクターは、クライアントからも好かれます。

制作スタッフへの指示出し

制作スタッフへの指示出しもWebディレクターの仕事です。制作スタッフと運用スタッフが変わる場合が多々あります。この場合、初期を知っているのがディレクターだけということにもなりかねますので、しっかりと情報共有をするようにしましょう。

まとめ

Webディレクターの仕事内容、いかがでしたでしょうか。こうやって書き出すと非常に作業が多いですね。基本的にWebディレクターは頭を使い、コミュニケーションをする仕事です。

細かい実作業も必要ですが、もしAD(アシスタントディレクター)がいると、楽になりますね。

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