1.
分かりやすく使いやすい
デザインの工夫
い け だ た く じ
池田拓司
2013/12/25 schoo

2.
今日の内容
•
•
•
•
•
•
•
はじめに（1分）
プラットフォームの話（9分）
アイコンの話（9分）
メッセージの話（9分）
事例に基づいた送客の話（9分）
まとめ（3分）
質疑・応答（20分）

3.
自己紹介
•
•
池田拓司 takuji ikeda
クックパッド株式会社 デザイン部
•
•
•
•
•
クックパッドサービス全体のデザイン
ユーザー体験の責任
デザイン フロントエンド基盤の構築
・
新規事業 サービスへの送客
・
http://tikeda.net/
twitter: @tikeda

4.
自己紹介

5.
第
0
問
この授業を受講しているみなさんと
デザインの関わりについて教えて下さい

6.
A
フリーランスのデザイナー
B
会社の中でサービスに関わるデザイナー
C
制作会社のデザイナー
D
学生
E
デザインの仕事をしたいと思ってる方
F
デザイナー以外の方

7.
分かりやすい？伝わりやすい？

8.
分かりやすい？伝わりやすい？
ギャップ

9.
分かりやすい？伝わりやすい？
ギャップを見極めて自然な関係に

10.
第
1
問
Smart Phone
次の3つの画面は
iOS
アプリ
Android
アプリ
Web
それぞれ、
どれに適したUI？

11.
空想のサービス「植物辞典」
A
4月の植物
ホーム
B
人気順
4月の植物
お気に入り
お知らせ
人気順
設定
アッツザクラ
アッツザクラ
スズラン
スズラン
ナ
ノハナ
4月の植物
スミレ
アッツザクラ
五十音順
イカリソウ
スミレ
植物辞典
月を選ぶ
アッツザクラ
イカリソウ
C
ナ
ノハナ
アッツザクラ
イカリソウ
スミレ
アッツザクラ
スズラン
ナ
ノハナ
ムラサキカタバミ
ホーム
お気に入り
お知らせ
設定
ムラサキカタバミ
お気に入り
お知らせ
並び替え

12.
空想のサービス「植物辞典」
A
B
C
ナビゲーションバー
メインアクションバー
4月の植物
ホーム
人気順
お気に入り
お知らせ
人気順
設定
アッツザクラ
スミレ
アッツザクラ
アッツザクラ
スズラン
スズラン
ナ
ノハナ
4月の植物
イカリソウ
スミレ
五十音順
アッツザクラ
イカリソウ
植物辞典
月を選ぶ
4月の植物
ナ
ノハナ
アッツザクラ
イカリソウ
スミレ
アッツザクラ
スズラン
ナ
ノハナ
ムラサキカタバミ
ホーム
お気に入り
お知らせ
設定
ムラサキカタバミ
お気に入り
お知らせ
並び替え

13.
空想のサービス「植物辞典」
A
4月の植物
ホーム
B
人気順
4月の植物
お気に入り
アッツザクラ
お知らせ
人気順
設定
C
植物辞典
月を選ぶ
五十音順
4月の植物
アッツザクラ
トップバー
アッツザクラ
イカリソウ
イカリソウ
スミレ
スミレ
アッツザクラ
アッツザクラ
スズラン
スズラン
ナ
ノハナ
ナ
ノハナ
イカリソウ
スミレ
アッツザクラ
スズラン
タブバー
ムラサキカタバミ
ホーム
お気に入り
お知らせ
設定
ナ
ノハナ
ムラサキカタバミ
お気に入り
お知らせ
並び替え

14.
空想のサービス「植物辞典」
A
B
スピナー
4月の植物
ホーム
人気順
お気に入り
お知らせ
人気順
アッツザクラ
スミレ
アッツザクラ
アッツザクラ
スズラン
スズラン
ナ
ノハナ
4月の植物
イカリソウ
スミレ
五十音順
アッツザクラ
イカリソウ
植物辞典
月を選ぶ
4月の植物
設定
C
セグメンテッド
コントロール
ナ
ノハナ
アッツザクラ
イカリソウ
スミレ
アッツザクラ
スズラン
ナ
ノハナ
ムラサキカタバミ
ホーム
お気に入り
お知らせ
設定
ムラサキカタバミ
お気に入り
お知らせ
並び替え

15.
iOS Human Interface Guideline
Android Design
(English only)

