111204 受発注のコミュニケーションイベント資料
TRANSCRIPT
![Page 1: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/1.jpg)
Webデザイン受発注のコミュニケーション実務 ワークショップ
片山良平 @rk611
2011,12,11 Digital Hollywood Osaka
1
![Page 2: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/2.jpg)
本日のゴール 今日話そうと考えている事
Web制作におけるビジュアルデザインがテーマ 発注側、制作側双方で、デザインを扱ううえで ・どのような点に注意をしたらいいのか? ・どういったことを知っていたほうがいいのか? を、持ち帰ってもらえればと考えています。
2
![Page 3: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/3.jpg)
片山良平 新規事業開発担当/元Webプロデューサー
1999~2007 株式会社アニー デザイナー PHPプログラマー ディレクター/プロデューサー 2007~2011 ネットイヤーグループ株式会社 プロジェクトマネージャー チームリーダー/プロデューサー 2011~ 株式会社エムアウト 戦略事業グループ マネジャー
Ryohei Katayama @rk611
3
![Page 4: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/4.jpg)
何故、デザインはひっくり返るのか?
4
![Page 5: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/5.jpg)
何故、デザインはひっくり返るのか?
1.最後のほうに社長が出てきた。 2.会社としての決定ではなく個人の趣味だった 3.途中で要件が変わった 4.自然の摂理として
5
![Page 6: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/6.jpg)
何故、ズレたデザインが 上がってくるのか?
6
![Page 7: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/7.jpg)
何故、ズレたデザインが 上がってくるのか?
1.デザイナーと意思疎通が出来ていなかった。 2.参考として視覚的なサンプルを渡したが、 説明不足で、真似しろと受け取られた。 3.デザインのゴールが定まっておらず、好き嫌い の議論でデザインを進めていた。 4.自然の摂理として
7
![Page 8: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/8.jpg)
Wedデザイン 受発注のセオリー デザインコントロールが身につく本
8
![Page 9: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/9.jpg)
9
![Page 10: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/10.jpg)
戦略 プランニング
概要設計 詳細設計 実装 運用
情報設計 ビジュアル デザイン
要件整理 コンセプトワーク
コンテンツ 企画
抽象度が高い 抽象度が低い(具体的)
10
![Page 11: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/11.jpg)
Wedデザイン 受発注のセオリー デザインコントロールが身につく本 ビジュアルデザインにおける受発注で特に大事な事 1.目的の明確化 2.解決方法の選定 3.発注者と制作者のギャップ 4.アートディレクションについて 5.段階的に絞り込んでいく手法 合意形成の仕方、意見をまとめるやりかた
11
![Page 12: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/12.jpg)
1.目的の明確化 プロジェクトの目的をはっきりとさせる
12
![Page 13: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/13.jpg)
Why? 何のためにデザインをおこなうのか?
1.目的の明確化
13
![Page 14: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/14.jpg)
何のためにデザインを行なうのか? 目的は何か? ・クライアントに頼まれたから ・デザインが古いので今風にしたいから ・店舗を立ち上げたから
1.目的の明確化
14
![Page 15: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/15.jpg)
目的の分解 1. 目的達成手段 Solution
2. 水面下の依頼目的 (=真の要求事項) Problem
1.目的の明確化
15
![Page 16: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/16.jpg)
Problemは何なのか? 真の要求事項は何なのか? どの問題を解こうとしているのか?
1.目的の明確化
16
![Page 17: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/17.jpg)
「デザインが古いから今風にしたい」 ⇒目的達成手段 [Solution] デザインが古いとなんで今風にしないといけないの?
1.目的の明確化
17
![Page 18: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/18.jpg)
「デザインが古いから今風にしたい」 ⇒目的達成手段 [Solution] デザインが古いとなんで今風にしないといけないの?
「競合がリニューアルした」 ネットで比較されやすい商品。比較検討する際の 項目数が競合に比べ少なく、訴求力が弱い。 ⇒真の要求事項 [Problem] 競合優位性を保つためにリニューアルが必須
1.目的の明確化
18
![Page 19: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/19.jpg)
ここで問題です 「店舗(美容室)を立ち上げたから サイトを作りたい」 真の要求事項はどんなものが 想定できるでしょうか?
1.目的の明確化
19
![Page 20: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/20.jpg)
「店舗(美容室)を立ち上げたから サイトを作りたい」 1.来店者数が少ないので、増やしたい (1) 認知度が低い (2) 認知はされているが来店機会がないようだ 2.リテンション(再来店率)が低いので、高くしたい (1) 予約がしにくい、とりにくい (2) 他の店のほうがいいと思われているようだ ≒ 売り上げが低迷しているから、売り上げを上げたい
1.目的の明確化
20
![Page 21: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/21.jpg)
ビジョンステートメント 1.我々はこれから何をしようとしているのか? ■自分たちが「何を達成しようとしているのか、それにより どうプラスになるのか」を端的に記す。達成手段だけではなく、 必ず目標を明確にする。
2.我々は何故これをやろうとしているのか? (問題は何なのか?) ■そもそもなぜこれをやろうとしているの?という、 大もとの課題を明確にする。
3.この努力が成功したかどうかは、 どうしたらわかるのか? ■どこを目指しているかがわかるように、 具体的に(なるべく数値化した)目標を記す。
1.目的の明確化
21
![Page 22: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/22.jpg)
ビジョンステートメント 1.我々はこれから何をしようとしているのか? ■美容室を立ち上げたが、まだ来店数が少ないので Webサイトをつくり来店数増やしたい。
2.我々は何故これをやろうとしているのか? (問題は何なのか?) ■売り上げを黒字水準に引き上げたい。認知はされているようだが 来店機会がないようなので、自分たちの強みやこだわりを知って もらい来店につなげたい。
3.この努力が成功したかどうかは、 どうしたらわかるのか? ■休日○人、平日○人以上の来店。
1.目的の明確化
22
![Page 23: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/23.jpg)
2.解決方法の選定 ビジュアルデザインは解決方法の一つでしかない
23
![Page 24: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/24.jpg)
How? 問題はわかった。 その問題はどの方法で 解決するのが良いのか?
2.解決方法の選定
24
![Page 25: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/25.jpg)
なんでもビジュアルで解決しようと するとおかしなことになる。 ビジュアルが出来るのは次のような事。 1.他と差別化する 2.感情に訴えかける 3.機能性を高める
2.解決方法の選定
25
![Page 26: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/26.jpg)
1.他と差別化する ・強調させる ・印象のコントロール
2.解決方法の選定
26
![Page 27: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/27.jpg)
1.他と差別化する
2.解決方法の選定
サルバトーレクオモ ピザーラ 27
![Page 28: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/28.jpg)
2.感情に訴えかける ・欲求を喚起させる ・想像させる ・共感させる ・文脈を伝える
2.解決方法の選定
28
![Page 29: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/29.jpg)
3.機能性を高める ・視認性を良くする ・優先順位を明確にする ・直感的に動作を理解させる
2.解決方法の選定
29
![Page 30: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/30.jpg)
他のアプローチによる問題解決 ≒ビジュアルデザインでは解決できない事
1.プロダクトやブランドの問題 2.Webにアクセスしない顧客層の問題 3.Webサイトへの流入経路の問題 4.情報設計の問題 5.コンテンツの問題 6.プロセスの問題
2.解決方法の選定
30
![Page 31: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/31.jpg)
3.発注者と制作者のギャップ 見ているところが全く違うと心得る
31
![Page 32: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/32.jpg)
Why? なぜギャップが生まれるのか?
2.解決方法の選定
32
![Page 33: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/33.jpg)
発注者の意識
1.プロジェクトの説明を省く 2.制作者を過信する (スコープを過大に認識する) 3.ビジネスニーズに偏重する 4.発注内容に客観性が足りない
3.発注者と制作者のギャップ
33
![Page 34: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/34.jpg)
制作者の意識
1.受け身の姿勢 2.発注者の事情を過小評価する 3.タスクやリスクを過小評価する
3.発注者と制作者のギャップ
34
![Page 35: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/35.jpg)
3.発注者と制作者のギャップ
発注者と制作者の間には 深い溝がある。 違う事を前提に進めるしかない。
35
![Page 36: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/36.jpg)
4.アートディレクションについて アートディレクションタスクとは何か?だれがやるのか?
36
![Page 37: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/37.jpg)
What? アートディレクションとは何か?
4.アートディレクションについて
37
![Page 38: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/38.jpg)
主に気難しそうな人たち、 ・・・みたいな。
4.アートディレクションについて
こんな人たち。
38
![Page 39: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/39.jpg)
4.アートディレクションについて
デザイナーではない、 デザイン専門のディレクター。 1.Web担とデザイナーの翻訳者 2.アートディレクターは客観性を保つ、俯瞰視点の人
39
![Page 40: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/40.jpg)
4.アートディレクションについて
40
![Page 41: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/41.jpg)
4.アートディレクションについて
41
![Page 42: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/42.jpg)
4.アートディレクションについて
42
![Page 43: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/43.jpg)
アートディレクターのツール イメージスケール
4.アートディレクションについて
43
![Page 44: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/44.jpg)
イメージスケール
4.アートディレクションについて
44
![Page 45: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/45.jpg)
4.アートディレクションについて
45
![Page 46: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/46.jpg)
4.アートディレクションについて
大抵のプロジェクトでは アートディレクターはいない。 ではどうするか? 制作者側のディレクター、デザイナーが兼務。 アートディレクターは居なくてもいいが、 この役割をやる人がいないとデザインは難航する。
46
![Page 47: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/47.jpg)
5.段階的合意形成 どうやって巻き込み、合意形成を得るか?
47
![Page 48: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/48.jpg)
How? どのように合意形成をすすめるか?
5.段階的合意形成
48
![Page 49: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/49.jpg)
5.段階的合意形成
初期段階のズレのリスクは大きい
49
![Page 50: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/50.jpg)
フェーズが進むほど 修正コストが高くなる根幹部分は 初期に詰める。 リスク高低を把握し、優先順位をつけ リスクが高いものを初期段階で徹底的につぶす。
5.段階的合意形成
50
![Page 51: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/51.jpg)
5.段階的合意形成
各フェーズのポイント
51
![Page 52: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/52.jpg)
5.段階的合意形成
ステークホルダー(利害関係者)の把握
52
![Page 53: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/53.jpg)
5.段階的合意形成
ステークホルダー(利害関係者)の把握
53
![Page 54: 111204 受発注のコミュニケーションイベント資料](https://reader034.vdocuments.mx/reader034/viewer/2022042502/55c0df3cbb61ebbf7b8b46d6/html5/thumbnails/54.jpg)
ご清聴ありがとうございました。
Twitter ID: @rk611 https://www.facebook.com/designcontrol
【速報】終了のお知らせ\(^o^)/
54