SlideShare uma empresa Scribd logo
1 de 54
Baixar para ler offline
Webデザイン受発注のコミュニケーション実務
ワークショップ
片山良平      @rk611
2011,12,11 Digital Hollywood Osaka


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



Web制作におけるビジュアルデザインがテーマ


発注側、制作側双方で、デザインを扱ううえで

 ・どのような点に注意をしたらいいのか?
 ・どういったことを知っていたほうがいいのか?

を、持ち帰ってもらえればと考えています。



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




Ryohei Katayama
@rk611
                  1999~2007 株式会社アニー
                    デザイナー
                    PHPプログラマー
                    ディレクター/プロデューサー

                  2007~2011 ネットイヤーグループ株式会社
                    プロジェクトマネージャー
                    チームリーダー/プロデューサー

                  2011~ 株式会社エムアウト
                    戦略事業グループ マネジャー



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




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

1.最後のほうに社長が出てきた。

2.会社としての決定ではなく個人の趣味だった

3.途中で要件が変わった

4.自然の摂理として




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




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

1.デザイナーと意思疎通が出来ていなかった。

2.参考として視覚的なサンプルを渡したが、
  説明不足で、真似しろと受け取られた。

3.デザインのゴールが定まっておらず、好き嫌い
  の議論でデザインを進めていた。

4.自然の摂理として


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




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



戦略       概要設計   詳細設計    実装      運用
プランニング




要件整理     情報設計   コンテンツ   ビジュアル
コンセプトワーク        企画      デザイン




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


ビジュアルデザインにおける受発注で特に大事な事

 1.目的の明確化

 2.解決方法の選定

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

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

 5.段階的に絞り込んでいく手法
   合意形成の仕方、意見をまとめるやりかた


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




                     12
1.目的の明確化




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




                     13
1.目的の明確化




    何のためにデザインを行なうのか?
    目的は何か?




     ・クライアントに頼まれたから
     ・デザインが古いので今風にしたいから
     ・店舗を立ち上げたから


                          14
1.目的の明確化




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


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




                    15
1.目的の明確化




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




                    16
1.目的の明確化



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




                           17
1.目的の明確化



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




 「競合がリニューアルした」
   ネットで比較されやすい商品。比較検討する際の
   項目数が競合に比べ少なく、訴求力が弱い。

   ⇒真の要求事項 [Problem]
    競合優位性を保つためにリニューアルが必須
                            18
1.目的の明確化




 ここで問題です

    「店舗(美容室)を立ち上げたから
     サイトを作りたい」
       真の要求事項はどんなものが
       想定できるでしょうか?




                       19
1.目的の明確化


 「店舗(美容室)を立ち上げたから
  サイトを作りたい」
   1.来店者数が少ないので、増やしたい
     (1) 認知度が低い
     (2) 認知はされているが来店機会がないようだ

   2.リテンション(再来店率)が低いので、高くしたい
     (1) 予約がしにくい、とりにくい
     (2) 他の店のほうがいいと思われているようだ

   ≒ 売り上げが低迷しているから、売り上げを上げたい


                               20
1.目的の明確化


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


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


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

                                     21
1.目的の明確化


 ビジョンステートメント
 1.我々はこれから何をしようとしているのか?
    ■美容室を立ち上げたが、まだ来店数が少ないので
     Webサイトをつくり来店数増やしたい。


 2.我々は何故これをやろうとしているのか?
   (問題は何なのか?)
    ■売り上げを黒字水準に引き上げたい。認知はされているようだが
     来店機会がないようなので、自分たちの強みやこだわりを知って
     もらい来店につなげたい。


 3.この努力が成功したかどうかは、
   どうしたらわかるのか?
    ■休日○人、平日○人以上の来店。


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




                         23
2.解決方法の選定




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


               24
2.解決方法の選定



 なんでもビジュアルで解決しようと
 するとおかしなことになる。
 ビジュアルが出来るのは次のような事。




            1.他と差別化する
            2.感情に訴えかける
            3.機能性を高める


                         25
2.解決方法の選定



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




              26
2.解決方法の選定



 1.他と差別化する




        サルバトーレクオモ   ピザーラ   27
2.解決方法の選定



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




              28
2.解決方法の選定



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




                 29
2.解決方法の選定




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


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




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




                   31
2.解決方法の選定




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




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




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




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




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




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




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



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




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




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




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




 こんな人たち。




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

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




 デザイナーではない、
 デザイン専門のディレクター。

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




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




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




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




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


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




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


 イメージスケール




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




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




 大抵のプロジェクトでは
 アートディレクターはいない。

 ではどうするか?

 制作者側のディレクター、デザイナーが兼務。
 アートディレクターは居なくてもいいが、
 この役割をやる人がいないとデザインは難航する。



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




                      47
