孤立効果とは 強調を減らして1つだけ目立たせるホームページの直し方

孤立効果は、似たものが並ぶ中に1つだけ違うものがあると、その1つが記憶に残りやすくなる心理の働きです。

ホームページの改善でもよく名前が挙がり、「問い合わせボタンを目立つ色にしましょう」という助言の根拠として紹介されています。

ところが、中小企業のサイトを見ていくと、ボタンの色を変えても反応が変わらないページがたくさんあります。

原因はたいてい、ボタンの側にありません。

ボタンの周りに赤字や太字、点滅するバナー、黄色いマーカーが並んでいて、どれが「1つだけ違うもの」なのか読者に分からない状態になっています。

この記事では、孤立効果の元になった1933年の記憶実験から始めて、デジタル庁が公開しているデザインの指針、ウェブアクセシビリティの規格まで、確かめられる情報をもとに話を進めます。

強調を足す前に強調を減らすという順番で、中小企業のサイトで孤立効果を働かせる手順を整理しました。

読み終えたときに、自社サイトのどのページで何を1つだけ目立たせるか、決まっている状態を目指します。

孤立効果とは 似たものが並ぶ中で違う1つが記憶に残る現象

心理学では「フォン・レストルフ効果」とも呼ばれます。

同じ種類の項目が続く中に、色や形、意味の違う項目が1つだけ混ざっていると、あとで思い出せる確率がその項目だけ高くなります。

たとえば数字が9個並ぶ中に1つだけ単語がある、黒い文字の中に1つだけ赤い文字がある、といった並びです。

読む人は意識して覚えようとしていなくても、違う1つを手がかりに全体を思い出すようになります。

言葉の意味と別の呼び方

同じ現象に、いくつかの呼び名がついています。

指している範囲が少しずつ違うので、サイト改善で使うときの扱いと合わせて並べておきます。

呼び方	指している範囲	サイトで使うときの扱い
孤立効果	並びの中で孤立した1つが記憶に残る現象全般	ページ全体の設計で使う呼び名として覚える
フォン・レストルフ効果	報告した研究者の名前をとった呼び方	中身は孤立効果と同じ。論文を探すときはこちら
アイソレーション効果	孤立効果を英語の読みのまま呼んだもの	デザインの解説記事で見かける。意味は同じ
示差性の効果	周りとの違いが記憶を助けるという、もう少し広い考え方	色だけでなく、言葉や配置の違いも含めて考えるときに使う
目立たせること一般	大きくする、派手にするなど、単独で注目を集める工夫	孤立効果とは別物。周りとの比較が無いと働かない

表の最後の行がこの記事でいちばん大事な区別です。

この効果は「派手にすること」を指していません。周りが揃っていて、そこから1つだけ外れていることが条件になります。

最初に報告したのは1933年の記憶実験

この現象を報告したのは、ドイツの研究者ヘドヴィッヒ・フォン・レストルフです。

1933年12月に心理学の専門誌『プシコロギッシェ・フォルシュング』第18巻（299〜342ページ）に論文を発表しました。

実験では、同じ種類の項目が並んだリストの中に、種類の違う項目を1つだけ混ぜて覚えてもらいました。

その結果、種類の違う1つは、ほかの項目より思い出されやすいことが確かめられています。

のちにこの結果が、研究者の名前をとって「フォン・レストルフ効果」と呼ばれるようになりました。

論文の題名を日本語にすると「記憶の痕跡の場における領域形成の働きについて」といった意味になり、記憶の中で似たもの同士がまとまり、違うものが浮き上がる仕組みを調べた研究でした。

90年以上前の実験ですが、似たものの中の1つが残るという結果は、その後の記憶研究でも繰り返し取り上げられています。

驚いて目を引いたから覚えた、だけでは説明しきれない

この現象は「目立つから覚える」と短く説明されることが多いものです。

ただ、心理学者のリード・ハントが1995年に米国の心理学誌『サイコノミック・ブレティン・アンド・レビュー』第2巻（105〜112ページ）に書いた論文は、その説明に注意を促しています。

ハントはこの論文で、フォン・レストルフが実際に行った実験を読み直しました。

