株式会社ツクロア
秋葉 ちひろ
株式会社ツクロア
秋葉 ちひろ
オープンセミナー岡山 2014 2014.05.17
明日からできる
デザイン脳
明日からできる
デザイン脳
1981 2001
イマココ
Okayama
0 19
Introduction
2001
イマココ
2010 2012
Kyoto Osaka Tokyo
Introduction
App Design
2001
イマココ
2010 2012
Kyoto Osaka Tokyo
Web / Design
Webサイト/アプリ
デザイン・設計・プロトタイプ
書籍執筆/講演
連載中
秋葉 ちひろ @tommmmy
デザイナー / アートディレクター
Introduction
ビジュアルデザイン
グラフィックデザイン
CI/VI、ブランディング
UIデザイン
アプリやWebサイトの設計
フロントエンドの実装
プロトタイプ作成
秋葉 秀樹 秋葉 ちひろ
デザイナー
エンジニア
うまく協業してる?
デザイナー
絵を描く人
パーツをつくる人
なんかきれいに
してくれる人
デザイナー
絵を描く人
パーツをつくる人
なんかきれいに
してくれる人
だれでも
できるがー!
デザイナー
• パーツやさん
言われたものをそのとおりにつくる
• アーキテクト
設計から関わり、企画から携わる人
デザイナー エンジニア
設計 全体像 プロトタイプ
勉強するなら…
ズルいデザイン
ノンデザイナーズ・
デザインブック
デザイン脳?
そもそも
デザインって?
情報を整理して
見やすくすること
歯科衛生士さん
使う人
使うとき
予約をとるとき
• 患者さんの名前
• 患者さんの生年月日
• 今までの治療回数
• 今までの治療履歴
• 今までの治療日
Let’sthink!
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...
デザイン脳
余白!
よはく!
ヨハク!
POINT 1
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...
デザイン脳
情報の
グルーピング
POINT 2
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...
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...
文字による情報のグルーピング
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.0...
文字による情報のグルーピング
1981.09.17
6
B7
2013.11.26 18:23
5
B7
2013.11.24 15:54
4
B3
2013.11.20 18:43
日付
回数
内容
文字による情報のグルーピング
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
デザイン脳
人が使うことを
考える
POINT 3
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...
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
2...
治療履歴 予約作成
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ヶ...
電車に乗る人
使う人
使うとき
時間や乗換を
調べるとき
• 出発時間/到着時間
• 何分かかるか
• どこで乗り換えるか
• 何回乗り換えるか
• 料金
Let’sthink!
• 出発時間/到着時間
• 何分かかるか
• どこで乗り換えるか
• 何回乗り換えるか
• 料金
どやっ!
どやっ!
• ヨハク
• 情報の
グルーピング
• 数字の羅列
POINT
?
どやっ!
どやっ!
備前西市→服部
09:05 09:57
¥41052分
5月17日(土) 10:00到着
備前西市 服部
08:51 09:40
¥1,42049分
岡山 総社
備前西市
岡山
服部
備前西市
08:07 09:12
¥6701時間5分
岡山
...
中河原→鎌倉中河原→鎌倉
中河原
21:45 23:18
¥1,0101時間33分
11月23日(土) 21:38出発
分倍河原
武蔵小杉 鎌倉
中河原
21:57 23:28
¥1,0101時間31分
分倍河原
武蔵小杉 鎌倉
大船
中河原
...
自分が普通に
使いたいか?
デザイン脳というか、
普通にだいじw
頭を切り替えるのだ!
自分が普通に使ったときに
何が知りたいかを考える
ここができない方は…
大変申し上げにくいのですが…
アタマのナカが
機械デス
便器洗浄脳の恐怖 : 続・ユビキタスの街角
Iterating and Incrementing to 'Get What You Need'
普段からできること
観察して、意味を見出す
普段からできること
デザインには必ず
意味があります
OTTO - スマートフォンで制御する「見せる」電源タップ
心拍計:脈拍を測定して追跡
普段からできること
ユーザーの使い方を
想像して最適化する
1
• スマホでカッコ入力をするとき
• 前後セットで入力したい
使う人
• カッコを両方入力する
• カーソルの位置を移動する
解決
リンクをシェアするときに
URLを貼り付けたい
使う人
URLがコピーされていたら
自動で貼り付ける
解決
普段からできること
トランジションの
意味を考える
2
A A B B
iPhone
A BBA
Android (Nexus系)
A B
通常のスライド
A B
通常のスライド
A B
通常のスライド
A B
通常のスライド
BA
深度を入れたスライド
BA
深度を入れたスライド
BA
深度を入れたスライド
BA
深度を入れたスライド
次のカードが出て
くるときの遊び心
常に一定で動かすより
わくわくした気持ちに
することできる
どこまで読んだかが
自然と認識できる
普段からできること
街中を観察して
その意味を考える
3
右側のホーム左側のホーム
停車駅が一目瞭然!
急行との連絡を明記
お鍋に!
炒めものに!
おすすめの調理法がかいてあり、
なにに使うか考えながら買い物できる
店員さんの操作が
見えて安心!
まとめ
デザインには必ず
意味があります
頭を切り替えるのだ!
それが考えられるようになれば…
デザイン脳 1年生!
脱・便器洗浄脳!
キカイ、オワリ
プログラマ、オワリ
ありがとう
ございました
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
Upcoming SlideShare
Loading in …5
×

【オープンセミナー岡山2014】 明日からできるデザイン脳

4,834 views

Published on

オープンセミナー岡山2014での発表資料 2014.05.17

Published in: Design
  • Be the first to comment

