111112 受発注のセオリーイベント資料

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

Upload: ryohei-katayama

Post on 06-Jul-2015

2.805 views

Category:

Design


1 download

DESCRIPTION

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

TRANSCRIPT

Page 1: 111112 受発注のセオリーイベント資料

Webデザイン受発注のコミュニケーション実務 ワークショップ

片山良平 @rk611

2011,11,12 Bellesalle IIDABASHI Ekimae

1

Page 2: 111112 受発注のセオリーイベント資料

本日のゴール 今日話そうと考えている事

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

2

Page 3: 111112 受発注のセオリーイベント資料

片山良平 新規事業開発担当/元Webプロデューサー

1999~2007 株式会社アニー デザイナー PHPプログラマー ディレクター/プロデューサー 2007~2011 ネットイヤーグループ株式会社 プロジェクトマネージャー チームリーダー/プロデューサー 2011~ 株式会社エムアウト 戦略事業グループ マネジャー

Ryohei Katayama @rk611

3

Page 4: 111112 受発注のセオリーイベント資料

何故、デザインはひっくり返るのか?

1.最後のほうに社長が出てきた。 2.会社としての決定ではなく個人の趣味だった 3.途中で要件が変わった 4.自然の摂理として

4

Page 5: 111112 受発注のセオリーイベント資料

何故、ズレたデザインが 上がってくるのか?

1.デザイナーと意思疎通が出来ていなかった。 2.参考として視覚的なサンプルを渡したが、 説明不足で、真似しろと受け取られた。 3.デザインのゴールが定まっておらず、好き嫌い の議論でデザインを進めていた。 4.自然の摂理として

5

Page 6: 111112 受発注のセオリーイベント資料

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

6

Page 7: 111112 受発注のセオリーイベント資料

7

Page 8: 111112 受発注のセオリーイベント資料

戦略 プランニング

概要設計 詳細設計 実装 運用

情報設計 ビジュアル デザイン

要件整理 コンセプトワーク

コンテンツ 企画

抽象度が高い 抽象度が低い(具体的)

8

Page 9: 111112 受発注のセオリーイベント資料

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

9

Page 10: 111112 受発注のセオリーイベント資料

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

10

Page 11: 111112 受発注のセオリーイベント資料

Why? 何のためにデザインをおこなうのか?

1.目的の明確化

11

Page 12: 111112 受発注のセオリーイベント資料

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

1.目的の明確化

12

Page 13: 111112 受発注のセオリーイベント資料

目的の分解 1. 目的達成手段 Solution

2. 水面下の依頼目的 (=真の要求事項) Problem

1.目的の明確化

13

Page 14: 111112 受発注のセオリーイベント資料

Problemは何なのか? 真の要求事項は何なのか? どの問題を解こうとしているのか?

1.目的の明確化

14

Page 15: 111112 受発注のセオリーイベント資料

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

1.目的の明確化

15

Page 16: 111112 受発注のセオリーイベント資料

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

「競合がリニューアルした」 ネットで比較されやすい商品。比較検討する際の 項目数が競合に比べ少なく、訴求力が弱い。 ⇒真の要求事項 [Problem] 競合優位性を保つためにリニューアルが必須

1.目的の明確化

16

Page 17: 111112 受発注のセオリーイベント資料

ビジョンステートメント 1.我々はこれから何をしようとしているのか? ■自分たちが「何を達成しようとしているのか、それにより どうプラスになるのか」を端的に記す。達成手段ではなく、 必ず目標を明確にする。

2.我々は何故これをやろうとしているのか? (問題は何なのか?) ■そもそもなぜこれをやろうとしているの?という、 大もとの課題を明確にする。

3.この努力が成功したかどうかは、 どうしたらわかるのか? ■どこを目指しているかがわかるように、 具体的に(なるべく数値化した)目標を記す。

1.目的の明確化

17

Page 18: 111112 受発注のセオリーイベント資料

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

18

Page 19: 111112 受発注のセオリーイベント資料

How? 問題はわかった。 その問題はどの方法で 解決するのが良いのか?

2.解決方法の選定

19

Page 20: 111112 受発注のセオリーイベント資料

