ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/341/room ーーーーーーーーーーーーーーーーーーーーーーー

1. 日常に隠れた
デザインから
ア イ デ ア を
発想する方法。
松本隆応 2014年1月14日

2. 授業の流れ
• 自己紹介（1分）
• 日常に隠れたデザインとは?（10分）
• 発想のための4つのステップ（3分）
• 色んなとこから考えよう（各8分×5）
• まとめ（5分）
• 質問タイム（15分）

3. 自己紹介
松本隆応（まつもと たかまさ）
コイニー株式会社 デザイナー
!
スマホ決済サービス「Coiney」の
デザインを一貫して担当
!
twitter：@stam_mats2
ブログ：DESIGN ARCHIVE
http://bit.ly/stam_mats2

4. 日常に隠れた
デザインってどんなもの?

5. たとえば、
あたりまえのように
使っているATM。

6. Q.
デザインされている
ところはいくつある?
A.0∼5
B.6∼10
C.11∼19
D.20以上

7. ●利用を開始する
1. 「いらっしゃいませ」と歓迎してく
れる
2. 点滅の光で操作を誘導
3. カードが入れやすい形
4. 明細票部分は挿入できないような形
で間違えない
5. 音声で操作の方法を教えてくれる

8. ●利用を開始する
1. 「いらっしゃいませ」と歓迎してく
れる
2. 点滅の光で操作を誘導
3. カードが入れやすい形
4. 明細票部分は挿入できないような形
で間違えない
5. 音声で操作の方法を教えてくれる
●操作する
6. ユニバーサルな色彩設計
7. 認識しやすい丸いボタン
8. ユニバーサルフォント
9. 画面でシステムの状態が見えやすい
10.物理ボタンを押した時に音が鳴る
11.暗証番号の操作が見られないように
なっている
12.1画面1ステップになっているので
迷わない

9. ●カードと現金を受け取る
13.明細・カードを先に取らないと現金
が出てこない
14.アニメーションで視線を誘導して取
り忘れを防止
15.お金をとりだすところが近くにあっ
て取り出しやすい
16.現金が出てきて一定時間たつと音で
知らせる

10. ●カードと現金を受け取る
13.明細・カードを先に取らないと現金
が出てこない
14.アニメーションで視線を誘導して取
り忘れを防止
15.お金をとりだすところが近くにあっ
て取り出しやすい
16.現金が出てきて一定時間たつと音で
知らせる
●その他
17.もしもの時は電話でサポート
18.しきりで画面が横から見られな
いようになっている
19.鏡で後ろの状況が把握できる
20.可視性と配置バランスのとれた
緊急ボタン

11. ●カードと現金を受け取る
13.明細・カードを先に取らないと現金
が出てこない
14.アニメーションで視線を誘導して取
り忘れを防止
15.お金をとりだすところが近くにあっ
て取り出しやすい
16.現金が出てきて一定時間たつと音で
知らせる
●その他
17.もしもの時は電話でサポート
18.しきりで画面が横から見られな
いようになっている
19.鏡で後ろの状況が把握できる
20.可視性と配置バランスのとれた
緊急ボタン
合計20以上
他にもいろいろ…

12. 目的達成のために、
様々な負担を
考えさせないように
デザインされているから
その存在自体が
意識されない。

13. もし、デザインの問題が意識されると…
ATM
¥
¥

14. もし、デザインの問題が意識されると…
?
?
?
ATM
¥
¥
?
?
負担が増え、目的が達成しづらくなる

15. 日常に隠れたデザイン

16. 日常に隠れたデザイン
↓
操作、理解、不安、間違い、不便さなどの負担を
考えさせないためのデザイン

17. 日常に隠れたデザイン
↓
操作、理解、不安、間違い、不便さなどの負担を
考えさせないためのデザイン
↓
分かりやすい自然な体験を
生み出すヒントになる

18. どのように発想するか?

19. 発想のための4つのステップ
?
あたりまえにあるものの
デザインの理由を分解してみる

20. 発想のための4つのステップ
?
あたりまえにあるものの
デザインの理由を分解してみる
考えさせない
体験のヒントを見つける

21. 発想のための4つのステップ
?
あたりまえにあるものの
デザインの理由を分解してみる
考えさせない
体験のヒントを見つける
ヒントを他の分野で置き換えてみる

22. 発想のための4つのステップ
?
あたりまえにあるものの
デザインの理由を分解してみる
考えさせない
体験のヒントを見つける
ヒントを他の分野で置き換えてみる
アイデアを発想する

23. 色んなとこから
考えよう

24. Q.
エレベーター
になぜ鏡?

25. ?
なぜ?
•
車いすで乗り込んだ状態で、
後ろ向きで出るときに後方を確認するため。
!
•
待っている間に鏡を見て
身だしなみを整えたりすることで
退屈さを感じさせない。

26. ?
なぜ?
•
車いすで乗り込んだ状態で、
後ろ向きで出るときに後方を確認するため。
!
•
待っている間に鏡を見て
身だしなみを整えたりすることで
退屈さを感じさせない。

27. ヒント
体感速度を変えてみる。
モノそのものではなく
別のことに注意をむけることで
待つことを考えさせないようにできないだろうか?

28. 置き換える
Q.ファイルのダウンロードに3分ほどかかる時に
体感速度を変えるにはどうすればよいだろう?
ダウンロード中…
残り時間約3分

29. アイデア
ダウンロードにかかる時間を想定した長さの
使い方動画を表示してみる
ダウンロードいただきありがとうございます。
アプリ―ケーションの便利な使い方をご覧ください。

