【分析してみた】ランディングページのアイコン(ボタン)の色は何色が一番いいのか?

中尾 侑里香

 皆さん、はじめまして。売れるネット広告社の中尾 侑里香と申します。私は、2014年に売れるネット広告社に入社してから、クリエイティブ制作を担当してきました。様々な通販企業の商品やサービスのランディングページや、バナー広告のディレクションを行ってきましたが、どのような切り口で訴求をすればお客様に伝わるのか、どのようなデザインにすれば魅力的に表現できるのか、とディレクションを進行していく上で何回も何十回も悩んできました。といっても商品とにらめっこしながら悩んでも、良いIDEAやデザインが浮かぶわけはありません。そんな時、必ず見るのが以下のサイトです!

・ランディングページ/バナー大百科
・ランディングページ集めました。
・LANDINGPAGE BOOKMARK

 そうです。事例です。入社してから2年間で、300ページ以上のランディングページをディレクションしてきましたが、職業柄、他社のランディングページ事例については、その10倍20倍もの数を見てきました。というわけで、この連載では、世の中に存在するランディングページを(勝手に)参考にさせていただき、様々な観点から分析してみたいと思います!

 記念すべき第1回目のテーマは「アイコン(ボタン)」です!

 我々の業界では、「申込みのアクションを促すボタン」のことを「アイコン」と呼びます。例えば、上記にあげた事例サイトで、いくつかアイコンをピックアップしてみましょう。

 ピンク、オレンジ、赤、緑、青、紫と様々なボタンの色がありますね。

 さらに、ランディングページ事例集の中から、事例を200個ピックアップして何色のボタンが多いのかグラフ化してみました。(※商材や企業は様々です。)

※2016年12月22日 自社調べ

 やはり、赤色のアイコンが一番多いです。確かに赤色は目立つ色です。資料作成をする時も、目立たせたい文言には必ず赤色を使用しています。その原理と同じで、アイコンを目立たせるために赤色を使用されていると思います。ですが、本当にそれはユーザーが押したい色なのでしょうか?

 売れるネット広告社では、この「アイコン」の色について、過去に何度もテストを行ってきました。

健康食品の商材でアイコンの色のテストをした結果、

(健康食品)

 なんと緑アイコンが勝利しました!

 さらに、化粧品でも同様のテストをした結果、

(化粧品)

 また緑アイコンが勝利しました!

 なぜ赤色ではなく、緑色が勝利するのか。おそらく、赤色は目立つ色だが、申込みアイコンは進ませる(押させるもの)ものです。よくよく考えてみると、信号機の進めは緑色で、止まれは赤色なのです。

 信号機の色は世界中どこに行っても同じ色ですので、全世界中の人が、緑色は進め(押す)、赤色は止まれと、自然に認識されているのではないでしょうか?

 ブラウザソフトであるFirefoxをリリースしているMozilla社の検証でも「緑色のアイコン」が一番コンバージョン率が高かったそうです。実は、この話は自社セミナーや弊社代表の加藤の著者本などにも記載されているため、緑アイコンにしている通販会社は増えてきています。そのため、申込みアイコンは「緑色」にした方が、効果的なのです。

 さらに、アイコンは色のほかにサイズやデザインも重要なのです。大きいサイズと小さいサイズの申込みアイコンが合った場合、あなたはどちらに目がいきますでしょうか?

 もちろん大きい申込みアイコンを見てしまいますよね。デザインを強調したいからと言って申込みアイコンを小さくしてしまいますと、お客様がいざ申込みをしようと思った時に「申込みアイコンがない!」となってしまいます。

 そうならないためにも、申込みアイコンはランディングページ上に大きく表示しましょう。どのくらいの大きさかというと、ランディングページの横幅いっぱいのサイズ感が一番良いサイズです!

 立体感を出し、矢印などをつけて「クリックできるアイコン」であると認識させましょう。またマウスオーバーした際には、アイコンを動かしたり、色を変化させたりしましょう。そうすることで、さらに「クリックできるアイコン」だと認識し、コンバージョンにつながりやすくなるのです。アイコンはランディングページの中で目立ってこそ意味を発揮するのです。

 さらにもうひとつ。ランディングページの事例を見ていて気付いたことがあります。それは、ミニアイコンです!

 ミニアイコンとは、ランディングページの見出し→本文→見出し→本文・・・という構成の途中にあるアイコンのことを呼びます。左側のようにだらだらと文章が書かれてあるランディングページよりも、右側のように段落ごとにミニアイコンがあるランディングページの方が文章に区切りがつき、お客様が「商品を申込もう!」と思った時にボタンに気付きやすくなります。

 縦長のランディングページを組み立てたとしても、お客様には長く感じさせにくい作りとなり、結果的にコンバージョン率が上がるのです。

 ですが、多くの企業がこのミニアイコンをいれていないところがほとんどです。とてももったいない。

 デザインは通常のアイコンと同じで良いので、わずか数分でミニアイコンは作成することができます。そのアイコンをランディングページの構成の途中途中に入れていきましょう。そうすることで、離脱を防ぐことができ、コンバージョン率を上げることができます。

皆さん、実践してみてくださいね。次回もお楽しみに。

著者

中尾 侑里香 (Nakao Yurika)

売れるネット広告社 開発部 プロデューサー。
1992年3月16日 宮崎県生まれ。長崎大学 経済学部卒業。学生時代は、経済学の基礎知識、日本を取り巻く国際関係、各国・各地域の社会と文化の独自性を中心に学ぶ。2014年に新卒1期生で「売れるネット広告社」に入社。2015年度上期「新人賞」受賞。入社してから2年間は、クリエイティブ制作を担当し、ランディングページやバナー広告のディレクションを行う。現在は、開発部で各ツールの改善や拡大、新規事業の開発を担当。通販エキスパート検定1級(通販マネジメント編)取得。

売れるネット広告社HP :https://www.ureru.co.jp
無料セミナー開催中   :https://lp.ureru.co.jp/mini
売れるネット広告つくーる:https://www.ureruad.jp

コメント

コメントを書くには、会員登録が必要です。
既に会員の方はログインしてください。
まだ登録をされていない方は、「新規会員登録」より登録を行ってください。