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

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
回数や時間の尺を
表示するとき

24. •所要時間
•金額
•乗換回数

25. •所要時間
•金額
•乗換回数

26. あなたならどうする？
•所要時間
•金額
•乗換回数

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時間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

30. 1. デザインによる気配り
3
アクションを予測させるとき

33. 動画

34. •左にちょっとはみ出して重なっているよ
うに見えることで、
「右にスライドすると何かが出てくるの
では？」
と思わせる
→Google+

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

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

37. 2. 動きによる気配りデザイン
気持ちのいい動きを考える

38. 2. 動きによる気配り
1
ギャラリーの写真の
スライド表示方法

39. 動画

40. iPhone
A

41. iPhone
A
A
B

42. iPhone
A
A
B
B

43. Android
（Nexus系）
A

44. Android
（Nexus系）
A
A
B

45. Android
（Nexus系）
A
A
B
B

47. スローモーション撮影

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

49. 動画

50. iPhone

51. iPhone

52. iPhone

53. Android

54. Android

55. Android

56. 2. 動きによる気配り
気付かないけど重要な
遷移アニメーション
• 完全な横スライドより、深度も利用したほう
が気持ちよい場合もある
• スローモーション撮影を利用しよう

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

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

59. 動画

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

64. 動画

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

69. 3. 機能による気配り
自然な流れで操作できるように
• 必ずそう使うと決まっているものは、自動で
処理できるようにする

70. 気配りデザイン
気配りデザインをすることによって、
使う人は気持よく使える

71. 気配りデザイン
気配りデザインをすることによって、
使う人は気持よく使える
頭をつかわなくても
自然につかえる

72. 気配りデザイン
• 今日紹介したアプリは、ぜったいに使ってみ
てください
• iPhoneもAndroidも、使いこんでください

73. 質疑応答

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

75. 宿題の回答例1
スマホで写真を新しく撮ったあ
とにFacebookを起動すると、
その写真が出てくる
• 写真を新しく撮ったあとは、その写真をアップ
ロードする可能性が高い
• その写真をサジェストすることで、自然と「あ、
この写真アップしよう」と思い、写真をアップす
る数が増える

76. 宿題の回答例1

77. 宿題の回答例2
駅の改札の中にATMがある
• 電車を降りて改札を出るときに、チャージ金不足
だった
• ふと財布を見るとお金がなかった
• 駅が負担することを軽減させる

78. ありがとうございました
株式会社ツクロア 秋葉ちひろ
株式会社ツクロア
秋葉ちひろ