1.
いいデザインのために
一人ひとりができること
吉川 雅彦
組織の

2.
‣ デザインとはなんなのかを知る
‣ 組織の一人ひとりがデザインをするという意識が
もてる
このスライドの目的

3.
吉川雅彦
ウェブデザイナー / フロントエンドエンジニア
自己紹介
前職：エンジニア、ウェブマーケター、ウェブマスター
趣味：写真、映画鑑賞、勉強会主催
活動：コンテスト応募、ハッカソン参加
特技：ヒッチハイク

4.
‣ マーケティング
‣ 情報設計
‣ UI設計
‣ ビジュアルデザイン
ウェブに関するスキル
‣ HTML
‣ CSS
‣ JavaScript
‣ jQuery
‣ WordPress
‣ PHP
‣ Java

5.
‣ 興味・関心が周りのエンジニアと違う
‣ クライアントとの距離が近い
‣ 視覚的に達成感や満足感が得られる
エンジニアからウェブデザイナーになった理由

6.
目次
デザインに対する誤解
デザインとは
いいデザインとは
いいデザインのために
組織の一人ひとりができること
１
2
3
4

7.
デザインに対する誤解

8.
‣ デザイナーは見た目をきれいにしてくれる人？
デザインに対する誤解
それだけではない

9.
‣ ウェブデザイナーって、UIなんかも含むの？
デザインに対する誤解
言ってる人によってまちまち
ビジュアル部分だけの人がウェブデザイナーと言ったり
UI、フロントエンドも含んでいたり

10.
‣ デザインはセンスが必要？
デザインに対する誤解
そうでもない

11.
‣ デザインは情報が少なくてもなんとかなる？
デザインに対する誤解
なんとなくいい感じにしかできません

12.
‣ デザイナーはイラストも描ける？
デザインに対する誤解
描けません
イラストとデザインは似ているようで違うんです
※もちろん、イラストも描けるデザイナーもたくさんいます

13.
‣ デザイナーの言い分って非論理的な気がする
デザインに対する誤解
1. 論理的に言う能力がないだけ
2. 先人たち、または本人の経験と知恵のため

14.
‣ デザイナーって必要？
デザインに対する誤解
デザインは必要（デザインはそこかしこにある）
デザイナーが必要かどうかは組織の規模などによる

15.
デザインとは

16.
1. 建築・工業製品・服飾・商業美術などの分野で、
実用面などを考慮して造形作品を意匠すること
2. 図案や模様を考案すること。また、そのもの。
3. 目的をもって具体的に立案・設計すること。
!
デジタル大辞泉
デザインの辞書的な意味

17.
Design is not just what it looks like and feels
like. Design is how it works.
デザインとは、それがどのように見えるか、感じるかだけではない。
デザインとは、それがどのように作用するかだ。
!
Steve Jobs
スティーブ・ジョブズの言葉

18.
デザインとは、広い意味でいうと、
人をどう行動させるかを設計すること
つまり……
!
デザイン
された製品
!
かっこいい
!
使いやすそう
＋ 友達に共有する
＋ 購入する

19.
なぜ行動なのか
‣ トイレが見つからないので店員に
聞く
‣ トイレをすぐに見つける
この場合、見る人は「見つけやすい」「見つけにくい」
とすら思っていないことが多い
よくあるデザイン しゃれおつなデザイン

20.
あれもこれもデザインなんです
UX
IA UI
（情報設計）
ビジュアル
デザイン
トイレまで
スムーズに行ける
「トイレ」の文言は必要か
男女を表すマークは必要か
マークの配置は近い方がいいか
どのくらいの大きさがいいか
何色がいいか
色が濃いほうがいいか
誤解 その1
デザイナーは見た目を綺麗に
してくれるだけの人ではない

21.
いいデザインとは

22.
目的を達成できること
いいデザインとは
思ったより当たり前？
デザイナーと名乗る人ですら意識できていない人が多い気がします

23.
社会的な役割を果たす
企業の目的
企業の存続
利益の向上
売上の向上、費用の削減
つまり、儲けること

24.
ダサいデザインの方が売上が上がる場合も
eBay でヒドいデザインの方がコンバージョン率が高かった、という話
http://tech.a-listers.jp/2012/05/17/dave-mcclure-on-ebay-
design-conversion/
「綺麗」「使いやすい」がいいデザインではない
たとえば牛乳の売場
顕在的なニーズがある牛乳を売場を店の奥の方にすることで、滞在時間が
増え、本来必要としていなかったものも買ってもらい売上に貢献できる

