Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司

213,369 views

Published on

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

Published in: Business
  • Be the first to comment

分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司

  1. 1. 分かりやすく使いやすい デザインの工夫 い け だ た く じ 池田拓司 2013/12/25 schoo
  2. 2. 今日の内容 • • • • • • • はじめに(1分) プラットフォームの話(9分) アイコンの話(9分) メッセージの話(9分) 事例に基づいた送客の話(9分) まとめ(3分) 質疑・応答(20分)
  3. 3. 自己紹介 • • 池田拓司 takuji ikeda クックパッド株式会社 デザイン部 • • • • • クックパッドサービス全体のデザイン ユーザー体験の責任 デザイン フロントエンド基盤の構築 ・ 新規事業 サービスへの送客 ・ http://tikeda.net/ twitter: @tikeda
  4. 4. 自己紹介
  5. 5. 第 0 問 この授業を受講しているみなさんと デザインの関わりについて教えて下さい
  6. 6. A フリーランスのデザイナー B 会社の中でサービスに関わるデザイナー C 制作会社のデザイナー D 学生 E デザインの仕事をしたいと思ってる方 F デザイナー以外の方
  7. 7. 分かりやすい?伝わりやすい?
  8. 8. 分かりやすい?伝わりやすい? ギャップ
  9. 9. 分かりやすい?伝わりやすい? ギャップを見極めて自然な関係に
  10. 10. 第 1 問 Smart Phone 次の3つの画面は iOS アプリ Android アプリ Web それぞれ、 どれに適したUI?
  11. 11. 空想のサービス「植物辞典」 A 4月の植物 ホーム B 人気順 4月の植物 お気に入り お知らせ 人気順 設定 アッツザクラ アッツザクラ スズラン スズラン ナ ノハナ 4月の植物 スミレ アッツザクラ 五十音順 イカリソウ スミレ 植物辞典 月を選ぶ アッツザクラ イカリソウ C ナ ノハナ アッツザクラ イカリソウ スミレ アッツザクラ スズラン ナ ノハナ ムラサキカタバミ ホーム お気に入り お知らせ 設定 ムラサキカタバミ お気に入り お知らせ 並び替え
  12. 12. 空想のサービス「植物辞典」 A B C ナビゲーションバー メインアクションバー 4月の植物 ホーム 人気順 お気に入り お知らせ 人気順 設定 アッツザクラ スミレ アッツザクラ アッツザクラ スズラン スズラン ナ ノハナ 4月の植物 イカリソウ スミレ 五十音順 アッツザクラ イカリソウ 植物辞典 月を選ぶ 4月の植物 ナ ノハナ アッツザクラ イカリソウ スミレ アッツザクラ スズラン ナ ノハナ ムラサキカタバミ ホーム お気に入り お知らせ 設定 ムラサキカタバミ お気に入り お知らせ 並び替え
  13. 13. 空想のサービス「植物辞典」 A 4月の植物 ホーム B 人気順 4月の植物 お気に入り アッツザクラ お知らせ 人気順 設定 C 植物辞典 月を選ぶ 五十音順 4月の植物 アッツザクラ トップバー アッツザクラ イカリソウ イカリソウ スミレ スミレ アッツザクラ アッツザクラ スズラン スズラン ナ ノハナ ナ ノハナ イカリソウ スミレ アッツザクラ スズラン タブバー ムラサキカタバミ ホーム お気に入り お知らせ 設定 ナ ノハナ ムラサキカタバミ お気に入り お知らせ 並び替え
  14. 14. 空想のサービス「植物辞典」 A B スピナー 4月の植物 ホーム 人気順 お気に入り お知らせ 人気順 アッツザクラ スミレ アッツザクラ アッツザクラ スズラン スズラン ナ ノハナ 4月の植物 イカリソウ スミレ 五十音順 アッツザクラ イカリソウ 植物辞典 月を選ぶ 4月の植物 設定 C セグメンテッド コントロール ナ ノハナ アッツザクラ イカリソウ スミレ アッツザクラ スズラン ナ ノハナ ムラサキカタバミ ホーム お気に入り お知らせ 設定 ムラサキカタバミ お気に入り お知らせ 並び替え
  15. 15. iOS Human Interface Guideline Android Design (English only)
  16. 16. 空想のサービス「植物辞典」 A 4月の植物 ホーム B 人気順 4月の植物 お気に入り お知らせ 人気順 設定 アッツザクラ アッツザクラ スズラン スズラン ナ ノハナ 4月の植物 スミレ アッツザクラ 五十音順 イカリソウ スミレ 植物辞典 月を選ぶ アッツザクラ イカリソウ C ナ ノハナ アッツザクラ イカリソウ スミレ アッツザクラ スズラン ナ ノハナ ムラサキカタバミ ホーム お気に入り お知らせ 設定 ムラサキカタバミ お気に入り お知らせ 並び替え
  17. 17. ユーザーの導線が違う アプリの場合
  18. 18. ユーザーの導線が違う Webの場合 • • • • • 「クックパッド」で検索 「ハロウィン かぼちゃ」で検索 ブラウザのお気に入り ともだちのメール 他のサービス
  19. 19. 参考 スマートフォンとPCのログアウトの事例 SP Web PC
  20. 20. 第1問より • プラットフォームの特徴や利点を理解して 設計することにより、ユーザーが慣れによって 習得した経験を自然に引き出してあげることができる • アプリとウェブではユーザーにとってサービスへの 関わり方が違う場合がある • デバイスの特性によってユーザー環境が変わるため 設計を変える場合もある
  21. 21. 第 2 問 「 設定 」 を意味しない アイコンはどれ
  22. 22. A B C D
  23. 23. 誰もが分かるこのアイコン なぜ分かる?
  24. 24. 誰もが分かるこのアイコン ?
  25. 25. 第 3 問 「 同期」 を意味する アイコンはどれ
  26. 26. A B C D
  27. 27. 第2,3問より • 同じ意味を持つアイコンも、 プラットフォームによって変わる場合がある • サービスオリジナルのアイコンは1サービスで 1つになるように心がける • 新しいものを生み出すだけではなく、 長く使い続けて浸透するための工夫や努力も大切
  28. 28. 第 4 問 Smart Phone 次の画面の 「お気に入りに追加」 機能で 追加後のメッセージ表示に 最適なデザインはどれ?
  29. 29. A お気に入りに追加 お気に入りに追加 お気に入りに追加しました お気に入り一覧を確認する
  30. 30. B お気に入りに追加 お気に入りに 追加しました お気に入りに追加 閉じる
  31. 31. C お気に入りに追加 お気に入りに追加 お気に入りに追加しました 確認する
  32. 32. A バルーン ツールチップ ・ (モードレス) B ダイアログ ・ アラート (モーダル) お気に入りに追加しました お気に入り一覧を確認する C お気に入りに 追加しました トースト (モードレス) 閉じる お気に入りに追加しました 確認する
  33. 33. モーダルの特徴 • • • 確実に伝えられる一方、乱用するとストレス アクションを事前に確認するのに有効 iOS、Androidアプリともに標準のものがある モードレスの特徴 • • • 確実に伝えられない一方、ユーザーの行動を妨げない 想定通りのアクション完了後に表示するのに有効 Androidアプリでは標準のものがある
  34. 34. 第4問より • 同じメッセージのデザインでも複数が考えられ 機能の特徴に合わせて適したUIを選ぶ • モーダルは連続して行うようなアクションには 強制力が強くて不向き • トーストは連続して行うようなアクションに 便利だが気づかれない恐れもある • メッセージもプラットフォームで標準がある
  35. 35. 第 5 問 PC 次の3つのデザインで ユーザーを次の画面へ より多く遷移させた デザインはどれ?
  36. 36. A B C
  37. 37. A B C ? B
  38. 38. 第5問より • 作るだけではなく検証してみないと分からない • 新しい機能やサービスを伝えるのは説明だけではない • 長い説明をすればよいとは限らない。 省略すればよいとも限らない。バランスが大切
  39. 39. まとめ
  40. 40. 分かりやすい?伝わりやすい? • ユーザーがどういう環境かを配慮し それに合わせたデザインを心がける • ユーザーに馴染みのある標準的なものがあるか それとも新しいものが必要なのか判断が必要 • 機能の役割やユーザーの行動を意識し 画面の流れを考えながら適切なデザインを考える • ユーザーへの伝え方は1つではない。 多方面から考えて試行錯誤が必要である
  41. 41. 宿題 分かりやすさ、 使いやすさだけでなく 愛着を持たれる よりよいサービスにするには どんな工夫が考えられるでしょうか?
  42. 42. 一緒にクックパッ クックパッ ドではサービス アプリを作る ドでサービス アプリを作る ・・ UXデザイナー・UIデザイナー UXデザイナー・UIデザイナー 絶賛募集中 http://info.cookpad.com/jobs/?affcd=eetmm

×