Pocket

まず結論からお話すると、CTA改善のポイントは、「いかに目を留まらせて、脳に負担なく解釈させて、動物としての本能レベルでダイレクトに脳に訴求できて、行動喚起から実際に行動するまでの流れをスムーズにさせることができるか」です。

上流である「注目」から下流の「行動」までの流れが滞りなくいけるよう治水工事を進めていくことが、CTAを工夫することによるCVR改善の施策となるのです。

CTAボタンの活用範囲は広く、HTML/CSSで実装できるので、簡単に改善インパクトを出しやすいです。

インタラクティブなウェブだからこそ、いかに行動を引き起こせるかが重要なポイントとなります。

それでは、詳しく解説していきます。

CTAとは

CTAとは「Call To Action」の略で、 「行動喚起」という意味です。

サイトやアプリの訪問者にとってもらいたい行動に誘導するため、ボタンなどのかたちで表示されます。

ネット通販だったら「商品購入」

不動産であれば「内覧申込み」

旅行であれば「予約」

など、目的とするゴールにたどり着いてもらうためのボタンとなることが多いです。

もちろん業界や訪問者の属性によって異なったり、ランディングページなどの全体とのバランスもありますが、効果的な施策を打っていくうえで、難しい知識がなくてもすぐに真似できて試せるようなアイデアを中心に紹介したいと思います。

 

文字の工夫

①CTAは名詞ではなく動詞にする

「ダウンロード」よりも「ダウンロードする」

「応募」よりも「応募する」

「寄付」よりも「寄付する」

ただの名詞だと、訪問者の頭のなかで名詞から動詞への置き換え作業が発生してしまうため、脳に負担がかかってしまい、行動をスムーズに引き起こしにくくなってしまうかもしれません。そのため、解釈がストレートな「動詞」の表現の方が、訪問者にとって行動を引き起こしやすいです。

②行動ハードルを下げる文言に変えてみる

さきほどの「名詞→動詞」の変換を、さらに改良する方法があります。

それは、行動ハードルを下げる文言にすることです。

例としては、

「応募する」を「応募してみる」だったり、「まずは応募する」といった「気軽さ」を演出に表現にするとよいかもしれません。

ほかにも、「今すぐ購入」のような切迫感や、希少性や限定感、重要感、無料、簡単などの表現を加えてもよいでしょう。

③直感的にボタンのアクションの意味が読み取れるようアイコンを加えてみる

三角(▷)や矢印(→)がよくつかわれます。向きは右が多いですかね。

「応募する」は「応募する > 」

「寄付してみる」は「寄付してみる→」

といった感じになり、「次にページがある」ことを表現でき、アクションを引き起こしやすくなります。

これらテキストの改善は、マイクロコピーライティングとも呼ばれます。

色の工夫

①ボタンの色を変えてみる

オバマ元大統領の選挙キャンペーンの緑色のボタンの例が有名かと思いますが、行動喚起において色が果たす役割が大きいです。

よく言われるのが「赤」は興奮、「青」は冷静などあり、この色が心理的に及ぼす影響は本当に大きいです。

もはや教科書的な事例となったオバマ元大統領の選挙キャンペーンの例の緑色については、上記に記事によれば「平和」「平等」「公平」「安全」とも書かれており、たしかに合うかもしれません。

このような寄付といった能動的なアクションを求めるCTAにおいては、寒色系よりかは中間色や暖色系が行動喚起には適しているかなと思います。

青などの寒色系は、入力内容にミスがないかどうか冷静になって考えるなど、重要な意思決定を必要とする申込みや登録に関する向いている印象があります。

オレンジなどの暖色系、とくに赤色は「血」を連想させるためか、訪問者のテンションや体温を少しあげたり、情動を引き起こしやすく、結果的に行動を引き起こしやすいと思います。興味のある方は、「色彩心理学」で検索されてみるとよいです。

 

形の工夫

①ボタンを立体的にしてみる

ただの枠をつけたデザインではなく、グラデーションや影を表現して、よりボタンっぽくすることで、埋もれずに、目に留まるデザインにすることができます。