違う項目がリストの最初のほうに置かれ、まだ「周りと違う」と感じようがない位置でも、記憶の優位が見られたことを紹介しています。

つまり、その瞬間に驚いたかどうかより、あとから全体を振り返ったときに「1つだけ種類が違った」と整理できることが、記憶に効いているという見方です。

サイトに置き換えると、派手な一撃で目を奪うことより、ページ全体が揃っていて1つの要素だけ役割が違うと読み取れることのほうが大切になります。

ハントの論文によると、違う項目を覚えやすくするのは、その項目が持つ性質そのものより、周りの項目と比べたときの違いです。

同じ金色のボタンでも、周りが白と黒で揃ったページに置けば違いになり、金色の帯だらけのページに置けば違いになりません。

中小企業のサイトで孤立効果が働かない理由 強調が多すぎる

孤立効果を知っていても、実際のサイトで働かせられないことはよくあります。

理由のほとんどは、強調する要素が1つに絞られていないことです。

ホームページは公開したあとに少しずつ書き足されていくので、強調も足し算で増えていきます。

足し算で強調が増えていく流れ

公開した直後は、問い合わせボタンだけがオレンジ色、という整ったページだったとします。

半年後に新サービスを始めたので、トップに赤い帯のお知らせを入れます。

次に、問い合わせが少ないからと「初回相談受付中」を太字の赤で書き足します。

さらにキャンペーンのバナー、電話番号の大きな表示、資料請求のボタンが加わります。

1つ1つは理由のある追加ですが、1年たつと、ページの中に「目立つもの」が7つも8つも並ぶ状態になります。

こうなると、どれも周りから外れていないので、孤立効果はどれにも働きません。

地域の工務店のサイトを例にすると、施工事例の新着、見学会の告知、補助金の案内、資料請求、電話の受付時間が、すべて赤や橙で並んでいる状態です。

どれも見てほしい情報ですが、5つが同じ強さで並ぶと、読者の記憶にはどれも残りません。

全部が赤字のページで読者の目に起きていること

強調が多いページを開いた読者は、まずどこから読めばいいのか迷います。

赤字が5か所あれば、5か所とも同じ重さに見えるので、目は順番を決められずにページの上から下まで行き来します。

その間に「結局この会社は何をしてほしいのか」が分からなくなり、戻るボタンを押してしまいます。

書き手は「大事なことを全部伝えた」と感じていても、読み手には何も残っていない状態です。

スマホではこの状態がさらに強く出ます。

画面が小さいぶん、1画面に入る強調の密度が上がり、指でスクロールするたびに赤い文字と帯が次々に現れるからです。

強調の種類	よくある状態	読者の受け取り
赤い文字	注意書き、キャンペーン、電話番号がすべて赤	どれも警告に見え、読む順番が決められない
太字	段落ごとに1〜2か所が太字	太字だけ拾い読みしても話がつながらない
バナー	トップに3枚以上が並ぶ、または自動で切り替わる	広告として読み飛ばされる
ボタン	問い合わせ、資料請求、電話、メッセージアプリの4つが同じ色と大きさ	どれを押せばいいか迷い、どれも押さない
マーカー	黄色い下線が本文のあちこちに引かれている	本文全体が騒がしくなり、内容より装飾が目に入る

5つの行のうち1つでも当てはまれば、孤立効果を「足す」作業に入る前に「減らす」作業が必要です。

強調が増えるのは、迷いが残っている合図

強調が増えていく背景には、「このページで何をしてほしいか」が決まっていないという事情があります。

問い合わせも資料請求も電話も大事だから、全部を同じ強さで置いておく、という判断です。

これは書き手の迷いを、そのまま読者に渡している状態だと言えます。

孤立効果を使うことは、書き手の側で迷いを片づけて、読者に1つだけ差し出すことと同じです。

公的機関の指針も「1画面に1つ」を原則にしている

強調を1つに絞るという考え方は、心理学の実験だけが根拠ではありません。

行政のウェブサービスを作るためのルールとして、デジタル庁が公開している「デジタル庁デザインシステム」にも、はっきり書かれています。

いちばん目立つボタンは原則1つまで

デジタル庁デザインシステムのボタンの項目には、次のように書かれています。

