：2012年08月06日　 ：パーツデザイン　 ：コーディング　 ：この記事は10分程で読めます。

WEBサイトを運営していれば、サイトに訪れてくれたユーザーに【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、たくさん起こして欲しいと考えると思います。
そのためWebクリエイターは、どうしたらコンバージョン率や数が高まるのかを日々考え・テストを繰り返しています。
私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない大変重要な要素の1つである【行動を呼びかけるためのボタン（Call to Action Button）】についての考えをまとめたいと思います。

目的を達成へと導くボタン

ボタンはホームページの最終的な目的である【申し込み】【購入】【資料請求】【問い合わせ】などのアクションを、ユーザーに起こしてもらうためには欠かせない要素の1つです。ボタンのデザインやボタン内の文章を変えただけで、資料請求が増えたなんていう事例はたくさん存在します。
恐らくこういった成功例の中でもっとも有名なのが、Mozillaが行った「ボタンの色を変えてダウンロード数を調べるテスト」ではないでしょうか。このテストでは緑色のボタンが圧倒的にダウンロード数が伸びたという結果が得られました。以下がその結果です。

上記のように、緑は他の色の3倍以上のダウンロード数が得られています（コンバージョン率は1%くらいの違いだけど母数が大きいから大事だ。という結論:コメント）。このようにデザインや文章を変えるだけで、資料請求や購入といったコンバージョンを増やすことができるんです(もちろん逆に少なくなることもあります)。

では実際にボタンを作るとき、何に気をつけて制作すればダウンロード数や資料請求数が増えるのでしょうか。私は大きく分けて、3つのポイントを抑えることでコンバージョン率・数を高めることができると考えています。またこの3つを意識することでユーザーが「クリックしたくなるボタン」を作ることができると考えています。

ポイント1：ボタンを目立たせる

まず、ボタンは目立たなければなりません。ボタンそのものが中々見つからないデザインであれば、クリック率・コンバージョン率は間違いなく悪くなってしまうでしょう。では実際にどうしたらボタンを目立たせることができるのでしょうか。
人は目立つ目立たないという違いを、無意識に判断していると言われていますが、ユーザーの視線を奪うには「目立たせたい部分のリズムに変化を与える」事が必要です。人が何かに目を奪われる時は、大抵その対象物に何らかの違和感を感じる時です。そのため、目立つデザインに仕上げたいときは、意図的に違和感を作り上げることが必要です。私はそのために以下の6つの点に気をつけてデザインを行っています。

1.色

周りの色と違う色(コントラストのある色)を使って目立たせる。例えば周りの色の補色となる色や、色相や明度・彩度の違う色を使用します。

2.大きさ

周りの要素に比べてボタンを大きくして目立たせる。小さい物よりも大きい方が目立ちやすくなります。

3.形

ページ全体の形と違う形にして目立たせる。例えばページ全体が四角いデザインの場合、角丸のボタンなどにしたりします。また、きちんと整列されている要素の中に、角度をつけたボタンを置いても目立ちます。

4.余白

ボタンの周りには広めのスペースを確保して目立たせる。ボタンの周りに多くの要素を配置すると他の要素が邪魔をして、ボタンが目立たなくなってしまいます。

5.フォント

周りの要素と違うフォントを利用したり、太さを変えたりして目立たせる。また文字に縁取りをしたり、太いフォントと細いフォントを組み合わせても目立ちます。

6.質感

周りの要素と違う質感を利用して目立たせる。例えば周りの要素がべた塗りのデザインであれば、グラデーションを利用したりします。

デザイナーの場合、統一感のあるまとまったサイトデザインに仕上げたいと考える事が多いので、ボタンの色をサイトのテーマカラーと同じにしたり、形なども他の要素と似せて制作することがあります。またクライアント自身もデザインの統一感を求めてくる事が多くあるので、そのまま何も考えず目立ちにくいボタンを作ってしまう事がありますが、ビジネスの目的はあくまでも利益を出すことです。コンバージョン率・数を高めたいのであれば、先ほども書いたとおり「目立たせたい部分のリズムに変化を与える」必要があります。

ポイント2.ボタンに有益な情報を加える

ユーザーにとって有益な情報をボタン内に記述できれば、コンバージョン率が高くなります。資料請求や購入を悩んでいるユーザーは、有益な情報を伝えてあげることで背中を押された気持ちになり、資料請求や購入をしてくれやすくなります。ではユーザーにどんな有益な情報を与えたらいいのでしょうか。私は以下の4つのことを意識してボタン内に情報を記載するようにしています。

1.クリックした先に何があるのかを伝える

「資料請求はこちら」や「カートに入れる」のように、クリックするとどうなるのか・何があるのかといった情報を正しく伝えることが大切です。これは基本中の基本であり、ユーザーの不安を取り除くもっとも大切なポイントです。
できるだけわかりやすく、やさしい口調でクリックするとどうなるのかを伝えてあげることが大切です。例えば「購入」よりも「カートに入れる」というようにやさしい口調を選ぶといいと思います。

2.金銭的にお得であることを伝える

