テクノロジーとWeb

Webデザインにおけるハロー効果:最初の3秒でユーザーの信頼を勝ち取る方法

機能をひとつも使わないうちに、見た目が整っているという理由だけでアプリやWebサイトを信頼したことはありませんか。それは論理ではありません。認知のバイアスであり、ちゃんと名前があります。

訪問者は、サイトの文章を一語も読まないうちに評価を済ませています。Behaviour & Information Technology誌の3つの研究では、50ミリ秒だけ表示されたトップページを参加者が評価し、その瞬間的な判断は、同じページをずっと長く見て付けた評価と強く相関していました。印象はほぼ即座に生まれ、その後の数秒がその印象を保てるかどうかを決めます。

この印象を味方にするには、背後にあるバイアスを知っておくと役に立ちます。ハロー効果です。

UXとWebデザインにおけるハロー効果とは

ハロー効果を指摘したのは心理学者エドワード・ソーンダイクで、1920年の評定誤差に関する論文が出発点です。部下を評価する軍の上官が、ひとつの好ましい印象に引きずられて、同じ人物についての他のすべての判断まで同じ色に染めてしまうという指摘でした。名前の由来は、古典絵画で聖人の背後に描かれた金色の輪です。光輪は、その周りのすべてを照らします。

Web上でも同じ近道が、1秒のうちに味方にも敵にもなります。サイトが丁寧に作られて見えれば、訪問者はその裏にある製品も丁寧だと考えます。作りがよく、サポートも手厚く、支払っても安心だ、と。その瞬間、デザインは装飾ではありません。手元にある唯一の証拠です。

なぜ最初の数秒がこれほど大きいのか

閲覧している人は、評価しているのではなく、ふるい分けています。注意力より選択肢のほうが多いとき、私たちは近道に頼ります。新しそうか、実在する会社のものらしいか、自分のスマートフォンで動きそうか。そして意識的な比較が始まる前に行動します。

研究が示すのは、「候補に残る」ことと「信頼される」ことが、ページの別の部分によって担われているという点です。CHI 2004で発表された研究では、健康に関する助言をオンラインで探す人々を観察したところ、サイトを外す判断を動かしていたのはデザインの印象で、信頼を得ていたのは情報の信頼性と自分への当てはまりでした。15人を4週間追った小規模な質的研究ですが、示されている分担はどの制作チームにも心当たりがあります。見た目で候補に残り、中身で選ばれます。

素早く信頼を得るための5つの実践

どれもブランド全体の作り直しを必要としません。第一印象を最も大きく動かす手立てを、効き目の順に並べています。

1. 最初の画面の水準を上げる

最初の画面には焦点を1つだけ置き、余白を十分に取り、書体を意図して選び、色は飾りではなく意味のために使います。押すと反応するボタン、どこへ移動したかを示す動き。こうした小さく滑らかな操作感は、手入れされている製品だという印象を与えます。余白の不統一やちぐはぐな装飾は逆の印象、つまり放置されている印象を与えます。

2. 速さをデザインの一部として扱う

まだ届いていない美しいページは、ただの白い画面です。Googleは許容範囲としている基準を公開しています。Core Web VitalsではLargest Contentful Paintが2.5秒以内なら良好、4秒を超えると不良です。この基準を満たす作業は地味です。画像を適切な大きさにし、スクリプトを減らし、まともなサーバーを使う。それだけですが、この一覧にある他の判断すべてを守ってくれます。

3. 何をしているのかを、すぐに言う

最初の数秒で、トップページは2つの問いに答える必要があります。

  • 何をしている会社なのか
  • それが自分にとってなぜ重要なのか

業界用語を避け、平易な言葉で、画面の上部で答えてください。二度読まないと分からない巧みな見出しより、迷いのない具体的な見出しのほうが効きます。

4. 導線は目立たないほどよい

よい導線は誰も気づきません。見慣れた形、正直なラベル、訪問者が想像した場所にあるページ。地味な状態の作り込みも大切です。検索結果が空のとき、読み込み中、エラー表示。こうした場面では、相手はすでに少し苛立っていて、離れる理由を探しています。

5. 権威は正直に借りる

名の知れた取引先、具体的な資格、名前のある推薦、実際に受けた賞は、外部の信頼を自社に結び付けるためハロー効果を広げます。ただし条件は正確さです。曖昧な推薦、借り物のロゴ、盛った実績は、信じられるより先に気づかれます。ひとつ見つかった時点で、ページの他の記述も疑われます。

身近な例

Notionのような製品を開くと、最初の画面は静かです。色は控えめ、動きは穏やか、行動はひとつだけ明示されています。この画面はソフトウェアの実力を証明しませんが、「丁寧に作られている」という期待を作り、その後の体験がその期待を引き継ぎます。これがハロー効果の働きです。だからこそ、登録後にはその期待に応えなければなりません。

ハロー効果を自社のブランドに

考え抜かれた最初の画面、速い表示、意識せずに使える導線。この水準に届くかどうかは、好みの問題ではなく技術の問題です。CloudTartが取り組んでいるのはそこで、ビジュアルデザイン・表示性能・分かりやすさを1つの仕事として扱い、詳細を読む前の数秒で信頼を得られるサイトにします。サービスのページで進め方を説明し、制作実績で実際の形をご覧いただけます。

先行分であって、代わりにはならない

よいユーザー体験は機能より前に始まります。知覚が先に届くからです。デザイン、速度、明快な言葉があれば、ハロー効果は運任せではなく、意図して使える道具になります。

ただし、それが何であるかは忘れないでください。あくまで先行分です。会話の第一声であって、論拠ではありません。最初の数秒を取れたら、製品・サービス・内容がその印象に見合っている必要があります。見合っているのであれば、最初の画面をそれに合わせる方法についてご相談ください。

あわせて読みたい:よい第一印象は注意を買えますが、その注意をどう使うかは、ページが訪問者にどれだけの労力を求めるかで決まります。それが認知負荷の罠のテーマです。

Mahtab Aminalipour
執筆者

Mahtab Aminalipour

Mahtab Aminalipourは、イラン・カラジを拠点とするWebデザイン・SEO・デジタルマーケティングのエージェンシー、CloudTartの共同創業者兼Webマスターです。Webデザイン、ユーザー体験、検索について執筆しています。

すべての記事

会話に参加する

メールアドレスが公開されることはありません。必須項目には * が付いています