ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/344/room ーーーーーーーーーーーーーーーーーーーーーーー

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

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

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

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

27. A
B
C
D

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

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

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

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

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

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

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

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

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

40. A
B
C

41. A
B
C
?
B

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

43. まとめ

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

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

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