30. Q.
なぜ封筒の裏に
チェック
リスト?

31. ?
なぜ?
•
適切なタイミングで教えることで
ミスを未然に防げるようにしている
!
•
一度に説明しても覚えられない
人間は基本的に忘れる生き物

32. ヒント
適切なタイミングで教える。
ユーザーは何かと忘れるもの、
行動のを先回りして自然にエラーを回避できないか?

33. 置き換える
Q.メール送信時にファイルの添付忘れを防ぐために
「適切な」メッセージのタイミングはいつだろう?
AT&T
11:57 AM
New Message
Cancel
Send
To:
Cc/Bcc:
Subject:
お世話になっております。
書類を添付にてお送りします。
Q W E R T Y U
I O P
A S D F G H J K L
Z X C V B N M
123
space
@
.
送信!
return
添付忘れた!

34. AT&T
アイデア
Cancel
11:57 AM
New Message
Send
To:
Cc/Bcc:
Subject:
「添付」などの単語を認識して送信前に教えてくれる。
お世話になっております。
書類を添付にてお送りします。
ファイルが添付されていません。
このまま送信しても良いですか?
Q W E R T Y U
I O P
A S D F はい H J K L
G
123
Z X C V B N M
いいえ、
忘れていました!
space
return
@ .

35. Q.
電気ポットの
コードは
なぜ外れやすい?

36. ?
なぜ?
•
万が一コードに引っかかってしまっても
本体は引っ張られず
重大な事故につながらない。
!
•
ユーザーがまちがった使い方をしても危険を
避けることができる設計になっている
（フェールセーフ）

37. ヒント
うっかりを許容する。
間違った操作を行なっても
損害を最小限にするにはどうすれば良いか?

38. 置き換えてみる
Q.入力途中でうっかりブラウザを終了してしまっても
損害を最小限に抑えるためにはどんなことができる?

39. アイデア
•
入力するたびに保存されて
いつでも復帰できるしくみ
!
•
ブラウザを閉じる前に
アラートメッセージを出す。

40. Q.2つのタイマーの違いから、どんなヒントが見つかる?
ダイヤル型
ボタン型

41. ?
なぜ?
0∼60分
機能
3分のみ
2本の指
手段
なんでも
どのように?
押すだけ
つまむ
↓
目盛りを
見ながら回す

42. ?
なぜ?
0∼60分
機能
3分のみ
2本の指
手段
なんでも
どのように?
押すだけ
操作の負担
少ない
つまむ
↓
目盛りを
見ながら回す
大きい

43. ?
なぜ?
2本指で
つまむ
目盛りを
認識する
見ながら
回す
手を
離す
ゴール
押す
ゴール
機能を絞ることでより簡単で操作の負担が少なくなる

44. ?
なぜ?
操作におけるユーザーが感じる負担の比較
認知 ＞ 視覚＞ 運動
操作に悩んだり（認知）、目で見て調整したりする（視覚）よりも
迷わずボタンを押すという（運動）だけのほうが
はるかに心的負担が少ないデザインになる。
―サイトウ・アキヒロ『ビジネスを変える「ゲームニクス」』

45. ヒント
1番の機能だけに
フォーカスしてみる。
あらゆる要望を満たせるものが良いとは限らない。
操作の負担を極限まで減らしてみると
どうなるだろうか?

46. 置き換える
Q.少しでも早く目的達成できるように
どのステップを減らせるだろうか?
ロックを
解除
時計アイコンを 「タイマー」を
タップ
タップ
時間を設定
「開始」を
タップ
ゴール

47. 置き換える
Q.少しでも早く目的達成できるように
どのステップを減らせるだろうか?
ロックを
解除
時計アイコンを 「タイマー」を
タップ
タップ
時間を設定
「開始」を
タップ
ゴール

48. アイデア
3
min
5
min
7
min

49. アイデア
3
min
5
min
7
min
2:59
ホームのアイコンをタップするだけでスタート

50. Q.
なぜ
ホメられる?

51. ?
なぜ?
•
逆のメッセージだと
「他の人も汚しているから」と考えて、
同じような行動を取ってしまう。
!
•
感謝を込めて行動を促されると
従いやすい

52. ヒント
「みんな」の存在を
意識させて語りかける。
個人ではなく全体を意識させて
ポジティブな行動を促すことはできないだろうか?

53. 置き換える
Q.「みんな」に貢献できることを伝えて、
ポジティブな行動を促すには、どんな伝え方をすれば良い?

54. アイデア
レポートがみんなの役に立つことを伝えてみる。
問題レポート
問 題レポート
アプリケーションの
問題を発 見していただき
ありがとうございます。
問題が発見されました。
発見していただきありがとうございます。
問 題を発 見していただきありがとうございます。
送信いただくとあなたのレポートが皆様のお役に立ちます。
送 信いただくとあなたのレポートが皆様のお役に立ちます。
キャンセル
協力する

55. まとめ

56. •
よりよい体験のデザインのために
ユーザーが考える負担をいかに減らすかが重要
!
•
日常にあたりまえのように存在しているものには
考えさせないためのヒントがたくさんある
!
•
常に観察してヒントをストックし、
組み合わせることで
より良いアイデアを発想することができる

57. あたりまえのように
存在しているものを
デザインの先生にしよう。

58. 宿題

59. いつもと違う道でいってみよう。
いつもと違う帰り道、いつもと違う方法。
そんな風に意識して視点を変えてみると
まったく違うものが見えてくるはずです。
そこから得られた発見をぜひみなさんに共有してみてください。

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