ウェブサイトに使える脳科学マーケティング10の原則 — 第一印象・迷わなさ・信頼
サイトの見た目の好き嫌いは、50ミリ秒（0.05秒）見ただけでも、0.5秒見たときとよく一致したという研究があります（パソコンの画面で測定）。第一印象・迷わなさ・信頼の3つに効く研究を、論文まで確かめて10個に絞りました。
3行でわかる
- 見た目の好き嫌いは50ミリ秒で判断される。単純で見慣れた形のサイトほど、印象がよかった
- 入口は1つ、選択肢は少なく、押す所は大きく。待たせるときは進み具合を見せる
- 読みやすさは信頼になる。運営者と出典を見える所に置く
確かさ: A 確か＝メタ分析・大規模な再現・長く再現されてきた法則があり、効果があること自体が確か／B 条件しだい＝場面で結果が変わる・争いがある（基準）。
01 使える原則サイト作りに使える原則は？
確かなもの（A）はボタンの大きさと初期設定。第一印象・単純さ・読みやすさは、くり返し出ているが条件しだい（B）。
| 原則 | わかっていること | 確かさ |
|---|---|---|
| 第一印象は一瞬で決まる | 50ミリ秒だけ見た見た目の評価は、0.5秒見たときの評価とよく一致した | B 条件しだい |
| 単純で見慣れた形 | 見た目が単純で、よくある形のサイトほど、第一印象がよかった | B 条件しだい |
| 読みやすさは信頼になる | 読みやすい・見慣れたものは、好まれ、正しいと感じられやすい | B 条件しだい |
| 見た目がよいと使いやすく感じる | 見た目の評価が高い画面ほど、使った後も使いやすいと感じられた | B 条件しだい |
| 一度に置く情報は少なく | 一度に頭に置けるのは4つ前後。並べる数が増えるほど、選ぶ時間は長くなる | B 条件しだい |
| 選択肢が多すぎると決めにくい | 平均すると効果はほぼゼロだが、違いがわかりにくいときに強く出る | B 条件しだい |
| 押す所は大きく近く | 大きく、近いボタンほど速く正確に押せる | A 確か |
| 待たせない | 何も出ないまま待たせると、約2秒で我慢の限界に近づいた。進み具合を見せると長く待てた | B 条件しだい |
| 初期設定はそのまま選ばれる | チェックの初期状態は、選ぶ結果を大きく動かす | A 確か |
| 終わりの印象が残る | 体験は、いちばん強い所と終わりで思い出されやすい | B 条件しだい |
02 どうやってわかったのか50ミリ秒はどうやって測った？
画面を一瞬だけ見せて評価してもらい、長く見たときの評価と比べた。
B 条件しだいLindgaard ほか（2006、Behaviour & Information Technology）[1]
サイトの画面を50ミリ秒だけ見せても、見た目の好き嫌いの評価は、0.5秒見せたときとよく一致した。
どうやって: サイトの画面を一瞬だけ見せ、見た目の好みを点数にしてもらった。
B 条件しだいTuch ほか（2012、International Journal of Human-Computer Studies）[2]
見た目の複雑さが低く、よくある形（典型的な配置）のサイトほど、第一印象の評価が高かった。
どうやって: サイトの画面を短い時間だけ見せ、複雑さと典型性を変えて比べた。
A 確かFitts（1954、Journal of Experimental Psychology）[7]
的が大きく近いほど、速く正確に指せる。この関係は「フィッツの法則」として長く再現されてきた。
どうやって: 幅と距離を変えた的を交互に叩く実験。メタ分析ではないが、法則として長く確かめられている。
03 作るときの当て方サイトのどこに当てればいい？
最初の画面・操作・信頼の3か所。飾りを足すより、減らすほうが効く。
1ページ1つの用事、入口は1つ
並べる選択肢は3〜5まで。説明は1文にして、伝わる所は図やアイコンにする。
よくある並びを崩さない
ロゴは左上、メニューは上。色は少なく、飾りの画像・光・影を足さない。
ボタンは大きく、言葉は具体的に
高さ48px以上。「送る」でなく「要望を送る」のように書く。
速くする、待たせるなら進み具合を
外部の読み込みを減らす。待つ所には進み具合を出す。
チェックの初期状態は使う人に得な方に
メールの購読などを最初からオンにしない。
運営者・更新日・出典を見える所に
結果を返したら、何がわかったかを最後に1文で書く。
04 使わない説よく聞くけれど使わないのは？
企業の調査だけの数字と、根拠が見つからない数字は使わない。
| よく聞く説 | 判定 | 研究では |
|---|---|---|
| 人はF字に読むので、左上に全部置けばよい | 言い過ぎ | 企業の視線調査が広めた話。読み方はページの作りと目的で変わる |
| 表示が1秒遅れると売上が○%下がる | 言い過ぎ | 速いほうがよいことは確かだが、企業が出した数字が多く、条件が書かれていない |
よく聞く説（集中は8秒・自我消耗・色で○%など）の答え合わせは、よく聞く説10個の答え合わせにまとめた。
05 まだわかっていないことまだわからないのは？
第一印象の研究の多くはパソコンの画面で測っていて、スマホでの結果は少ない。
- スマホでも一瞬で決まるか第一印象の研究は、デスクトップの画面で測ったものが多い。小さな画面で同じように出るかは、確かめた研究が少ない。
- 見た目と使いやすさの関係の強さ「見た目がよいと使いやすく感じる」は、追試で弱く出たものもあり、どの程度効くかは条件しだい。
06よくある質問
脳科学マーケティングはウェブデザインにどう使えますか？
入口を1つにして選択肢を減らす、単純で見慣れた形にする、ボタンを大きくする、待たせない、の4つが研究で支えられています。
サイトの第一印象は何秒で決まりますか？
見た目の好き嫌いは50ミリ秒（0.05秒）で判断され、0.5秒見たときの評価とよく一致したという研究があります（Lindgaard ほか 2006）。ただし測ったのはパソコンの画面です。
ボタンの色で成約率は上がりますか？
「この色で○%上がる」という決まった数字を支える研究は見つかりません。色より、ボタンの大きさ・位置・言葉のわかりやすさのほうが研究の裏付けがあります。
出典
- Lindgaard, G., Fernandes, G., Dudek, C., & Brown, J. (2006). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology, 25(2), 115–126. doi:10.1080/01449290500330448
- Tuch, A. N., Presslaber, E. E., Stöcklin, M., Opwis, K., & Bargas-Avila, J. A. (2012). The role of visual complexity and prototypicality regarding first impression of websites. International Journal of Human-Computer Studies, 70(11), 794–811. doi:10.1016/j.ijhcs.2012.06.003
- Alter, A. L., & Oppenheimer, D. M. (2009). Uniting the tribes of fluency to form a metacognitive nation. Personality and Social Psychology Review, 13(3), 219–235. doi:10.1177/1088868309341564
- Tractinsky, N., Katz, A. S., & Ikar, D. (2000). What is beautiful is usable. Interacting with Computers, 13(2), 127–145. doi:10.1016/S0953-5438(00)00031-X
- Cowan, N. (2001). The magical number 4 in short-term memory. Behavioral and Brain Sciences, 24(1), 87–114. doi:10.1017/S0140525X01003922
- Scheibehenne, B., Greifeneder, R., & Todd, P. M. (2010). Can there ever be too many options? A meta-analytic review of choice overload. Journal of Consumer Research, 37(3), 409–425. doi:10.1086/651235
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. doi:10.1037/h0055392
- Nah, F. F.-H. (2004). A study on tolerable waiting time: How long are Web users willing to wait? Behaviour & Information Technology, 23(3), 153–163. doi:10.1080/01449290410001669914
- Jachimowicz, J. M., Duncan, S., Weber, E. U., & Johnson, E. J. (2019). When and why defaults influence decisions: A meta-analysis of default effects. Behavioural Public Policy, 3(2), 159–186. doi:10.1017/bpp.2018.43
- Alaybek, B., Dalal, R. S., Fyffe, S., et al. (2022). All's well that ends (and peaks) well? A meta-analysis of the peak-end rule and duration neglect. Organizational Behavior and Human Decision Processes, 170, 104149. doi:10.1016/j.obhdp.2022.104149（2024年に訂正あり）
- Hick, W. E. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4(1), 11–26. doi:10.1080/17470215208416600
- Chernev, A., Böckenholt, U., & Goodman, J. (2015). Choice overload: A conceptual review and meta-analysis. Journal of Consumer Psychology, 25(2), 333–358. doi:10.1016/j.jcps.2014.08.002
- Kahneman, D., Fredrickson, B. L., Schreiber, C. A., & Redelmeier, D. A. (1993). When more pain is preferred to less: Adding a better end. Psychological Science, 4(6), 401–405. doi:10.1111/j.1467-9280.1993.tb00589.x
- Hagger, M. S., Chatzisarantis, N. L. D., et al. (2016). A multilab preregistered replication of the ego-depletion effect. Perspectives on Psychological Science, 11(4), 546–573. doi:10.1177/1745691616652873