5.段階的合意形成




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




                    48
5.段階的合意形成


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




                      49
5.段階的合意形成




 フェーズが進むほど
 修正コストが高くなる根幹部分は
 初期に詰める。

 リスク高低を把握し、優先順位をつけ
 リスクが高いものを初期段階で徹底的につぶす。




                          50
5.段階的合意形成


            各フェーズのポイント




                         51
5.段階的合意形成


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




                      52
5.段階的合意形成


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




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




     ご清聴ありがとうございました。
                      Twitter ID: @rk611
            https://www.facebook.com/designcontrol




                                                     54

Mais conteúdo relacionado

Mais procurados

20121125 02 dir-mtgスライド02
20121125 02 dir-mtgスライド0220121125 02 dir-mtgスライド02
20121125 02 dir-mtgスライド02
Kenta Nakamura
 
プレゼンテーションの実際〜Webディレクターが編み出した流派〜
プレゼンテーションの実際〜Webディレクターが編み出した流派〜プレゼンテーションの実際〜Webディレクターが編み出した流派〜
プレゼンテーションの実際〜Webディレクターが編み出した流派〜
Takashi Nakao
 

Mais procurados (20)

Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおりWebデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
 
20121125 02 dir-mtgスライド02
20121125 02 dir-mtgスライド0220121125 02 dir-mtgスライド02
20121125 02 dir-mtgスライド02
 
デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)デザイン仕様書(ガイド)の書き方 (初歩者用)
デザイン仕様書(ガイド)の書き方 (初歩者用)
 
初心者のためのUser Centered Designの考え方(入門編)
初心者のためのUser Centered Designの考え方(入門編)初心者のためのUser Centered Designの考え方(入門編)
初心者のためのUser Centered Designの考え方(入門編)
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
 
企業をデザインシフトさせる方法と今後のデザイン戦略
企業をデザインシフトさせる方法と今後のデザイン戦略企業をデザインシフトさせる方法と今後のデザイン戦略
企業をデザインシフトさせる方法と今後のデザイン戦略
 
クリエイティブ研修提案
クリエイティブ研修提案クリエイティブ研修提案
クリエイティブ研修提案
 
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
フラットデザインに出来ること/出来ないことを学ぶ 先生:橘 雄大
 
プレゼンテーションの実際〜Webディレクターが編み出した流派〜
プレゼンテーションの実際〜Webディレクターが編み出した流派〜プレゼンテーションの実際〜Webディレクターが編み出した流派〜
プレゼンテーションの実際〜Webディレクターが編み出した流派〜
 
20130216 講演資料
20130216 講演資料20130216 講演資料
20130216 講演資料
 
ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221ゼロからのディレクション講座 制作・開発編20150221
ゼロからのディレクション講座 制作・開発編20150221
 
イケてるデザインをつくる第一歩
イケてるデザインをつくる第一歩イケてるデザインをつくる第一歩
イケてるデザインをつくる第一歩
 
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
講演資料「クリエイターのためのトーン&マナー設計について」(パソナテック主催セミナー)
 
デザインの要件定義
デザインの要件定義デザインの要件定義
デザインの要件定義
 
Webサービスをデザインするってどういうこと?
Webサービスをデザインするってどういうこと?Webサービスをデザインするってどういうこと?
Webサービスをデザインするってどういうこと?
 
【ゼロからのディレクション講座】サイト設計編
【ゼロからのディレクション講座】サイト設計編【ゼロからのディレクション講座】サイト設計編
【ゼロからのディレクション講座】サイト設計編
 
あなたの販促・集客・認知を問題解決できる動画シナリオの書き方
あなたの販促・集客・認知を問題解決できる動画シナリオの書き方あなたの販促・集客・認知を問題解決できる動画シナリオの書き方
あなたの販促・集客・認知を問題解決できる動画シナリオの書き方
 
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
 
サイトリニューアル時のコンセプト設計
サイトリニューアル時のコンセプト設計サイトリニューアル時のコンセプト設計
サイトリニューアル時のコンセプト設計
 
企画=コンセプト+実施案
企画=コンセプト+実施案企画=コンセプト+実施案
企画=コンセプト+実施案
 

Semelhante a 111204 受発注のコミュニケーションイベント資料

ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
INFOBAHN.inc(株式会社インフォバーン)
 
日本ベンチャーにとってのシリコンバレーでのチャレンジと成功へのヒント
日本ベンチャーにとってのシリコンバレーでのチャレンジと成功へのヒント日本ベンチャーにとってのシリコンバレーでのチャレンジと成功へのヒント
日本ベンチャーにとってのシリコンバレーでのチャレンジと成功へのヒント
ブレークスルーパートナーズ 赤羽雄二
 
