2019-02-19ランディングページなどの申し込みページでは、CTAボタンのデザインを少し改善するだけでも、コンバージョン率(CVR:成約率)が劇的にアップすることがあります。Action:コール・トゥ・アクション」の略で、Webサイトの訪問者に求める『行動を喚起する』ことを指す。Webサイトの目的が『申し込み』の場合は「申し込みのための案内」がCTAになります。電話をかけてもらう目的の場合は「電話番号の表記」がCTAになります。多くの場合は、《ボタン》や《リンク》の形で表現されます。《CTAボタン》はコンバージョン率を上げるための重要な要素のひとつですが、意外とおろそかになっている場合があります。心当たりがある場合は、この記事を読んでみてください。クリックされるCTAについて、完全網羅しています。リンクCTAボタンのデザイン改善でコンバージョン率を上げる7つの方法コンバージョン率を上げるためには、次の7つについて確認してみてください。目につくところにCTAボタンを配置させるコンバージョン率を上げるためには、一番目につきやすい場所にCTAを配置させることが大切です。目につかなければ、クリックするしない以前の問題ですからね。Webサイトがランディングページ(下図左側)のような1カラムのレイアウトの場合は、CTAは自然と目につくところに配置できていると思います。ブログ形式のサイト(下図右側)の場合は、コンテンツ記事や広告バナー、関連記事の紹介など、いろいろな要素の中に配置させなければいけません。この場合のCTAは、右上と記事の下の2箇所に配置させます。(左)ランディングページ型、(右)ブログ形式型また、画面をスクロールしてもCTAが表示され続ける「追尾型CTA」を設けるのもいいですね。配置の決め方は、Webサイトでの人の視線の動きを表した「Fライン・Zラインの法則」から考えます。横書きの文章を読むことを思い浮かべてもらえばわかりやすいのですが、人の視線は左上から始まり、右横へ移動して左下へ移動し、最後に右下へ向かうという傾向があります。Mobile)CTAを右上に置くのは、訪問者にはまず左側にあるメインのコンテンツを見てもらい、視線の流れで右上にあるCTAが視界に入るようにするためです。コンテンツ記事を読んでもらった直後に、さらにもう一つのCTAを配置させることで、見逃しをなくすようにします。広告のような感じで、コンテンツ記事の上部や、記事の途中にCTAを入れる方法もあります。この場合は、コンテンツの邪魔にならないように十分注意する必要があります。記事中にCTAが気になるような文章があるのなら、ためらわずに入れるようにします。CTAボタンは1つにする先ほどは2箇所に配置させると言ったのですが、CTAを1つにするというのは、「異なるCTAは1ページに複数個置かない」という意味です。人は選択肢が多いと迷いが生まれてしまうからです。迷いが生まれると思考はストップし、選択することをやめる傾向があります。何もしないでそのページを立ち去ることが起こりやすくなるんですね。人は豊富であることは好きですが、考えることは嫌いです。そのため、訪問者に求めるCTAはなるべく1つにしておくことが大切です。しても複数必要な場合は、同列に扱わずに優先順位をつけるようにします。同じページに「無料お試し」「メルマガ登録」「お問い合わせ」といった内容の違うCTAボタンがあるとしたら、このうち訪問者に求める最も重要なCTAは何なのかを、わかりやすくする必要があります。CTAボタンはなるべく1つにするただし、レベルの違うCTAボタンの場合は、同列に扱っても大丈夫です。同じ商品で「10個入り」「30個入り」といったレベルの違う選択肢がある場合は、すべてを合わせて1つのCTAとして考えることができます。注目させるデザインにするコンバージョン率を上げるためには、CTAを目につきやすい場所に配置させて、さらにCTAを注目させるデザインにすることが大切です。そのためには、周囲との余白を設けたり、色を変えたり、形を変えたり、周りの要素よりも大きくする工夫が必要です。CTAを視認しやすくする人物の写真を使って注目させるCTAボタンを注目させるためには、人の習性を利用することができます。人は人物に注目します。顔に注目する習性があります。点が3つあるだけでも人の顔に見えてしまうくらい、人は人に関心があります。木目が人の顔に見えたり、コンセントが顔に見えたりするやつですね。これは、シミュラクラ現象(類像現象)と呼ばれ、本能的に仲間を求め、敵味方を判断したり感情や行動を予測するために起こると言われています。この習性を活かして、CTAボタンを注目させるようにします。CTAに顔や目線を向けている人物の写真を近くに配置すれば、訪問者の視線をCTAに誘導することができます。CTAを指でさしている写真も、同じように視線を誘導できます。人物の写真を使ってCTAに視線を誘導する写真に使う人物は、ターゲットとする訪問者(ペルソナ)と似ている人物像の写真を使います。30代の女性をターゲットとしているのなら、30代に見える女性の写真を使います。人は無意識に、自分と似ている人や、意識している人(憧れを持っている人)に注目する性質を持っています。訪問者にとって「自分と同じ仲間」、あるいは「仲間入りしたい」と思われるような人物の写真を使うと注目されやすくなります。赤ちゃんがいる女性をターゲットにしている場合は、赤ちゃんの写真を使うと効果的です。母親は優先的に子供のことを考えるので、最も大切である赤ちゃんの写真に自然と注目します。矢印を使って注目させる人は矢印があると、その先を思わず目で追ってしまう傾向があります。手書き風の矢印を使えば、綺麗なフォント(文字)のページに違和感が生まれ、CTAボタンを注目させるデザインにできます。マンガの吹き出しを使えば、CTAボタンを擬人化させて、人が発言している印象を与えることで注目させることができます。矢印や吹き出しを使って注目させる動きを出して注目させる人は動きのあるものに注意が向きます。CTAボタンに動きをつける、大きさを変える、色を変えるといった変化をつけたデザインにすることで注目させやすくできます。変化が大きすぎたり、動きが速すぎると、コンテンツの邪魔をする場合があります。いう悪い印象を与えないように気をつけることも大切です。訪問者のニーズにあったCTAボタンにするコンバージョン率を上げるためには、訪問者のニーズにあったCTAボタンであることも大切です。Webサイトの訪問者の目的が「商品の購入」だった場合は、購入を促すCTAで問題はありません。訪問者が「もうちょっと情報を知りたい」という状態でも購入を促すCTAしかないのであれば、コンバージョン率を上げることは難しくなります。あなたの扱う商品・サービスがすでに世に広まっていて、ブランディングが構築された低額の商品であれば、訪問者は購入することにためらいは感じないと思います。あなたの扱う商品・サービスがまだ世に広まっていない新製品や、高額の商品であれば、訪問者がためらいもなく購入することは難しくなります。その場合は、「無料サンプル」や「資料請求」のオファーを用意する必要があります。訪問者のニーズに合ったCTAになっているかを、マーケティングの観点から見直すことも大切です。CTAボタンの色をテストするCTAボタンの色は、テストをして最適な色を探り当てることが大切です。CTAボタンの色についてはいろんな意見があります。「緑色がいい」「赤色がいい」「オレンジがいい」と様々な意見があります。それは、次のようなテスト結果があったためです。ダウンロード数について行ったテストでは、『緑色のボタンからのダウンロード数が他の色と比べて3倍以上多かった』という結果を発表しています。社では、『赤色の方が21%も高くなる結果が出た』と発表しています。Green色についての固有のイメージ色にはそれぞれ固有のイメージがあります。いったイメージを抱きます。街中でよく目にする信号機の緑色から「安全だから進め」という認識が生まれます。この「安心・進め」というイメージから、CTAボタンの色としては最適だという考え方があります。いったイメージを抱きます。信号機の赤色から「危険だから止まれ」という認識が生まれます。「非日常的」な色は注意を引きやすく、購買意欲を刺激するという考え方があります。コンバージョン率を上げるCTAボタンの色とは?上記のテストで注目すべきなのは、「コンバージョン率を上げる色は《緑色だった・赤色だった》」という結果ではありません。注目すべきは、「色によってコンバージョン率は大きく変わる」という事実です。テスト結果でもわかるとおり、全てのサイトで通用する絶対的な色はありません。テストをして発見することが大切です。言え、方向性としての目安はあります。色についてのイメージから、効率や安心を得られる商品・サービスのCTAには「緑色や青色」をテストしてみてください。ポジティブになれる商品やコンプレックスを解消する商品・サービスのCTAには「赤色やオレンジ色」からテストをしてみてください。目安であることは忘れないでください。経験の浅いデザイナーの場合は、全体的に整った綺麗な色合いにしてしまいがちです。全体的に青色を使っているなら、「統一感が大切だから」と、CTAボタンまで青系にしたりします。この判断は、マーケティングの知識がないことで起こります。CTAボタンに関しては、統一感は重要なポイントではありません。重要なのは、相対的に目立っていることです。トーン&マナーに従順すぎる必要はありません。言え、あまりにも下品な色使いや、Webサイトの目的に見合わない色にならないように、マーケティングやブランディングを把握してデザインをコントロールすることが大切です。クリックできることをわかりやすくするCTAボタンは、平面的なものではなく、立体的なデザインの方がコンバージョン率が上がるというケースがあります。平面の中に立体感があると、目に飛び込んできやすくなるためです。これは「ポップアウト現象」と呼ばれる、脳の生理現象のようなものです。クリックできることをクリッカブルと言います。立体的なクリッカブルは、「クリックしてみたい!」という好奇心を生みやすくしてくれます。CTAに立体感を出してわかりやすくするまた、マウスオーバー時に動きや色の変化を持たせることも、クリッカブルであることをわかりやすくします。2018-07-25Amazonで探すKindleで探すCTAボタンにアイコンをつけるボタンであることをわかりやすくするためには、アイコンをつけるという方法があります。右矢印のアイコンは「別のページに移動する」ことをわかりやすくしてくれます。人は左側から視線を移動しやすいことを考えれば、アイコンは文言の左側に配置させた方が、ボタンであることを、よりわかりやすくできます。CTAにアイコンをつけるただし、バナーとしてCTAを設置する場合は、バナーの右下にボタンのデザインを配置させて、文言の右側にアイコンを設けても大丈夫です。ラベリングやマイクロコピーを工夫するCTAボタンに書かれている文言を「ラベリング」と言い、CTAボタンのすぐ近くの文言(コピー)を「マイクロコピー」と言います。このラベリングやマイクロコピーが、コンバージョン率を上げる要素になります。クリックすると何が起きるのかをわかりやすくすること、訪問者にとってのメリットを説明することで、CTAボタンをクリックしてもらいやすくします。ラベリングやマイクロコピーのポイントをまとめると、次の5つの文章で表せます。ラベリングで目的をわかりやすくするCTAボタンのラベリングは、目的がわかりやすい文言であることが大切です。「こちらをクリック」というラベリングよりも、「無料で資料請求する」といった目的の行動をラベリングにした方が、何のためにクリックするのかがわかりやすくなります。マイクロコピーで簡単さをアピールするCTAボタンをクリックしてもらうには、マイクロコピーで簡単さをアピールすることも大切です。「会員登録する」だけのラベリングよりも、「60秒で完了します」などのマイクロコピーをつけ足した方が、簡単にできそうだということがわかりやすくなります。ハードルの低い行動であることを感じてもらうことが大切なんですね。簡単に感じるコツは、手間を数字で表します。マイクロコピーでお得感を演出するマイクロコピーは、お得感を演出する文言であることが理想的です。「カートに入れる」だけのラベリングよりも、「本日10%オフ」などとマイクロコピーでメリットをつけ足した方が、お得感を感じてもらうことができます。「◯日まで」などの限定性や、「残り◯個」という希少性を設けると、よりお得感を演出できます。訪問者目線の言葉をラベリングにするラベリングに使う文言は、訪問者目線にすることも大切です。「資料を差し上げます」という企業側からの言葉ではなく、「資料を手に入れる」という訪問者側の言葉にします。これによって訪問者は、ただの読み手から当事者へと意識が変わります。資料を手に入れる未来を想像してもらえるということですね。訪問者の行動を動詞にした話し言葉のラベリングにするCTAボタンのラベリングに使う文言は、訪問者の行動を動詞にした文言にすることも重要です。「購入」という言葉は、普段の生活の会話の中で使うことはないですよね。「あの商品を、購入、よろしく」「あの商品を、購入、よかったよ」なんて言い方はしないですもんね。普段使わない言葉は、『自分ごと』としては感じにくくなります。訪問者が『自分ごと』に感じなければ、クリックすることにも影響を与えます。これを改善するなら、「購入する」「買う」「カートに入れる」「レジに進む」のような動詞の文言にします。ターゲットである訪問者が日常的に使うような言葉であれば、さらに良いですね。リンクまとめ以上、コンバージョン率をアップさせるCTAボタンのデザイン改善方法について解説しました。コンバージョン率を上げるCTAボタンのポイントは、3つにまとめると次のとおりです。目立っていること見た目でわかりやすいこと訪問者にとってのメリットがわかることそして最も重要なのは、テストを行って最適なCTAボタンを見つけることです。CTAボタンについてあまり考えていなかったという場合には、この記事をヒントにして改善してみてください。コンバージョン率は上がります。高木浩一ゲダツニスト/心理学と脳科学が好きなマーケティング・Web集客の専門家。大企業のマジメな広告デザインから男性を欲情させるアダルティな広告デザインまで、幅広い分野を経験した元グラフィックデザイナー。心理面をカバーしたマーケティングとデザインの両方の視点をもつ。個人が個人として活躍する時代に向けて「使えるマーケティング」をモットーに情報発信中。Webサイトの成否を分けるのは、「ファーストビューのデザインでほぼ決まる」と言っても過言ではありません。聞かれることがあります。いう方は、「Webサイト=コーポレートサイト」という認識なのかもしれません。...デザイン術デザイン初心者でも簡単にプロの配色をマスターするたとえあなたがデザイン初心者でも、簡単にプロの配色に近づくテクニックを紹介します。そのテクニックとは、ずばり「トーン」と「比率」です。...デザイン術アフォーダンス理論とシグニファイア|誤解されたデザイン概念とは?たとえデザイナーじゃなくても、Webサイトやブログを運営しているなら、アフォーダンス理論とシグニファイアは知っておきたいデザインの概念です。小さな会社や個人ビジネスの方が、安易にフリーのWebデザイナーにサイト制作を依頼してしまうと、Web集客には不向きなサイトになってしまう危険があります。依頼する・問い合わせるプロフィール高木浩一Web集客のカウンセリング/個人・小規模ビジネスモデルを対象にしたマーケティング・ブランディングのコンサルティング/セールスコピーライティング代行Web集客で大切なのは「アクセス数」と「扱う言葉」と「No.1」の要素です。ご自身のWebサイトが集客できていないなら、どれが欠けているのかを探ってみてください。