【オープンセミナー岡山2014】 明日からできるデザイン脳

  1. 1. 株式会社ツクロア 秋葉 ちひろ 株式会社ツクロア 秋葉 ちひろ オープンセミナー岡山 2014 2014.05.17 明日からできる デザイン脳 明日からできる デザイン脳
  2. 2. 1981 2001 イマココ Okayama 0 19 Introduction
  3. 3. 2001 イマココ 2010 2012 Kyoto Osaka Tokyo Introduction
  4. 4. App Design 2001 イマココ 2010 2012 Kyoto Osaka Tokyo Web / Design
  5. 5. Webサイト/アプリ デザイン・設計・プロトタイプ 書籍執筆/講演 連載中 秋葉 ちひろ @tommmmy デザイナー / アートディレクター Introduction
  6. 6. ビジュアルデザイン グラフィックデザイン CI/VI、ブランディング UIデザイン アプリやWebサイトの設計 フロントエンドの実装 プロトタイプ作成 秋葉 秀樹 秋葉 ちひろ
  7. 7. デザイナー エンジニア うまく協業してる?
  8. 8. デザイナー 絵を描く人 パーツをつくる人 なんかきれいに してくれる人
  9. 9. デザイナー 絵を描く人 パーツをつくる人 なんかきれいに してくれる人 だれでも できるがー!
  10. 10. デザイナー • パーツやさん 言われたものをそのとおりにつくる • アーキテクト 設計から関わり、企画から携わる人
  11. 11. デザイナー エンジニア 設計 全体像 プロトタイプ
  12. 12. 勉強するなら… ズルいデザイン ノンデザイナーズ・ デザインブック
  13. 13. デザイン脳?
  14. 14. そもそも デザインって? 情報を整理して 見やすくすること
  15. 15. 歯科衛生士さん 使う人 使うとき 予約をとるとき • 患者さんの名前 • 患者さんの生年月日 • 今までの治療回数 • 今までの治療履歴 • 今までの治療日 Let’sthink!
  16. 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. 17. デザイン脳 余白! よはく! ヨハク! POINT 1
  18. 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. 19. デザイン脳 情報の グルーピング POINT 2
  20. 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. 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. 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. 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. 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. 25. デザイン脳 人が使うことを 考える POINT 3
  26. 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. 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. 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. 29. 電車に乗る人 使う人 使うとき 時間や乗換を 調べるとき • 出発時間/到着時間 • 何分かかるか • どこで乗り換えるか • 何回乗り換えるか • 料金 Let’sthink!
  30. 30. • 出発時間/到着時間 • 何分かかるか • どこで乗り換えるか • 何回乗り換えるか • 料金 どやっ! どやっ!
  31. 31. • ヨハク • 情報の グルーピング • 数字の羅列 POINT ? どやっ! どやっ!
  32. 32. 備前西市→服部 09:05 09:57 ¥41052分 5月17日(土) 10:00到着 備前西市 服部 08:51 09:40 ¥1,42049分 岡山 総社 備前西市 岡山 服部 備前西市 08:07 09:12 ¥6701時間5分 岡山 服部 総社 安 楽 ¥ 早
  33. 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分 府中 武蔵小杉 鎌倉新宿 安 楽 早 安 東京だとこんな感じ
  34. 34. 自分が普通に 使いたいか? デザイン脳というか、 普通にだいじw
  35. 35. 頭を切り替えるのだ! 自分が普通に使ったときに 何が知りたいかを考える
  36. 36. ここができない方は… 大変申し上げにくいのですが… アタマのナカが 機械デス 便器洗浄脳の恐怖 : 続・ユビキタスの街角
  37. 37. Iterating and Incrementing to 'Get What You Need'
  38. 38. 普段からできること 観察して、意味を見出す
  39. 39. 普段からできること デザインには必ず 意味があります
  40. 40. OTTO - スマートフォンで制御する「見せる」電源タップ
  41. 41. 心拍計:脈拍を測定して追跡
  42. 42. 普段からできること ユーザーの使い方を 想像して最適化する 1
  43. 43. • スマホでカッコ入力をするとき • 前後セットで入力したい 使う人 • カッコを両方入力する • カーソルの位置を移動する 解決
  44. 44. リンクをシェアするときに URLを貼り付けたい 使う人 URLがコピーされていたら 自動で貼り付ける 解決
  45. 45. 普段からできること トランジションの 意味を考える 2
  46. 46. A A B B iPhone
  47. 47. A BBA Android (Nexus系)
  48. 48. A B 通常のスライド
  49. 49. A B 通常のスライド
  50. 50. A B 通常のスライド
  51. 51. A B 通常のスライド
  52. 52. BA 深度を入れたスライド
  53. 53. BA 深度を入れたスライド
  54. 54. BA 深度を入れたスライド
  55. 55. BA 深度を入れたスライド
  56. 56. 次のカードが出て くるときの遊び心 常に一定で動かすより わくわくした気持ちに することできる どこまで読んだかが 自然と認識できる
  57. 57. 普段からできること 街中を観察して その意味を考える 3
  58. 58. 右側のホーム左側のホーム
  59. 59. 停車駅が一目瞭然!
  60. 60. 急行との連絡を明記
  61. 61. お鍋に! 炒めものに!
  62. 62. おすすめの調理法がかいてあり、 なにに使うか考えながら買い物できる
  63. 63. 店員さんの操作が 見えて安心!
  64. 64. まとめ デザインには必ず 意味があります
  65. 65. 頭を切り替えるのだ! それが考えられるようになれば… デザイン脳 1年生!
  66. 66. 脱・便器洗浄脳! キカイ、オワリ プログラマ、オワリ
  67. 67. ありがとう ございました

×