Webディレクターに興味を持ったんだけど、仕事内容が良くわからない…
Webディレクターの仕事は、Webの制作でお客様と制作メンバーの間に立って進行管理を行う、現場監督のような仕事です！
Webディレクターという職業を聞いたことがあっても、実際に仕事で関わったことがないという人も多いでしょう。営業やデザイナーだったらどんな仕事をしているかわかっても、実際にWebディレクターがどんな仕事をしていて、どんな役割なのか、イメージが付かないのではないでしょうか？
この記事では、そんなWebディレクターの仕事について、Web制作の現場で働いて5年目の現役Webディレクターが詳しく解説していきます！
- Webディレクターの役割や、なぜWeb制作に必要なのか
- Webディレクターが行うそれぞれの作業内容やポイント
- 現役Webディレクターが仕事の時に大切にしていること
Webディレクター
さかき
制作会社で働く現役のWebディレクターです。日々の業務で培ったWeb制作・SEO・WordPressの知識を、初心者にもわかりやすく発信しています。実務で役立つ情報はもちろん、仕事術や無料で使えるWeb制作ツールも紹介しています。
Webディレクターの仕事内容は？
Webディレクターの仕事は、Web制作の工程に幅広く関わりながらお客様と制作メンバーの橋渡しとなるWeb制作の現場監督的な役割です。Web制作の始めから終わりまで一貫してプロジェクト進行管理を行い、Webサイトの品質を担保するのがWebディレクターの大きな役割になります。そのため、仕事の内容についても以下のように多岐にわたります。
- ヒアリング：お客様の課題やサイト制作の要望を整理
- 企画提案：サイトの制作内容や目的などを整理して提案
- 要件定義：システム開発や細かい設計に関わる内容をまとめる
- ワイヤーフレーム作成：サイトの構成や制作内容を整理
- 進行管理：デザイナーやコーダーなどの作業者とやりとりをしWeb制作の進行を管理
- 品質管理：デモアップされたサイトをチェックしWebサイトの品質を担保
- 公開対応：サイトが問題なく公開されているのかチェック
- 運用改善：サイト公開後も課題や運用時の気づきを元に改善提案を行う
ここからは、それぞれのWebディレクターの仕事内容について詳しく解説していきます。
ヒアリング
ヒアリングでは、お客様からの課題やサイト制作の要望を整理し、サイトの内容の全体像を明らかにします。
ヒアリングでは、詳しい制作内容やプロジェクトの狙いなどを聞き、全体像の把握していきます。ヒアリングではデザイナーやコーダーなどの実作業者が関わることは少なく、Webディレクターがメインとなってヒアリングを行うことになります。そのため、Webディレクターが主体となってWeb制作に必要な情報や確認事項を整理してまとめることが大事です。
ヒアリングは主に打ち合わせやヒアリングシートを通して行います。主にヒアリング段階でチェックするべきことは、以下の通りです。
制作ボリュームについて
ランディングページやキャンペーンサイトなどの１ページものなのか、コーポレートサイトなどの複数ページのサイトなのかなど、どれくらいのボリューム感のサイトを制作するかを確認しましょう。
制作内容について
Web制作でどこまでの工程を行うのかを確認します。ほとんどの案件は企画提案から公開までを一貫して請け負いますが、一部の案件ではデザインだけやコーディングだけなど部分的な制作を請け負うこともあります。なので、どこまでの制作を請け負うのかを確認しましょう。
支給物について
お客様からWeb制作に関する材料をどこまで支給してもらえるのかを確認します。以下のような支給物があるのかを確認しましょう。特に支給物がない場合はゼロベースでの提案してもらうように考えている可能性が高いので、お客様がどのレベルの提案を求めているのかを認識合わせするためにも支給物の確認は大事です。
- Webサイトの構成や掲載内容に関する資料
- 掲載するテキストや画像
- サイトや会社のロゴ
- サイト制作に関するデザインのレギュレーション
制作のスケジュール感について
Web制作のスケジュールについては、いつから制作がスタート出来ていつまでに公開する必要があるのかを確認します。中には確認したスケジュールが現実的なものでない場合もあるので、その際は一部先行公開で制作ボリュームを分散するなどして、調整をしていく必要があります。
また、ご要望によっては公開前のティザーサイトを制作する場合もあるので、事前にすり合わせを行いましょう。
CMS導入の有無
Webサイトに関する一部のページをお客様側で更新できるようにするためには、CMS（Contents Management System：コンテンツ・マネジメント・システム）を使って管理画面を制作する必要があります。CMSを導入することで、htmlやCSS、Javascriptなどのプログラミングの知識がなくても、Webサイトの更新や管理ができるようになります。
システム開発が必要か
ブラウザ上で動く動的な機能やデータ処理の仕組みを構築する場合は、Webサイトの制作とともにシステム開発が必要になります。例えば、以下のような機能の構築にはシステム開発が必要になります。
- ECサイトでの商品検索、カート、カード決済、注文履歴の管理などの機能
- 店舗などで利用するお客様の予約システム
- サイトへのユーザー情報の登録機能
- 顧客の名前、連絡先、過去の購入履歴や問い合わせ内容を一元管理する顧客管理システム（CRM）
ドメインやサーバーは用意するか
お客様によっては、既存のサイトと同じURLの直下にページを制作したり、サーバーも契約済みのものを利用したいという要望があります。その場合は、ファイル納品等でお客様に制作データを納品する必要があります。ドメインもサーバーも新規で契約する場合には、お客様の予算感やサイトの規模感を考慮して、最適なドメイン・サーバーを契約しましょう。
ヒアリングのタイミングはまだお客様自身も制作内容が定まっていなかったり、場合によっては相談ベースでの話し合いになる場合もあります。実際の現場でも、「具体的にどういったサイトの制作が出来るの？」「こういう場合ってどんなページや機能が必要になるの？」といったように手探りの質問なども多いです。
お客様の不安がぬぐえるように、実際の制作実績を見せられるように準備したり、お客様や競合他社のサイトをリサーチしておくようにして、スムーズに質問に答えられるように準備しておきましょう。
企画提案
企画提案では、Webサイト制作の目的や必要な機能、進め方を明確にし、スムーズに制作を進められるようにします。
ヒアリングの内容を元に、サイト構成や改善案を考えます。大きな案件であれば提案書や企画書を取りまとめて、お客様とのすり合わせを行います。企画提案書を作る際にまとめる項目については、主に以下の内容になります。
制作内容・目的
ヒアリングした内容を元にサイトを制作する目的やゴール、制作後のポジショニングを設定していきます。
- Webサイトを公開する目的（何のために必要なサイトで、どのように活用していくのか）
- サイトのコンバージョン（商品購入、会員登録、資料請求、お問い合わせなど、何をサイトの成果と設定するか）
- サイトのポジショニング（他社との差別化やどういった強み持ったサイトにするか）
構成ラフ・仮デザイン
ワイヤーフレーム制作前に、提案の段階でワイヤーフレーム制作前の構成ラフを作成して、必要な要素や構成のイメージを掴んでもらいます。構成ラフの段階では具体的なサイトの掲載情報やコンテンツの数などを完成させる必要はありません。大まかな掲載項目や情報を整理しましょう。
KV制作イメージや撮影案
Webサイトの印象に大きく関わるKV（キービジュアル）について、具体的なデザイン案を提案することも重要です。デザインのイメージ案を制作したり、写真や動画などを取り入れたKVを制作する場合は、撮影内容についての概要なども併せて提案しましょう。
簡易的なサイトマップ
ページ数やフローがわかるようなサイトマップを制作します。提案段階では細かいサイトマップまでは作らなくても問題ありませんが、以下のようなページの階層や総数が一目でわかるようなサイトマップを作る必要があります。
制作のスケジュール感について
現段階の制作ボリュームや公開日程を元に、構成などの制作や要件定義、デザイン制作、コーディング、デバイスチェックなどの各工程ごとの簡単な進行スケジュールをまとめます。細かいページ数や要件も定まっていない段階なので、今までの制作実績を元にした概算でのスケジュールを設定します。
体制図
大きなプロジェクトや初めての案件の場合には、制作に関わるメンバー構成を体制図としてまとめます。営業、Webプロデューサー、Webディレクター、デザイナー、コーダー、エンジニアなどどんな体制でプロジェクトを進めていくのかをまとめていきましょう。
新規案件でECサイトのリニューアルを行った際に、提案段階での認識合わせが甘く、構成からデザイン制作に移ったタイミングで追加の要件やページなどの要望が多く発生し、予定していたデザイン制作期間よりも数週間後ろ倒しになってしまうという経験も実際にありました。
企画提案での認識合わせが詰め切れていないほど、後から要件の追加や想定していなかった問題などが発生しかねません。そういったリスクを事前に回避するためにも、企画提案を通してサイト制作の目的や狙いなどの軸を定めていく必要があります。
要件定義
プロジェクトのボリュームが大きい場合やシステム開発が伴う場合などは、企画提案だけでなく要件定義をまとめる必要があります。ページの仕様やシステムの内容などを取りまとめた要件定義書を制作して、制作の規模感と必要な開発内容を明確にしていきます。例えば、要件定義書に掲載する内容は以下のような内容を詳細にまとめて、お客様とプロジェクトの認識齟齬が起きないように要件を固めていきます。
- Web制作の背景：制作の目的、現状の分析、制作の全体像など
- プロジェクト概要：チーム体制、制作スケジュール、納品物や納品方法、定例ミーティングの回数など
- サイト概要：サイトマップやサイトの構成、制作内容
- システム要件：Webサイトの実装したい機能の内容
- 開発環境：プログラミング言語、フレームワーク、データベースの種類など
- インフラ要件：サーバー、ドメイン、検証環境・本番環境の準備など
- セキュリティ要件：セキュリティ強化の方法や被害が発生した際の対応など
- リリース要件：デモアップ時の検証項目、公開の手順、公開日など
- 保守運用：バックアップの頻度、レポート制作や報告の体制、お問い合わせの際の対応について
ランディングページやキャンペーンサイトなどのボリュームの比較的軽いものや、コーポレートサイトなどの複数ページでもシステム開発を伴わないサイトの場合は、要件定義書は作らずに企画・提案に留める場合もあります。僕自身、上記のようなシステム開発を伴わないサイトの制作が多いので、要件定義書を制作したことはほとんどありません。
ただそういった場合でも、要件定義書レベルでなくても企画提案の資料などを通して制作内容の目線合わせをしっかり行うことが大事になってきます。
ワイヤーフレーム作成
ワイヤーフレーム制作では、ページ構成を設計する。デザイン制作前のページの要素や内容を決めていきます。
サイトのデザインを作る前の設計書がワイヤーフレームです。デザインやコーディングなどの実制作に移る前に、サイトの構成や画像やテキストなどどんなものが入ってくるのか、どういった機能が必要になるのかなど、実際のWebサイトのイメージに近い形で作っていきます。デザイナーやコーダーに制作をしてもらうための設計図になるので、Webディレクターにとって一番ボリュームが大きく、かつ重要な仕事になります。
ワイヤーフレームは、基本的には白黒などシンプルな色味で「あくまでも設計図」であることが分かりやすい形で制作します。例えば以下のように、ページの構成や入ってくる要素を設計図として制作して、右側にコメントなどで詳しい説明や補足を記載します。資料上でページのどこに何が入って、どんな機能があるのかがわかるようにまとめましょう。
Webサイトの制作をいくつも取り組むようになったり制作するサイトのイメージが強すぎると、ワイヤーフレームに色を付けたり細かい装飾までこだわりたくなってしまいますが、ワイヤーフレームはシンプルな形で制作しましょう。あまり細かく作り過ぎてしまうと、デザイナーが自由にデザインできなくなったり、お客様のデザインのイメージがワイヤーフレーム通りに凝り固まってしまいます。
デザインをより良いものにするためにも、ワイヤーフレームは掲載要素が
進行管理
進行管理では、Web制作が円滑に進むようにプロジェクトのかじ取りを行います。
スケジュールやタスクを管理しながら、サイト制作が円滑に進むようにかじ取りをするのが進行管理です。特にデザインやコーディングでは、お客様とのやりとりや修正によってスケジュール通りにいかなかったり制作が難航することも多いので、スケジュールや残りのタスクを考慮しながら、スケジュール通りサイトが公開できるように調整を行っていきます。進行管理で重要になってくる内容には、以下のようなものがあります。
スケジュール制作
企画提案からサイトの公開までの全体のスケジュール表を制作します。Web制作の工程は細かく関わってくるメンバーも幅広いため、スケジュール表通りに進行できているかをWebディレクター自身が確認しながらプロジェクト進行を行います。
デザインやコーディングの進行管理
デザインやコーディングの工程で、制作内容の共有や実際の制作物のチェックを行います。プロジェクトによっては最初からデザイナーやコーダーが入るわけではなく、制作が始まるタイミングで案件の共有や制作物の共有を行うこともあります。プロジェクト進行を行うWebディレクターが、案件の詳細や進行について注意するべきポイントを共有して、円滑にデザインやコーディングが進められるように進行管理を行いましょう。
お客様への制作物の確認
お客様にデザインやデモサイトを共有して、修正点や追加の支給物などがないか確認します。デザイナーやコーダーの代わりに制作物の内容を説明して、お客様のフィードバックを引き出しましょう。
制作現場ではスケジュールが急に変更になったり、お客様から思いもよらぬフィードバックをもらうことも多いです。実際に制作を行うデザイナーやコーダーに負担がかからず、制作のクオリティも下がらないように調整役となることが、プロジェクト進行を行うWebディレクターの大事な役割です。
品質管理
品質管理では、Webサイトのクオリティが担保されるように、制作物を細かくチェックをしていきます。
Web制作の進行管理と同時に、Webサイト自体の品質管理もWebディレクターの仕事になります。お客様の要望に沿ったWebサイトになっているのか、デザインや機能面に不具合がないかを細かくチェックして、品質を担保した状態で制作物を納品することが大事になります。デザイン制作時や、デモアップ時のデバイスチェックを通して、以下のような不具合がないかをチェックしましょう。
- デザインが崩れていないか
- フォームやサイトのシステムなどの機能の不具合がないか
- テキストや画像がダミーになってたり、URLのリンク切れなどないか
デザインやデモサイトでも何回もチェックを挟むのでつい見落としてしまう場面でもあるので、気を引き締めて細かな点までチェックすることが大切です。
僕自身も何回もサイトのデバイスチェックを経験しているので、感覚的になってしまう部分もあり公開直前で見落としに気が付いたり、公開のタイミングでお客様からご指摘をいただく経験がありました。経験則でやるほど見落としに繋がってしまうので、チェックシートなどを用いて漏れなくチェックするなど工夫して取り組みましょう。
公開対応
公開では、サイトのリリース作業を行う。サーバーにサイトをアップされたことを確認し、お客様に公開報告を行います。
デバイスチェックが完了したらいよいよ公開です。実際のサイトのURLに完成したサイトのファイルを上げて、サイトリリースを行います。基本はコーダーが公開作業を行い、Webディレクターは実際に問題なく公開されているかをチェックします。
WordPressなどのCMSを導入したサイトを公開する際には、公開前後にマニュアルをお客様に渡してサイトの更新をお客様自身で行えるようにしていく必要があります。マニュアルについては、管理画面のログイン方法から操作方法、運用の際の注意点（更新する際のチェックポイントや、画像の推奨サイズなど）を明記して、お客様が安心して更新作業が行えるようにしましょう。また、慣れてないお客様の場合は読み合わせを通して一通りをレクチャーしましょう。
マニュアルについては、初めて使うお客様でも読んで使い方がわかるように丁寧に作りましょう。お客様はWordpressなどの管理画面を触ったことがないことがほとんどです。Webディレクターもお客様と何度もお電話や打ち合わせで使い方を教えていくことも、なかなか時間を取れず難しいでしょう。マニュアルや読み合わせなどのレクチャーを通して今後の運用が問題なくできるように丁寧に教えることが大事になってきます。
運用・改善
運用改善では、お客様と並走してサイトの運用や保守を行う。場合によってはGoogleアナリティクスなどの計測データを元に改善提案を行います。
Webサイトは公開して終わりではありません。サイト公開後もお客様の課題や気になる点を確認していくことも大事です。Webディレクターは公開後も、担当者としてお客様と共にWebサイトをより良いものに改善していくよう引き続きサポートしていくことが重要です。サイト運用時に気づいた不具合や改善点をお客様とすり合わせて、必要によってはサイトの改修や新しいページの制作などを行いましょう。運用改善では以下のような情報を元に提案を行っていきましょう。
- Googleアナリティクスなどの分析データ
- お客様がサイトの運用を通して発見した改善点
- お客様とのお打ち合わせやヒアリングを通して出てきた課題
コーポレートサイトなど足の長いサイトはもちろんのこと、ランディングページやキャンペーンサイトなどでも今後のWeb制作の発注先となるように関係性を築くことが重要です。細かい点までフォローしたり、お打ち合わせの際に公開後の状況についてのヒアリングを通して追加の提案なども積極的に行っていきましょう。
全体のプロジェクトのかじ取りをするのが、Webディレクターの大きな役割
Webディレクター業務の中で一番手を動かすタイミングは、ヒアリング～ワイヤーフレームの制作までです。案件によってはここまでの間は基本デザイナー・コーダーを挟まずにお客様と直でやりとりをして要件を詰めていくことになります。
事前のワイヤーフレームや要件定義などが、その後のデザイン・コーディングの大きな軸になります。ここでお客様との認識合わせと制作の道筋づくりを出来ているかが、案件進行の肝になります。
基本的にははじめから終わりまでを全て関わって案件の成功へと導くのがディレクターの役割になります！
まとめ
今回は、Webディレクターが実際にどんな仕事をしているのか、工程ごとに詳しく解説しました。
- Webディレクターの仕事は、Web制作の工程に幅広く関わりながらお客様と制作メンバーの橋渡しとなるWeb制作の現場監督的な役割
- Webディレクターの仕事は、ヒアリング、企画提案、要件定義、ワイヤーフレーム作成、進行管理、品質管理、公開対応、運用・改善がある
- Webディレクター業務の中で一番手を動かすタイミングは、ヒアリング～ワイヤーフレームの制作まで
Webディレクターの仕事は、プロジェクトの進行管理的な役割が大きく、立ち上げまでの情報の整理や制作時の進行管理など地道な仕事も多いです。ですが、最初から最後までプロジェクトに関わる分、Webサイトが公開された時の達成感は計り知れません。
Webディレクターの仕事に興味を持ったり、これから力をつけていきたい人は、是非こちらのようなポイントを押さえてWeb制作に取り組んでいきましょう！
