情報を見やすく整理する！「視覚と認知」の法則👀| vol.3

お疲れ様です。花冷です🌸

UI/UXのいろは第3弾！
今回から全体像の話から視点を変えます。

人間の心理や脳の仕組みをUIに応用する「UX心理学」の法則
に入っていきます。

まずは、
ユーザーが画面を見た瞬間の
「視覚と認知」に関するお話です✨

🔴 バラバラなものを勝手にまとめる「ゲシュタルト原則」

人間は、画面に情報が散らばっていると、
無意識のうちに共通点を見つけて
「意味のあるカタマリ（グループ）」として捉えよう
とする性質あります。
これを「ゲシュタルト原則」と呼びます。

例えばこんな法則があります。

• 近接の法則：距離が近くに配置されているものは、同じグループだと認識する。

• 同類の法則：色や形、大きさが同じものは、仲間だと認識する。

• 閉合の法則：途切れている線や図形でも、脳が勝手に補って閉じた図形として認識する。

ピタッと近くに配置したり、
同じカテゴリは同じ色の線でアイコンを出すだけで、
関連性が一瞬で分かり、
脳の認知負荷を大きく減らせるんです💡

🔴 仲間外れは一番目立つ！「フォン・レストルフ効果」

似たようなデザインの要素がたくさん並んでいる中で、
「1つだけ違う見た目のもの」が最も記憶に残り、
目を引くという心理現象です。

別名「孤立効果」とも呼ばれます。

例えば、SaaSなどの料金プランが3つ並んでいるとき、
一番選んでほしいプランの
「おすすめプラン」だけ枠線の色が違ったり、
リボンがついていたりしますよね？

あれはまさにこの効果を利用して、
ユーザーの視線と記憶を強力に誘導しているんです。
目立たせたい重要なアクションボタン（購入など）の色を、
他のボタンと明確に変えるのもこの効果の応用です✨

🔴 なぜ最近のUIは角丸ばかりなの？「輪郭線バイアス」

最近のスマホアプリやWebサイトを見ていると、
ボタンも、画像も、ウインドウも、
みーんな「角が丸く（角丸に）」なっていませんか？

昔のパソコン画面のようなカクカクしたUIはあまり見かけなくなりました。

実はこれ、単なる流行ではなく
「輪郭線バイアス（Contour Bias）」
という人間の本能的な心理に基づいているんです！

人間の脳の奥には、「扁桃体」という
恐怖や不安を感じるセンサーがあります。

人間は原始時代から、尖った岩や動物の牙などの
「鋭角なもの」に危険を感じて生きてきました。

そのため、画面上の鋭角なデザインを見ると、
脳が無意識のうちに緊張や警戒心を抱いてしまうそうです。

逆に、丸みを帯びたカーブを持つデザインに対しては、
脳が「安全だ」「親しみやすい」と認識し、
ポジティブな感情を抱きます。

だからこそ！！
リラックスして心地よくサービスを使ってもらうために、
現代のUIデザインでは意図的に
「角丸（border-radius）」が多用されているんですね！

📝 まとめ

UIデザインの配置や形は、ただデザイナーの
センスやおしゃれで決まっているわけではなく、

「ユーザーの脳に余計な処理をさせない、
視線を迷わせない、
そして安心感を与えるための科学的な計算」
だったんですね！

🌸ゲシュタルト原則：
　近いもの・似たものを勝手にグループ化する
🌸フォン・レストルフ効果：
　1つだけ違う見た目にして視線を誘導する
🌸輪郭線バイアス：
　角丸で脳の警戒心を和らげ、安心感を与える

角が丸いのは流行というかモダンというか・・・
そっち系の話かと思っていたので、
そういった科学的根拠があることにびっくりしましたｗ

次回は、
初めて使うアプリでもなぜか操作できちゃう「直感的な操作の秘密」です。お楽しみに🌞

⭐次の記事はこちら📝

⭐マガジンはこちら📚