What is ”Design”?

February 4, 2015

1 / 27

What is Design?

デザインは誰もが、いつも行っていること!• スライドのデザイン、プレゼンテーションのデザイン• 建築物のデザイン、都市のデザイン• 言葉のデザイン (広告、tweet、LINEのメッセージ)• 音楽のデザイン (作曲、編曲)• ...

2 / 27

What is Design?

Design vs. Artdesign art

相手 (user)がいる 相手はいなくても良い

伝えることが目的 表現することが目的

理解されることが必要 理解されなくても良い

利益のために行う 利益は重要ではない

制限がある 制限がない

客観的な美 主観的な美

Table: design ≠ art

出典: Admix Web「Design and Art: Are They the Same?」http://www.admixweb.com/2009/11/11/design-and-art-are-they-the-same和訳: Webクリエイターボックス「アートとデザインの違いは?」http://www.webcreatorbox.com/webinfo/art-design

3 / 27

What is Design?

”Form Follows Function”アメリカの建築家ルイス・サリヴァン (1856-1924)の言葉

• 「形 (form)は機能 (function)に従う」の意味• いわゆる「機能美」

(「かわいいものはダメ」という意味ではない)⇨ どういう目的があるのか、どんな機能を果たすのか、何を伝えるのかが

決まれば、見た目・デザインは必然的に決まる

⇨ デザインは理詰めで (logicalに)決まるデザインは、感覚 (sense)や才能で選ぶものではない!

Figure: Bayard – Condict Building Figure: Wainwright Building

4 / 27

What is Design?

How to make my design better?学ぶことで、誰でも良いデザインを作れるようになる!

• 配色を学ぶ?• デザインに関する本を読む?• 良いデザインをたくさん知る?⇨ もっと根本的なことを学ぶことが大事!

利用者(user)聴衆(audience)

「伝える」「理解してもらう」

Figure: ”What” to learn?5 / 27

What is Design?

「デザインを学ぶ」=「人間を学ぶ」• 人間はどのように知覚/思考/学習/記憶/行動するのか?⇨ 普遍的な人間の行動原則から、普遍的なデザイン原理が見えてくる

⇨ すべての人に使いやすいユニバーサルデザイン (UD)へ!

=デザイン原理

人間の行動・思考原理

「人間」を学ぶ

UniversalDesign(UD)

Figure: ”learning design” is ”learning human being”

ユニバーサルデザイン (UD)ある特性をもつ人だけでなく、すべての人にとって使いやすいデザイン

6 / 27

学習障害 (LD)

全般的な知的発達に遅れはないが、聞く、話す、読む、書く、計算する、推

論する能力のうち特定のものの習得と使用に著しい困難を示す

Figure: かけ算の筆算

出典:「掛け算の筆算 スペース足りない - 小学生の家庭学習 これからどうする?」http://smile20aw.blog.fc2.com/blog-entry-4.html 7 / 27

学習障害 (LD)

書くことのみが困難なのに、他の勉強にもついていけなくなってくる

(計算する能力は問題ない!)

Figure: 方眼紙を使うと解ける!

出典:「掛け算の筆算 スペース足りない - 小学生の家庭学習 これからどうする?」http://smile20aw.blog.fc2.com/blog-entry-4.html 8 / 27

学習障害 (LD)

問題: 白紙の紙だと、どこに、どんな大きさで字を書けばいいか分からない(ので、思いつくまま書いた結果、場所が足りなくなり、間違えてしまう)⇨ マス目があり、どこに書くかが明確になっていると書ける!⇨ 良いデザインをすれば、問題が解けるようになる!

Figure: 白紙に書いた場合 Figure: 方眼紙に書いた場合

9 / 27

Affordance

デザイン原理 1: Affordance• 人間とモノとの間の関係性のことを affordanceという• 例.「紙」に「字を書ける」、「扉」に「開ける」など⇨ affordanceを上手く知覚できるような手がかり (ヒント)が必要

Figure: ドアの取っ手 (affordanceを知覚するヒント)

出典: http://badui.org/articles/pull_or_push.html 10 / 27

Affordance

デザイン原理 1: Affordance• 人間とモノとの間の関係性のことを affordanceという• 例.「紙」に「字を書ける」、「扉」に「開ける」など⇨ affordanceを上手く知覚できるような手がかり (ヒント)が必要

Figure: 引いても開かない!

出典: http://badui.org/articles/pull_or_push.html 11 / 27

Affordance

悪い手がかりの例

• 「取っ手」(という記号)は「これは引いて開ける扉」だと認識させる• 実際は「押して開ける扉」なので、「引いたのに開かない!」となる⇨ 誤った手がかりは利用者を混乱させる

Figure: 押すと開く!(誤ったヒントの例)

出典: http://badui.org/articles/pull_or_push.html12 / 27

Affordance

UDの例: 東大ノート「白紙の紙に書きにくい」のは、LDという特性を持った人だけ?⇨ プレッシャー、文が斜めになる etc.⇨ 誰にでも書きやすい「ドット入り罫線ノート (通称:東大ノート)」