【発表用】Lpoワークショップ~組織でサイト改善をする方法~
【発表用】Lpoワークショップ~組織でサイト改善をする方法~【発表用】Lpoワークショップ~組織でサイト改善をする方法~
【発表用】Lpoワークショップ~組織でサイト改善をする方法~
VOYAGE GROUP
 
【公開用】Desinger - Design = Your Values by TakahiroIshiyama
【公開用】Desinger - Design = Your Values by TakahiroIshiyama【公開用】Desinger - Design = Your Values by TakahiroIshiyama
【公開用】Desinger - Design = Your Values by TakahiroIshiyama
Takahiro Ishiyama
 

Semelhante a 111204 受発注のコミュニケーションイベント資料 (20)

ディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルールディレクターが知っておくべき3つのデザインディレクションのルール
ディレクターが知っておくべき3つのデザインディレクションのルール
 
Web design
Web designWeb design
Web design
 
Webdirection
WebdirectionWebdirection
Webdirection
 
日本ベンチャーにとってのシリコンバレーでのチャレンジと成功へのヒント
日本ベンチャーにとってのシリコンバレーでのチャレンジと成功へのヒント日本ベンチャーにとってのシリコンバレーでのチャレンジと成功へのヒント
日本ベンチャーにとってのシリコンバレーでのチャレンジと成功へのヒント
 
Sit tokyo2021 0203_dt sonosakie_taroozaki
Sit tokyo2021 0203_dt sonosakie_taroozakiSit tokyo2021 0203_dt sonosakie_taroozaki
Sit tokyo2021 0203_dt sonosakie_taroozaki
 
Designing Brand Identity - プロセス編1
Designing Brand Identity - プロセス編1Designing Brand Identity - プロセス編1
Designing Brand Identity - プロセス編1
 
エンジニアのためのSketch入門 vol1
エンジニアのためのSketch入門 vol1エンジニアのためのSketch入門 vol1
エンジニアのためのSketch入門 vol1
 
Wit wdm01
Wit wdm01Wit wdm01
Wit wdm01
 
【発表用】Lpoワークショップ~組織でサイト改善をする方法~
【発表用】Lpoワークショップ~組織でサイト改善をする方法~【発表用】Lpoワークショップ~組織でサイト改善をする方法~
【発表用】Lpoワークショップ~組織でサイト改善をする方法~
 
デザイン思考入門クラス2015年2月24日
デザイン思考入門クラス2015年2月24日デザイン思考入門クラス2015年2月24日
デザイン思考入門クラス2015年2月24日
 
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
始めよう!Webディレクション 制作・開発現場を活性化するディレクション始めよう!Webディレクション 制作・開発現場を活性化するディレクション
始めよう!Webディレクション 制作・開発現場を活性化するディレクション
 
業務エンジニアのためのWebサイト制作手順
業務エンジニアのためのWebサイト制作手順業務エンジニアのためのWebサイト制作手順
業務エンジニアのためのWebサイト制作手順
 
【公開用】Desinger - Design = Your Values by TakahiroIshiyama
【公開用】Desinger - Design = Your Values by TakahiroIshiyama【公開用】Desinger - Design = Your Values by TakahiroIshiyama
【公開用】Desinger - Design = Your Values by TakahiroIshiyama
 
ブランド勉強会プロセス編2
ブランド勉強会プロセス編2ブランド勉強会プロセス編2
ブランド勉強会プロセス編2
 
【無料】プレゼンテーション研修(シャイン経営研究所)
【無料】プレゼンテーション研修(シャイン経営研究所)【無料】プレゼンテーション研修(シャイン経営研究所)
【無料】プレゼンテーション研修(シャイン経営研究所)
 
LPOワークショップ~組織でサイト改善をする方法~
LPOワークショップ~組織でサイト改善をする方法~LPOワークショップ~組織でサイト改善をする方法~
LPOワークショップ~組織でサイト改善をする方法~
 
Webデザイナー・イラストレーターになるために必要なこと
Webデザイナー・イラストレーターになるために必要なことWebデザイナー・イラストレーターになるために必要なこと
Webデザイナー・イラストレーターになるために必要なこと
 
ディレクターのためのUX基本講座〜カスタマージャーニーマップを体験してみよう〜
ディレクターのためのUX基本講座〜カスタマージャーニーマップを体験してみよう〜ディレクターのためのUX基本講座〜カスタマージャーニーマップを体験してみよう〜
ディレクターのためのUX基本講座〜カスタマージャーニーマップを体験してみよう〜
 
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
 
リードデザイナーってどんな人か考えてみた
リードデザイナーってどんな人か考えてみたリードデザイナーってどんな人か考えてみた
リードデザイナーってどんな人か考えてみた
 

111204 受発注のコミュニケーションイベント資料