2013年6月30日に開催したWebディレクション講座「Director's High Vol1 -WBSの作り方-」で使用したスライドです。

1. All sections to appear here
Director’s Hight Vol.1
─ WBSの作り方 ─

2. 22
ディレクターは、プロジェクト管理者の1人
• 要件定義
• ゴール設定
• コンセプト策定
• スコープの設定
• 予算設定
• スケジュール設計
• メンバー選定
• WBS作成 etc…
• 課題管理
• 進⾏管理
• コスト管理
• リスク管理 etc…
• 操作トレーニング
• 効果検証フォロー
etc…
プロジェクトのマネジメントは、
プロデューサーとディレクターの2者が⾏う。
Two of them do the project management.
制作工程が始まるまで 制作開始から納品まで 納品後フォロー

3. 33
⾒ているところ＝Focusが異なる。
Producer should focus on the client’s business, and director should do so for the web site.
Business
Web site
Business
Web site
Producer’s focus Director’s focus
2者の違いは何か？
► BusinessにFocus。その中にあるWeb
サイトを俯瞰的に⾒ている。
► Web siteにFocus。その周辺事情としての
Businessを重要な要素として⾒ている。

4. 44
違う視点が、シナジーとバイアス 両方の効果をもたらす。
Different perspectives, leading to bias effect and synergies.
具体的なシーンで言うと…
Producer Director
企画
Planning
コスト管理
Cost management
► 顧客・マーケットの分析
► 競合のベンチマーク
► KPIの定義 …
ビジネス要件の定義
サイトのコンセプト定義、PJのミッション共有
ミッションを遂げるための戦術
► ターゲット設定とOSP設計
► コンテンツマッピング
► インタラクション設計
Synergies effect
Bias effect
工数・スコープを管理
► 工数（メンバーの時間）の管理
► 作業スコープの管理
► インパクト分析
実質の判断
► その工数をいくらで売るか
► 予算交渉・規模拡大をするか否か
予算の管理
筋の通った実施策の提案
取引上の判断

5. 55
プロジェクトのアウトプットである
Webサイトの品質に責任を持つ人。
Person responsible for the quality of the Web site.
Gのディレクターとは
► 「こうしたい」という強い意志と明確なゴールのイメージを持って
方向性を示し、判断をする人。
► 提案をし、説明をする人。
• ⼤切なのは、⾃分⾃⾝に思いがあること。意思なきところに⼈はついて来ない。
• なぜそう思うのか、なぜこれが良いのか。仲間やクライアントを納得させるだけの理由が必要。

6. 66
プロジェクト前半、全ては企画と提案。
All of the project the first half, is a proposed plan.
Gのワークフローとディレクターの役割（前半）
Phase 0
調査・分析 プロジェクト計画
Phase 1
設計 デザイン
Phase 2 Phase 3
DIADP DDEP PP A D
ディレクション業務
► 合意形成のための提案 ► アジェンダ・議事管理 ► 進⾏管理・課題管理

7. 77
プロジェクト後半は、手配・判断・共有が重要。
All of the project the first half, is a proposed plan.
Gのワークフローとディレクターの役割（後半）
Phase 4
環境・実装仕様設計
Phase 5 Phase 6 Phase 7
D M
ディレクション業務
► インパクト分析
► 進⾏管理・課題管理、共有
制作・実装 試験 納品
PG M PG DE DT D M PG
► 実装環境の整備
► 納品物取りまとめ
► 操作レクチャーなど

8. 88
後半は、WBSを作ります。
WBSとは、Work Breakdown Structure です！
The second half, we'll create a WBS.
前半の講義は以上ですー
10分ほど休けいしましょう。

9. 99
スケジュールは、本来WBSを作らないと作れない。
No WBS, no schedule!
なぜWBSを作るのか？
⼀般的なプロジェクト管理の方法論
1. プロジェクトの分解・構造化（＝WBSの作成）
2. プロジェクトに必要な全作業の前後関係・並⾏関係を明らかにする
3. 作業スケジュールを作成する
4. 進捗を管理する
► 1が非常に難しいため、WBSの精度が低く、結果として進捗管理に大きな影響が出る。
► そこで、WBSをいかにうまく作成するか、が課題となる。

