伝わる!デザインのつくりかた

39
クライアント そのデザイン ユーザ ているか ! 思い切った攻めのアプローチ デザイナー 良きものでも批判される 覚悟があるか!? ユーザは美的センスに心を奪われるだろうか? 普通は 採用案 カッコいい はずだが… 殺到 する 批判 Web ばかりが媒体ではない デザイナー ちょっとだけ ズルくなれ てることが できる コンテンツ 成功 まない たった 一回 モデル 形成 する 仕掛 ける さぶる 秋葉 秀樹 DTP Booster 038 powerd by WDHA

description

2013年3月16日、青森で行われたDTP Boosterで発表したスライドです。

Transcript of 伝わる!デザインのつくりかた

Page 1: 伝わる!デザインのつくりかた

どんなデザインでも

共通して言えること

対クライアント そのデザインはユーザを見ているか!?

思い切った攻めのアプローチデザイナーよ良きものでも批判される覚悟があるか!? ユーザは美的センスに心を奪われるだろうか?

普通は採用案がカッコいいはずだが…

殺到する批判「上から目線」

Webばかりが媒体ではないデザイナーよ、ちょっとだけズルくなれ

育てることができるコンテンツ

成功を望まないたった一回でモデルを形成する

仕掛ける!揺さぶる!

もはや

「お金を払ってくださるお客様」

的感覚など

存在しない

広告は時として

「攻め」ることも大事

秋葉 秀樹

DTP Booster 038 powerd by WDHA

Page 2: 伝わる!デザインのつくりかた

見た目の良さだけをデザインとしない

ユーザ 対 デザイン を考えよう

Page 3: 伝わる!デザインのつくりかた

伝わる!仕掛ける!揺さぶる!

広告とはいかに人に影響を与えるか?が勝負

Page 4: 伝わる!デザインのつくりかた

企画営業・DTP・グラフィックデザイン・Webフロントエンド全般・Flashゲーム開発・3DCGモデリング・Webディレクター

秋葉秀樹(あきば・ひでき)自己紹介

執筆書籍

フリーランスのデザイナー/株式会社インヴォーグ外部CTO兼テクニカルアドバイザー(社内クリエイティブチームの育成強化および技術研究)

Page 6: 伝わる!デザインのつくりかた

何が良いデザインで何が悪いデザインなのか?

批判されるデザインから学べるものとは何か?

Page 7: 伝わる!デザインのつくりかた

ビッグカメラと「ビックロ」という新しいコラボショップをつくったユニクロは、広告までビッグカメラ化してしまったんだろうか? 朝から絶叫みたいな、悲鳴みたいな新聞広告。売れてないんだろうか・・?そうそうほんとにユニクロはビックカメラといっしょになってから広告がただのスーパーの安売りチラシみたくなった。クライアントの指示なのか製作者のセンスなのかを知りたい気分。

ユニクロの新聞広告。不快感しか感じられない。

ユニクロのキチガイじみた広告に朝からドン引き

どうでもいいけど今日付けの新聞に載ってるユニクロの広告最高にセンスないと思う

(一部抜粋)

どうしたユニクロ!?ひどすぎる新聞広告に心配の声まで!まとめ

http://matome.naver.jp/odai/2135355820375056401

Page 8: 伝わる!デザインのつくりかた

ビッグカメラと「ビックロ」という新しいコラボショップをつくったユニクロは、広告までビッグカメラ化してしまったんだろうか? 朝から絶叫みたいな、悲鳴みたいな新聞広告。売れてないんだろうか・・?そうそうほんとにユニクロはビックカメラといっしょになってから広告がただのスーパーの安売りチラシみたくなった。クライアントの指示なのか製作者のセンスなのかを知りたい気分。

ユニクロの新聞広告。不快感しか感じられない。

ユニクロのキチガイじみた広告に朝からドン引き

どうでもいいけど今日付けの新聞に載ってるユニクロの広告最高にセンスないと思う

(一部抜粋)

どうしたユニクロ!?ひどすぎる新聞広告に心配の声まで!まとめ

http://matome.naver.jp/odai/2135355820375056401

私たちの美的感覚はユーザにとって正しいか?

Page 9: 伝わる!デザインのつくりかた

!?

Page 11: 伝わる!デザインのつくりかた

受験生というユーザ属性の心境に対し

「上から目線」

東進ハイスクール

僕はキミにとって大切なんだよ!「お金を払ってくださるお客様」ではない

が巧妙

Page 12: 伝わる!デザインのつくりかた

殺到する批判と約15億円の経済効果

平城遷都1300年祭マスコットキャラクター「せんとくん」

Page 13: 伝わる!デザインのつくりかた

いつまでもユルくいてほしいデザイナーとして変なプライドは捨てることも必要ではないか

Page 14: 伝わる!デザインのつくりかた

美しくもカッコ良くもない彼らはいつもどこかで誰かを癒しているかもしれない

僕らのヒーローhttp://blogs.yahoo.co.jp/sawarenja

Page 15: 伝わる!デザインのつくりかた

海外は日本のサブカルチャーを見ている

海外のデザインは美しい…が

Page 16: 伝わる!デザインのつくりかた

そのデザインはユーザを見ているか!?

見た目の良さ(美しさ)をデザインの質と等価で考えることは時としてリスキー