http://www.kokuyo-st.co.jp/stationery/dotkei

Figure: ドット入り罫線ノート Figure: ドット入り罫線ノートの利点

13 / 27

色覚異常

「急行に乗りたいのですが…」

• どの電車に乗ればいい?• 8:23発と 9:31発の電車は同じ種別?※ 桜マークは女性専用車の有る電車

Figure: 京王電鉄府中駅の時刻表

出典:「アクセシビリティキャンプ東京 第 6回 と駅時刻表の色について - 富永日記帳」 (http://w0s.jp/diary/285)

14 / 27

色覚異常

色の見え方・感じ方が、多くの色覚正常といわれる人とは異なる状態

• 日本人男性の 5%、日本人女性の 0.2%、仏・北欧では男性の 10%• 区別しにくい色が普通の人と違う (特に赤と緑)だけで、色がわからない訳でも白黒の世界を見ている訳でもない

Figure: 8:23発は急行, 9:31発は特急

出典:「アクセシビリティキャンプ東京 第 6回 と駅時刻表の色について - 富永日記帳」 (http://w0s.jp/diary/285)

15 / 27

対応付け

デザイン原理 2: 対応付け対応付けの方法が不適切だと、どれとどれが対応しているか見分けられない

• 「色覚異常の人に配慮した配色」ができれば良いが、難しい!⇨ 色だけに依存した対応付けは行わない

色以外の方法でも区別できるように、色はあくまで補助的に使う

Figure: 色だけで区別したグラフ Figure: 色が見えにくいと区別できない

出典:福島県『カラーユニバーサルデザインガイド』http://www.pref.fukushima.lg.jp/sec/16005c/ud-cudguide04.html

16 / 27

対応付け

デザイン原理 2: 対応付け対応付けの方法が不適切だと、どれとどれが対応しているか見分けられない

• 「色覚異常の人に配慮した配色」ができれば良いが、難しい!⇨ 色だけに依存した対応付けは行わない

色以外の方法でも区別できるように、色はあくまで補助的に使う

Figure: 線や点の形でも区別 Figure: 色が見えにくくても区別できる

出典:福島県『カラーユニバーサルデザインガイド』http://www.pref.fukushima.lg.jp/sec/16005c/ud-cudguide04.html

17 / 27

対応付け

UDの例: 白黒コピーでも見えるグラフ色に配慮して嬉しいのは、色の見え方に特性がある人だけ?⇨ カラーの資料が白黒コピーで配られて「見えない!」⇨ 色以外の情報でも区別できるグラフなら困らない!線の種類や点の形を調整する、線の近くにラベルを置く etc.

Figure: 線や点の形でも区別 Figure: 白黒でも区別できる

出典:福島県『カラーユニバーサルデザインガイド』http://www.pref.fukushima.lg.jp/sec/16005c/ud-cudguide04.html

18 / 27

自閉スペクトラム障害 (ASD)

他人との社会的関係の形成の困難さ、言葉の発達の遅れ、興味や関心が狭く

特定のものにこだわることを特徴とする行動の障害

※ 以前「自閉症」「アスペルガー症候群」と呼ばれていたもの

ASDの人の特徴• 言葉の裏の意味・皮肉を理解しにくい• 曖昧な (不明瞭な・一貫性のない)指示を理解しにくい• 暗黙のルール (いわゆる「常識」)が分かりにくい• 人の言うことを鵜呑みにしてしまう・騙されやすい• 複数の答えがある質問に答えにくい

出典:「アスペな大人」 (http://asperger.nerim.info)

19 / 27

自閉スペクトラム障害 (ASD)

「暗黙のルール」の例

開始

終了

玄関へ行く

フタを開ける

中を確認する

郵便物があるか?

郵便物を取り出す

フタを閉める

居間へ戻る

No

Yes

Figure: フローチャート表現

「郵便受けを見てきて!」という指示には、「

1 郵便受けのある玄関まで行く

2 郵便受けのフタを開ける

3 郵便受けの中に郵便物が入っているか確認する

4 もし郵便物が入っていたら、それを取り出す

5 郵便受けのフタを閉める

6 居間へ戻ってくる

…ということをしてほしい」

という極めて複雑な意味がある

20 / 27

自閉スペクトラム障害 (ASD)

典型的な ASDの人とのコミュニケーション

開始

終了

玄関へ行く

フタを開ける

中を確認する

郵便物があるか?

郵便物を取り出す

フタを閉める

居間へ戻る

No

Yes

Figure: フローチャート表現

「郵便受けを見てきて!」と指示すると、• 「郵便受けを見てきて!」→ (玄関へ) →「見てきたよ!」

⇨ 「何か入っていた?」「?」• 「郵便受けの中に何か入っていないか確認してきて!」→ (玄関へ)→ 「新聞が入っていたよ!」

⇨ 「新聞は?」「?」• 「郵便受けに入っていた新聞を取ってきて!」→ (玄関へ)→「取ってきたよ!」

21 / 27

制約

デザイン原理 3: 制約制約があるときは、制約があることをそれとなく伝えて誘導することが必要

• 警告・注意・指導されて従うのは、誰も快くない⇨ 利用者が意識しなくても、自然と制約に従うようにする

出典:朝日新聞「電車内の足投げ出し、新型座席で解決 苦情なくなる」

Figure: 一人分の幅が明確な座席Figure: 足が広がらない座席 22 / 27

制約

UDの例: 電車の座席• 各自がまちまちな幅で座ると、7人がけ座席に 6人しか座れない⇨ 1人分の座席幅を示すと、混雑時に座れる人が多くなる• 足を広げる、前に足を出すなど、必要以上の空間を占める客がいる⇨ 座る面を少し斜めにすると、足を無駄に広げずに座る

Figure: 一人分の幅が明確な座席Figure: 足が広がらない座席 23 / 27

一貫性

デザイン原理 4: 一貫性混乱や間違った行動を引き起こさないよう、表記を統一して一貫性を出す

※ そのモノ自体のデザインに統一感を出すだけでなく、慣習や一般的な表

記と一致させることも重要

Figure: 順序に一貫性がない靴箱

Figure: 慣習と一致しない看板

出典: 「楽しい BADUIの世界」http://badui.org/articles/funny_order.htmlhttp://badui.org/articles/maru_sankaku.html

24 / 27

一貫性

UDの例: バスのラインカラー同じ道を通る系統ごとに、同じ色をラインカラーとして使用

Figure: 市バスのラインカラー

出典:京都市交通局「市バスの「分かりやすさ向上」のためのデザインマニュアルの策定と案内表示の一新について」

http://www.city.kyoto.lg.jp/kotsu/page/0000161667.html

25 / 27

まとめ

• デザインは感性や才能で決めるものではなく、論理的に決まる• デザイン能力は、それを使う相手 (人間)の性質を学ぶことで向上する• 伝える相手を意識してデザインすることが大事

宿題: bad designの改善案作成提出締切: 中間考査後最初の授業開始時 (紙 or「Upフォルダ」へ)

1 身の回りにある問題のあるデザインを探す

2 そのデザインを撮影 (イラストも可)3 そのデザインの何が問題なのか (どうして困るのか)を書く4 そうした問題が起こる理由・原因を書く

(例えば、どのデザイン原理に反しているかなど)5 「どうすれば良いデザインになるか」という改善案を書く

※ 文章にまとめなくても、箇条書き程度でOK※ 参考サイト:「楽しい BADUIの世界」 (http://badui.org)

26 / 27

Reference I

Carptrash. File:SullivanNY1.jpg - Wikipedia. url:http://en.wikipedia.org/wiki/File:SullivanNY1.jpg.

OpenClipart. user_blue.svg. url: http://www.clker.com/clipart-2491.html.

OpenClipart. user_multi.svg. url: http://www.clker.com/clipart-2492.html.

Historic American Buildings Survey. Wainwright Building, Seventh & Chestnut Streets,Saint Louis, Independent City, MO. url:http://www.loc.gov/pictures/item/mo0297.

Admix Web. Design and Art: Are They the Same? url:http://www.admixweb.com/2009/11/11/design-and-art-are-they-the-same.

Web クリエイターボックス. アートとデザインの違いは? url:http://www.webcreatorbox.com/webinfo/art-design.

アスペな大人. url: http://asperger.nerim.info.

コクヨ S&T. ドット入り罫線シリーズ. url:http://www.kokuyo-st.co.jp/stationery/dotkei.

27 / 27

Reference IIレイナ. 掛け算の筆算 スペース足りない - 小学生の家庭学習 これからどうする? url:http://smile20aw.blog.fc2.com/blog-entry-4.html.

京都市交通局. 市バスの「分かりやすさ向上」のためのデザインマニュアルの策定と案内表示の一新について. url: http://www.city.kyoto.lg.jp/kotsu/page/0000161667.html.

富永冴樹. アクセシビリティキャンプ東京 第 6 回 と駅時刻表の色について - 富永日記帳. url:http://w0s.jp/diary/285.

朝日新聞. 電車内の足投げ出し、新型座席で解決 苦情なくなる. url:http://digital.asahi.com/articles/ASGBQ5DGSGBQULFA01Z.html.

楽しい BADUI の世界. 貼り方を間違えてしまって BADUI に. url:http://badui.org/articles/maru%5C_sankaku.html.

楽しい BADUI の世界. 遊ばれているとしか思えない靴箱の数字. url:http://badui.org/articles/funny%5C_order.html.

楽しい BADUI の世界. 開けるのに戸惑ってしまう扉. url:http://badui.org/articles/pull%5C_or%5C_push.html.

福島県. カラーユニバーサルデザインガイド. url:http://www.pref.fukushima.lg.jp/sec/16005c/ud-cudguide04.html.

28 / 27