「プライマリー（重要度：高）のボタンは画面内で最も重要なアクションに使用します。ひとつの画面につき、原則1つまで使用できます。」

ここでいうプライマリーは、背景色で塗りつぶした、いちばん目立つボタンのことです。

同じ項目の悪い例としては、「プライマリーのボタンが1つよりも多く使われており、どのアクションが最重要なアクションであるかが不明瞭です。」という説明も載っています。

行政の手続き画面は、年齢も慣れも違う人が使う前提で作られています。

その画面で「目立つボタンは1つ」が原則になっていることは、中小企業のサイトにもそのまま当てはまります。

ボタンを3段の重さに分けて考える

同じ指針は、ボタンを3つの重さに分けています。

2番目のボタンについては「原則として最大で同時に3つまで使用できるものとします。」と書かれており、選択肢が複数ある場合の上限も示されています。

ボタンの重さ	見た目	置いてよい数の目安	中小企業サイトでの例
いちばん重い	背景を塗りつぶしたボタン	1画面に原則1つ	無料相談を申し込む
中くらい	枠線だけのボタン	同時に最大3つ	資料を見る、料金を見る、事例を見る
軽い	文字だけのボタン	1画面に原則1つ	前のページに戻る、入力をやめる
ボタンにしない	本文中の文字リンク	必要な数だけ	関連する記事、用語の説明

この表のとおりに分けると、問い合わせ、資料請求、電話をすべて同じ塗りのボタンにする必要はなくなります。

いちばん望む行動を1つだけ塗りのボタンにして、残りは枠線や文字リンクに下げる、という整理ができます。

下げたボタンは消えるわけではないので、資料だけ欲しい人や電話で話したい人も、自分の入口を見つけられます。

入口の数は変えずに、重さだけを3段に分けるのがこの整理の要点です。

色の違いだけで区別しない

もう1つ、ウェブアクセシビリティの国際的な指針にも、孤立効果を使うときに守るべき条件があります。

W3Cが定めた指針の2.1版を、ウェブアクセシビリティ基盤委員会が訳した日本語版では、達成基準1.4.1として次のように書かれています。

「色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。」

色の見え方は人によって違うので、色だけで「これが押すボタンです」と伝えると、伝わらない人が出てきます。

デジタル庁デザインシステムによると、ボタンの重さの差も、この基準があるため色の違いだけで示すことはできません。

孤立効果を働かせるときは、色に加えて、形や大きさ、言葉のどれかでも違いをつけることが条件になります。

全部を強調したページと1つだけ強調したページの違い

ここまでの話を、1枚の図にまとめます。

左右のページには、まったく同じ5つの要素が同じ順番で並んでいます。

左のページは、5つの要素すべてに同じ金色の帯を敷いています。

書き手としては「全部大事」という気持ちの表れですが、読者から見ると5つが同じ重さに並んでいるだけで、どれも周りから外れていません。

右のページは、4つを白い枠に下げて、無料相談のボタンだけを塗りつぶしています。

何も削っていないのに、読み終えたあとに頭に残るものがはっきり1つになります。

孤立効果を使うときに手を動かす場所は、目立たせたい1つより、残りの4つのほうです。

目立たせる1つを決める手順

強調を減らすには、先に「このページで目立たせる1つ」を決めておく必要があります。

ここが決まらないまま色やボタンを触ると、また足し算に戻ってしまいます。

ページごとに読者の次の一歩を書き出す

まず、サイトの主なページを紙に書き出し、それぞれのページを読み終えた読者に次に何をしてほしいかを1行で書きます。

「問い合わせをしてほしい」「料金ページを見てほしい」「事例を1つ読んでほしい」のように、動詞で終わる形にします。

1つのページに2つ以上の一歩が書けてしまったら、そのページは役割が2つに分かれています。

そのときは、どちらか一方を別のページに移すか、2つ目を文字リンクに下げます。

ページの種類別に目立たせる1つの目安

ページの種類によって、読者の状態と、目立たせるべき1つは変わります。

中小企業のサイトでよくある構成をもとに、目安を表にしました。

