A/Bテストの第一人者Erin Weigel（エリン・ウィーゲル）氏が、UX DAYS TOKYO 2025に登壇します。
本記事は、彼女がデジタルプロダクトにおける「色彩設計の重要性」について解説しています。
Microsoftの検索エンジン「Bing」が、色の変更によって年間収益を1000万ドル（約15億円、1ドル＝150円換算）増加させた実例をもとに、色彩の選択がもたらす影響の大きさと、その背後にある複雑な要素について紐解いていきます。
元記事：https://erindoesthings.com/2024/07/15/microsoft-color-tweaks-conversion-gains/
デザインと色使いがコンバージョン最適化において重要である理由
Microsoftの検索エンジン「Bing」の検索結果ページの文字色の変更について、変更前と変更後を比較した具体例です。アクセス数が非常に多いサイトのデザイン変更で、特に成果が上がった取り組みの一つが「色」でした。
ウェブサイトの色選びは、ユーザーが商品を購入するか、ページから離れてしまうかを左右する重要な要素です。
ウェブサイトの実験手法に詳しい専門家のRon Kohavi（ロン・コハビ）氏が、自身の著書「信頼できるオンライン実験の進め方」の内容をHarvard Business Reviewで発表しました。検証内容は、Bingの検索結果画面で使用している「青色」、「黒色」、「緑色」をわずかに調整するというものでした（図1参照）。
図1：左側に変更前のデザイン、右側に変更後のデザイン
色の調整によって、Bingの年間収益は1000万ドル（約15億円 1ドル＝150円）増加
色の調整によって、Bingの年間収益は1000万ドル（約15億円 1ドル＝150円）増加しました。一見小さな変更に見える色の調整が、なぜ収益を大きく伸ばすことができたのでしょうか。
図2は、その色の変化を示しています。一つ一つ理由を見てみましょう。
図2：Bingの検索結果の色変更の比較（左：変更前の基準版・右：変更版）
理由その1：コントラストが不十分
コントラストとは、画面の背景色と文字の色の違いを示す指標で、数値として比率で表されます。比率が「1対1」の場合、背景と文字の明るさが同じで視認性がありません。比率の数値が大きくなるほど、背景と文字の色の差が大きくなり、視認性が向上します。文字の読みやすさは、このコントラストの度合いに大きく依存しています。
白い背景に対して、変更前のデザインで使用されていた青色と緑色のコントラストを測定した結果、青色はウェブアクセシビリティ基準である「WCAG 2.0 AAA」を満たしていることが確認されました。特に、青色は小さな文字でも十分なコントラストがあり、可読性が確保されていました。
しかし、図3が示すように、変更後のデザインでは、コントラストがさらに強化されています。これにより、濃い青色の文字がより明確になり、ユーザーにとっての読みやすさが向上しました。
基準版：青色のコントラスト比は7.09:1
図3：[基準版]青色のコントラスト比は7.09:1
変更版：青色のコントラスト比は11.21:1
図3：[変更版]青色のコントラスト比は11.21:1
[WebAim]などのコントラストを確認するツールは、色の選択作業で役立ちます。
基準版の緑色は、大きな文字を使用した場合だけウェブアクセシビリティ基準（WCAG 2.0 AA）を達成できました。変更版の緑色は、文字の大きさによらずウェブアクセシビリティ基準を満たせるため、より多くの人が読みやすい色になりました。
基準版：緑色のコントラスト比は4.25:1
図4：[基準版]緑色のコントラスト比 4.25:1
変更版：緑色のコントラスト比は6.54:1
図4：[変更版]緑色のコントラスト比は6.54:1
基準版の緑色の通常テキストは、多くのユーザーにとって読みづらいものでした。しかし、変更後のデザインでは、緑色のコントラストが強化され、より視認性が向上し、読みやすくなっています。
理由その2：コントラストが強すぎる
一般的に、色のコントラスト比が強いほど文字は読みやすくなりますが、ある一定の「転換点」が存在します。
この転換点を超えてしまうと、かえって視認性が低下し、読み手に負担をかけることになります。
現行版のデザインが変更版に劣る2つ目の理由は、まさにこの「コントラストが強すぎる」問題にあります。
基準版：黒のコントラスト比は21:1
変更版：黒のコントラスト比は13.77:1
図5：
真っ白な背景に真っ黒の文字を使用すると、最大のコントラスト比が得られます。しかし、この組み合わせは時としてコントラストが強すぎるため、視認性の問題を引き起こすことがあります。
特に、コントラストに対する敏感さ（医学的には「アーレン症候群」として知られる）がある人にとっては、白と黒の強いコントラストが視覚的な負担となり、読むことが難しくなる場合があります。
このような現象は、目が強いコントラストを処理する際に「文字が揺れて見える」と感じることによって発生します。これは「クロモステレオプシス（色立体視）」と呼ばれる現象で、通常の視力を持つ人でも経験することがあります。
図6：文字が揺れて見える現象「色立体視（クロモステレオプシス）」の例
文字の揺れ方は、視覚過敏（アーレン症候群）を持つ人が強いコントラストを見た際の体験に似ています。真っ黒な文字を濃いグレーに変更することで、コントラストが適度に抑えられ、文字の揺れを軽減し、より快適に読むことができるようになります。
理由その3：視覚的重みの逆転現象
「視覚的重み」の調整が、検索結果の使いやすさを大きく向上させた理由の一つです。
視覚的重みとは、私たちの注意を引きつける度合いを示します。大きく、太く、密集したテキストや、鮮やかな色、高いコントラストは目を引く要素となります。一方で、小さく、細く、余白が多く、落ち着いた色合いや低コントラストのデザインは控えめで、目立ちにくくなります。
従来の検索結果のデザインでは、黒色の本文が最も視覚的に目立つ要素となり、逆転の現象を招いていました。その結果、ユーザーは意識せずに本文を優先的に読んでしまっていました。しかし、検索結果の役割は、細かく読むことではなく、一目で必要な情報を素早く見つけることにあります。
理想的な検索体験を実現するためには、ユーザーが「見出し」→「リンク」→「本文」という順序で視線を移動することが重要です。新しいデザインでは、視覚的重みのバランスを調整することで、この自然な流れが促されました（下記図7参照）。
これにより、ユーザーは必要な情報をよりスムーズに見つけることができ、検索体験の質が大きく向上したのです。
基準版
視覚的重みの順序は、「黒→青→緑」 となっています。
変更版
視覚的重みの順序は、「青→緑→ダークグレー」 となっています。
図7
色の組み合わせと目を引く強さが、ユーザーが情報を読む順番に与える影響
色を上手に使うためには、一つ一つの色を考えるだけでは不十分です。色と色の関係性や組み合わせ方も大切な要素です。新しいデザインで加えた小さな色の変更が大きな効果を生み出したことで、この考え方が正しいと分かりました。
そう簡単ではありません
変更は微妙で一見単純に見えますが、色の実験は困難です。一般的なデザイナーは、このような色の変更の成功を簡単には実現できません。
BingやGoogleの「50 Shades of Blue experiment」のようなケーススタディは誤った印象を与えます。
まるで色を変更するだけで不満を抱えた顧客を満足させられ、その結果、幸せなユーザーとたくさんの収益が降ってくるかのように見えます。
しかし、人々が画面を一目見た時、視覚的、心理的、技術的に多くの現象が発生しています。そのため、色は芸術であり科学でもあるのです。
デザイナーは色をコントロールできていると考えがちですが、実際には画面、オペレーティングシステム、デバイスなどが、意図的にも偶発的にも色を異なる方法で処理しています。色の実験とは、可能な限り多くのユーザー層に安全に対応できるスペクトル上の適切な位置を見つけることなのです。
この記事が気に入った方は、私（Ering Weigel）の新刊『Design for Impact』もご覧ください。
ワークショップのご案内
エリン・ウィーゲル氏のワークショップが、3月29日（土）に開催されます。人の能力や錯覚も考慮し、科学的にデザイン構築する方法を学ぶことができます。
デザインを感覚的に捉えて設計するのではなく、理論的に導き出す方法を実例を用いて学びましょう！デザインがもたらす効果が売り上げに繋がることを体得していただけます。
早い段階で満席予測されます。ご希望の方はお早めにお申し込みがオススメです。
「成長を生み出すインサイトの見つけ方 —データを行動に変えるための実践ガイド」
開催日時：2025年3月29日（土）9:00〜
