【東京】11/12　Webデザイン受発注のコミュニケーション実務 ワークショップ の資料です。

1. Webデザイン受発注のコミュニケーション実務
ワークショップ
片山良平 @rk611
2011,11,12 Bellesalle IIDABASHI Ekimae
1

2. 本日のゴール
今日話そうと考えている事
Web制作におけるビジュアルデザインがテーマ
発注側、制作側双方で、デザインを扱ううえで
・どのような点に注意をしたらいいのか？
・どういったことを知っていたほうがいいのか？
を、持ち帰ってもらえればと考えています。
2

3. 片山良平
新規事業開発担当/元Webプロデューサー
Ryohei Katayama
@rk611
1999~2007 株式会社アニー
デザイナー
PHPプログラマー
ディレクター/プロデューサー
2007~2011 ネットイヤーグループ株式会社
プロジェクトマネージャー
チームリーダー/プロデューサー
2011～ 株式会社エムアウト
戦略事業グループ マネジャー
3

4. 何故、デザインはひっくり返るのか？
１．最後のほうに社長が出てきた。
２．会社としての決定ではなく個人の趣味だった
３．途中で要件が変わった
４．自然の摂理として
4

5. 何故、ズレたデザインが
上がってくるのか？
１．デザイナーと意思疎通が出来ていなかった。
２．参考として視覚的なサンプルを渡したが、
説明不足で、真似しろと受け取られた。
３．デザインのゴールが定まっておらず、好き嫌い
の議論でデザインを進めていた。
４．自然の摂理として
5

6. Wedデザイン 受発注のセオリー
デザインコントロールが身につく本
6

7. 7

8. 抽象度が高い 抽象度が低い(具体的)
戦略 概要設計 詳細設計 実装 運用
プランニング
要件整理 情報設計 コンテンツ ビジュアル
コンセプトワーク 企画 デザイン
8

9. Wedデザイン 受発注のセオリー
デザインコントロールが身につく本
ビジュアルデザインにおける受発注で特に大事な事
１．目的の明確化
２．解決方法の選定
３．発注者と制作者のギャップ
４．アートディレクションについて
５．段階的合意形成
9

10. 1.目的の明確化
プロジェクトの目的をはっきりとさせる
10

11. 1.目的の明確化
Why?
何のためにデザインをおこなうのか？
11

12. 1.目的の明確化
何のためにデザインを行なうのか？
目的は何か？
・クライアントに頼まれたから
・デザインが古いので今風にしたいから
・店舗を立ち上げたから
12

13. 1.目的の明確化
目的の分解
1. 目的達成手段
Solution
2. 水面下の依頼目的
(＝真の要求事項)
Problem
13

14. 1.目的の明確化
Problemは何なのか？
真の要求事項は何なのか？
どの問題を解こうとしているのか？
14

15. 1.目的の明確化
「デザインが古いから今風にしたい」
⇒目的達成手段 [Solution]
デザインが古いとなんで今風にしないといけないの？
15

16. 1.目的の明確化
「デザインが古いから今風にしたい」
⇒目的達成手段 [Solution]
デザインが古いとなんで今風にしないといけないの？
「競合がリニューアルした」
ネットで比較されやすい商品。比較検討する際の
項目数が競合に比べ少なく、訴求力が弱い。
⇒真の要求事項 [Problem]
競合優位性を保つためにリニューアルが必須
16

17. 1.目的の明確化
ビジョンステートメント
１．我々はこれから何をしようとしているのか？
■自分たちが「何を達成しようとしているのか、それにより
どうプラスになるのか」を端的に記す。達成手段ではなく、
必ず目標を明確にする。
２．我々は何故これをやろうとしているのか？
(問題は何なのか？)
■そもそもなぜこれをやろうとしているの？という、
大もとの課題を明確にする。
３．この努力が成功したかどうかは、
どうしたらわかるのか？
■どこを目指しているかがわかるように、
具体的に（なるべく数値化した）目標を記す。
17

