See http://saireya.hateblo.jp/entry/class/design for details. CIS資料(授業スライド) 論文: https://www.scribd.com/doc/255147300 発表スライド: http://www.slideshare.net/saireya/slide-cis2015 出典(スライドに収まらなかったもの): p.4 Sullivanの建築 (PD) http://www.loc.gov/pictures/item/mo0297 Sullivanの建築 (CC3-BY-SA) http://en.wikipedia.org/wiki/File:SullivanNY1.jpg p.5-6 人画像(1人) (PD): http://www.clker.com/clipart-2491.html 人画像(複数) (PD): http://www.clker.com/clipart-2492.html p.14-15 富永冴樹, アクセシビリティキャンプ東京 第6回 と駅時刻表の色について - 富永日記帳 http://w0s.jp/diary/285 p.16-18 福島県, カラーユニバーサルデザインガイド http://www.pref.fukushima.lg.jp/sec/16005c/ud-cudguide04.html p.22-23 朝日新聞, 電車内の足投げ出し、新型座席で解決 苦情なくなる http://digital.asahi.com/articles/ASGBQ5DGSGBQULFA01Z.html</url> p.24 楽しいBADUIの世界 - 遊ばれているとしか思えない靴箱の数字 http://badui.org/articles/funny\_order.html 楽しいBADUIの世界 - 貼り方を間違えてしまってBADUIに http://badui.org/articles/maru\_sankaku.html p.25 京都市交通局, 市バスの「分かりやすさ向上」のためのデザインマニュアルの策定と案内表示の一新について http://www.city.kyoto.lg.jp/kotsu/page/0000161667.html

1. What is ”Design”?
February 4, 2015
1 / 27

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

3. What is Design?
Design vs. Art
design 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

4. What is Design?
”Form Follows Function”
アメリカの建築家ルイス・サリヴァン (1856-1924) の言葉
• 「形 (form) は機能 (function) に従う」の意味
• いわゆる「機能美」
(「かわいいものはダメ」という意味ではない)
⇨ どういう目的があるのか、どんな機能を果たすのか、何を伝えるのかが
決まれば、見た目・デザインは必然的に決まる
⇨ デザインは理詰めで (logical に) 決まる
デザインは、感覚 (sense) や才能で選ぶものではない!
4 / 27

5. What is Design?
How to make my design better?
学ぶことで、誰でも良いデザインを作れるようになる!
• 配色を学ぶ?
• デザインに関する本を読む?
• 良いデザインをたくさん知る?
⇨ もっと根本的なことを学ぶことが大事!
利用者(user)
聴衆(audience)
「伝える」
「理解してもらう」
Figure: ”What” to learn?
5 / 27

6. What is Design?
「デザインを学ぶ」=「人間を学ぶ」
• 人間はどのように知覚/思考/学習/記憶/行動するのか?
⇨ 普遍的な人間の行動原則から、普遍的なデザイン原理が見えてくる
⇨ すべての人に使いやすいユニバーサルデザイン (UD) へ!
=デザイン原理
人間の行動・思考原理
「人間」を学ぶ
Universal
Design
(UD)
Figure: ”learning design” is ”learning human being”
ユニバーサルデザイン (UD)
ある特性をもつ人だけでなく、すべての人にとって使いやすいデザイン
6 / 27

7. 学習障害 (LD)
全般的な知的発達に遅れはないが、聞く、話す、読む、書く、計算する、推
論する能力のうち特定のものの習得と使用に著しい困難を示す
Figure: かけ算の筆算
出典:「掛け算の筆算 スペース足りない - 小学生の家庭学習 これからどうする?」
http://smile20aw.blog.fc2.com/blog-entry-4.html 7 / 27

8. 学習障害 (LD)
書くことのみが困難なのに、他の勉強にもついていけなくなってくる
(計算する能力は問題ない!)
Figure: 方眼紙を使うと解ける!
出典:「掛け算の筆算 スペース足りない - 小学生の家庭学習 これからどうする?」
http://smile20aw.blog.fc2.com/blog-entry-4.html 8 / 27

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

10. Affordance
デザイン原理 1: Affordance
• 人間とモノとの間の関係性のことを affordance という
• 例.「紙」に「字を書ける」、「扉」に「開ける」など
⇨ affordance を上手く知覚できるような手がかり (ヒント) が必要
Figure: ドアの取っ手 (affordance を知覚するヒント)
出典: http://badui.org/articles/pull_or_push.html 10 / 27

11. Affordance
デザイン原理 1: Affordance
• 人間とモノとの間の関係性のことを affordance という
• 例.「紙」に「字を書ける」、「扉」に「開ける」など
⇨ affordance を上手く知覚できるような手がかり (ヒント) が必要
Figure: 引いても開かない!
出典: http://badui.org/articles/pull_or_push.html 11 / 27

12. Affordance
悪い手がかりの例
• 「取っ手」(という記号) は「これは引いて開ける扉」だと認識させる
• 実際は「押して開ける扉」なので、「引いたのに開かない!」となる
⇨ 誤った手がかりは利用者を混乱させる
Figure: 押すと開く!(誤ったヒントの例)
出典: http://badui.org/articles/pull_or_push.html
12 / 27

13. Affordance
UD の例: 東大ノート
「白紙の紙に書きにくい」のは、LD という特性を持った人だけ?
⇨ プレッシャー、文が斜めになる etc.
⇨ 誰にでも書きやすい「ドット入り罫線ノート (通称:東大ノート)」
http://www.kokuyo-st.co.jp/stationery/dotkei
Figure: ドット入り罫線ノート Figure: ドット入り罫線ノートの利点
13 / 27

