細かすぎて伝わらない
気配りデザインの極意
株式会社ツクロア 秋葉ちひろ

株式会社ツクロア

秋葉ちひろ
株式会社ツクロア

• Webサイト、スマートフォンアプリ
• 設計∼デザイン∼表側の実装
• プロトタイプの作成
• デザインワークとコンサルティング
気配りデザイン

?
ユーザー(=人)のことを考えた、
ほんのちょっとした小さな工夫のこと

•デザイン上の工夫
•操作をした時の動き

•画面遷移のしかた
•言葉での表現方法
など
•気付かないぐらい自然!
•とても細かい!
•ほんとうに些細なこと
なぜ「気配り」?

•アプリは、操作が必要
•小さな画面でいかに使いやすくなるか
なぜ「気配り」?

•アプリは、操作が必要
•小さな画面でいかに使いやすくなるか
アプリは、気配りのたまもの
べつに、設計者が
やればいいじゃん
べつに、設計者が
やればいいじゃん
•設計者だけが設計するのは、もう限界
•いろんな分野の人が、いろんな見解で
意見を出し合ってほしい!
1

まず、気付くこと

2

理由を考えること
•すごーい
•つかいやすーい
•これいいね!
•すごーい
•つかいやすーい
•これいいね!
抽象的なことばでは
なく、ちゃんと人に
伝わるように言語化
しよう
今日のアジェンダ
1. デザインによる気配りデザイン
2. 動きによる気配りデザイン
3. 機能による気配りデザイン
1. デザインによる気配りデザイン

デザインとは?
情報を整理して見やすくする
1. デザインによる気配り

情報を整理して見やすくする

•情報を、どうやって直感的に伝えられ
るか

•頭で考えなくても人間がパッとみてわ
かりやすいようにするには
1. デザインによる気配り

1
タイムラインや履歴表示での
時間を表示するとき
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 治療終了

2...
20:30

20:30

治療履歴

2013.11.26

秋葉 ちひろ

32歳 1981.09.17

6回目 B7 金歯差込
5回目 B7 仮歯

2013.11.26 18:23

治療履歴

秋葉 ちひろ

32歳 1981.09...
20:30

20:30

治療履歴

秋葉 ちひろ
6回目 B7 金歯差込
5回目 B7 仮歯

2013.11.26
32歳 1981.09.17
2013.11.26 18:23

治療履歴

2013.11.26

秋葉 ちひろ
6回目...
1. デザインによる気配り

2
回数や時間の尺を
表示するとき
•所要時間
•金額
•乗換回数
•所要時間
•金額
•乗換回数
あなたならどうする?

•所要時間
•金額
•乗換回数
中河原→鎌倉
1時間33分
21:45

¥1,010

楽

分倍河原
武蔵小杉

中河原

1時間31分
21:57

安

11月23日(土) 21:38出発

早

¥1,010

安
大船

分倍河原
中河原

鎌倉

武蔵小杉

鎌...
中河原→鎌倉
1時間33分
21:45

¥1,010

楽

分倍河原
武蔵小杉

中河原

1時間31分
21:57

安

11月23日(土) 21:38出発

早

¥1,010

安
大船

分倍河原
中河原

鎌倉

武蔵小杉

鎌...
1. デザインによる気配り

3
アクションを予測させるとき
動画
•左にちょっとはみ出して重なっているよ
うに見えることで、

「右にスライドすると何かが出てくるの
では?」
と思わせる
→Google+
1. デザインによる気配り

人間が見て、頭を使わなくても
直感的にわかる
1. デザインによる気配り

人間が見て、頭を使わなくても
直感的にわかる

• 頭を使わなくてもパッと見てわかるデザイン
• 時間軸で情報が整理されたデザイン
• 次のアクションを予測できるようなデザイン
2. 動きによる気配りデザイン

気持ちのいい動きを考える
2. 動きによる気配り

1
ギャラリーの写真の
スライド表示方法
動画
iPhone

A
iPhone

A

A

B
iPhone

A

A

B

B
Android
(Nexus系)

A
Android
(Nexus系)

A

A

B
Android
(Nexus系)

A

A

B

B
スローモーション撮影
2. 動きによる気配り

2
Google+での
タイムラインの表示方法
動画
iPhone
iPhone
iPhone
Android
Android
Android
2. 動きによる気配り

気付かないけど重要な
遷移アニメーション

• 完全な横スライドより、深度も利用したほう
が気持ちよい場合もある

• スローモーション撮影を利用しよう
3. 機能による気配りデザイン

アプリを使うときのことを
考える
3. 機能による気配り

1
Google+で
リンク(URL)を投稿するとき
動画
3. 機能による気配り

2
スマートフォンで
カッコを入力するとき
動画
3. 機能による気配り

自然な流れで操作できるように
3. 機能による気配り

自然な流れで操作できるように

• 必ずそう使うと決まっているものは、自動で
処理できるようにする
気配りデザイン
気配りデザインをすることによって、
使う人は気持よく使える
気配りデザイン
気配りデザインをすることによって、
使う人は気持よく使える

頭をつかわなくても
自然につかえる
気配りデザイン

• 今日紹介したアプリは、ぜったいに使ってみ
てください

• iPhoneもAndroidも、使いこんでください
質疑応答
宿題

気配りデザインを見つけて
その理由を言語化しよう。
宿題の回答例1

スマホで写真を新しく撮ったあ
とにFacebookを起動すると、
その写真が出てくる
• 写真を新しく撮ったあとは、その写真をアップ
ロードする可能性が高い

• その写真をサジェストすることで、自然と「あ、
この写真アップし...
宿題の回答例1
宿題の回答例2

駅の改札の中にATMがある

• 電車を降りて改札を出るときに、チャージ金不足
だった

• ふと財布を見るとお金がなかった
• 駅が負担することを軽減させる
ありがとうございました
株式会社ツクロア 秋葉ちひろ

株式会社ツクロア

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

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

1,994

Published on

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

Published in: Business
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,994
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

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

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

×