「マイルストーンで考えよう」webディレクション歴20年 田口講師直伝のWBS作成方法
webディレクション歴20年のデスクトップワークスの田口さまを講師にお招きした、webディレクター研修が社内にて開催されました。
ルート・シーでは大型案件の増加に伴い、ディレクション面の強化に力を入れていきたく、このような研修を実施する運びとなりました。
- 講師プロフィール
- 田口 真行（たぐち まさゆき）
- 株式会社デスクトップワークス 代表取締役
- ●Webディレクタースクール 主宰。社団法人 日本ディレクション協会 副会長1999年、フリーのWebディレクターとして独立。企業サイトの企画制作運用を手掛ける傍ら、攻殻機動隊トリビュートアルバムのアートディレクションや、SKYPerfecTV!のクリエイター向け番組『DesktopTV』のプロデュース、セミナーイベント『エンタミナ』の主催など、Web以外の分野でも幅広く活動。2014年、Webディレクター育成機関『Webディレクタースクール』を設立。独自手法のディレクションを題材にした実践型の研修講師として全国各地での講演活動や、株式会社スクーのレギュラー番組『田口真行のWebディレクション講座』の生放送配信を行う。2017年、世界初となるWebディレクター向けのサイトプランニングツール『Webディレクター手帳』を開発。著書に『現場のプロが教えるWebディレクションの最新常識知らないと困るWebデザインの新ルール2』（エムディーエヌコーポレーション、共著）、『第一線のプロがホンネで教える超実践的Webディレクターの教科書』（マイナビ、共著）。株式会社スクー2014年度最優秀公認団体賞 受賞。CSSNite2年連続ベストスピーカー 受賞（2015年、2016年殿堂入り）。
新型コロナウィルスの影響もあり、Zoomにてルート・シーのディレクター15名でオンライン受講しました。
オンラインの受講風景はこんな感じです↓
webディレクターの仕事は多岐に渡りますが、今回の研修はタスク管理やサイト設計など、ディレクションの核となる部分を中心にご教示いただきました。
webディレクションの基本を踏まえつつ、研修内容のポイントをまとめていきたいと思います。
全3回に分けて以下の項目を予定しています。
- WBSの考え方・作成方法（第1回）
- サイトプランニングについて（第2回）
- 情報設計（情報整理、ユーザー心理の検討、画面設計）（第3回）
それでは第1回目、「WBSの考え方・作成方法」についていってみましょう！
プロジェクト管理の基本ツールWBSとは
プロジェクトを進行するうえで、webディレクターが管理するタスク・課題などは無数にあり、抜け漏れがあるとプロジェクトをスムーズに進めることが難しくなります。抜け漏れを防ぐためには、プロジェクト全体の課題を可視化し、プロジェクト完了までの全作業を洗い出す必要があります。
その洗い出しの作業に適しているのがWBSです。
WBSとはWork Breakdown Structure：作業分解構成図の略です。作業内容を可視化し、各タスクを分解した構成図です。構成図といっても、エクセルなどで一覧で確認できる資料が成果物となります。
WBSの特徴
- プロジェクト全体を可視化できる
- 各タスクのボリューム、関係性が把握できる
- メンバー間で作業範囲を共通の認識として持つことができる
などが挙げられます。
また、WBSによってやるべきことを明確にすることで、スケジュールの策定や作業の役割分担がしやすくなり、精度の高い見積りが可能になります。
課題を基にWBSを作成してみる
今回、田口講師から「ルート・シーのコーポレートサイトのメインビジュアルをガラッと変える場合のWBSを作成する」という課題をいただき、WBSを作成する際のポイントをご教示いただきました。
気を付けるべきことはタスクベースで考えず、「マイルストーン」を軸にタスクを考えていくということです。
マイルストーンは、「〇〇を確定する」というイメージで考えます。
たとえば、「いつまでにデザインを確定する」などです。
「デザインを制作・確認する」は「タスク」として考えます。
図にすると以下のイメージです。
上記を意識しながら、「〇日までに〇〇が決まっていないと次の工程へ進めない」ということを整理し可視化していきます。
田口講師からいただいた課題に取り組んでみました。
メインビジュアルを変更するうえで、必要なマイルストーンは何か。
作業内容をできるだけ細かく整理していきます。
各工程が「確定する」までのプロセスを細かく考えることで、後戻り作業を少なくすることが可能です。
確定すべきポイント（マイルストーン）を洗い出し、それに付随するタスクをまとめるという作業です。
WBSに最低限必要な項目
WBSを作成するうえで最低限必要な項目は、「タスク」「担当者」「成果物」「期限日」「工数」の5つです。
これを基に各作業の内容を細かく洗い出していきます。
洗い出した一覧の例
各タスクを一覧にするとこのようになります。（画像は一部です）
上記のWBSはさらに、「何を決めるのか」「状態」「考えられるリスク」の項目を追加しています。
WBSを作成するうえで重要なポイントは、「誰が何を確認して、いつまでに決める必要があるのか」を明記するということです。
最終的に各タスクを誰が対応するのかが分からなければ、誰も手を付けないままスケジュールが遅延していき、プロジェクトが破綻してしまいます。
必ず、「誰が」「何を」「いつまでにやるのか」を明確にしたうえで、「確定する」までのタスクを整理していきます。
例えば、「画面構成を確定する」ための工程を細かく記載すると、7つもあります。
- 画面構成を検討する
- 画面構成を作成する
- 画面構成をレビューする
- 画面構成を提出する
- 画面構成を修正する
- 画面構成を（再）提出する
- 画面構成を確定する
「1.画面構成を検討する」の前段階として情報収集が必要であれば、それもタスクとして書き出します。
また、お客さま（または社内）が確認したあとにフィードバックが必ず発生すると見込んで、そのリテイクの回数も想定してタスクや期限日を設定しておくことがポイントです。
リテイク回数に見合った費用かどうかも、ディレクターとして確認しておくべき重要なタスクです。
WBSを作成した感想とまとめ
私がWBSをまとめてみると、細かい作業レベルでの落とし込みが甘く、ざっくりとしたWBSに仕上がっておりました。（笑）
他のディレクターのWBSを見つつ、作業レベルの落とし込みと足りなかった項目（先ほどの「何を決めるのか」「状態」「考えられるリスク」など）を追加していきました。
繰り返しますが、WBSを作成する際はタスクから考えず、マイルストーンを軸に考えることが重要です。
大規模なプロジェクトであればあるほど、この作業の落とし込みとマイルストーンの考え方は重要です。
WBSをまとめた後に、抜け漏れが無いか何名かでフィードバックする機会を設けることも大切です。
また、プロジェクト後半で予期せぬ落とし穴が見つかり、プロジェクトが炎上してしまう。。ということもあると思います。
それを防ぐ意味でも、WBSでプロジェクトの不安要素を払拭し、各課題に対しどのように取り組んでいくのか、しっかりとリスクマネジメントを行うことがwebディレクターの仕事だと改めて感じました。
WBS作成のポイント
- 「確定する」までのプロセスを細かく考え、できるだけ後戻りを少なくする
- 「誰が」「何を」「いつまでに」を明確にする
- お客さま（または社内）からのフィードバックを考慮したスケジュールを策定する
WBSは細かくタスクなどを記載していくため、都度お客さまに確認を取り進行する必要は無いと考えます。
あくまでも社内・自分の確認用の資料とすることが望ましいです。
ただし、お客さまやプロジェクトの状況にもよりますので、プロジェクト初期に参考資料として提示したり、マイルストーン・お客さまのタスク（素材支給など）は事前に伝えておくなど、その辺りは各ディレクターの判断によると思います。
第1回目はWBSについてまとめてみましたがいかがだったでしょうか。
次回はWBSを踏まえてサイト制作におけるサイトプランニングについてまとめていきます。