14. 色覚異常
「急行に乗りたいのですが…」
• どの電車に乗ればいい?
• 8:23 発と 9:31 発の電車は同じ種別?
※ 桜マークは女性専用車の有る電車
14 / 27

15. 色覚異常
色の見え方・感じ方が、多くの色覚正常といわれる人とは異なる状態
• 日本人男性の 5%、日本人女性の 0.2%、仏・北欧では男性の 10%
• 区別しにくい色が普通の人と違う (特に赤と緑) だけで、色がわからな
い訳でも白黒の世界を見ている訳でもない
15 / 27

16. 対応付け
デザイン原理 2: 対応付け
対応付けの方法が不適切だと、どれとどれが対応しているか見分けられない
• 「色覚異常の人に配慮した配色」ができれば良いが、難しい!
⇨ 色だけに依存した対応付けは行わない
色以外の方法でも区別できるように、色はあくまで補助的に使う
Figure: 色だけで区別したグラフ Figure: 色が見えにくいと区別できない
出典:福島県『カラーユニバーサルデザインガイド』 16 / 27

17. 対応付け
デザイン原理 2: 対応付け
対応付けの方法が不適切だと、どれとどれが対応しているか見分けられない
• 「色覚異常の人に配慮した配色」ができれば良いが、難しい!
⇨ 色だけに依存した対応付けは行わない
色以外の方法でも区別できるように、色はあくまで補助的に使う
Figure: 線や点の形でも区別 Figure: 色が見えにくくても区別できる
出典:福島県『カラーユニバーサルデザインガイド』 17 / 27

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

19. 自閉スペクトラム障害 (ASD)
他人との社会的関係の形成の困難さ、言葉の発達の遅れ、興味や関心が狭く
特定のものにこだわることを特徴とする行動の障害
※ 以前「自閉症」「アスペルガー症候群」と呼ばれていたもの
ASD の人の特徴
• 言葉の裏の意味・皮肉を理解しにくい
• 曖昧な (不明瞭な・一貫性のない) 指示を理解しにくい
• 暗黙のルール (いわゆる「常識」) が分かりにくい
• 人の言うことを鵜呑みにしてしまう・騙されやすい
• 複数の答えがある質問に答えにくい
出典:「アスペな大人」 (http://asperger.nerim.info)
19 / 27

20. 自閉スペクトラム障害 (ASD)
「暗黙のルール」の例
開始
終了
玄関へ行く
フタを開ける
中を確認する
郵便物が
あるか?
郵便物を
取り出す
フタを閉める
居間へ戻る
No
Yes
Figure: フローチャート表現
「郵便受けを見てきて!」という指示には、
「
1 郵便受けのある玄関まで行く
2 郵便受けのフタを開ける
3 郵便受けの中に
郵便物が入っているか確認する
4 もし郵便物が入っていたら、
それを取り出す
5 郵便受けのフタを閉める
6 居間へ戻ってくる
…ということをしてほしい」
という極めて複雑な意味がある
20 / 27

21. 自閉スペクトラム障害 (ASD)
典型的な ASD の人とのコミュニケーション
開始
終了
玄関へ行く
フタを開ける
中を確認する
郵便物が
あるか?
郵便物を
取り出す
フタを閉める
居間へ戻る
No
Yes
Figure: フローチャート表現
「郵便受けを見てきて!」と指示すると、
• 「郵便受けを見てきて!」
→ (玄関へ) →「見てきたよ!」
⇨ 「何か入っていた?」「?」
• 「郵便受けの中に何か
入っていないか確認してきて!」
→ (玄関へ)
→ 「新聞が入っていたよ!」
⇨ 「新聞は?」「?」
• 「郵便受けに入っていた
新聞を取ってきて!」
→ (玄関へ)
→「取ってきたよ!」
21 / 27

22. 制約
デザイン原理 3: 制約
制約があるときは、制約があることをそれとなく伝えて誘導することが必要
• 警告・注意・指導されて従うのは、誰も快くない
⇨ 利用者が意識しなくても、自然と制約に従うようにする
出典:朝日新聞「電車内の足投げ出し、新型座席で解決 苦情なくなる」
Figure: 一人分の幅が明確な座席
Figure: 足が広がらない座席 22 / 27

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

24. 一貫性
デザイン原理 4: 一貫性
混乱や間違った行動を引き起こさないよう、表記を統一して一貫性を出す
※ そのモノ自体のデザインに統一感を出すだけでなく、慣習や一般的な表
記と一致させることも重要
Figure: 順序に一貫性がない靴箱
Figure: 慣習と一致しない看板
出典: 「楽しい BADUI の世界」
24 / 27

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

26. まとめ
• デザインは感性や才能で決めるものではなく、論理的に決まる
• デザイン能力は、それを使う相手 (人間) の性質を学ぶことで向上する
• 伝える相手を意識してデザインすることが大事
宿題: bad design の改善案作成
提出締切: 中間考査後最初の授業開始時 (紙 or「Up フォルダ」へ)
1 身の回りにある問題のあるデザインを探す
2 そのデザインを撮影 (イラストも可)
3 そのデザインの何が問題なのか (どうして困るのか) を書く
4 そうした問題が起こる理由・原因を書く
(例えば、どのデザイン原理に反しているかなど)
5 「どうすれば良いデザインになるか」という改善案を書く
※ 文章にまとめなくても、箇条書き程度で OK
※ 参考サイト:「楽しい BADUI の世界」 (http://badui.org)
26 / 27

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

28. 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