18. 2.解決方法の選定
ビジュアルデザインは解決方法の一つでしかない
18

19. ２.解決方法の選定
How?
問題はわかった。
その問題はどの方法で
解決するのが良いのか？
19

20. ２.解決方法の選定
なんでもビジュアルで解決しようと
するとおかしなことになる。
ビジュアルが出来るのは次のような事。
１．他と差別化する
２．感情に訴えかける
３．機能性を高める
20

21. ２.解決方法の選定
１．他と差別化する
・強調させる
・印象のコントロール
21

22. ２.解決方法の選定
１．他と差別化する
サルバトーレクオモ ピザーラ 22

23. ２.解決方法の選定
２．感情に訴えかける
・欲求を喚起させる
・想像させる
・共感させる
・文脈を伝える
23

24. ２.解決方法の選定
３．機能性を高める
・視認性を良くする
・優先順位を明確にする
・直感的に動作を理解させる
24

25. ２.解決方法の選定
他のアプローチによる問題解決
≒ビジュアルデザインでは解決できない事
１．プロダクトやブランドの問題
２．Webにアクセスしない顧客層の問題
３．Webサイトへの流入経路の問題
４．情報設計の問題
５．コンテンツの問題
６．プロセスの問題
25

26. 3.発注者と制作者のギャップ
見ているところが全く違うと心得る
26

27. ２.解決方法の選定
Why?
なぜギャップが生まれるのか？
27

28. 3.発注者と制作者のギャップ
発注者の意識
１．プロジェクトの説明を省く
２．制作者を過信する
(スコープを過大に認識する）
３．ビジネスニーズに偏重する
４．発注内容に客観性が足りない
28

29. 3.発注者と制作者のギャップ
制作者の意識
１．受け身の姿勢
２．発注者の事情を過小評価する
３．タスクやリスクを過小評価する
29

30. 3.発注者と制作者のギャップ
発注者と制作者の間には
深い溝がある。
違う事を前提に進めるしかない。
30

31. 4.アートディレクションについて
アートディレクションタスクとは何か？だれがやるのか？
31

32. ４.アートディレクションについて
What?
アートディレクションとは何か？
32

33. ４.アートディレクションについて
こんな人たち。
主に気難しそうな人たち、
・・・みたいな。
33

34. ４.アートディレクションについて
デザイナーではない、
デザイン専門のディレクター。
１．Web担とデザイナーの翻訳者
２．アートディレクターは客観性を保つ、俯瞰視点の人
34

35. ４.アートディレクションについて
35

36. ４.アートディレクションについて
36

37. ４.アートディレクションについて
デザイナー
37

38. ４.アートディレクションについて
アートディレクターのツール
イメージスケール
38

39. ４.アートディレクションについて
イメージスケール
39

40. ４.アートディレクションについて
40

41. ４.アートディレクションについて
大抵のプロジェクトでは
アートディレクターはいない。
ではどうするか？
制作者側のディレクター、デザイナーが兼務。
アートディレクターは居なくてもいいが、
この役割をやる人がいないとデザインは難航する。
41

42. 5.段階的合意形成
どうやって巻き込み、合意形成を得るか？
42

43. ５.段階的合意形成
How?
どのように合意形成をすすめるか？
43

44. ５.段階的合意形成
初期段階のズレのリスクは大きい
44

45. ５.段階的合意形成
フェーズが進むほど
修正コストが高くなる根幹部分は
初期に詰める。
リスク高低を把握し、優先順位をつけ
リスクが高いものを初期段階で徹底的につぶす。
45

46. ５.段階的合意形成
各フェーズのポイント
46

47. ５.段階的合意形成
ステークホルダー(利害関係者)の把握
47

48. ５.段階的合意形成
ステークホルダー(利害関係者)の把握
48

49. 【速報】終了のお知らせ＼(^o^)／
ご清聴ありがとうございました。
Twitter ID: @rk611
https://www.facebook.com/designcontrol
49