ページの種類	読者の状態	目立たせる1つ	下げてよいもの
トップページ	この会社が自分に合うかを見ている	いちばん選ばれているサービスへの入口	お知らせ、採用情報、会社の沿革
サービス紹介	自分の悩みに効くかを確かめている	無料相談や問い合わせのボタン	他サービスへのバナー
料金ページ	どれを選べばいいか比べている	迷った人に勧めるプラン	ほかのプランの装飾
事例・お客様の声	本当に成果が出るのかを疑っている	自分と似た会社の事例1つ	受賞歴やメディア掲載の帯
ブログ記事	調べものの途中で、まだ比較の前	関連する次の記事、または資料	問い合わせボタンの多重配置
問い合わせフォーム	送るかどうか最後に迷っている	送信ボタン	ほかのページへのリンク、バナー

表のとおり、すべてのページで問い合わせボタンを目立たせればよいわけではありません。

ブログ記事を読んでいる人は、まだ問い合わせる段階にいないことがほとんどです。

その段階の人に塗りのボタンを3つ見せても、孤立効果は「売り込み」として記憶に残るだけになります。

1つに決められないときの見分け方

どうしても2つから選べないときは、過去3か月の問い合わせの中身を見直します。

問い合わせの入口がフォームと電話に分かれているなら、件数が多いほうを目立たせる1つにして、もう一方は枠線のボタンか文字の案内に下げます。

件数が1桁でどちらとも言えない場合は、商談につながりやすかったほうを選びます。

迷ったまま2つを同じ強さで置くより、どちらかを選んで3か月様子を見るほうが、次の判断材料が残ります。

選ばなかったほうは消さずに、枠線のボタンとして同じページに残しておけば、そちらを望む読者を取りこぼすこともありません。

業種ごとに目立たせる1つの例

業種によって、読者が最初に踏み出しやすい一歩は違います。

サービス紹介のページを例に、目立たせる1つの候補を並べました。

業種	読者がためらう理由	目立たせる1つの候補
工務店・リフォーム	いきなり見積もりを頼むと断りにくい	見学会や相談会の予約
士業の事務所	相談の内容を整理できていない	初回相談の予約
整体院・サロン	自分の症状に合うか分からない	初回の予約
製造業の取引先向け	社内で稟議を通す材料が要る	技術資料や仕様書の取り寄せ
教室・スクール	続けられるか不安がある	体験レッスンの申し込み

どの業種でも、目立たせる1つは「読者がためらいなく踏み出せる、いちばん小さな一歩」になっています。

いきなり契約や見積もりに向かうボタンを目立たせるより、その手前の一歩を孤立させたほうが、押される回数は増えやすくなります。

決めた1つを社内で共有する

目立たせる1つを決めたら、ページごとに一覧にして、更新を担当する人と共有しておきます。

強調が足し算で増えていくのは、担当者が入れ替わるたびに「これも目立たせたい」が積み重なるからです。

新しいお知らせやバナーを足すときは、一覧を見て、決めた1つと取り合いにならないかを確かめてから載せる、という決まりにしておくと崩れにくくなります。

周りを揃える 孤立効果は背景の作り方で決まる

目立たせる1つが決まったら、次は残りの要素を揃えます。

孤立効果は「周りと違う」ことで働くので、周りがばらばらだと、どれだけ目立つ色を使っても違いが伝わりません。

使う色を減らす

最初に手をつけやすいのは色です。

ページの中で使っている色を数え、文字の色、背景の色、強調の色の3つに分けます。

強調の色は1つに決めて、目立たせる1つ以外には使わないようにします。

注意書きを赤くしたい場合も、強調の色とは別に、少し暗い色を1つだけ決めておくと、ボタンと取り合いになりません。

色を数えてみると、作った当初は3色だったページが、更新を重ねて7色や8色に増えていることがよくあります。

見出しの色、帯の色、アイコンの色を1つずつ本文の色に戻していくだけでも、残した強調の色がはっきり浮き上がります。

文字の大きさと太さを3段までにする

文字の大きさがページの中で5段も6段もあると、どの文字が大事なのか読者には見分けがつきません。

見出し、本文、補足の3段に揃えるだけで、ページ全体が落ち着いて見えます。

太字も同じで、本文の中の太字を減らすほど、残した太字が目に入るようになります。

この記事の文章ルールでも、太字は200字に1つまでと決めています。

余白で切り離す

色や大きさを変えなくても、周りに余白をとるだけで1つの要素は孤立して見えます。

ボタンのすぐ上に注意書きが詰まっていると、ボタンが文章の一部に見えてしまいます。

目立たせる1つの上下には、ほかの要素より広い余白をとります。

目安として、ふだんの段落の間隔が1行分なら、目立たせる1つの上下は2行分以上あけます。

余白は色と違って見え方が人によって変わりにくいので、色の違いが伝わりにくい人にも届く違いになります。

揃える項目	いまの状態の例	揃え方
色	赤、オレンジ、青、緑のボタンが混在	強調の色を1つ決め、ほかは文字色か枠線に
文字の大きさ	見出しだけで4種類の大きさがある	見出し、本文、補足の3段に揃える
太字	段落ごとに太字がある	1つの節に1〜2か所まで減らす
ボタンの形	角丸と四角、影ありと影なしが混在	形を1種類に揃え、重さは塗りと枠線で分ける
余白	要素どうしの間隔がまちまち	基本の間隔を決め、目立たせる1つの周りだけ広げる

この表の作業は、新しく何かを作るものではありません。

すでにあるものを減らして揃える作業なので、制作会社に頼まなくても、更新の権限があれば社内で進められます。

違いの付け方 色だけに頼らない

周りが揃ったら、目立たせる1つにどんな違いをつけるかを決めます。

先に見たとおり、色の違いだけでは伝わらない人がいるので、2つ以上の軸を組み合わせます。

違いの軸	効きやすい場面	やりすぎの合図
色	ボタン、料金表のおすすめ枠	同じ色がページに3か所以上ある
形	塗りのボタンと枠線のボタンの区別	形の種類が4つ以上に増えている
大きさ	スマホでの押しやすさ	ボタンが画面の横幅いっぱいで文章と区別がつかない
位置	読み終えた直後の場所	同じボタンが1画面に2回以上出てくる
言葉	ほかのボタンと役割が違うことを示す	「今すぐ」「限定」など急かす言葉が並ぶ

色の違いはコントラスト比で確かめる

色で違いをつけるときは、背景との差が十分かどうかを数字で確かめます。

先ほどの指針では、本文の文字と背景のコントラスト比を4.5対1以上、大きな文字は3対1以上としています。

ボタンの輪郭のような文字以外の部品も、隣り合う色との比を3対1以上にすることが求められています。

淡い金色のボタンに白い文字を載せるような組み合わせは、見た目がきれいでも比が足りないことがあります。

コントラスト比を測る無料の道具はいくつもあるので、色を決めたら1度だけ数字を確認しておくと安心です。

測るときは、ボタンの文字とボタンの地の色、ボタンの地の色とページの背景色、の2組を確かめます。

前者が4.5対1に届かなければ文字を太く大きくするか地の色を濃くし、後者が3対1に届かなければ枠線を足して輪郭をはっきりさせます。

言葉で違いをつける

見落とされがちですが、ボタンの言葉も孤立効果の軸になります。

「お問い合わせ」「資料請求」「会社概要」と名詞のボタンが並ぶ中に、「30分の無料相談を予約する」と動作を書いたボタンが1つあれば、それだけで役割が違うと読み取れます。

ボタンの言葉の決め方は、問い合わせボタンが押されない理由と、色より先に直す一言で詳しく書いています。

場面別の使い方

ここからは、中小企業のサイトでよく出てくる4つの場面で、孤立効果をどう使うかを見ていきます。

料金表とプランの比較

料金表は、孤立効果がいちばん素直に働く場所です。

3つのプランを同じ形の枠で並べ、迷った人に勧めたい1つだけ枠の色を変え、上に「迷ったらこちら」と書き添えます。

このとき、ほかの2つのプランにも「人気」「お得」などの札を付けてしまうと、効果が消えます。

札を付けるのは1つだけ、と決めておきます。

サービス一覧

サービスが5つ以上ある会社では、一覧のページがカタログのように均一になりがちです。