なんでもビジュアルで解決しようと するとおかしなことになる。 ビジュアルが出来るのは次のような事。 1.他と差別化する 2.感情に訴えかける 3.機能性を高める

2.解決方法の選定

20

Page 21: 111112 受発注のセオリーイベント資料

1.他と差別化する ・強調させる ・印象のコントロール

2.解決方法の選定

21

Page 22: 111112 受発注のセオリーイベント資料

1.他と差別化する

2.解決方法の選定

サルバトーレクオモ ピザーラ 22

Page 23: 111112 受発注のセオリーイベント資料

2.感情に訴えかける ・欲求を喚起させる ・想像させる ・共感させる ・文脈を伝える

2.解決方法の選定

23

Page 24: 111112 受発注のセオリーイベント資料

3.機能性を高める ・視認性を良くする ・優先順位を明確にする ・直感的に動作を理解させる

2.解決方法の選定

24

Page 25: 111112 受発注のセオリーイベント資料

他のアプローチによる問題解決 ≒ビジュアルデザインでは解決できない事

1.プロダクトやブランドの問題 2.Webにアクセスしない顧客層の問題 3.Webサイトへの流入経路の問題 4.情報設計の問題 5.コンテンツの問題 6.プロセスの問題

2.解決方法の選定

25

Page 26: 111112 受発注のセオリーイベント資料

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

26

Page 27: 111112 受発注のセオリーイベント資料

Why? なぜギャップが生まれるのか?

2.解決方法の選定

27

Page 28: 111112 受発注のセオリーイベント資料

発注者の意識

1.プロジェクトの説明を省く 2.制作者を過信する (スコープを過大に認識する) 3.ビジネスニーズに偏重する 4.発注内容に客観性が足りない

3.発注者と制作者のギャップ

28

Page 29: 111112 受発注のセオリーイベント資料

制作者の意識

1.受け身の姿勢 2.発注者の事情を過小評価する 3.タスクやリスクを過小評価する

3.発注者と制作者のギャップ

29

Page 30: 111112 受発注のセオリーイベント資料

3.発注者と制作者のギャップ

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

30

Page 31: 111112 受発注のセオリーイベント資料

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

31

Page 32: 111112 受発注のセオリーイベント資料

What? アートディレクションとは何か?

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

32

Page 33: 111112 受発注のセオリーイベント資料

主に気難しそうな人たち、 ・・・みたいな。

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

こんな人たち。

33

Page 34: 111112 受発注のセオリーイベント資料

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

デザイナーではない、 デザイン専門のディレクター。 1.Web担とデザイナーの翻訳者 2.アートディレクターは客観性を保つ、俯瞰視点の人

34

Page 35: 111112 受発注のセオリーイベント資料

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

35

Page 36: 111112 受発注のセオリーイベント資料

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

36

Page 37: 111112 受発注のセオリーイベント資料

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

37

デザイナー

Page 38: 111112 受発注のセオリーイベント資料

アートディレクターのツール イメージスケール

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

38

Page 39: 111112 受発注のセオリーイベント資料

イメージスケール

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

39

Page 40: 111112 受発注のセオリーイベント資料

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

40

Page 41: 111112 受発注のセオリーイベント資料

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

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

41

Page 42: 111112 受発注のセオリーイベント資料

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

42

Page 43: 111112 受発注のセオリーイベント資料

How? どのように合意形成をすすめるか?

5.段階的合意形成

43

Page 44: 111112 受発注のセオリーイベント資料

5.段階的合意形成

初期段階のズレのリスクは大きい

44

Page 45: 111112 受発注のセオリーイベント資料

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

5.段階的合意形成

45

Page 46: 111112 受発注のセオリーイベント資料

5.段階的合意形成

各フェーズのポイント

46

Page 47: 111112 受発注のセオリーイベント資料

5.段階的合意形成

ステークホルダー(利害関係者)の把握

47

Page 48: 111112 受発注のセオリーイベント資料

5.段階的合意形成

ステークホルダー(利害関係者)の把握

48

Page 49: 111112 受発注のセオリーイベント資料

ご清聴ありがとうございました。

Twitter ID: @rk611 https://www.facebook.com/designcontrol

【速報】終了のお知らせ\(^o^)/

49