• Like
  • Save
細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ
Upcoming SlideShare
Loading in...5
×

細かすぎて伝わらない「気配りデザイン」の極意 先生:秋葉 ちひろ

  • 1,788 views
Uploaded on

ーーーーーーーーーーーーーーーーーーーーーーー …

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

More in: Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,788
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
0
Comments
0
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 細かすぎて伝わらない 気配りデザインの極意 株式会社ツクロア 秋葉ちひろ 株式会社ツクロア 秋葉ちひろ
  • 2. 株式会社ツクロア • Webサイト、スマートフォンアプリ • 設計∼デザイン∼表側の実装 • プロトタイプの作成 • デザインワークとコンサルティング
  • 3. 気配りデザイン ?
  • 4. ユーザー(=人)のことを考えた、 ほんのちょっとした小さな工夫のこと •デザイン上の工夫 •操作をした時の動き •画面遷移のしかた •言葉での表現方法 など
  • 5. •気付かないぐらい自然! •とても細かい! •ほんとうに些細なこと
  • 6. なぜ「気配り」? •アプリは、操作が必要 •小さな画面でいかに使いやすくなるか
  • 7. なぜ「気配り」? •アプリは、操作が必要 •小さな画面でいかに使いやすくなるか アプリは、気配りのたまもの
  • 8. べつに、設計者が やればいいじゃん
  • 9. べつに、設計者が やればいいじゃん
  • 10. •設計者だけが設計するのは、もう限界 •いろんな分野の人が、いろんな見解で 意見を出し合ってほしい!
  • 11. 1 まず、気付くこと 2 理由を考えること
  • 12. •すごーい •つかいやすーい •これいいね!
  • 13. •すごーい •つかいやすーい •これいいね!
  • 14. 抽象的なことばでは なく、ちゃんと人に 伝わるように言語化 しよう
  • 15. 今日のアジェンダ 1. デザインによる気配りデザイン 2. 動きによる気配りデザイン 3. 機能による気配りデザイン
  • 16. 1. デザインによる気配りデザイン デザインとは? 情報を整理して見やすくする
  • 17. 1. デザインによる気配り 情報を整理して見やすくする •情報を、どうやって直感的に伝えられ るか •頭で考えなくても人間がパッとみてわ かりやすいようにするには
  • 18. 1. デザインによる気配り 1 タイムラインや履歴表示での 時間を表示するとき
  • 19. 20:30 治療履歴 秋葉 ちひろ 2013.11.26 32歳 1981.09.17 6回目 B7 金歯差込 2013.11.26 18:23 5回目 B7 仮歯 2013.11.24 15:54 4回目 B3 治療終了 2013.11.20 18:43 3回目 B3 虫歯治療、型取り 2013.10.09 18:34 2回目 クリーニング 2013.10.08 17:45 初回 初回カウンセリング 2013.10.07 18:34
  • 20. 20:30 20:30 治療履歴 2013.11.26 秋葉 ちひろ 32歳 1981.09.17 6回目 B7 金歯差込 5回目 B7 仮歯 2013.11.26 18:23 治療履歴 秋葉 ちひろ 32歳 1981.09.17 6回目 B7 金歯差込 5回目 B7 仮歯 2013.11.20 18:43 3回目 B3 虫歯治療、型取り 2013.10.09 18:34 2回目 クリーニング 2013.10.08 17:45 2013.11.24 15:54 4回目 B3 治療終了 3回目 B3 虫歯治療、型 取り クリーニング 2013.10.07 18:34 初回 before 2013.11.26 18:23 2日前 2回目 初回カウンセリング 1時間前 2013.11.24 15:54 4回目 B3 治療終了 初回 2013.11.26 初回カウンセリン グ after 6日前 2013.11.20 18:43 1ヶ月前 2013.10.09 18:34 2ヶ月前 2013.09.25 17:45 2ヶ月前 2013.09.24 18:34
  • 21. 20:30 20:30 治療履歴 秋葉 ちひろ 6回目 B7 金歯差込 5回目 B7 仮歯 2013.11.26 32歳 1981.09.17 2013.11.26 18:23 治療履歴 2013.11.26 秋葉 ちひろ 6回目 B7 金歯差込 5回目 B7 仮歯 32歳 1981.09.17 1時間前 2013.11.26 18:23 2013.11.24 15:54 2日前 • •1ヶ月以上前のものについては、だいた 4回目 B3 治療終了 2013.11.20 18:43 3回目 B3 虫歯治療、型取り 2013.10.09 18:34 2回目 クリーニング 2013.10.08 17:45 2013.11.24 15:54 今を起点に、何時間前、何日前かを計算 4回目 初回 初回カウンセリング B3 治療終了 3回目 2013.10.07 18:34 B3 虫歯治療、型 取り いの○ヶ月前というのを表示 2回目 初回 クリーニング 初回カウンセリン グ 6日前 2013.11.20 18:43 1ヶ月前 2013.10.09 18:34 2ヶ月前 2013.09.25 17:45 2ヶ月前 •それだけだとアバウトすぎるので、詳細 before な日時もわかるように表示するafter 2013.09.24 18:34
  • 22. 1. デザインによる気配り 2 回数や時間の尺を 表示するとき
  • 23. •所要時間 •金額 •乗換回数
  • 24. •所要時間 •金額 •乗換回数
  • 25. あなたならどうする? •所要時間 •金額 •乗換回数
  • 26. 中河原→鎌倉 1時間33分 21:45 ¥1,010 楽 分倍河原 武蔵小杉 中河原 1時間31分 21:57 安 11月23日(土) 21:38出発 早 ¥1,010 安 大船 分倍河原 中河原 鎌倉 武蔵小杉 鎌倉 21:45 中河原 23:28 ¥1,200 1時間43分 府中 23:18 渋谷 明大前 武蔵小杉 鎌倉 23:28
  • 27. 中河原→鎌倉 1時間33分 21:45 ¥1,010 楽 分倍河原 武蔵小杉 中河原 1時間31分 21:57 安 11月23日(土) 21:38出発 早 ¥1,010 安 大船 分倍河原 中河原 鎌倉 武蔵小杉 鎌倉 21:45 中河原 23:28 ¥1,200 1時間43分 府中 23:18 渋谷 明大前 武蔵小杉 鎌倉 23:28
  • 28. 1. デザインによる気配り 3 アクションを予測させるとき
  • 29. 動画
  • 30. •左にちょっとはみ出して重なっているよ うに見えることで、 「右にスライドすると何かが出てくるの では?」 と思わせる →Google+
  • 31. 1. デザインによる気配り 人間が見て、頭を使わなくても 直感的にわかる
  • 32. 1. デザインによる気配り 人間が見て、頭を使わなくても 直感的にわかる • 頭を使わなくてもパッと見てわかるデザイン • 時間軸で情報が整理されたデザイン • 次のアクションを予測できるようなデザイン
  • 33. 2. 動きによる気配りデザイン 気持ちのいい動きを考える
  • 34. 2. 動きによる気配り 1 ギャラリーの写真の スライド表示方法
  • 35. 動画
  • 36. iPhone A
  • 37. iPhone A A B
  • 38. iPhone A A B B
  • 39. Android (Nexus系) A
  • 40. Android (Nexus系) A A B
  • 41. Android (Nexus系) A A B B
  • 42. スローモーション撮影
  • 43. 2. 動きによる気配り 2 Google+での タイムラインの表示方法
  • 44. 動画
  • 45. iPhone
  • 46. iPhone
  • 47. iPhone
  • 48. Android
  • 49. Android
  • 50. Android
  • 51. 2. 動きによる気配り 気付かないけど重要な 遷移アニメーション • 完全な横スライドより、深度も利用したほう が気持ちよい場合もある • スローモーション撮影を利用しよう
  • 52. 3. 機能による気配りデザイン アプリを使うときのことを 考える
  • 53. 3. 機能による気配り 1 Google+で リンク(URL)を投稿するとき
  • 54. 動画
  • 55. 3. 機能による気配り 2 スマートフォンで カッコを入力するとき
  • 56. 動画
  • 57. 3. 機能による気配り 自然な流れで操作できるように
  • 58. 3. 機能による気配り 自然な流れで操作できるように • 必ずそう使うと決まっているものは、自動で 処理できるようにする
  • 59. 気配りデザイン 気配りデザインをすることによって、 使う人は気持よく使える
  • 60. 気配りデザイン 気配りデザインをすることによって、 使う人は気持よく使える 頭をつかわなくても 自然につかえる
  • 61. 気配りデザイン • 今日紹介したアプリは、ぜったいに使ってみ てください • iPhoneもAndroidも、使いこんでください
  • 62. 質疑応答
  • 63. 宿題 気配りデザインを見つけて その理由を言語化しよう。
  • 64. 宿題の回答例1 スマホで写真を新しく撮ったあ とにFacebookを起動すると、 その写真が出てくる • 写真を新しく撮ったあとは、その写真をアップ ロードする可能性が高い • その写真をサジェストすることで、自然と「あ、 この写真アップしよう」と思い、写真をアップす る数が増える
  • 65. 宿題の回答例1
  • 66. 宿題の回答例2 駅の改札の中にATMがある • 電車を降りて改札を出るときに、チャージ金不足 だった • ふと財布を見るとお金がなかった • 駅が負担することを軽減させる
  • 67. ありがとうございました 株式会社ツクロア 秋葉ちひろ 株式会社ツクロア 秋葉ちひろ