全部を同じ大きさのカードで並べたうえで、問い合わせのいちばん多いサービスにだけ「はじめての方はこちらから」と添えると、迷った読者の入口ができます。

カードの写真の大きさや説明文の長さがばらばらだと、それだけで目立つカードと目立たないカードができてしまいます。

写真の比率と説明文の字数を揃えてから、入口の一言を添える順番で進めます。

選択肢が多すぎて決められなくなる話は、ジャムの法則（決定回避の法則）の記事で扱っています。

お客様の声と実績

お客様の声を10件並べると、どれも似た文章に見えて、1件も記憶に残らないことがあります。

その中で、業種や規模が読者にいちばん近い1件だけを大きく載せ、残りは短い抜粋にすると、読者は自分に近い1件を手がかりに全体を覚えます。

大きく載せる1件は、ページの読者層に合わせて入れ替えて構いません。

たとえば、同じ事務所の声でも、相続の相談ページには相続の依頼者の声を、会社設立のページには起業した人の声を大きく載せます。

載せる声は、本人の許可を得た実際の声だけにします。

問い合わせフォーム

フォームの画面では、目立たせる1つは送信ボタンです。

フォームの横にバナーや別サービスの案内が並んでいると、最後の最後で読者の注意がそちらへ流れます。

フォームのページだけはサイドバーを外し、送信ボタンだけを塗りのボタンにします。

スマホの画面下に固定したボタン

スマホ表示で、画面の下に問い合わせボタンを固定しているサイトもよく見かけます。

固定したボタンはどこまで読んでも画面に残るので、ページの中に同じボタンが何度も出てくると、1画面に塗りのボタンが2つ並ぶ状態になります。

固定ボタンを使うなら、本文の中のボタンは枠線に下げるか、本文の最後の1か所だけにします。

反対に、本文の中のボタンを大切にしたいなら、固定ボタンを外すほうが孤立効果は働きやすくなります。

場面	よくある状態	目立たせる1つ	次にすること
料金表	3プランすべてに札が付いている	迷った人に勧めるプラン	札を1つにして、ほかの札を外す
サービス一覧	同じ大きさのカードが8枚並ぶ	問い合わせが最も多いサービス	入口の一言を添える
お客様の声	同じ形の声が10件並ぶ	読者にいちばん近い1件	その1件だけ全文を載せる
問い合わせフォーム	横にバナーが並ぶ	送信ボタン	サイドバーを外す
トップページ	上部に3枚のバナーが切り替わる	主力サービスの入口	バナーを1枚に絞る

やってはいけない使い方 断りにくくする強調

孤立効果は、読者に「選んでほしいもの」を見せる道具です。

同じ仕組みを裏返すと、「選んでほしくないもの」を見えにくくすることにも使えてしまいます。

断る道や解約の道を隠す

たとえば、申し込みボタンだけを大きく塗り、「申し込まない」「解約する」の案内を薄い灰色の小さな文字にする作り方です。

読者の判断を誘導して、本人が望まない選択をさせるこうした画面は、ダークパターンと呼ばれ、国内外の行政機関が問題として取り上げています。

デジタル庁デザインシステムでも、中断や中止のためのボタンは「重要度：低」の文字ボタンとして1つ置く形が示されており、隠すことまでは求めていません。

断る道は、目立たせなくてよいので、見つけられる形で残しておきます。

煽りの赤字と点滅

「残りわずか」「本日まで」を赤字や点滅で強調するやり方も、孤立効果を使ったように見えて、根拠のない場合は信頼を落とします。

期限や数量の表示が事実と違うと、景品表示法の有利誤認表示にあたるおそれもあります。

期限を書くなら、本当にある期限だけを、ほかの文字と同じ色で落ち着いて書きます。

本当の締め切りがある見学会や相談会なら、日付を見出しの近くに1度だけ書けば十分に伝わります。

同じ締め切りをページの上と中ほどと下で3回赤く書くと、読者には急かされている印象だけが残ります。

使い方	読者の受け取り	扱い
勧めたい1つを目立たせる	迷わずに選べる	使ってよい
断る道を灰色の小さな文字にする	だまされたと感じる	使わない
根拠のない期限を赤字で点滅させる	焦らされていると感じる	使わない
本当の注意事項を目立たせる	大事なことを見落とさずに済む	強調の色とは別の色で示す