16.
空想のサービス「植物辞典」
A
4月の植物
ホーム
B
人気順
4月の植物
お気に入り
お知らせ
人気順
設定
アッツザクラ
アッツザクラ
スズラン
スズラン
ナ
ノハナ
4月の植物
スミレ
アッツザクラ
五十音順
イカリソウ
スミレ
植物辞典
月を選ぶ
アッツザクラ
イカリソウ
C
ナ
ノハナ
アッツザクラ
イカリソウ
スミレ
アッツザクラ
スズラン
ナ
ノハナ
ムラサキカタバミ
ホーム
お気に入り
お知らせ
設定
ムラサキカタバミ
お気に入り
お知らせ
並び替え

17.
ユーザーの導線が違う
アプリの場合

18.
ユーザーの導線が違う
Webの場合
•
•
•
•
•
「クックパッド」で検索
「ハロウィン かぼちゃ」で検索
ブラウザのお気に入り
ともだちのメール
他のサービス

19.
参考
スマートフォンとPCのログアウトの事例
SP Web
PC

20.
第1問より
• プラットフォームの特徴や利点を理解して
設計することにより、ユーザーが慣れによって
習得した経験を自然に引き出してあげることができる
• アプリとウェブではユーザーにとってサービスへの
関わり方が違う場合がある
• デバイスの特性によってユーザー環境が変わるため
設計を変える場合もある

21.
第
2
問
「 設定 」
を意味しない
アイコンはどれ

22.
A
B
C
D

23.
誰もが分かるこのアイコン
なぜ分かる？

24.
誰もが分かるこのアイコン
?

25.
第
3
問
「 同期」
を意味する
アイコンはどれ

26.
A
B
C
D

27.
第2,3問より
• 同じ意味を持つアイコンも、
プラットフォームによって変わる場合がある
• サービスオリジナルのアイコンは1サービスで
1つになるように心がける
• 新しいものを生み出すだけではなく、
長く使い続けて浸透するための工夫や努力も大切

28.
第
4
問
Smart Phone
次の画面の
「お気に入りに追加」
機能で
追加後のメッセージ表示に
最適なデザインはどれ？

29.
A
お気に入りに追加
お気に入りに追加
お気に入りに追加しました
お気に入り一覧を確認する

30.
B
お気に入りに追加
お気に入りに
追加しました
お気に入りに追加
閉じる

31.
C
お気に入りに追加
お気に入りに追加
お気に入りに追加しました
確認する

32.
A
バルーン ツールチップ
・
（モードレス）
B
ダイアログ
・
アラート
（モーダル）
お気に入りに追加しました
お気に入り一覧を確認する
C
お気に入りに
追加しました
トースト
（モードレス）
閉じる
お気に入りに追加しました
確認する

33.
モーダルの特徴
•
•
•
確実に伝えられる一方、乱用するとストレス
アクションを事前に確認するのに有効
iOS、Androidアプリともに標準のものがある
モードレスの特徴
•
•
•
確実に伝えられない一方、ユーザーの行動を妨げない
想定通りのアクション完了後に表示するのに有効
Androidアプリでは標準のものがある

34.
第4問より
• 同じメッセージのデザインでも複数が考えられ
機能の特徴に合わせて適したUIを選ぶ
• モーダルは連続して行うようなアクションには
強制力が強くて不向き
• トーストは連続して行うようなアクションに
便利だが気づかれない恐れもある
• メッセージもプラットフォームで標準がある

35.
第
5
問
PC
次の3つのデザインで
ユーザーを次の画面へ
より多く遷移させた
デザインはどれ？

36.
A
B
C

37.
A
B
C
?
B

38.
第5問より
• 作るだけではなく検証してみないと分からない
• 新しい機能やサービスを伝えるのは説明だけではない
• 長い説明をすればよいとは限らない。
省略すればよいとも限らない。バランスが大切

39.
まとめ

40.
分かりやすい？伝わりやすい？
• ユーザーがどういう環境かを配慮し
それに合わせたデザインを心がける
• ユーザーに馴染みのある標準的なものがあるか
それとも新しいものが必要なのか判断が必要
• 機能の役割やユーザーの行動を意識し
画面の流れを考えながら適切なデザインを考える
• ユーザーへの伝え方は１つではない。
多方面から考えて試行錯誤が必要である

41.
宿題
分かりやすさ、
使いやすさだけでなく
愛着を持たれる
よりよいサービスにするには
どんな工夫が考えられるでしょうか？

42.
一緒にクックパッ
クックパッ
ドではサービス アプリを作る
ドでサービス アプリを作る
・・
UXデザイナー・UIデザイナー
UXデザイナー・UIデザイナー
絶賛募集中
http://info.cookpad.com/jobs/?affcd=eetmm