1. 株式会社ツクロア
秋葉 ちひろ
株式会社ツクロア
秋葉 ちひろ
オープンセミナー岡山 2014 2014.05.17
明日からできる
デザイン脳
明日からできる
デザイン脳

2. 1981 2001
イマココ
Okayama
0 19
Introduction

3. 2001
イマココ
2010 2012
Kyoto Osaka Tokyo
Introduction

4. App Design
2001
イマココ
2010 2012
Kyoto Osaka Tokyo
Web / Design

5. Webサイト/アプリ
デザイン・設計・プロトタイプ
書籍執筆/講演
連載中
秋葉 ちひろ @tommmmy
デザイナー / アートディレクター
Introduction

6. ビジュアルデザイン
グラフィックデザイン
CI/VI、ブランディング
UIデザイン
アプリやWebサイトの設計
フロントエンドの実装
プロトタイプ作成
秋葉 秀樹 秋葉 ちひろ

7. デザイナー
エンジニア
うまく協業してる？

8. デザイナー
絵を描く人
パーツをつくる人
なんかきれいに
してくれる人

9. デザイナー
絵を描く人
パーツをつくる人
なんかきれいに
してくれる人
だれでも
できるがー！

10. デザイナー
• パーツやさん
言われたものをそのとおりにつくる
• アーキテクト
設計から関わり、企画から携わる人

11. デザイナー エンジニア
設計 全体像 プロトタイプ

12. 勉強するなら…
ズルいデザイン
ノンデザイナーズ・
デザインブック

13. デザイン脳？

14. そもそも
デザインって？
情報を整理して
見やすくすること

15. 歯科衛生士さん
使う人
使うとき
予約をとるとき
• 患者さんの名前
• 患者さんの生年月日
• 今までの治療回数
• 今までの治療履歴
• 今までの治療日
Let’sthink!

16. 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.09.25 17:45
2013.09.24 18:34
どやっ！
どやっ！
• 患者さんの名前
• 患者さんの生年月日
• 今までの治療回数
• 今までの治療履歴
• 今までの治療日

17. デザイン脳
余白！
よはく！
ヨハク！
POINT 1

18. 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.09.25 17:45
2013.09.24 18:34
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.09.25 17:45
2013.09.24 18:34
ヨハク
ヨハク
ヨハク
ヨハク
ヨハク
ヨハク
ヨハク
ヨハク

19. デザイン脳
情報の
グルーピング
POINT 2

20. 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.09.25 17:45
2013.09.24 18:34

21. 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.09.25 17:45
2013.09.24 18:34
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.09.25 17:45
リストにしてみた カードにしてみた

22. 文字による情報のグルーピング
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.09.25 17:45
2013.09.24 18:34
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.09.25 17:45

23. 文字による情報のグルーピング
1981.09.17
6
B7
2013.11.26 18:23
5
B7
2013.11.24 15:54
4
B3
2013.11.20 18:43
日付
回数
内容

24. 文字による情報のグルーピング
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

25. デザイン脳
人が使うことを
考える
POINT 3

26. 1981.09.17
6
B7
2014.05.16 18:23
5
B7
2014.05.10 15:54
4
B3
2014.03.29 18:43
3
B3
2014.03.25 18:34
2
2013.11.15 17:45
2013.11.12 18:34
いや∼まあわかるけど…

27. 1981.09.17
32
6
B7
2014.05.16 18:23
5
B7
2014.05.10 15:54
4
B3
2014.03.29 18:43
3
B3
2014.03.25 18:34
2
2013.11.15 17:45
2013.11.12 18:34
7
2
2
6
6
1981.09.17
6
B7
2014.05.16 18:23
5
B7
2014.05.10 15:54
4
B3
2014.03.29 18:43
3
B3
2014.03.25 18:34
2
2013.11.15 17:45
2013.11.12 18:34
年齢

