はじめに
お待たせしました！
待望の【この色どんな効果？】シリーズ第２弾でございます。
第１弾では赤色がユーザにどのような影響を与えるかを考察しましたね。
今回は「色とボタンの形状がユーザーの反応に与える影響」を今年（2024年）に発表された論文「Users’ reactions to website designs: A neuroimaging study based on evolutionary psychology with a focus on color and button shape」に基づいて考察していきます！
（最新論文に大歓喜🎉）
論文
-
タイトル
Users’ reactions to website designs: A neuroimaging study based on evolutionary psychology with a focus on color and button shape -
著者
Anika Nissen, René Riedl, Reinhard Schütte -
ソース
Computers in Human Behavior, Vol 155, Jun 2024, 1-15 Article 108168.
概要
この研究は、ウェブサイトのデザインにおける「色」と「ボタンの形状」がユーザーの反応や脳の活動にどのような影響を与えるかを、進化心理学の観点から調査しています。
具体的には、「色」や「ボタンの形状」といった要素が、脳の特定の部位の活動にどのように影響を与えるのかを、機能的近赤外分光法（fNIRS）を使って測定しています。
実験
実験概要
実験は 3（色） × 2（ボタンの形状） の要因計画を用いて行われました。
- 色：青、赤、無色（白黒）
- ボタンの形状：丸いボタン、尖ったボタン
本文より引用した、下記の図のように装飾などは統一されており、実験で操作されたのは色とボタンの形状のみです。
実験手順
- 被験者がウェブサイトを３秒間見る
- ウェブサイトを見た後、5段階評価の質問に答える
- 評価を入力し、2.5秒〜3.5秒間中立的な画像が表示された後、次のウェブサイトを見る
評価データ
-
主観評価
- 快感（Pleasure）
- 覚醒（Arousal）
- 信頼度（Distrust）
- 態度（Attitude）
-
脳活動の測定
-
fNIRS（機能的近赤外分光法）を使用
近赤外光を頭皮に照射し、血液中の酸素化ヘモグロビン（HbO）と脱酸素化ヘモグロビン（HbR）の量を測定することで、脳の活動を可視化 - 特に前頭前野（PFC）の活動にフォーカス
PFC：意思決定や信頼感の評価、感情調整などに関わる脳の領域
被験者の前頭部に8つの光源と検出器を装着し、それぞれのウェブサイトデザインに対する脳の酸素供給量（HbO）の変化を測定
-
fNIRS（機能的近赤外分光法）を使用
主観評価
- 色：青色、赤色のウェブサイトは、無色のウェブサイトに比べてポジティブな評価を受けた
- ボタンの形状：丸いボタンと尖ったボタンの間に有意差は確認できなかった
脳活動データ
-
色
- 青色、赤色のウェブサイトは無色のウェブサイトに比べて、右側の背外側前頭前野（dlPFC）の活動が低下
- 青色のウェブサイトは赤色のウェブサイトと比較して、左側の前頭前野で活動が減少
-
ボタンの形状
- 丸いボタンは尖ったボタンに比べ右側の内側前頭前野（vmPFC）の活動が増加
- 尖ったボタンに対しては、丸いボタンと比較して脳の特定部位で顕著な活性化は見られなかった
まとめ
色の効果
青色のウェブサイトのもたらす効果
右側の背外側前頭前野（dlPFC）の活動が低下
- 青色のウェブサイトは無色のウェブサイトに比べて、ユーザーにかかる認知的負担が軽減される
- 青色が開放感や安心感をもたらし、ユーザーがリラックスした状態でウェブサイトを使用できる
赤色のウェブサイトのもたらす効果
青色のウェブサイトは赤色のウェブサイトと比較して、左側の前頭前野で活動が減少
- ユーザーに対してより多くの認知的負担をかけている
- 赤色は進化の過程で危険や警戒を示す色と認知されているため、脅威を感じたり、注意を払ったりする必要性が高まる
無色のウェブサイト（白黒）との比較
- 青色、赤色のウェブサイトは、どちらもユーザーにとってポジティブな感情を引き起こしやすい
- 赤色は注意を引き、より警戒的な反応を引き起こす
- 青色はリラックス効果を強調
ボタンの形状の効果
丸いボタンのもたらす効果
右側の内側前頭前野（vmPFC）の活動が増加
- 丸いボタンはユーザーにとって「安全」で「触れやすい」ものとして認識され、より好意的に受け入れられる
尖ったボタンのもたらす効果
尖ったボタンは脳の活性化が少ない
- 進化の過程で尖った形状＝危険と認識され、ユーザーが無意識のうちに避ける傾向がある
- ウェブサイトの使いやすさや魅力に影響を与える可能性がある
論文を読んでみて
今回は、進化心理学の視点からウェブサイトのデザインにおける色とボタンの形状がユーザーの反応に与える影響を調査した論文を読んでみました。
ウェブサイトにおける色の使い方は、ユーザに興味や関心、リラックス効果を与えてくれる重要な要素です。その効果を最大限発揮させるためにも、色の持つ心理的な意味を考えながらデザインをしていきたいと思いました。
また、今回の論文ではボタンの形状によってもユーザに与える効果が違うことも分かりました。
形状も色と同様に使い分けることで、意図的にユーザを導いたり、直感的に操作できるUIを作成していきたいと思います。
たとえば、ユーザに重要な選択を迫る場面では赤色で尖ったボタンを配置
逆に、リラックスしてほしい場面では青色の丸いボタンを配置
実際に見てみると感じるイメージが違うことがわかりますよね！
おわりに
今回は【この色どんな効果？】シリーズ第２弾として「色とボタンの形状がユーザーの反応に与える影響」について論文を読んで考察してみました。
結果から、進化の過程で獲得してきたものが現在においても残っていて、我々の思考に影響を与えていることがわかりました。とても興味深いですよね！！
このように、デザインをする上で心理学の視点を持つことは非常に有効だと思います！
皆さんも頭の片隅に色や形の持つ効果を置いておくといいかもしれませんね。
それでは、次回の【この色どんな効果？】シリーズでお会いしましょう！
さようならー👋
参考文献
この記事は以下を参考にして執筆しました。
- Nissen, Anika, René Riedl, and Reinhard Schütte. "Users’ reactions to website designs: A neuroimaging study based on evolutionary psychology with a focus on color and button shape." Computers in Human Behavior 155 (2024): 108168. https://doi.org/10.1016/j.chb.2024.108168
- Neu. 用語集 fNIRS/機能的近赤外線分光法, https://neu-brains.co.jp/glossary/a/005.html#:~:text=生体組織を透過し,方法を分光法という%E3%80%82 , (参照 2024-9-10).