10. 1010
WBS＝プロジェクトの作業と成果物を分解・構造化した図表。
WBS = Charts disassemble structure the tasks and deliverables of the project.
WBSとは？
夏の⼀大プロジェクト「スイカ割り」を分解してみる。
スイカ割り
計画 事前準備 当日 後日
場
所
の
決
定
予
算
の
決
定
当
日
の
段
取
り
幹
事
決
定
下
⾒
ス
イ
カ
の
調
達
道
具
の
手
配
メ
ン
バ
ー
集
め
ス
イ
カ購
入
イ
ベ
ン
ト
実
⾏
後
片
付
け
2
次
会
清
算参
加
費
徴
収
反
省
会
► 最下位の要素→人やグループに宛がえる「作業」に分解

11. 1111
Site renewal
Let’s Try! WBSを作ろう。
Let’s make a WBS.
ワークショップです！ 4人チームに分かれてくださいー
How to do
1. 4人〜５人のチームに分かれる。
2. 課題のサイトを制作するための作業を思いつく限り
付箋に書く。
職種が違う⼈（デザイナー×プログラマー）と一緒にやるの
がおすすめ。
とりあえず、いろいろ考えずに、余すところなく書き尽くす。
3. 付箋に書かれた作業の親子関係を構造化する。
A3×2の用紙に、2で書き出した作業を構造化してペタペタ貼
る。

12. 1212
WBSの作成
企業サイトの
フルリニューアル
Corporate site full-renewal
► 120ページ程度、日本語版の企業サイト
► PCサイトのみで、スマホやタブレットは気にしない。
► 既存のニュースページは3年分（150件程度）
現在は、外部制作会社および社内スタッフで手更新しているが、リニューアル
を機にCMSを入れる。過去のニュースは全て含めた状態で公開する。
► Webサーバは、リニューアルを機に引っ越すが、CLによくわかる人がいないの
で、コンパネをこちらで操作する必要がある。メールサーバは引っ越さない。
► SSLを入れる。
► サイト内検索エンジンを入れる。
► フォームは10個あるが、それ以外のシステムについては未定。
► 簡単なキーワード分析と、それに基づいたMETA（D/K）を入れる。
チームの
メンバー構成
Team member
► プロデューサー 1人
► ディレクター 1人
► デザイナー（メイン1人＋サブ1人）
► マークアップ（メイン1人＋サブ1〜2人）
► プログラマー 1人
お題：次のプロジェクトのWBSを作成してください。
Let’s create a WBS of the project the following.

13. 1313
基本ルールとヒント
WBS作成の基本ルールやヒント
Tips and basic rules of the Create WBS.
Site renewal Level 1
Level 2
Level 3
Level 4
Basic rules
► ＜100%ルール＞
子要素を全て足し合わせると親要素になる。
► ＜8/80ルール＞
要素分解は、ワークパッケージがおよそ8時
間以上、80時間以内になるまで⾏う。（8時
間は1日、80時間は2週間。）
目安は40時間（5日＝1週間）
► ＜7x7ルール＞
1つの親要素にぶら下がる子要素は7つまで。
WBS全体のレベルはレベル7まで。
必須
► 最下部の要素＝「ワークパッケージ」
ワークパッケージは、責任の割り当ての単位＝「⼈」もしくは「グループ」に宛てがえる「作業」単位にする。
必須

14. 1414
WBS作ってそれからどうするの？
WBSからガントチャートを作り、進捗を管理する。
Create a Gantt chart from WBS, then manage progress.
ワークパッケージを取り出す それぞれの時間を⾒積もる 時間軸で並べる
EDA B C
A
B
C
D
E
20h
40h
30h
20h
60h
B
A
E
C D F
40+60=100h
100+D+F
ワークパッケージに「人」を割り当て、カレンダーを付ける ガントチャート

15. 1515
ありがとうございました！
またお会いできる日を楽しみにしています。
Please keep in touch! See you next ‘Director’s High’.
Fin…
SILHOUETTE DESIGN http://kage-design.com/
All Shihouettes.com http://all-silhouettes.com/
またねー。
867.fujita
GRANFAIRS http://www.granfairs.com