28. 治療履歴 予約作成
2014.05.16 18:23
2014.05.10 15:54
2014.03.29 18:43
2014.03.25 18:34
2013.11.15 17:45
2013.11.12 18:34
きのう
7日前
2ヶ月前
2ヶ月前
6ヶ月前
6ヶ月前
6
5
4
3
2
1
1981.09.17
32
B7 金歯差込
B7 仮歯
B3 治療終了
B3 虫歯治療、型取り
クリーニング
初回カウンセリング

29. 電車に乗る人
使う人
使うとき
時間や乗換を
調べるとき
• 出発時間/到着時間
• 何分かかるか
• どこで乗り換えるか
• 何回乗り換えるか
• 料金
Let’sthink!

30. • 出発時間/到着時間
• 何分かかるか
• どこで乗り換えるか
• 何回乗り換えるか
• 料金
どやっ！
どやっ！

31. • ヨハク
• 情報の
グルーピング
• 数字の羅列
POINT
?
どやっ！
どやっ！

32. 備前西市→服部
09:05 09:57
¥41052分
5月17日(土) 10:00到着
備前西市 服部
08:51 09:40
¥1,42049分
岡山 総社
備前西市
岡山
服部
備前西市
08:07 09:12
¥6701時間5分
岡山
服部
総社
安 楽
¥
早

33. 中河原→鎌倉中河原→鎌倉
中河原
21:45 23:18
¥1,0101時間33分
11月23日(土) 21:38出発
分倍河原
武蔵小杉 鎌倉
中河原
21:57 23:28
¥1,0101時間31分
分倍河原
武蔵小杉 鎌倉
大船
中河原
21:45 23:28
¥1,2001時間43分
府中
明大前 鎌倉
渋谷
武蔵小杉
中河原
21:57 23:43
¥1,2001時間46分
府中
武蔵小杉 鎌倉新宿
安 楽
早 安
東京だとこんな感じ

35. 自分が普通に
使いたいか？
デザイン脳というか、
普通にだいじｗ

36. 頭を切り替えるのだ！
自分が普通に使ったときに
何が知りたいかを考える

37. ここができない方は…
大変申し上げにくいのですが…
アタマのナカが
機械デス
便器洗浄脳の恐怖 : 続・ユビキタスの街角

41. Iterating and Incrementing to 'Get What You Need'

42. 普段からできること
観察して、意味を見出す

43. 普段からできること
デザインには必ず
意味があります

45. OTTO - スマートフォンで制御する「見せる」電源タップ

46. 心拍計：脈拍を測定して追跡

47. 普段からできること
ユーザーの使い方を
想像して最適化する
1

52. • スマホでカッコ入力をするとき
• 前後セットで入力したい
使う人
• カッコを両方入力する
• カーソルの位置を移動する
解決

56. リンクをシェアするときに
URLを貼り付けたい
使う人
URLがコピーされていたら
自動で貼り付ける
解決

57. 普段からできること
トランジションの
意味を考える
2

58. A A B B
iPhone

59. A BBA
Android (Nexus系)

60. A B
通常のスライド

61. A B
通常のスライド

62. A B
通常のスライド

63. A B
通常のスライド

64. BA
深度を入れたスライド

65. BA
深度を入れたスライド

66. BA
深度を入れたスライド

67. BA
深度を入れたスライド

69. 次のカードが出て
くるときの遊び心
常に一定で動かすより
わくわくした気持ちに
することできる
どこまで読んだかが
自然と認識できる

70. 普段からできること
街中を観察して
その意味を考える
3

72. 右側のホーム左側のホーム

73. 停車駅が一目瞭然！

75. 急行との連絡を明記

77. お鍋に！
炒めものに！

78. おすすめの調理法がかいてあり、
なにに使うか考えながら買い物できる

79. 店員さんの操作が
見えて安心！

80. まとめ
デザインには必ず
意味があります

82. 頭を切り替えるのだ！
それが考えられるようになれば…
デザイン脳 1年生！

83. 脱・便器洗浄脳！
キカイ、オワリ
プログラマ、オワリ

84. ありがとう
ございました