2014/1/29に、株式会社フェローズで使用した資料です。

1. 始めよう！Webディレクション
制作・開発現場を活性化するディレクション
日本ディレクション協会
小嶋 裕亮

2. 自己紹介
小嶋 裕亮
企業向けのクライアントワークを中心に制
作を行ってきた。
オペレータ、デザイナー、エンジニアを経
て、ディレクターに。
現在株式会社リンケイジアジャパンでディ
レクションチームを率いる。
所属： 日本ディレクション協会
株式会社リンケイジアジャパン

3. ディレクターとは何か
制作を依頼されて
制作に責任を負う人

4. 他の職域との関係
マーケティング
プランナー
営業
ディレクション
アート
ディレクション
PM
SE

5. 制作のフロー
設計→開発→運用

6. 制作のフロー
設計→開発→運用
•
•
•
•
•
ゴールの設定
ターゲットの設定
施策の決定
コンテンツの決定
構造の設計
•
•
•
•
•
•
プロトタイピング
デザイン
モック作成
本制作
テスト
リリース
•
•
•
•
課題設定
改善施策策定
改善
ログデータ解析

7. 扱うフェーズ
設計→開発→運用
•
•
•
•
•
ゴールの設定
ターゲットの設定
施策の決定
コンテンツの決定
構造の設計
•
•
•
•
•
•
プロトタイピング
デザイン
モック作成
本制作
テスト
リリース
•
•
•
•
課題設定
改善施策策定
改善
ログデータ解析

8. 今日やることについて
WBSのやり方、ガントチャートの使い方、
ワイヤーの書き方、スケジューリングのコ
ツ、QAなどなど…

9. 今日話すことについて
WBSのやり方、ガントチャートの使い方、
スケジューリングのコツ、QAなどなど…
今日は話しません。

10. Tipsを覚えても
プロジェクトは回らない。

11. ディレクションとは
プロジェクト全体を
把握すること。

12. そのためにやることは
コミュニケーションの構築。

13. 何をする人なのか
• 電話連絡
• メール書く
• ワイヤーを切る
• 小言を言う

14. 何をする人なのか
• 電話連絡がディレクション？
• メール書くのがディレクション？
• ワイヤーを切るのがディレクション？
• 小言を言うのはディレクション？

15. 果たす役割で考えてみよう

16. ディレクターの役割
• 計画に基づいて
• 工程を管理する

17. ディレクターの役割
• 計画に基づいて
→それぞれの目標を明確にして
• 工程を管理する
→誰が、いつ、何を作るかを決め、
その通りに進めること

18. ディレクションの役割
• 計画に基づいて
→それぞれの目標を明確にして
• 工程を管理する
→誰が、いつ、何を作るかを決め、
その通りに進めること
コミュニケーションで実現

19. タスク意味
• メールのやり取り・電話応対
• ワイヤーを切る・小言を言う

20. タスク意味
• メールのやり取り・電話応対
→やりとりの交通整理
• ワイヤーを切る・小言を言う
→目的・目標の共有・管理

21. 人と人をつなげる

22. 関わる人
クライアント
フォトグラ
ファー
ライター
イラスト
レーター
アート
ディレクター
デザイナー
SE
マークアップ
エンジニア
プログラマー

23. 関わる人
クライアント
フォトグラ
ファー
ライター
イラスト
レーター
アート
ディレクター
デザイナー
SE
マークアップ
エンジニア
プログラマー

24. 目標
ディレクション
クライアント
みんな∼、
フォトグラ
あっちいくよ∼
ファー
ライター
イラスト
レーター
アート
ディレクター
デザイナー
SE
マークアップ
エンジニア
プログラマー

25. 工程と工程をつなげる

26. 開発フロー
WBS
スケジュール
画面仕様書の作成
素材手配
ライティング
デザイン
マークアップ
プログラミング

27. ディレクション
WBS
スケジュール
画面仕様書の作成
素材手配
ライティング
デザイン
マークアップ
プログラミング

28. ディレクション
WBS
スケジュール
画面仕様書の作成
素材手配
ライティング
デザイン
マークアップ
進捗管理
クオリティマネジメント
プログラミング

29. ディレクションの考え方
• なにをするのか
• どんなツールを
使うのか
•
•
•
•
誰に対して
何を
いつ
どう伝えるのか

30. 組織の形によってやるべきこと
は変わる

31. 一人での制作の特徴
クライアント
デザイナー

32. 小規模チームの特徴
デザイナー
クライアント
デザイナーで賄いきれない、
顧客対応やプログラミング
をプロが補うように。
ディレクター
プログラマー

33. 中規模チームの特徴
クライアント
広告代理店
各工程の分業が進み、専門技術
の質が上がり、各工程内での作
業効率があがるはずだが…

34. 実例1

35. 実例1
コミュニケーション量は増えるが、
まだ単純。

36. 実例2

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

38. 実例2
複雑すぎるコミュニケーションを裁く
ので手一杯に。。。

39. 共通する役割
• 不要なやり取りをなくすこと。
• 技術者が無駄な判断をしなくてよいよう
にすること。

40. コミュニケーションを加速させ
るツール

41. チャート

42. 画面仕様書と修正指示書
•
•
指示内容指示内容指示内容
指示内容指示内容
•
•
指示内容指示内容指示
指示内容指示内容指示内容指示内容
•
•
指示内容指示内容指示内容
指示内容指示内容
•
•
指示内容指示内容指示
指示内容指示内容指示内容指示内容

43. クオリティチェックリスト
デザインチェック
コーディングチェック
コードチェック
•
ファイルのエンコードと改行コード
•
バリデータでの文法チェック
•
リンクの指定方法のチェック
•
JavaScriptのエラーの有無のチェック
ブラウザチェック
•
デザインを再現できているかのチェック
•
対応ブラウザでの表示チェック
•
ブラウザで拡大縮小した場合の表示チェック
コンテンツチェック
•
文字校正
画像
•
画像の表示漏れチェック
•
画像のサイズ指定のチェック
•
ALT指定のチェック
リンク
•
ハイパーリンクのチェック

44. サービスオーナーとの
コミュニケーション

45. ウォーターフォルモデル
過去は振り返ら
ない主義なんだ。
時系列
プロトタイピ
ング
デザイン
開発工程
モック制作
本制作
テスト
一度工程が完了したら、変更は起こらない前提。

46. 現実の工程
過去は振り返ら
ない主義…
さっさと作って
プロトタイピ
ング
時系列
動かないと
わからないよ
デザイン
開発工程
細かい事いいから、
いいから、
早く作ってよ。 モック制作
本制作
えっ…
構成よくないね。
テスト
変えて。
お客さんはある程度形になるまで判断できないので、ブレやすい。

47. 外部委託による分断
時系列
プロトタイピ
ング
デザイン
開発工程
モック制作
本制作
テスト

48. あり方そのものを疑え
• どう指示・依頼されたかではなく、
なにが最適かをまず考えること。
• 普通のこと・いつものやり方が
本当に最適なのかを考えること。

49. コミュニケーションで
仕組みをつくろう

50. ありがとうございました

51. 日本ディレクション協会
http://www.direkyo.com/