「押せる感」を演出することで、訪問者にとって「背景」とならずに、シンプルに「これを押すか、スルーするか」の選択を迫ることができます。

一方で、このボタン感が行き過ぎると、過度なプロモーションと同じように、避けられてしまったり、ボタンをクリック(タップ)する際に心理的障壁をつくってしまうことにもつながる可能性があるので、A/Bテストで結果を見てみるとよいかと思います。

 

②ボタンをフラットにしてみる

さきほどの立体的にしてみると真逆ですが、

このボタン感が行き過ぎると、過度なプロモーションと同じように、避けられてしまったり、ボタンをクリック(タップ)する際に心理的障壁をつくってしまうことにもつながる可能性がある

ので、フラットデザインにした方がいい場合もあるため、この項目も加えてみました。

良く使われるポイントとしては、セカンダリCTAとしてさりげなくアピールする場合です。

しかし、フラットデザインの注意点としては、「それがボタン(リンク)なのかどうか」と識別されない(シグナルとして検知してもらえない)と背景や絵として認識されてしまうことです。

そのため、フラットデザインを採用するならば、まわりのデザインやCTAの文言を工夫して引き立たせる必要があります。そうすることで、「そこをタップすることができる」と認識させることができます。

 

配置の工夫

①周囲にたくさんのCTAを置かない

例えば、

「メンバー募集に応募する」

「寄付して支援する」

「メルマガに登録する」

「もっと読む」

「いいね!して最新情報を受け取る」

など、選択肢がたくさんあったら迷ってしまって、かえって行動につながらないように、CTAボタンを密集して配置してしまわないように注意が必要です。

優先順位とメリハリをつけて、とくに導きたいページへのCTAを設置するとよいです。

 

②ヘッダーやフッター固定で表示させてみる

CTAボタンをユーザーの視野に常に入れることで、スクロールしても流れずに、行動したいと1ミリでも思ったその瞬間にもCTAボタンを見せることができるため、より行動につなげやすい配置となります。

ユーザーの態度や行動が変わるマイクロモーメントを捉え、瞬間瞬間の変化をしっかりと行動につなげていただくための、重要なおもてなしの設計とも言えます。

バイラルメディアでソーシャルボタンがフッター固定で設置されることが多いのは、この理由と推測しています。

 

フローレンスのこちらの寄付ページも、フッター固定で「活動を支援する」ボタンを出していますね。

ワードプレスのプラグインでも簡単に導入できますので、やってみてもいい施策だと思います。

 

周囲の工夫

背景色をつけてみたり、CTAボタンの上下にコピーを設置して行動をより促す方法があります。

 

まとめ

CTAボタンの改善アイデアをまとめますと、「文字」「色」「形」「配置」「周囲」の5つです。

そして、もう一度CTAについてまとめると、「いかに目を留まらせて、脳に負担なく解釈させて、動物レベル・本能レベルでダイレクトに脳に訴求できて、行動喚起から実際に行動するまでの流れをスムーズにさせることができるか」です。

そのための「文字」「色」「形」「配置」「周囲」をページやサイト全体のなかで最適化させて、理想の仕組み・仕掛けを作り上げていくことになるのです。

例えばNPOの分野では、継続的な事業運営のために、「寄付」のことで頭を悩ませる場面が多いと思います。

そのようなときに、ウェブマーケティングの世界にある「CTA」という概念をしっかりとおさえて施策を打っていくことで、寄付率が何倍にもなったり、スタッフ採用への応募がたくさん集まったりと、打開できる一手となれるかもしれません。

事業の目標とするコンバージョンを増やすためのCTA改善については、ほかにも工夫・技・テクニックはたくさんありますが、すぐ実践できそうな簡単なUI改善レベルでまとめてみました。ご参考になれば幸いです。

事例はこちらの本がおすすめです。
2万回のA/Bテストからわかった 支持されるWebデザイン事例集
A/Bテストの教科書

CTA改善がうまくいかない人は、こういう記事も書いているので参考になさってみてください。

A/Bテストが上手くいかないなら、「ユーザーの知覚」を制せよ
Webユーザビリティ改善の「ビール3杯理論」とは

Pocket

カテゴリー: