1. 0からのWebディレクション講座
制作編
制作Phaseにおける、ディレクターの役割
株式会社ＧｌｏｂａｌＦｕｎ代表取締役
ILY.株式会社
取締役
岩井
和希

2. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
目次
1. 自己紹介
2. ディレクターの価値
3. 制作の流れ
4. 制作成功のポイント
5. ワークショップ
6. まとめ
2

3. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
目次
1. 自己紹介
2. ディレクターの価値
3. 制作の流れ
4. 制作成功のポイント
5. ワークショップ
6. まとめ
3

4. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
4
岩井
和希
株式会社GlobalFun
代表取締役
ILY.株式会社
取締役
金融教育系ベンチャーにて新規事業開発やマーケティ
ング、広報室、企画部リーダーを兼任。ウェブ制作や
リスティングを中心としたプロモーションを経験し独
立。複数の法人を設立。現在は、アプリやWebの制作
ディレクションの他、マーケティングWebプロモー
ション全体の年間コンサルティングも行う。

5. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
5
「ディレクション」ってそもそも
なに？
「時間と工数を管理するのがディレクショ
ンなんだから、余計なクチ挟むなよ」と言
われたり、実家に帰ると「ディレクターっ
て何する人よ」と聞かれたり……曖昧に扱
われがち、見られがちな「ディレクション」
「ディレクター」。
結局、本来の領域ってどこにあるのだろう？
日本ディレクション協会は、そこをハッキ
リさせようとしている団体です。
ディレ協って？
年間講演・イベント数：約30回
年間参加者数：およそ1500人
全て、ディレクション＆マーケ関連の講
座。

6. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
6
ディレ協とは
日本ディレクション協会
コミュニティメンバーボードのご案内
ディレ協の運営メンバーや、歴代＆人気講師含む
全国1,000名以上のディレクターと繋がる
国内最大のディレクターコミュニティ
•
•
•
•
ディレ協
2,300名
超え！

7. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
目次
1. 自己紹介
2. ディレクターの価値
3. 制作の流れ
4. 制作成功のポイント
5. ワークショップ
6. まとめ
7

8. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
8
Strategy
Tech
Design
Marketing
Message

9. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
目次
1. 自己紹介
2. ディレクターの価値
3. 制作の流れ
4. 制作成功のポイント
5. ワークショップ
6. まとめ
9

10. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
10
RDPL
BD CD
UT UATST
RUN
Development Process

11. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
11
運用
ゼロディレ全4講座だったり。
開発設計 制作

12. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
開発
• ゴールの設定
• ターゲットの設定
• 施策の決定
• コンテンツの決定
• 構造の設計
• UI/UX
• プロトタイピング
• モック作成
• デザイン/本開発
• 進行管理
• テストデバック
• リリース作業
• PDCAサイクル
• マーケティング
• 課題の洗い出し
• データ解析
• A/Bテスト
• 業務効率の改善
設計 制作 運用
12
やることいっぱい。役割の変化

13. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
目次
1. 自己紹介
2. ディレクターの価値
3. 制作の流れ
4. 制作成功のポイント
5. ワークショップ
6. まとめ
13

14. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
14
制作Phaseにおける、ディレクターの役割を改めて。

15. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
15
RDPL
BD CD
UT UATST
RUN
Development Process

16. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
進行管理
品質管理
問題解決
16
制作Phaseでのディレクターの役割

17. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
目次
1. 自己紹介
2. ディレクターの価値
3. 制作の流れ
4. 制作成功のポイント
4-1.
進行管理
4-2.
品質管理
4-3.
問題解決
5. ワークショップ
6. まとめ
17

18. Copyright © GlobalFun. All rights reserved.
LIG s DIRECTION school 2016
スタッフとのコミュニケーションからディレクションを設計する
進行管理
18
Progress
Management.

19. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
Step1.
進行管理
納期を確実に守る。守らせる。
ボトルネックを早期に把握。
待ち工数を削減しコストダウン。
できるだけ細かく管理が大切。
19

20. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
20
ドキュメント
Documents.

21. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
21
ドキュメントの目的
The
purpose
of
the
document

22. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
22
ドキュメントにより、皆の頭の中のもやもやを、
可視化する。
テキスト化、イメージ化することで、
より正確な情報共有が可能に。

23. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
23
ドキュメントの種類
Type
of
Documents

24. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
24
RDPL
BD CD
UT UATST
RUN
Development Process
スケジュール
見積書
契約書
組織図、体制図
課題管理表
検討資料
議事録
ミッション
マーケット調査、解析、プランニング
業務フロー、ユースケース、ビジネスルール
要件定義書、画面定義書
詳細設計書、テスト仕様書

25. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
25
ミッション
マーケット調査、解析、プランニング
業務フロー、ユースケース、ビジネスルール
要件定義書、画面定義書
詳細設計書、テスト仕様書
スケジュール
見積書
契約書
組織図、体制図
課題管理表
検討資料
議事録
Input
Output
Management

26. Copyright © GlobalFun. All rights reserved.
LIG s DIRECTION school 2016
スタッフとのコミュニケーションからディレクションを設計する
スケジューリング
26
Scheduling.

27. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
スケジュール
27Copyright © JAD. All rights reserved.

28. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
進行管理
実は、納期
は明後日の朝…
明日の17:00までに
○○をおねがいっ！
ぎりぎりだけど、
ガンバリマス！
28Copyright © JAD. All rights reserved.

29. Copyright © GlobalFun. All rights reserved.
LIG s DIRECTION school 2016
スタッフとのコミュニケーションからディレクションを設計する
ファシリテーション
29
Facilitation.

30. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
ファシリテーションとは
30
参考：日本ファシリテーション協会

31. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
31
3

32. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
32
1. Report
2. Decision
3. Brainstorming
報告MTG
決定MTG
アイディアMTG

33. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
目次
1. 自己紹介
2. ディレクターの価値
3. 制作の流れ
4. 制作成功のポイント
4-1.
進行管理
4-2.
品質管理
4-3.
問題解決
5. ワークショップ
6. まとめ
33

34. Copyright © GlobalFun. All rights reserved.
LIG s DIRECTION school 2016
スタッフとのコミュニケーションからディレクションを設計する
品質管理
34
Quality
Management.

35. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
35
そもそもの… ヒアリング（&
設計）
Hearing.

36. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
ヒアリング
人の話を 正確 に聞き取る。
36
例えば・・・議事録を正確に取る
的確な 質問 ができる。

37. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
手直しを発生させない
良いサービスを生み出す
仕事への評価
37
ヒアリング 品質管理
スケジュール
クオリティ
信頼・満足度・次回発注
→

38. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
38
制作・開発者に伝える
Tell
/
Communication

39. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
39
やっぱり、ドキュメント
Again,
The
Documents.

40. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
40
RDPL
BD CD
UT UATST
RUN
Development Process
スケジュール
見積書
契約書
組織図、体制図
課題管理表
検討資料
議事録
ミッション
マーケット調査、解析、プランニング
業務フロー、ユースケース、ビジネスルール
要件定義書、画面定義書
詳細設計書、テスト仕様書
To Designer

41. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
41
最低限、用意するもの
Minimum
Documents.

42. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
デザイナーへの依頼の3つの項目
1. 概要説明
2. 詳細依頼
3. 画面仕様
42

43. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
1.
概要説明
• プロジェクトの経緯
• 達成したいゴール
• サイト・アプリの解決すべき事
• デザインで解決してほしい課題・問題
• 対応してほしい範囲
/
役割
43

44. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
• 全体のボリューム（ページ数など）
• 役割（コーディング、フロント開発ありなしなど）
• スケジュール（何日まで？何時まで？）
• トンマナ
• 予算（外注の場合）
2.
詳細依頼
44

45. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
45
• ページリスト
• 遷移図
• ワイヤー 画面別の要素
-
各パーツ 各要素の説明
-
遷移先の確認 ボタン単位で遷移先を指
定
-
アクション ボタン単位のフロントでの
稼働
-
プログラムでどう動きをつけるかの説明
など。
3.
画面仕様

46. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
ドキュメント通りに作る。
それは、当然です。
理想は、アートディレクション。
サービス、商品、作品としての
価値を最大限に向上させること。
品質管理の目指すところ
46

47. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
目次
1. 自己紹介
2. ディレクターの価値
3. 制作の流れ
4. 制作成功のポイント
4-1.
進行管理
4-2.
品質管理
4-3.
問題解決
5. ワークショップ
6. まとめ
47

48. Copyright © GlobalFun. All rights reserved.
LIG s DIRECTION school 2016
スタッフとのコミュニケーションからディレクションを設計する
問題解決
48
Trouble
Shooting.

49. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
問題が起こった時に、もっとも大切なこと。
不測の事態に臨機に対応
制作/開発スピードを落とさない
49Copyright © JAD. All rights reserved.

50. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
50
Point1.
問題を分類する
To
Sort
the
Trouble.

51. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
51
問題を分類する
•仕様変更
•仕様漏れ
•仕様未達

52. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
52
Point2.
コミュニケーションのMCMQ
MCMQ
of
Communication.

53. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
53
MCMQ
More Correctly More Quickly

54. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
54
回答の遅延がボトルネックとなり、
炎上が加速するリスクも。
そもそも、回答が遅いと信用されない…
ビジネスメールは24時間以内が基本。
ただし、トラブル時は1分1秒を争う。
すぐに回答できない問題であっても
「5分後に回答します。」「30分毎に状況を報告します。」
と言った、返信をすること。

55. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
55
Point3.
ネゴ
Negotiation.

56. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
ネゴシエーション
何と言っても、先回り！
先手必勝！
社内/社外
のネゴ
56

57. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
事前に爆弾を抱えている可能性のあるものは、
それとなく伝えておく。
コミュニケーションツールを有効活用
電話・メール・チャット
例えば、裏を作る？？？
57
ネゴシエーション

58. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
58
Point4.
そもそもの… チームビルディング
Team
Build.

59. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
59
クライアント デザイナー
Copyright © JAD. All rights reserved.
むかーしのチーム

60. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
いまのチーム
60
クライアント 広告代理店
コミュニケーションコ
ストが膨大に・・・
Copyright © JAD. All rights reserved.
ディレクター デザイナー
プログラマー

61. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
PL
PJオーナー
PMPMO
DirL
Dir
TechL
Tech
GDE
DE ME
ENL
EN
Dir Tech
EN
61
プロジェクトに対する組織構造の理解

62. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
パートナー２パートナー１
外部ベンダー
クライアント 自社
PJオーナー
社長さん
PL
伊藤さん
PM
田中さん
PMO
佐藤さん
DirL
山田さん
決済機能
南さん
音声機能
東さん
PM
山田さん
DirL
岩井さん
Dir
山根さん
TechL
山本さん
Tech
山下さん
GDE
辻原さん
DE
辻之内さん
ME
坂田さん
ENL
山々さん
EN
猪俣さん
Dir
加藤さん
Tech
山中さん
EN
飯田さん
事業部A
伊藤和さん
事業部B
佐藤卓さん
事業部C
佐藤未さん
ENL
井上さん
62
case1.
クライアントワークの場合

63. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
63
制作Phaseでの、チームビルディング
Team
Building
in
Production
Phase.

64. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
不足人員の穴埋め
64
制作Phaseでの、チームビルディング

65. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
パートナー２パートナー１
外部ベンダー
クライアント
PJオーナー
社長さん
PL
伊藤さん
PM
田中さん
PMO
佐藤さん
決済機能
南さん
音声機能
未定
GDE
辻原さん
DE
辻之内さん
ME
坂田さん
EN
猪俣さん
EN
飯田さん
事業部A
伊藤和さん
事業部B
佐藤卓さん
ENL
井上さん
65
不足人員の穴埋め
自社
PM
未定
DirL
岩井さん
Dir
山根さん
TechL
未定
Tech
山下さん
ENL
山々さん
Dir
未定
Tech
山中さん
DirL
未定
事業部C
未定
リーダー不在
クライアント
側のメンバー
不在
退社
複数プロジェ
クト兼任で、
多忙

66. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
補充人員を探す（社内・外）
不足していることを、クライアント・上長に伝える
Re
スケジュール
66
不足人員の穴埋めのために、ディレクターがやること

67. Copyright © GlobalFun. All rights reserved.
LIG s DIRECTION school 2016
スタッフとのコミュニケーションからディレクションを設計する
Point5.
新規提案
67
Wow
!
New
Proposal
!

68. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
あなたは、素晴らしい。
何を言われても、実行すべき。
ただし…
タイミングにはご注意を。
68
新規提案

69. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
目次
1. 自己紹介
2. ディレクターの価値
3. 制作の流れ
4. 制作成功のポイント
5. ワークショップ
6. まとめ
69

70. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
70
お題
参加者のみに公開

71. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
目次
1. 自己紹介
2. ディレクターの価値
3. 制作の流れ
4. 制作成功のポイント
5. ワークショップ
6. まとめ
71

72. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
ちょっと横道 その２
要件定義？
仕様書？
資料について
72Copyright © JAD. All rights reserved.

73. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
外部設計
コンテンツ/機能リスト
サイトマップ/遷移図
ファイルリスト
画面設計書
73Copyright © JAD. All rights reserved.

74. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
作ろうと思えばどれだけでも
時間を、労力を、
かけられる。
でも、ほんとに大事なことって何？
74Copyright © JAD. All rights reserved.

75. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
75
ちょっと横道

76. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
• 伝える相手によって、内容を変える
• 伝える内容によって、手段を変える
76Copyright © JAD. All rights reserved.

77. Copyright © GlobalFun. All rights reserved.
LIG s DIRECTION school 2016
スタッフとのコミュニケーションからディレクションを設計する
最後に、
77
Last
Message.

78. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
人がレベルアップするときは、
最後までやりきったとき。
＝ 納品。
最初から強い敵と戦っても、倒すことができずいつまでも
レベルが上がらない。それよりも、まずはスライムを倒し
て、次の大陸を目指すべき。
最初のうちは、小さな案件でも良いので、数多くの納品を
行いコツコツレベルをあげよう。そして、その次に、大型
案件に挑戦し、より高いステージを目指そう。
78
最後に、
Copyright © JAD. All rights reserved.

79. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
制作における、ディレクターのスキルってのは、
要はビジネス基礎スキルの積み上げです。
つまり、制作をスムーズに進められる人は、
どんな仕事でもだいたいできます。
食いっぱぐれない。
79
最後の最後に、
Copyright © JAD. All rights reserved.

80. Copyright © GlobalFun. All rights reserved.
LIG s DIRECTION school 2016
スタッフとのコミュニケーションからディレクションを設計する
お知らせ
80
News!

82. Thanks for Dears!
FOUNDATION PARTY
[ 2016.06.12 sun / 17:00-@the C/kanda]

84. Copyright © JAD. All rights reserved.
0からのWebディレクション講座
制作編
ご静聴ありがとうございました。
さぁミートアップだ！！！
おわり
84