【Webデザインの心理学】ボタンの色と形ひとつで人の行動が変わる理由

ネットショップで買い物をしているときや、何かのサービスを予約しようとしているとき。
「見るだけのつもりだったのに、気づいたら最後の『購入を確定する』ボタンを押していた……」——。そんな経験がある方も多いかもしれません。

それは、意志が弱いからとは限りません。Webサイトの裏側には、「認知心理学」や「行動経済学」をもとにした工夫がいくつも組み込まれているからです。

ふだんスマホやパソコンで目にするWebサイトは、ただ情報をきれいに並べているだけではありません。「どうすれば見る人が迷わず、心地よく『次へ』進めるか」が、細かく考えられています。

この記事では、知るとネットを見るのが少し面白くなる、Webデザインの「誘導の仕掛け」をひとつずつ見ていきます。

なぜ「購入ボタン」はオレンジや緑が多いのか　色の心理学
視線の動きには型がある　「Zの法則」と「Fの法則」
ボタンの形と動きが、押すときのためらいを減らす
「真ん中を選びたくなる」料金表と行動経済学
まとめ　仕組みを知ると、Webサイトはもっと面白くなる

なぜ「購入ボタン」はオレンジや緑が多いのか　色の心理学

Webサイトを開いたとき、いちばん目立つ場所にある「購入する」「資料請求」「無料で試す」といったボタン。Web業界ではこれをCTA（Call To Action：行動を呼びかけるボタン）と呼びます。

このボタンを何色にするかは、Web制作の現場でくり返し試されている大切なテーマです。ボタンの色を変えただけで、CVR（コンバージョン率：購入や申し込みに至る割合）が大きく変わったという事例も報告されています。

オレンジと緑がよく選ばれる理由

オレンジ（元気さと親しみ）: オレンジは、前向きな行動をうながす色と言われています。赤ほど「止まれ」のような強い警戒感を与えず、黄色ほど見えにくくもならないので、わくわくする気持ちやお得な印象を伝えやすい色です。Amazonをはじめ、大手のECサイトの購入ボタンにも、黄色やオレンジがよく使われています。
緑（安全と「進んでよい」の合図）: 私たちは小さいころから「信号の青（緑）＝進んでよい」と覚えてきました。そのため緑のボタンを見ると、「これは押しても大丈夫そうだ」と感じやすくなります。会員登録や口座の開設など、見る人が少し慎重になる場面で使われることが多い色です。

補色でボタンを目立たせる

さらに、サイト全体の基調の色とボタンの色を、あえて反対の色（補色）にする手法もあります。

たとえば、全体が落ち着いた紺色のサイトの中に、鮮やかなオレンジのボタンをひとつだけ置く方法です。周りと違う色はそれだけで目に飛び込んでくるので、自然と視線がボタンに集まります。

補足

色の効果は、サイトの配色や業種、見る人によって変わります。どの色が合うかは、制作の現場では2つの案を見比べるテスト（A/Bテスト）などで確かめながら決めていきます。

視線の動きには型がある　「Zの法則」と「Fの法則」

人が画面を見るとき、視線はでたらめに動いているわけではありません。文字を読む習慣や、空間をとらえる癖によって、ある程度決まった型で動くことが、視線の動きを測る実験（アイトラッキング）などで知られています。

Webデザイナーは、見る人が画面を開いた瞬間に「どこを見て、次にどこへ目を移すか」を予想しながら、配置を組み立てています。

初めて見るページをざっと眺める「Zの法則」

画像が中心のWebサイトや、初めて訪れたLP（ランディングページ）でよく見られるのが「Zの法則」です。視線は、アルファベットの「Z」を描くように動きます。

画面の左上（視線の出発点）

いちばん大事な会社のロゴやキャッチコピーを置きます。
画面の右上

お問い合わせやログインなど、いつも探される機能を置きます。
斜めに渡って左下

サービスの強みや事例など、補足の情報を置きます。
画面の右下（視線の終点）

