本日のアジェンダ
1限目
学科 WEBディレクション概論⑤
なぜAmazonのボタンはオレンジと黄色なのか？
2限目
学科 WEBディレクション概論⑤
「Yahoo!ニュースは読みやすい？」レイアウトの秘密
3限目
学科 WEBディレクション概論⑤
マイクロインタラクションの魔法 – ユーザー心理の小さな仕掛け
4限目
学科 WEBディレクション概論⑤
課題制作
5限目
学科 WEBディレクション概論⑤
課題制作
本日のテーマ
なぜ人は動く？—『意図』で差をつけるユーザー行動デザインとは
本日のレポート
デザインには必ず理由がある
デザインは装飾的な見た目を美しくするだけのものではありません。
実は、ユーザーが使いやすく感じたり、自然に行動したくなるようにと、一つひとつの要素に『理由』があって作られています。
例えば、なぜそのボタンは赤色なのか、なぜその文字は大きいのか—そうした小さな工夫の一つひとつが、私たちの気持ちや行動にどんな影響を与えているのかを考えてみましょう。
理由のあるデザインを、わたしたちが日常的に触れているところから見ていきます。
ユーザー行動デザインの奥深さと楽しさを感じ、仕事や日々の観察に活かせるヒントを探しましょう。
色彩と心理の関係
- 赤：活動的・情熱的・感情的。商品パッケージや広告などで、購買を促す効果がある。
- オレンジ：陽気・活動的・新陳代謝の促進、食欲を増進させる効果がある。
- 黄色：左脳を刺激する色で、理解力・判断力・記憶力を促進する効果がある。
- 緑：安心感を与えつつ、先進的でアグレッシブな印象を感じさせる。
- 青：爽やかで誠実さを感じさせる。
- 紫：高級感がありエレガントな印象を与える。
- ピンク：恋愛・幸せ・思いやり・充足感を感じさせる。
- 黒：高級感や力強い印象を与える。
- グレー：主張が弱い色なので、控え目で落ち着いた印象を与える。
- 白：気持ちをリセットさせるような効果がある。
楽天のカラーブランディング
「楽天」のカラーといえば、誰もが「赤」を思い浮かべるでしょう。
赤の色彩心理は、「ドラマチック/スピード/決断力/目立ちたがり/負けず嫌い/飽き性/行動力」などが挙げられます。
楽天グループの「成功のコンセプト」のひとつに「スピード!!スピード!!スピード!!」というワードがあります。
スピード感を持って仕事をやり遂げることで成功につなげるという手法は、まさに赤の色彩心理である「スピード」を体現しています。
このように、CIカラーは企業の価値観を表すものであり、大変重要なものです。
色彩心理を正しく活用することで、企業イメージの形成や、社員の行動指針につながります。
F型とZ型
F型とZ型は、Webサイトやドキュメントを見る際のユーザーの視線の動きを表す2つの主要なパターンです。
これらは、情報の量やレイアウトによって使い分けられます。
F型とZ型の対比
| 項目 | F型パターン | Z型パターン |
| 主な用途 | 多くのテキストを含むページ（ニュース、ブログ記事） | 情報が少ないページ、LP、広告バナー |
| ユーザーの行動 | 情報を素早くスキャンし、必要な部分だけ読む | ページの全体像を把握し、最終的な行動へと移る |
| 視線が集中する場所 | ページの左側全体、上部の見出し | 左上と右下（スタートとゴール） |
| デザインのポイント | 重要な見出しや箇条書きを左側に配置する | 左上に最も重要な情報、右下に行動ボタンを配置する |
| 代表的な例 | ニュースサイトの本文、ブログ記事 | ECサイトのトップページ、商品紹介ページ |
マイクロインタラクションの魔法
マイクロインタラクションとは？
アプリやWebサービスを利用するとき、ユーザーは細かなタスクを数多く行なっています。
その一つひとつの瞬間に生まれる、ユーザーとサービスの小さな相互作用を「マイクロインタラクション」と呼びます。
例：SNSのイイネを押すとハートの色が変わる、メールを送信すると「送信しました」と表示される・・・など。
マイクロインタラクションはユーザーの承認欲求を満たす
- フィードバックの心理学
- 押した感覚がないと人間の脳は不安になる
- 人間の脳が「原因と結果をセットで求める性質」を持っている
- 期待と報酬の仕組み
- 「いいね」ボタンのアニメーションが生む中毒性
- 予想外の報酬や少し遅れてやってくる快感には、報酬系のドーパミン反応を刺激している
- 状態の可視化
- 人は「何が起こっているかわからない」のが１番嫌い
- 待ち時間を短く感じさせるためではなく、不安を和らげる
- 誘導の技術
- 無意識的に次の行動を促すアニメーション
- 商品をカートに入れた後に「購入へ進む」ボタンが自然に目に入る場所に動いたりするのは、ユーザーに無意識の流れを作っている