｢送料無料｣や｢20％OFF｣のように、ユーザーに金銭的にお得であることを感じてもらう事が大切です。金銭的なメリットは最も強力な武器となります。特にネット販売の場合、送料が発生する事が多くあると思いますが、実店舗であれば送料は基本的に発生しません。
そのためユーザーはこの送料を嫌います。インターネットでは「送料無料」というキーワードは、とても大きな武器になるんです。

3.簡単であることを伝える

「3分でお申し込み」のように、ユーザーに時間がかからず、簡単に資料請求や購入ができると感じてもらう事が大切です。少ないステップで購入や資料請求ができることはユーザーにとっては大きなメリットになります。

4.限定であることを伝える

「12時まで限定」や「期間限定商品」のように【今じゃなければ得ができない・今じゃなければ買えない】ということを伝える事が大切です。ユーザーは「今度でいいや」と考えることがよくあります。
そのため「今なら今度よりも特ができるよ」「今度じゃもう買えないよ」と言う事を伝えると、今度にしようと考えていたユーザーを説得でき、コンバージョンにつながりやすくなります。

実店舗で商品を買おうか悩んでいる時、店員さんは「今はセール期間なので、いつもよりお安くお買い求めいただけます」などと、お客様に「得ができるよ」と説得します。この説得をボタンデザインにも反映させる事でコンバージョン率が高まるという事です。特に「無料」「簡単」「限定」という言葉が使える場合には積極的に取り入れてみてください。

ポイント3.ボタンに演出を加える

これまで紹介したきた2つのポイントよりも、この3つめのポイントはデザイナーの力が重要になるポイントになります。これはボタンにユーザーがクリックしたくなる演出を加えることでクリック率を高める方法です。そのため、素人だけでなく、プロのデザイナーにとっても難しいポイントになります。ポイント1と2を意識してボタンを作るだけでクリック率・コンバージョン率は十分に高まると思いますので、このポイント3はオプション程度に考えていただけると良いかと思います。

1.ボタンを立体的にさせる

出っ張った物を見ると押してみたくなる人がいるように、ボタンに立体感を持たせ押してみたくなる演出を作ることは大切です。また立体感のあるボタンはクリックすることができるという事を認識させやすくなります。

2.ボタンをロールオーバーさせる

梱包などで使うプチプチのように、押すことが楽しい・気持ちいいと思わせることが大切です。ボタンをマウスオーバーでジワーっと光らせたり、立体感のあるボタンをロールオーバーで凹ませたりする事で、気持ち良い・楽しいと感じてもらえることがあります。

3.ボタンをアニメーションさせる

子供は特にそうだと思いますが、人は動いていない物よりも、動いている物に興味を示します。そのためボタンにアニメーションで動きを与えて、ユーザーに興味を持たせることは大切です。また人は動いているものに注目しやすいので、そこにボタンがあるといういうことを認識させやすくなります。

このポイント3はデザインの質次第でクリック率に変化が現れ、デザイナーの力が問われるたいへん難しいポイントになります。人によっては「別に出っ張っていても押したいなんて思わない」という場合もあるでしょう。またプチプチに興味のない人だっていると思います。そのため、上記を試せば必ずクリック率が高まるわけではありません。また基本的にクリック率が低下することはありませんが、過剰な演出をすることでクリック率が低下することもあります。このポイント3は、それなりの経験と技術が必要になる難しいポイントとなります。

テストを重ねることが何よりも大切

冒頭で、Mozillaのテストではボタンの色を緑にしたらダウンロード数が増えたという結果を伝えましたが、だからと言ってこれが全てのサイトに当てはまるわけではありません。おそらくこの結果で緑だけが圧倒的にダウンロード数を伸ばしたのは、緑の心理効果である安心感をダウンロードを考えているユーザーに与えられたからではないかと考えられます。

ですが私が以前制作したスポーツ用品のECサイトでは、緑よりも赤のほうがコンバージョン率が高くなりました。またアダルト用品のECサイトでは赤や緑よりも紫のほうが商品の販売数が増えたと聞いたことがあります。この場合おそらく紫の心理効果である性的なものに対する想像力を高める効果や、不安を癒す効果がうまく働いたため、緑より紫のほうが販売数が増えたんじゃないでしょうか。

赤や緑が「コンバージョン率・数」を高めるためによく使われる色としては有名ですし、効果が出やすいのも確かではありますが、だからと言ってそれが全てのサイトに当てはなるとは限らないということを頭に入れておいてください。そしてできる限りテストを重ね、自分のサイトに最適な色や形・文章・演出を見つけることが大切です。

またテストを行うときに、たまにクリック率だけに注目してテストを行う方がいますが、これは間違いなのでやめましょう。クリックしてもらうことが目的ではなく、お問い合わせや資料請求などを増やすことが目的のはずです。そのため「クリック率・数」ではなく「コンバージョン率・数」に注目してテストをするようにしましょう。基本的にはクリック率が高いほうがコンバージョン数は増えますが、クリック率が高くてもコンバージョン数が低下する場合もありますからね。

では、このへんで！