目立たせる1つを決めるときは、「この1つを読者が選んだら、読者にとって得になるか」を最後に確認します。

効いているかを確かめる方法

強調を減らして1つに絞ったら、本当にその1つが目に入るかを確かめます。

特別な道具がなくても、次の3つの方法で確かめられます。

目を細めて見る、白黒にして見る

パソコンの画面から少し離れて、目を細めてページを見ます。

細部がぼやけた状態で、最初に目に入るものが目立たせたい1つなら合格です。

スマホでページを表示し、画面の設定で白黒表示に切り替えるのも効きます。

白黒にしても目立たせたい1つが分かるなら、色以外の違いもついているということです。

5秒だけ見せて何が残ったか聞く

社内のサイト制作に関わっていない人に、ページを5秒だけ見せて画面を閉じます。

そのあと「何をするためのページだったか」「どこを押せばよさそうだったか」を聞きます。

聞く相手は、家族や取引先、社内の別の部署の人で構いません。

サイトを作った本人はページの中身を知っているので、5秒で何が残るかを正しく判断できないからです。

答えが「お知らせ」や「キャンペーン」だった場合は、その要素が目立たせたい1つと取り合いになっているので、そちらの強調を先に下げます。

3人に聞いて2人以上が目立たせたい1つを答えられたら、孤立効果は働いていると考えてよいでしょう。

アクセス解析で押された回数を見る

Googleアナリティクスなどでボタンの押された回数を計測している場合は、変更の前後4週間で比べます。

ページを見た人のうち何%がボタンを押したか、という割合で比べると、季節による訪問数の増減に左右されにくくなります。

月の訪問が数百回程度のページでは、数字が少なく偶然の揺れが大きいので、前後比較の結果は参考程度に見ておきます。

どのページでも、直す前の画面を必ず保存しておきます。

パソコンとスマホの両方で画面全体を撮っておけば、4週間後に数字を比べるとき、何を変えたのかを正確に振り返れます。

確かめ方	見るところ	合格の目安	かかる時間
目を細めて見る	最初に目に入る要素	目立たせたい1つが最初に見える	1分
白黒表示で見る	色を抜いたときの見え方	色がなくても1つが分かる	2分
5秒だけ見せる	見た人の記憶に残ったもの	3人中2人以上が答えられる	15分
押された割合を比べる	変更前後4週間のボタンの押された割合	割合が下がっていない	4週間待つ

孤立効果と似た心理効果との違い

サイト改善でよく使われる心理効果には、孤立効果と混同しやすいものがいくつかあります。

役割を分けておくと、どの効果をどの場面で使うかが整理できます。

心理効果	何が起きるか	孤立効果との関係
孤立効果	並びの中で違う1つが記憶に残る	この記事の主題
決定回避の法則	選択肢が多すぎると選ぶこと自体をやめる	選択肢を減らしたうえで1つを目立たせると両方が効く
カリギュラ効果	禁止されると、かえって気になる	「向いていない方」を書く節を孤立させると読まれやすい
損失回避	得るより失うほうを重く感じる	強調の中身の話。孤立効果は見せ方の話
初頭効果	最初に見た情報が印象を決めやすい	目立たせる1つを上のほうに置く根拠になる

禁止されると気になる心理については、カリギュラ効果の記事で中小企業のサイトでの書き方を整理しています。

この表の中で、孤立効果だけは「中身」を持たない効果です。

何を伝えるかはほかの効果や文章の工夫で決まり、孤立効果はそれを読者の記憶に残す順番と見せ方を受け持ちます。

中身の弱いボタンをいくら孤立させても、押す理由が無ければ押されません。

ボタンの言葉や、そのすぐ上に書く一文と組み合わせて初めて、問い合わせの数に表れてきます。

よくある失敗と直し方

孤立効果を取り入れたつもりで、かえって反応が落ちる例もあります。

ありがちな失敗を、直し方と合わせて並べます。