Page 17: 伝わる!デザインのつくりかた

伝わる!対クライアント

何が素人的意見か? 何が専門的意見か?対ユーザと対クライアントの違い

Page 18: 伝わる!デザインのつくりかた
Page 19: 伝わる!デザインのつくりかた

ヒアリングからすでに始まっている

発注担当者(クライアント)

プロデューサー・営業(社内スタッフ)

デザイナー(あなた)

「伝わるデザイン」は

Page 20: 伝わる!デザインのつくりかた

はユーザを見ている

デザイナーよ、ユーザを見ているか?

見れるはずがない。

経営者(クライアント)

それが無理だからこそ

クライアントの意見を重視するべきポイントを判断する本当にペルソナをやりたければ入社してマーケに入るか店頭で接客するべき

Page 21: 伝わる!デザインのつくりかた

プロとしてアドバイスできない領域

プロとしてアドバイスできる領域

発注担当者(クライアント)

プロデューサー・営業(社内スタッフ)

デザイナー(あなた)

カスタマー(ユーザ)

Page 22: 伝わる!デザインのつくりかた

複数案のデザイン提出複数案とは本来、質の良いチャレンジのはずだが…

発注担当者

湧かないからちょっとイメージが

適当に2,3案ください

Page 23: 伝わる!デザインのつくりかた

我 が々導かないといけない場合もある

湧かないからちょっとイメージが

適当に2,3案ください

発注担当者

方向性が3つに分かれていてリサーチの結果

3案ください

発注担当者

何が違う?

Page 24: 伝わる!デザインのつくりかた

湧かないからちょっとイメージが

適当に2,3案ください

私たちの責任です

発注担当者

決めきれなくなって…すいません…

あと、2,3案ください

発注担当者

クライアントの悪口を言うのはやめましょう

Page 25: 伝わる!デザインのつくりかた

意見を言える、ダメだしができる、一緒につくる

クライアントと上下関係をつくらない努力メールの無駄なあいさつ、へりくだった表現、冗長な長文

Page 26: 伝わる!デザインのつくりかた

伝わる!デザインと様 な々デバイスとの関係

何を使って伝えるか?技術とデザインを一体で考えることとは?

Page 27: 伝わる!デザインのつくりかた

body { font-family: "FOT-マティス Pro M"; -webkit-writing-mode: vertical-rl;}

h1 { font-size :200pt; font-weight: normal; margin: 0;}

p { font-size :50pt; margin: 0; line-height: 1.2;}

.motoya { font-family: "NudMotoyaMinchoStd-W6";}.iwata { font-family: "IwaGMinPro-Bd";}.ryumin { font-family: "Ryumin Bold KL JIS2004";}

協力:フォントプラス http://webfont.fontplus.jp/

Page 28: 伝わる!デザインのつくりかた

<p class="tate">平成<span>25</span>年3月<span>16</span>日</p>

.tate { -webkit-writing-mode: vertical-rl;}span { -webkit-text-combine: horizontal;}

Page 29: 伝わる!デザインのつくりかた

text-combine-horizontal: digits 2

text-combine-mode: compress

平成25年

平成25年

Page 30: 伝わる!デザインのつくりかた

記事 記事

見た目、レイアウトは違えど伝える情報内容は共通

<h1>記事 </h1>

情報資産

Page 31: 伝わる!デザインのつくりかた

東京モノレール 山手線

同じ都内でも両沿線の特徴は全く違う

媒体ごとに違う顧客性

Page 32: 伝わる!デザインのつくりかた

一回きり勝負のコンテンツ

育てることができるコンテンツ

媒体別の活かし方

Page 33: 伝わる!デザインのつくりかた

失敗が活かせる、フィードバックをもとに育てることができる

対クライアント 成功を望まないたった一回でモデルを形成する

Page 34: 伝わる!デザインのつくりかた

Webデザインは視覚的伝達のみで考えないインタラクティブ

「ユーザとの対話」で状況に応じる

「機能のデザイン」

Page 35: 伝わる!デザインのつくりかた

“Design is not just what it looks like and feels like.Design is how it works.”

Steven Paul Jobs

デザインとは単にどう見えるか、どう感じるかということではない。デザインとはどう機能するかである。

Page 36: 伝わる!デザインのつくりかた

デザインカンプありがちな失敗DTP Web

フォント周り

レイアウト周り

本文が「マティス」のカンプこだわった文字詰め9~10級(6~7ポイント)と小さすぎる文字

複雑に入り組んだ回り込みテキスト処理カテゴリやページごとに違いすぎるレイアウト円形でクリッピングマスクされたアイコン右下寄せにオブジェクトを配置多めの影や光彩エフェクト

これら、実はすべて可能である

何をデザインの失敗とするか?大切なことは

を理解することである

Page 37: 伝わる!デザインのつくりかた

デザイナーよ、ちょっとだけズルくなれ広告は時として「攻め」ることも大事、ダマして相手を幸せにすればそれは悪いことではない

(エロ)

Page 38: 伝わる!デザインのつくりかた

環境デザインEnvironmental Design

プロダクトデザインProduct Design

どんなデザインでも

共通して言えること

Page 39: 伝わる!デザインのつくりかた

今日はありがとうございました!秋葉 秀樹

ENDユーザに幸せを仕掛るデザインを!

しあわ しかけ