目次
ディレクションに携わるようになってから2年以上が経ち、ようやくディレクションについて少し理解できるようになってきた気がします。
Web業界以外の方と話す機会があると、「Webディレクターって何をやっているの？」「ディレクションって何？」と聞かれることがよくあります。デザイナーやエンジニアと比べると、仕事内容の説明がしづらい職業かもしれません。
この記事では、Webディレクターの基本的な役割から普段の業務の流れまでを詳しく説明していきます。
Webディレクターとは？
基本的な定義と役割
Webディレクターとは、Webサイトの企画・設計・制作・運用において、全体のディレクションを行う専門職です。主な役割は、プロジェクトの目標設定からスケジュール管理、チームメンバーの調整、クライアントとのコミュニケーションなど、多岐にわたります。Webサイトの完成度を高め、クライアントのビジネス目標を達成するために、各専門分野（デザイン、開発、マーケティングなど）の協力を統括します。
必要なスキル
Webディレクターには、幅広い知識とスキルが求められます。以下に主要なスキルセットを挙げます。
・コミュニケーション能力：チームメンバーやクライアントとの円滑なコミュニケーションは、プロジェクトの成功に欠かせません。明確な指示やフィードバックを提供し、意見の調整を図る能力が必要です。
・プロジェクト管理能力：プロジェクトのスケジュールを管理し、各タスクの進行状況を把握することが求められます。タスク管理ツールやプロジェクト管理ソフトウェアの活用も重要です。
・マーケティング知識：Webサイトはビジネスの一環として運用されるため、マーケティングの基本的な知識やSEO（検索エンジン最適化）、コンテンツ戦略の理解が必要です。
・技術知識：HTML、CSS、JavaScriptなどの基本的なWeb技術の理解は、開発チームとのコミュニケーションを円滑にします。高度な技術知識までは求められませんが、基本的な用語や概念の理解は必須です。
・デザインスキル：ユーザーエクスペリエンス（UX）やユーザーインターフェース（UI）に関する知識が求められます。美しいデザインだけでなく、使いやすさも考慮したデザインを提案する能力が必要です。
Webディレクターになるには？
Webディレクターになるために特別な資格や実績は必要ありませんが、Webに関する幅広い知識が求められます。以下では、経験者と未経験者それぞれのキャリアパスについて詳しく見ていきます。
Web業界経験者の場合
Web業界での経験がある場合、デザイナーやエンジニアからWebディレクターに転身するケースが多いです。既に業界内で働いているため、Webディレクターの役割や業務内容を理解しており、比較的スムーズにキャリアチェンジが可能です。
・Webデザイナーからの転身: UX/UIを考慮したデザインを上流工程から考えることができるため、Webディレクターとしての視点が広がります。
・エンジニアからの転身: 開発知識が豊富であるため、システム開発に関する提案に強みを発揮するWebディレクターとして活躍できます。
いずれの場合も、これまでの専門スキル以外に新たな知識が必要となるため、経験を積みながら学び続けることが重要です。
Web業界未経験者の場合
Web業界未経験者がWebディレクターとして活躍することは可能ですが、必要な知識が多いため難易度は高めです。まずはデザイナーやエンジニアとして経験を積むか、アシスタントディレクターとして働きながら業界の基礎を学ぶと良いでしょう。
・Webデザイナーやエンジニアとして経験を積む: 実際のプロジェクトに携わりながら、業界の知識とスキルを磨きます。
・アシスタントディレクターとして働く: ディレクターを補佐するポジションで、業務の流れや必要なスキルを学びます。
このように、未経験者がWebディレクターになるためには段階的な学習と経験が重要です。
LudiusでのWebディレクターの仕事の流れ
Webディレクターの業務範囲は企業によって異なりますが、ここでは弊社Ludiusでの、コーポレートサイトのリニューアルプロジェクトを例に、Webディレクターの仕事の流れをご紹介します。Ludiusは「事業会社」ではなく「制作会社」に近いため、案件ごとに仕事内容が異なります。
企画フェーズ
要件定義
クライアントの目標や要望をヒアリングし、競合分析やニーズ調査も踏まえた上でWebサイトの目的やターゲットユーザーを明確にします。この段階では営業やプロジェクトマネージャーが担当していることが多いのですが、早い段階から打ち合わせに参加させていただき、一緒に進めていくこともあります。
サイトマップ作成
ホームページの構造を決定し、全体のページ構成を視覚化します。プロジェクトマネージャーがサイトマップを作成する場合と、Webディレクターが作成する場合があります。プロジェクトマネージャーから引き継いだ場合も再度構成を検討し、より良い改善案があれば提案します。
デザインフェーズ
ワイヤーフレーム作成
各ページの構成がわかるようにWebサイトの設計図となるワイヤーフレームを作成し、コンテンツの配置を決定します。これにより、クライアントと具体的なイメージを共有できます。この段階ではダミーテキストを入れておき、具体的な文章はクライアントに支給いただくか、改めてWebディレクターが検討して後ほど差し替えます。
ビジュアルデザイン
サイト構成にOKが出たら、デザイナーに引き継いでワイヤーフレームをもとに実際のWebデザインを作成してもらいます。クライアントからの要望やサイトの目的を踏まえて大まかなデザインの方向性を伝え、デザイナーとディレクターで相談しながらデザインを進めていきます。
開発フェーズ
フロントエンド開発
デザインをクライアントに確認してもらった後、エンジニアに指示して開発を進めます。開発に必要な情報はまとめてクライアントに確認します。
バックエンド開発
お問い合わせフォームやCMS機能など、サイトに必要な機能をエンジニアに共有して開発してもらいます。プラグインやシステムの導入が必要な場合は、最適なものを選定してクライアントに提案します。
サーバー・ドメイン準備
あらかじめ本番公開時のサーバーとドメインについて確認しておきます。リニューアルの場合は既存のサーバーとドメインの情報をクライアントから共有してもらい、リダイレクトの対応方法についても確認します。
テストフェーズ
全ての機能が正常に動作するか確認します。漏れがないようにチェックシートを作成し、フォームの送信、リンクの動作、アニメーションなどをチェックします。また、各種ブラウザでの表示と動作を確認し、崩れがないようにして互換性を確保します。metaタグやOGPなど、SEOに関わる設定も漏れなく確認します。
公開フェーズ
社内での動作確認が完了し、クライアントにもチェックしていただいたらエンジニアに公開作業を依頼します。公開後はサーチコンソールにサイトマップを送信し、検索エンジンに登録されるようにします。公開後の運用に関してもクライアントにフォローし、不明点がないか確認します。
主に使用しているツール
Backlog（プロジェクト管理ツール）
Ludiusでは、プロジェクト管理ツールであるBacklogを使用してタスクを管理しています。タスクの可視化や進捗状況の追跡に役立ちます。ガントチャートをドラッグ＆ドロップで直感的に編集することができるため、急なスケジュール変更があっても対応できます。
backlog：https://backlog.com
Chatwork（コミュニケーションツール）
社内のコミュニケーションツールとして、主にChatworkを使用しています。ちょっとした質問や緊急性の高い相談など、素早くやりとりできるのが便利です。また、クライアントの使用されているツールによってSlackやTeams、Googleチャットなども使用します。
Chatwork：https://go.chatwork.com/ja/
Adobe XD、Figma（デザインツール）
ワイヤーフレームの作成には、Adobe XDやFigmaなどのデザインツールを使用しています。あらかじめ汎用性の高いテンプレートを用意しているので、パーツを組み合わせることで効率的にワイヤーフレームを作ることができます。プロトタイプも作れるため、ワイヤーフレームの段階でWebサイトの動線をイメージしてもらいやすいのも重宝しています。
※XDはサポート終了の準備に入ったことが公式から発表されたため、弊社では現在Figmaへの移行を進めています。
Figma：https://www.figma.com/ja-jp/
Google スプレッドシート
ヒアリングシート、サイト構成表、要件定義表、質問事項、チェックシートなど、とにかくあらゆるフェーズでスプレッドシートを使用しています。Excelを使用することもありますが、とにかく動作が軽いのと、クラウド上で共有して複数人で編集できるのが便利です。
Googleスプレッドシート：https://workspace.google.com/intl/ja_jp/products/sheets/
注意点や気をつけていること
Webディレクターとして、まだまだ学ぶべきことは多いですが、日頃のディレクション業務で特に気を付けているポイントをまとめました。
なるべくやり取りはテキストで残す
言った言わないのトラブルを防ぐために、やり取りはなるべくチャットツールなど記録に残る方法で行います。口頭での会話内容も簡単なメモを残すように心がけています。これにより、後から確認が必要になった際にスムーズに情報を共有できます。
柔軟かつ迅速に対応
Webディレクターの対応がプロジェクトの進行に大きく影響するため、迅速にレスポンスを返すことを心がけています。特にワイヤーフレームの作成ではスピードが重要です。作業に没頭しすぎないよう注意し、手を動かす作業を抱え込みすぎず、何か問題が発生した際には柔軟に対応できるようにしています。
伝言ゲームにしない
クライアントからの要望をそのままデザイナーやエンジニアに伝えるだけでは、単なる伝書鳩になってしまいます。開発についてまだ分からないことが多い場合でも、自分なりに理解を深め、具体的にどういうことかを考えた上でエンジニアに相談することで、プロジェクトの質を向上させるとともに、自分自身のスキルアップにも繋がります。
まとめ：Webディレクターの魅力
私はデザインがやりたくてWebデザイナーとして入社しましたが、半年ほどでディレクション業務を任せていただくようになりました。最初はディレクターが何をするのかもわからず、自分にできるか不安でした。しかし、実際に業務を経験するうちにディレクションのやりがいと楽しさを感じるようになり、今ではデザイナーよりも向いているかもしれないと思うようになりました。
Webディレクターには幅広い知識が求められるため、勉強不足を感じることも多いですが、その分、学んだことが業務に役立つことで成長を実感できるのが嬉しいです。私はちょっと飽きっぽい性格ですが、いろんなことに興味があるため、さまざまな分野を勉強することに楽しみを感じています。また、より良いWebサイトを作り上げるために、上流工程から関わりたいと思う人や、人とのコミュニケーションが好きな人にも向いている職種だと思います。クライアントと直接やり取りをすることで、感謝の言葉を直接いただけるのも大きな励みになります。
より良い提案ができるように、現在はウェブ解析の学習をしています。今後もさらなる成長を目指して取り組んでいきたいと思います。