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

オープンセミナー岡山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’s think!

ᅽᓻ�ƯǀǛ1981.09.176 ႽB7 ᤄരࠅᡇ2013.11.26 18:235 ႽB7 ˓ര2013.11.24 15:544 ႽB3 ඞၷኸʚ2013.11.20 18:433 ႽB3 ᖘരඞၷŹӚǘ2013.10.09 18:342 ႽǴȯȽȐȸǵ2013.09.25 17:45ННǰǫȸȀȯȸǵ2013.09.24 18:34

どやっ！

どやっ！

•患者さんの名前•患者さんの生年月日•今までの治療回数•今までの治療履歴•今までの治療日

デザイン脳余白！よはく！ヨハク！

POINT 1

ᅽᓻ�ƯǀǛ1981.09.176 ႽB7 ᤄരࠅᡇ2013.11.26 18:235 ႽB7 ˓ര2013.11.24 15:544 ႽB3 ඞၷኸʚ2013.11.20 18:433 ႽB3 ᖘരඞၷŹӚǘ2013.10.09 18:342 ႽǴȯȽȐȸǵ2013.09.25 17:45ННǰǫȸȀȯȸǵ2013.09.24 18:34

ᅽᓻ�ƯǀǛ1981.09.176 ႽB7 ᤄരࠅᡇ2013.11.26 18:235 ႽB7 ˓ര2013.11.24 15:544 ႽB3 ඞၷኸʚ2013.11.20 18:433 ႽB3 ᖘരඞၷŹӚǘ2013.10.09 18:342 ႽǴȯȽȐȸǵ2013.09.25 17:45ННǰǫȸȀȯȸǵ2013.09.24 18:34

ヨハク

ヨハク

ヨハク

ヨハク

ヨハク

ヨハク

ヨハク

ヨハク

デザイン脳

情報のグルーピング

POINT 2

ᅽᓻ�ƯǀǛ1981.09.176 ႽB7 ᤄരࠅᡇ2013.11.26 18:235 ႽB7 ˓ര2013.11.24 15:544 ႽB3 ඞၷኸʚ2013.11.20 18:433 ႽB3 ᖘരඞၷŹӚǘ2013.10.09 18:342 ႽǴȯȽȐȸǵ2013.09.25 17:45ННǰǫȸȀȯȸǵ2013.09.24 18:34

ᅽᓻ�ƯǀǛ1981.09.176 ႽB7 ᤄരࠅᡇ2013.11.26 18:235 ႽB7 ˓ര2013.11.24 15:544 ႽB3 ඞၷኸʚ2013.11.20 18:433 ႽB3 ᖘരඞၷŹӚǘ2013.10.09 18:342 ႽǴȯȽȐȸǵ2013.09.25 17:45ННǰǫȸȀȯȸǵ2013.09.24 18:34

ᅽᓻ�ƯǀǛ1981.09.176 Ⴝ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

ᅽᓻ�ƯǀǛ1981.09.176 Ⴝ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

日付回数内容

文字による情報のグルーピング

ᅽᓻ�ƯǀǛ 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

デザイン脳

人が使うことを考える

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.11.12 18:34

いや～まあわかる

けど…

ᅽᓻ�ƯǀǛ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

年齢

治療履歴 予約作成

ᅽᓻ�ƯǀǛ

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 虫歯治療、型取り

クリーニング

初回カウンセリング

電車に乗る人使う人

使うとき

時間や乗換を調べるとき

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

Let’s think!

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

どやっ！

どやっ！

• ヨハク• 情報のグルーピング

• 数字の羅列

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分分倍河原

武蔵小杉 鎌倉

大船

中河原21:45 23:28

¥1,2001時間43分府中

明大前 鎌倉

渋谷

武蔵小杉

中河原21:57 23:43

¥1,2001時間46分府中

武蔵小杉 鎌倉新宿

安 楽

早 安

東京だとこんな感じ

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

頭を切り替えるのだ！

自分が普通に使ったときに何が知りたいかを考える

ここができない方は…大変申し上げにくいのですが…

アタマのナカが機械デス

便器洗浄脳の恐怖 : 続・ユビキタスの街角

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年生！

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

ありがとうございました