失敗	起きていること	直し方
ボタンの色だけ変えた	周りに同じくらい目立つ要素が残っている	周りの強調を先に減らす
目立たせる要素を毎月変える	何を変えたら何が起きたのか分からない	1つ変えたら4週間は動かさない
全ページで同じボタンを強調	読む段階の人にまで売り込みに見える	ページの種類ごとに目立たせる1つを変える
強調の色を背景にも使った	ボタンが背景に溶けて見えなくなる	強調の色はボタンと札だけに限る
派手さを競合に合わせた	競合と同じ見た目になり、違いが消える	競合が派手なら、自社は落ち着いた中の1点で勝負する

最後の行は、ページの中だけでなく、検索結果や比較サイトでほかの会社と並んだときにも孤立効果が働くことを示しています。

周りの会社がみな赤と黄色で「激安」「最短」と書いているなら、白地に事実を淡々と書いたページのほうが、並びの中の1つとして残ることがあります。

よくある質問

孤立効果とフォン・レストルフ効果は同じものですか

同じ現象を指しています。

1933年に報告したドイツの研究者フォン・レストルフの名前をとった呼び方がフォン・レストルフ効果で、現象の中身から名付けた呼び方が孤立効果です。

目立たせる色は何色がよいですか

決まった正解の色はありません。

大事なのは、サイトのほかの部分で使っていない色を選ぶことと、背景とのコントラスト比を確かめることです。

サイト全体が青系なら、強調には暖色系を1つ選ぶ、というように、周りとの関係で決めます。

会社のロゴの色を強調に使う場合は、ロゴの色がページのあちこちに出ていないかを先に確かめます。

問い合わせボタンと電話番号はどちらを目立たせるべきですか

過去の問い合わせで件数の多いほうを目立たせます。

電話の多い業種ならスマホ表示では電話を塗りのボタンにして、パソコン表示ではフォームを目立たせる、というように画面ごとに分ける方法もあります。

強調を減らすと、伝えたいことが伝わらなくなりませんか

強調を外しても、文章そのものはページに残ります。

読者は目立たせた1つを手がかりにページを読み進め、必要な情報は本文から拾います。

全部を強調していた時期より、読まれる量はむしろ増えることがあります。

どうしても強調したい注意事項がある場合は、強調の色とは別の色を1つだけ決めて、その用途に限って使います。

孤立効果はどれくらいで効果が分かりますか

目を細めて見る点検や5秒の点検は、その日のうちに結果が出ます。

押された割合の変化は、変更前後で4週間ずつ比べるのが目安です。

訪問の少ないページでは数字が揺れやすいので、点検の結果と合わせて判断します。

まとめ

孤立効果は、似たものが並ぶ中で違う1つが記憶に残る現象で、1933年の記憶実験で報告されました。

働く条件は、周りが揃っていて、その中で1つだけが外れていることです。

中小企業のサイトで効かない理由のほとんどは、公開後に強調が足し算で増え、目立つものが7つも8つも並んでいることにあります。

デジタル庁デザインシステムも、いちばん目立つボタンは「ひとつの画面につき、原則1つまで」としています。

手を動かす順番は、ページごとに目立たせる1つを決める、残りの強調を減らして揃える、色に加えて形や言葉でも違いをつける、の3段です。

直したあとは、目を細めて見る点検と5秒の点検で、その1つが本当に残るかを確かめます。

強調を足したくなったときは、先に1つ外せるものがないかを探すところから始めてください。

今日できる点検

最後に、今日のうちに自社サイトで確かめられることを表にまとめます。

上から順に進めると、どのページの何を直すかが1つ決まります。

点検すること	見る場所	当てはまったら次にすること
塗りのボタンが1画面に2つ以上ある	トップページとサービス紹介	1つを残し、ほかを枠線か文字リンクに下げる
赤字や太字が1画面に3か所以上ある	アクセスの多い上位3ページ	本当の注意事項以外の強調を外す
強調の色がボタン以外にも使われている	見出し、帯、背景	強調の色をボタンと札だけに限る
料金表の札が2つ以上ある	料金ページ	迷った人に勧める1つだけに札を付ける
白黒表示で目立たせたい1つが分からない	スマホで主要ページ	形や言葉でも違いをつける
断る道や解約の案内が見つけにくい	申し込みと解約の画面	文字ボタンとして見つけられる形で残す