2018-08-27TweetPocketまず結論からお話すると、CTA改善のポイントは、「いかに目を留まらせて、脳に負担なく解釈させて、動物としての本能レベルでダイレクトに脳に訴求できて、行動喚起から実際に行動するまでの流れをスムーズにさせることができるか」です。上流である「注目」から下流の「行動」までの流れが滞りなくいけるよう治水工事を進めていくことが、CTAを工夫することによるCVR改善の施策となるのです。CTAボタンの活用範囲は広く、HTML/CSSで実装できるので、簡単に改善インパクトを出しやすいです。インタラクティブなウェブだからこそ、いかに行動を引き起こせるかが重要なポイントとなります。それでは、詳しく解説していきます。「行動喚起」という意味です。サイトやアプリの訪問者にとってもらいたい行動に誘導するため、ボタンなどのかたちで表示されます。旅行であれば「予約」など、目的とするゴールにたどり着いてもらうためのボタンとなることが多いです。業界や訪問者の属性によって異なったり、ランディングページなどの全体とのバランスもありますが、効果的な施策を打っていくうえで、難しい知識がなくてもすぐに真似できて試せるようなアイデアを中心に紹介したいと思います。「寄付」よりも「寄付する」ただの名詞だと、訪問者の頭のなかで名詞から動詞への置き換え作業が発生してしまうため、脳に負担がかかってしまい、行動をスムーズに引き起こしにくくなってしまうかもしれません。そのため、解釈がストレートな「動詞」の表現の方が、訪問者にとって行動を引き起こしやすいです。2行動ハードルを下げる文言に変えてみるさきほどの「名詞→動詞」の変換を、さらに改良する方法があります。それは、行動ハードルを下げる文言にすることです。「応募する」を「応募してみる」だったり、「まずは応募する」といった「気軽さ」を演出に表現にするとよいかもしれません。表現を加えてもよいでしょう。3直感的にボタンのアクションの意味が読み取れるようアイコンを加えてみる三角(▷)や矢印(→)がよくつかわれます。向きは右が多いですかね。「寄付してみる」は「寄付してみる→」といった感じになり、「次にページがある」ことを表現でき、アクションを引き起こしやすくなります。これらテキストの改善は、マイクロコピーライティングとも呼ばれます。色の工夫1ボタンの色を変えてみるオバマ元大統領の選挙キャンペーンの緑色のボタンの例が有名かと思いますが、行動喚起において色が果たす役割が大きいです。言われるのが「赤」は興奮、「青」は冷静などあり、この色が心理的に及ぼす影響は本当に大きいです。書かれており、たしかに合うかもしれません。このような寄付といった能動的なアクションを求めるCTAにおいては、寒色系よりかは中間色や暖色系が行動喚起には適しているかなと思います。青などの寒色系は、入力内容にミスがないかどうか冷静になって考えるなど、重要な意思決定を必要とする申込みや登録に関する向いている印象があります。オレンジなどの暖色系、とくに赤色は「血」を連想させるためか、訪問者のテンションや体温を少しあげたり、情動を引き起こしやすく、結果的に行動を引き起こしやすいと思います。興味のある方は、「色彩心理学」で検索されてみるとよいです。形の工夫1ボタンを立体的にしてみるただの枠をつけたデザインではなく、グラデーションや影を表現して、よりボタンっぽくすることで、埋もれずに、目に留まるデザインにすることができます。「押せる感」を演出することで、訪問者にとって「背景」とならずに、シンプルに「これを押すか、スルーするか」の選択を迫ることができます。一方で、このボタン感が行き過ぎると、過度なプロモーションと同じように、避けられてしまったり、ボタンをクリック(タップ)する際に心理的障壁をつくってしまうことにもつながる可能性があるので、A/Bテストで結果を見てみるとよいかと思います。2ボタンをフラットにしてみるさきほどの立体的にしてみると真逆ですが、このボタン感が行き過ぎると、過度なプロモーションと同じように、避けられてしまったり、ボタンをクリック(タップ)する際に心理的障壁をつくってしまうことにもつながる可能性があるので、フラットデザインにした方がいい場合もあるため、この項目も加えてみました。良く使われるポイントとしては、セカンダリCTAとしてさりげなくアピールする場合です。フラットデザインの注意点としては、「それがボタン(リンク)なのかどうか」と識別されない(シグナルとして検知してもらえない)と背景や絵として認識されてしまうことです。そのため、フラットデザインを採用するならば、まわりのデザインやCTAの文言を工夫して引き立たせる必要があります。することで、「そこをタップすることができる」と認識させることができます。「いいね!して最新情報を受け取る」など、選択肢がたくさんあったら迷ってしまって、かえって行動につながらないように、CTAボタンを密集して配置してしまわないように注意が必要です。優先順位とメリハリをつけて、とくに導きたいページへのCTAを設置するとよいです。2ヘッダーやフッター固定で表示させてみるCTAボタンをユーザーの視野に常に入れることで、スクロールしても流れずに、行動したいと1ミリでも思ったその瞬間にもCTAボタンを見せることができるため、より行動につなげやすい配置となります。ユーザーの態度や行動が変わるマイクロモーメントを捉え、瞬間瞬間の変化をしっかりと行動につなげていただくための、重要なおもてなしの設計とも言えます。バイラルメディアでソーシャルボタンがフッター固定で設置されることが多いのは、この理由と推測しています。フローレンスのこちらの寄付ページも、フッター固定で「活動を支援する」ボタンを出していますね。ワードプレスのプラグインでも簡単に導入できますので、やってみてもいい施策だと思います。背景色をつけてみたり、CTAボタンの上下にコピーを設置して行動をより促す方法があります。一度CTAについてまとめると、「いかに目を留まらせて、脳に負担なく解釈させて、動物レベル・本能レベルでダイレクトに脳に訴求できて、行動喚起から実際に行動するまでの流れをスムーズにさせることができるか」です。ページやサイト全体のなかで最適化させて、理想の仕組み・仕掛けを作り上げていくことになるのです。NPOの分野では、継続的な事業運営のために、「寄付」のことで頭を悩ませる場面が多いと思います。そのようなときに、ウェブマーケティングの世界にある「CTA」という概念をしっかりとおさえて施策を打っていくことで、寄付率が何倍にもなったり、スタッフ採用への応募がたくさん集まったりと、打開できる一手となれるかもしれません。事業の目標とするコンバージョンを増やすためのCTA改善については、ほかにも工夫・技・テクニックはたくさんありますが、すぐ実践できそうな簡単なUI改善レベルでまとめてみました。ご参考になれば幸いです。事例はこちらの本がおすすめです。・A/Bテストの教科書CTA改善がうまくいかない人は、こういう記事も書いているので参考になさってみてください。NPOのためのSEO対策のポイントまとめ初の書籍が出ます2020年3月3日に初の著書『1億人のSNSマーケティング』が出版予定です。