25.
いいデザインは最終的な目的につながる
売上の向上、費用の削減
フラットデザインにする
中長期的な売上を見込む
万人受けし特徴的なサイトを作る
つながる？
途中の目的も最終的な目的と
つながらなければいけない
社員も定着してきた
利益も出ている
ブランドを認知させたい
誤解 その2
デザインは意外と論理的

26.
いいデザインのために
組織の一人ひとりができること

27.
いいデザインをするために
組織の一人ひとりができること
目的の共有
情報の共有

28.
‣ 他の手段を提案することができる
※様々な情報が必要
目的・情報を知ることで適切な手段を選べる
ポスター制作
確度の高い
問い合わせ増加
事業計画、顧客
の職業や趣向、人間の心理、
人間の目の構造、様々な割合の
データ、経済状況、競合のサービス、
ウェブサービスの種類やコスト、統計
学、流行、ツールの使い方、根回しの
仕方、顧客の事業内容、顧客の心理、
展開期間、運営者のスキル、支払
いサイト、他のプロモーショ
ンとの兼ね合い……
広告の出稿 サイトの一部をLP化
満足度も高まり、手戻りも少なくなる
はじめはポスターの制作が目的だった例
本当にしたいこと
誤解 その3
デザインは情報が必要なんです

29.
おまけ1

30.
‣ ペルソナ（想定されるターゲット）の設定 - Who
‣ コンバージョン（目標）の設定 - What
‣ ペルソナに与える価値を考える - Why
‣ シナリオを考える - When, Where, How
適切な手段を選ぶために活用できる一例

31.
‣ 30歳主婦、夫は5歳年上、下高井戸の一戸建て
‣ 4歳の娘がいて幼稚園の送り迎え
‣ 昼間はパートに行きたいが娘が大きくなるまでで
きない
‣ 美容には興味があるが最低限。決して夫のためで
はない
‣ 主に情報はテレビとスマホ
ペルソナの例（化粧品を売りたい場合）

32.
‣ まわりの主婦からきれいだねと言われるような生
き生きした肌になる
ペルソナに与える価値の例

33.
‣ 朝、普段使っている化粧水が切れてきた
‣ 肌に合わないと思っていたため、自分に合う混合肌用
の化粧水を家事のあとスマホでネット検索する
‣ 広告の「無料お試し」の言葉にひかれる
‣ ページに遷移し「30代の肌に」が目にとまり文章を
読んでブックマークする
‣ 後日、色んなサイトを見たあと無料お試しを申し込む
シナリオの例

34.
おまけ2

35.
「吉川さんにとっていいデザインだと思ったものは？」
プレゼン時はぱっと思い浮かばなかったのですが、面白法人カヤックの
名刺や、LIGのサイト（というかビジネスモデル？）なんかが、いい（売
上が上がる）デザインなんじゃないかなと思います。また、女性の間で
非難されまくったルミネの広告で「似合ってるから、脱がせたくなる。」
という広告がありました（http://matome.naver.jp/odai/
2135745023395972501）。わりと拡散されており、この広告以
降のコピーが、男性向けというかトゲがあるというかわかりやすくなっ
て継続されています。ということは、売上も下がってないと予想され、
いい（売上が上がる）デザインだったのではないかなと思います。
質疑応答

36.
「デザインを勉強するには？」
私は独学ではないのでなんともいえませんが、ビジュアル的なデザイン
の場合は、本など見ながら手を動かしてたり、スクールなどに行くのが
いいかもしれません。実際に名刺作りなど、架空ではない案件を
IllustratorやPhotoshop（またはそれに類するもの）を用いて制作す
る経験を積むといいです。
UIなどのデザインであれば、人の心理や法則、マーケティングの本など
をオススメします。
質疑応答

37.
「デザイナーの重要性を伝えるためには？」
たとえば、デザイナーを雇うことでサイトからの申し込み率が1%上がっ
て売上が上がったとき、デザイナーのコストのほうが低ければ雇うべき
だと思います（サービスなどの規模が大きければ大きいほどその価値は
あるでしょう）。ただ、それをどうやって伝えればいいかはわからない
です。こうやってプレゼンをしたり、資料を公開したりすることくらい
しか思いつかないです。
質疑応答

38.
「デザインは本当にセンスは必要ないんですか？」
まったく必要ないわけではないです。やっぱりいります。ただ、論理的
な思考が必要な部分が多いですし、好きで経験を積んでいけばある程度
身についてきます。
質疑応答

39.
まとめ

40.
‣ デザインする機会はそこかしこにある
‣ 広い意味のデザインとは、人をどう行動させるか
を設計すること
‣ いいデザインとは、目的を達成させられること
‣ いいデザインをするためには、目的・情報を共有
し、最適な手段を選ぶこと
まとめ

41.
吉川雅彦
http://yoshikawaweb.com
!
ありがとうございました