最後に押してほしい「お申し込みボタン」を置きます。

右下のボタンが押しやすく感じるのは、視線がたどり着く終点に、ちょうどボタンが待っているからです。

文字の多いページを読む「Fの法則」

一方で、ニュースやブログのように文字の多いページでは、視線は「Fの法則」を描きます。

まず上の方を横に読み（Fのいちばん上の横線）、少し下がってもう一度横に読み（Fの2本目の横線）、そのあとは画面の左側だけを縦にさっと見ていきます（Fの縦線）。

そのため、Web制作では大事な言葉や見出しを、文章の左側に寄せるのが基本になっています。いま読んでいるこの記事の見出しや箇条書きも、この考え方に沿って並べています。

ボタンの形と動きが、押すときのためらいを減らす

画面のボタンは、実際には形のない光の点（画素）の集まりです。平らな絵にすぎないのに、私たちがためらわずにボタンを押せるのはなぜでしょうか。

ここで使われているのが「アフォーダンス」という考え方です。形や見た目そのものが、「こう扱えばいい」と人に伝える性質のことを指します。

角丸が与える安心感

スマホのアプリやWebサイトのボタンの角を見てみてください。ほとんどのボタンの角が、少し丸くなっているはずです。

自然の中では、とがった角（鋭い岩や刃物）は「危ない」もの、丸い形（果物や小石）は「安全な」ものです。人はとがったものを本能的に避けるとも言われていて、角を少し丸くするだけで、ボタンがやわらかく押しやすい印象になります。

「押せる」と分かるマイクロインタラクション

パソコンでボタンの上にマウスを重ねたとき（ホバーしたとき）、ボタンの色が少し濃くなったり、少し浮き上がったりする動きを見たことがあると思います。

これは「マイクロインタラクション」と呼ばれる、ごく小さな動きの反応です。画面の中のものが自分の操作に反応すると、人は「これは押せるスイッチだ」と受け取ります。

ボタンがときどき小さく揺れる仕掛けもあります。人には動くものに目を向ける性質があるので、さりげなくボタンに注意を集められます。

「真ん中を選びたくなる」料金表と行動経済学

ECサイトやSaaS（サブスクリプション型のサービス）の料金ページで、「ライトプラン」「スタンダードプラン」「プレミアムプラン」の3つが並んでいるのをよく見かけます。

真ん中の「スタンダードプラン」だけが少し大きく強調されていて、「一番人気」「おすすめ」といった印が付いていることも多いはずです。

これも、人の選び方の癖をもとにした、行動経済学の考え方が使われています。

極端回避性（松竹梅の法則）: 選択肢が3つあると、いちばん高い「松（プレミアム）」は損をしそうで、いちばん安い「梅（ライト）」は機能が足りなさそうに感じ、真ん中の「竹」を選びたくなる心理です。
アンカリング（基準になる金額の効果）: いちばん高いプランをはっきり高い金額で見せておくと、その金額が比べる基準（アンカー）になり、真ん中のプランが実際以上にお得に見えます。
おとり効果（デコイ効果）: 本命のプランと比べて、少しだけ見劣りする選択肢（おとり）をわざと並べておくと、本命のプランが選ばれやすくなる心理です。

料金表を見ているとき、私たちは自分で自由に選んでいるつもりでいます。けれど実際には、真ん中のプランが選ばれやすいように並べ方が考えられていることも多いのです。

まとめ　仕組みを知ると、Webサイトはもっと面白くなる

ふだん何気なく見ているWebサイトには、色の心理学、視線の動きの法則、人間工学、行動経済学など、人の心の仕組みをもとにした工夫がたくさん詰まっています。

見た目をきれいに整えるだけでなく、「見る人に負担をかけず、気持ちよく行動してもらうにはどうするか」という考えと心配りが、画面の細かいところにまで込められています。

これからネットで調べものや買い物をするときは、少しだけ画面から目を離して、こんなふうに観察してみてください。