学科【オンライン】2025.12.13

授業内容

• なぜAmazonのボタンはオレンジと黄色なのか？
• 「Yahoo!ニュースは読みやすい？」レイアウトの秘密
• マイクロインタラクションの魔法 – ユーザー心理の小さな仕掛け
• 課題制作

習得内容

• なぜAmazonのボタンはオレンジと黄色なのか？

■色による仕掛け
Amazonは欧米のお祭りハロウィンのイメージカラーを採用し、HAPPY感の演出をし「買おう」という気持ちにさせている。楽天は企業の成功の1つに”スピード”がある為、赤が選ばれている。それぞれの国のイメージされるカラーを利用し、消費者を誘導する。

■国によって識別できるカラー数の違い
年齢によっても見えづらいカラーがある。高齢者の方が見えにくい色には「青色・黄色・グレー」があり、乳幼児にとっては一般的な赤ちゃんのイメージカラー(ペールピンクやペールブルー)などは認識しづらいといわれている。

参考サイト
コーヒーチェーン店によって、コンセプトが違えば色も違う！
https://colorist-iris.com/blog/0077/

色から連想するイメージはそれぞれの国で異なる。ちなみにアメリカは「黒」のイメージは高級感だが、日本ではお葬式をイメージされる方もいる。

• 「Yahoo!ニュースは読みやすい？」レイアウトの秘密

■人の視線の動き
以下の動きに沿ったレイアウトをすると脳へのストレスが少なくできる。

このようなレイアウトをZ型という。主に欧米のサイトに使用されている。Yahoo！、朝日、GoogleのサイトレイアウトはF型

■トリミング
１.切り取り方で見え方が変わってくる例として以下の尾形光琳と俵屋宗達の作品を比較する。

２.電車の画像で比較する

■見づらいサイト
代表的なのはYale美術学校のサイト、ハローワークもトツプの方に上がってくる。

▢典型的な「見にくい日本のサイト」の特徴

• 情報の詰め込みすぎ（バナー、お知らせ、メニューが密集）
• 一貫性のないデザイン（フォント、色、レイアウトがバラバラ）
• モバイル非対応（スマホで見づらく、拡大しないと読めない）
• PDFリンク中心の構成（情報がHTMLでなく、外部ファイルに逃げている）
• 導線が不親切（ユーザーがどこをクリックすればよいかわからない）

• マイクロインタラクションの魔法 – ユーザー心理の小さな仕掛け

■フィードバックの心理学
押した感覚がないと人間の脳は不安になる。それは人間の脳が原因と結果をセットで求める性質を持っているためにおこる。

■期待と報酬の仕組み
「いいね」ボタンのアニメーションが生む中毒性は、人間の脳が強く反応するのが「報酬」だという特性を利用されている。特に、予想外の報酬や少し遅れてやってくる快感には、報酬系のドーパミン反応を刺激しているため中毒性があると言われている。

■状態の可視化
人は「何が起こっているかわからない」のが一番嫌いなので、待ち時間を短く感じさせるためではなくて、不安を和らげる為に可視化する。

■誘導の技術
無意識的に次の行動を促すアニメーションを利用する。例えば、フォーム入力後に「次へ」ボタンが浮かび上がつたり、商品をカートに入れた後に「購入へ進む」ボタンが自然に目に入る場所に動いたりするのは、ユーザーに無意識の流れを作っている。