2015年2月21日に行った、 日本ディレクション協会 九州支部 ゼロからのウェブディレクション講座の資料です。

1. ゼロからの
ウェブディレクション講座
制作・開発編 v.3.02
日本ディレクション協会

2. 自己紹介
小嶋裕亮
Web・APP開発ディレクター
日本ディレクション協会 事務局長
大規模Webシステムのオペレーターから、デザイナー、コー
ダーなどを経てディレクターに。
主に制作・開発フェーズ、運用フェーズを得意とする。
フリーランスでディレクションを行っている。

3. お話しすること
Webディレクションとは何か
それに必要なものは何か

4. 制作・開発ディレクションへの
要求
• 設計の曖昧さを具体化して
• チームの力で
• 物を作りきる

5. やること
決めて
伝えて
チェックする

6. 職務
スタッフのアサイン
概要設計
確認作業

7. 職務
決めて
伝えて
チェックする
ボトルネックは
大抵ココ

8. 決める
誰が
何を
いつするのか

9. 誰がするのか
デザイナー
イラスト
レーター
フォトグラ
ファー
ライター
クライアント
アート
ディレクター SE
プログラマー
マークアップ
エンジニア

10. 何をするのか
デザイナー
イラスト
レーター
フォトグラ
ファー
ライター
クライアント
アート
ディレクター SE
プログラマー
マークアップ
エンジニア

11. だれが・なにをするのか
デザイナー
イラスト
レーター
フォトグラ
ファー
ライター
クライアント
アート
ディレクター SE
プログラマー
マークアップ
エンジニア
みんな∼、
あっちいくよ∼

12. いつするのか
明日の17:00まで
におねがいっ！

13. 伝える
• どんな場所で伝えるのか
• どんな人につたえるのか
• どういうふうにつたえるのか

14. 組織ごとの分担の違い
クライアント デザイナー

15. クライアント ディレクター
デザイナー
プログラマー
組織ごとの分担の違い

16. クライアント ディレクター
デザイナー
プログラマー
組織ごとの分担の違い

17. クライアント 広告代理店
組織ごとの分担の違い

18. ボトルネック
不十分な権限
コミュニケーションロス

19. コミュニケーションロス

20. コミュニケーション量は増えるが、
まだ単純。
コミュニケーションロス

21. コミュニケーションロス

22. 専門性は高くなり、各工程の作業効率はあが
るが、コミュニケーションが複雑化
コミュニケーションロス

23. コミュニケーションロス
複雑すぎるコミュニケーションを裁くので
手一杯に。。。

24. ディレクションスキル

25. スキルセット
概要設計
プロジェクト管理
品質管理

26. 概要設計
ぼやっとした要件を
具体的に形にしていく

27. 概要設計
コンテンツ/機能リスト
遷移図
ファイルリスト
仕様書

28. 機能リスト作成
コンテンツ概要
メインコンテンツ：活動紹介
• ミートアップ
• セミナー
• その他活動報告
• 協会について
• 学生部（外部リンク）
サブコンテンツ：関係者紹介
• メンバー紹介
• 協賛企業紹介
詳細情報
• PP
その他機能
• 問い合わせフォーム

29. ユーザーフロー作成
0001
トップ
M001
ミートアップ
S001
セミナー
A001
活動報告
M002
ミートアップ
個別
A002
活動報告個別
S002
セミナー個別
検索
エンジン
SNS
Blog
Peatix
or
ストアカ
フローA
フローB

30. 画面一覧作成

31. 画面仕様書作成

32. デザイン指示書の書き方
デザイン全体についての依頼
作業依頼
画面仕様

33. デザイン全体についての依頼
• プロジェクトの経緯
• 達成したいゴール
• 画面ごとの目的
• デザインで解決してほしい問題
• 対応してほしい範囲
などを文章で説明する。

34. コーディング指示
• この画面でユーザーにしてもらいたいアクション
• プロトタイプであるワイヤー
• 各パーツについての説明
• プログラムでどう動きをつけるかの説明
など、画面単位の設計を記入。

35. 作業依頼
• 何時までに終わらせてほしいか
• 作業で絶対やっておいてほしいTo
Doリスト
• 作業チェックリスト
を文章で、できれば紙で渡す。

36. チームビルディング
意思決定を迅速にする
コミュニケーションロスを減らす

37. チームビルディング
モデュレーション
話をまとめて落としどころ
に持っていく
ファシリテーション
話を広げて意見を出させる

38. まとめ
作業にとらわれすぎない
自分がやっている事は伝える事