こんにちは、ASUE通信編集部です！

今回は「CVを捕りに行く！LPデザイン道場」第三弾として、「こんなCTAが効果を出してきた！ターゲットの関心をガシ掴むノウハウとは」をお届けいたします。

デザキ

これまで業種やターゲット層を問わず、100本以上のLPを制作してきたWebデザイナー。
「見た目の美しさ」以上に「効果を出すためのデザイン」に注力している。
アイキャッチのイラストはちゃんと自分で描いてます。

それでは、よろしくお願いします！

CTAってなーに！

前回のキービジュアルに関する記事はご覧いただけましたでしょうか？覚えている人も覚えていない人も！今回は予告通りCTA周りの話です。何かいい感じに前置きを書きたいのはヤマヤマなんですが、特にネタも無いのでサクッと行きましょう。

CTAとは「Call to Action」の略称で、日本語に訳すと「行動喚起」と言うそうです。＼へぇ／
この「行動」とはターゲットにさせたい行動を指していて、LPでよくあるのは問い合わせや資料請求、見積もりなど、第一回の時に言っていた「売る」と表現していたものにあたります。
つまりCTAで促す「行動」とはCVと同義であり、「LPを作る理由」や「LPを運営する目的のひとつ」になると言っても過言ではありません。

LPに限らず「Web上で使えるサービス」には大体CTAがあるので、ノウハウについても様々な記事がネット上で読めます…が。ざっと目を通した限りではUI設計寄りというか「THE・Webデザイン！」というものがかなりの割合を占めています。

LPのCTAは流入が広告からというのもあり、機械的な設計よりもやや「人間が認識する」方向にサポートする必要があります。その辺の詳しい話ができればと思いますので、お付き合いいただければ幸いです。

CTAは「CVする理由を促進する」＆「CVしない理由を潰す」パート

CTAと言えばシンプルに見出しとボタンを設置して…、という印象が強い方もいらっしゃるかもしれません。

とても勿体ない。
とても勿体ないです。
もっかい言っときますね、とても勿体ないです。

CTAというのは上で説明したように、ターゲットの行動にダイレクトに関わるものです。当たり前のことを言うようですが、ターゲットがボタンに関心を持ってる間はCTAエリアは必ず目に入っています。目に入っている＝認識されやすい状態であるのに、それをシンプルな見出しとボタンで終わらせたら勿体ないんです。
ここでターゲットの背中を押してCVに一歩踏み出してもらうために、策を講じる必要があります。

そこで何をするのかと言うと、「CVする理由を促進」して、「CVしない理由を潰す」んです。これらとCTAボタン、見出しを合わせてひとつのコンテンツとして構築してしまうといい感じのCTAになります。

以下に具体例をあげておきますので、ご査収ください。

期間限定のキャンペーンやサンプルの配布なんかは分かりやすいですが、商品やサービスによってはそういった特典が付けられない場合もあります。重機のレンタルとかね。「LPからお問い合わせいただいたらレンタル料10%OFF！」とかもできるかもしれませんが、それはさておき。
そういう特典を用意できない場合は、上で挙げた候補の一番下にある「自信のある訴求」「競合より勝ってるスペック」を、CTA内で改めて提示するんです。具体的な候補は「訴求したいけどキービジュアルに入れる程じゃなかった部分」から抜粋すると良いでしょう。
「お問い合わせにはすぐ返答します」という旨のマイクロコピーを入れるだけでも、見出しとボタンだけをポンと置くよりは100倍良いです。大袈裟な表現じゃなく、ホントに一文追加してCV率がハネ上がった実例もあるんですよ。

LPに流入があるということは、ターゲットは元々LPで扱っている商品・サービスに興味があるはずなんです。
「CVする理由の促進」とは、商品を買う・契約することで得られるターゲットの利点+αであり、「CVしない理由を潰す」とは、CVしないと損をするかもしれないと提示することです。

身近な例ですと、スーパーのチラシは分かりやすく「CVしない理由を潰す」ことを目的にしてますね。
水曜日だけ生鮮食品15%OFF！となると、水曜以外に買ってしまったら15%分損することになるんです。毎日食べる食品くらいの価格なら気にしない方もいらっしゃるかもしれません。
それでは車ならどうでしょう？大物家電は？不動産は？
消費税率が8%に上がる直前、高価な買い物をする人が急増したのは有名な話ですが、各企業もその流れに乗っかっていました。あれも「CVしない理由を潰す」のを目的とした訴求のひとつです。

もちろん、LPで提示した誘いに乗るかどうかはターゲット次第です。LPやECサイトの訴求に強制力はありません。食いつく場合もあれば、そっけなくあしらわれる場合もあります。

ですが、それらの魅力を提示するかしないかで、CVに大きく差が出るのは確かです。

CTAはLP内で一番目立たせるべき

さて、いくら魅力的なCTAの構想があるからと言っても、まずターゲットの目につかないことには話になりません。
ゆえに、LPの中でCTAを一番目立たせるんです。

前回の記事を見た方は「ちょっと待てや！一番大事なのはキービジュアルって言ってたじゃん！」と思うかもしれません。合ってます。
一番大事なのはキービジュアルですが、一番目立たせるべきなのはCTAなんです。一見矛盾しそうなこの方針、実はそこまで苦労せず両立させることができます。

デザインの分野に明るい方はピンと来るかもしれませんが、そうでないと想像だけで補うにはちょっと厳しいと思うので具体例を出してみましょう。かなり乱暴に言ってしまえば、下図の通りCTA部分を真っ先に目につくようにデザインするのがCTAの鉄則です。
はいドン！

具体的に押さえておくポイントは「背景色や装飾を工夫する」「CTAボタンは大きすぎるかも？と思うくらいのサイズにする」です。
ただ、あまりわざとらしく目立たせても白々しく思われてしまうので、周囲のコンテンツや全体のテイストを損なわないよう、加減をしなければなりません。
こちらの意図をあからさまに全面に押し出してしまうと、ターゲットは離れてしまいます。
例えて言うなら映画やドラマで「ほらここ泣き所ですよ！いい話でしょ！？感動するでしょ～！！」という意図がバレバレの演出を見せられると、白けてしまうのと同じです。アレね、テンションだだ下がりますよね。やりすぎにはくれぐれもご注意ください。
LP全体がミニマルでシンプルなイメージなら、ボタンだけ目立たせるのもアリでしょう。

個人的には以下のように基準を設けています。

そして目立たせる理由は、前述の通り「ターゲットの目に入れるため」です。
具体的には、LPの内容を流し読みされてもCTAの位置を意識できる程度には目立たせなければなりません。

そうなんです、ターゲットは初見でLPの隅々までなんて読んでくれません。細かい文字で4行以上のテキストがあったら、ほぼ確実に読み飛ばされると思ってください。
前回お伝えしたキービジュアルの条件をクリアしていても同様です。

だからCTAは一番目立たせてターゲットの注意・興味を引く必要があるんです。

「それなら追従型のCTAが良いんじゃない？」

それは危険です。アレですよね、スクロールしても消えずにずっと画面の定位置に表示されるヤツですよね。やめておいた方が良いです。
CTAは目立つと同時に、「きちんとユーザーに認識され」「好ましいと思われる」デザインである必要があります。

例えば見出しにも書いている、一見目立つし効果がありそうな「追従型CTA」。
スクロールしても消えずにずっと画面の端っことか定位置に表示されることから一見効果的なように見えますが、一番「認識」されないものなんです。

「やってみなきゃ分からん」というのは確かにその通りですが、既に何度かやって結果が出てるんです。
散々なものでした。無惨なものでした。無様なものでした。
言葉遊びはさて置いて。

視界には入っているけど全くと言っていいほど、ターゲットに意識されていません。PCでもスマホでも同様に結果は芳しくありませんでした。どうしてこうなった…。

これは憶測なのですが、固定されていつでも視界に入っていることで逆に「得るべき情報としての優先度」を、無意識的に下げてしまっている＝意識しないのではないかと思われます。
もちろんどういう理由でCTAボタンを押さないのか、そういう趣旨のテストでもしない限り、理由を言語化してわざわざ物申すユーザーはほぼいないので、あくまで仮説です。

制作側からすれば他のコンテンツの影響を受けない＆他のコンテンツに与える影響が最小限なので、保守性は上がり運用テストが捗るので採用しがちな追従型CTAですが、それはあくまでLPを作った側の都合による利点です。ターゲットからすれば知ったこっちゃありません。

そして他のコンテンツの影響を受けないというのは「CTAだけ孤立している」とも言えます。
ターゲットがコンテンツを見ていく流れがある中、その流れを切ってまでわざわざCTAの方に意識を向けるでしょうか？
ブログサービスのサイドバーやWebサイトでよく見るグローバルナビゲーションと同じです。視界には入っているけれども、認識はされていないんです。

ご自身の経験に置き換えてみてください。
noteで気になった記事を楽しく読んでいる時に、わざわざ中断してヘッダーの方に目を向けますか？
恐らくそれと同じことが起きているんじゃないでしょうか。

以前、toCのサービスを運営している会社の担当者さんから「自社のLPで追従型CTAに変更したらクリック率が激減した」というお話を聞いたことがあります。実際に過去自分が携わったLPでも同じようなことがありました。
わざわざ効果の出ない追従型CTAにして画面幅を狭める＝表示できる情報を制限するくらいなら、コンテンツの合間に挟むようにしてCTAを設置する方がよっぽど有用です。

スマホで表示させた場合の挙動・レイアウトはどうでしょう。
画面の一番下に追従型のCTAボタンを設置していませんか？
これが結果を出せない理由はもっと簡単です。あの位置は怪しい＆鬱陶しい広告の定位置なんです。
ネットで情報収集をする方なら、漏れなく「タップしようとした所に興味の無い広告が出現して誤タップしてしまった」という経験があるのでは無いでしょうか。私はあります。アレをやらかしたら修羅になります。

「いや、あの位置にあると親指が近いからいつでもタップを促すことができて～…」

わかります。そう論じたくなる気持ちもわかります。
UI設計やUX関連の情報・書籍の話を統合すると、自ずとそういう話が出ますよね。わかります。私も出しました。そして失敗しました。
結果は散々なんです。無惨なんです。無様なんです。あの位置は鬱陶しい広告の定位置なんです。つまり最初から好感度がマイナス状態で、無意識的に見ないようにしている人がいても何らおかしくないんです。

LPのCTAは流入が広告からというのもあり、機械的な設計よりもやや「人間が認識する」方向にサポートする必要があります。つまりLPに流入する前からターゲットの認識や考え方、行動も加味してデザインを作らなければなりません。
広告の誤タップもそうですし、利用者数が多いツールのUI設計がどうなっているのか、どんな情報がどの部分にあるのか、普段はどういったUIや機能に慣れ親しんでいるのか。
LPデザインにおいては、そのトレンドをあえて踏み外すバランス感覚も必要になります。しかし独自性を追求しすぎては、ターゲットの理解を得られずこちらにも利点がありません。

良い点も悪い点も含めた「あるある」を考慮した上でデザインをするのが、「売れるデザイン」の必修項目です。良いと思った所は多いに参考にしましょう、そして悪い・不便だと思った所を真似てはなりません。
先人の敷いた道を悠々と歩きましょう。オリジナリティを発揮すべきはデザインではなく、もっと前の企画や構成の段階です。

ターゲットはあなたの作ったLPだけを見ている訳ではありません。
ゆえに作る側も自分のLPだけを見ていると、思わぬ落とし穴にハマって抜け出せないことが多々あります。

CTAの「Action」は何が起きる場所なのか？

デザイン系の記事で言うのも何なのですが、どれだけCTAのデザインを工夫しても、何が起こるか分からないボタンをターゲットは押しません。ターゲットに不快感を抱かせないことも大事ですが、一番大事なのは「CTAボタンを押すと何が起こるのかを明示しておくこと」です。
具体的にはCTAボタンのテキスト、あるいはボタン周辺の情報で「このボタンを押すと何が起きるのか」をターゲットに明確に知らせる必要があります。
Webサービスの利用に慣れ親しんだ方なら「こういう物は大体こういう流れで～…」と心得があるのですが、もちろんそうでない方もいらっしゃいます。ネットのセオリーに疎い方でも問題なく、不安にさせることなくサービスを利用できるようサポートするのが我々の仕事です。そこを怠ってはいけません。

例えばお問い合わせを獲得する目的のLPを作った時に、CTAボタンのテキストが「お問い合わせ」だけだとお問い合わせをして何を得られるのかが明確化されていません。
キャンペーンや特典等と紐付けて「お問い合わせをして特典をゲットする」「お問い合わせで特別資料をダウンロードする」といった風に、ターゲットの利点や目的に沿ったテキストを設定するだけで効果が格段に上がった、というのは珍しい話ではありません。

あるいはこういった特典を設けられない場合でも「まずはメールで相談してみる」や「○日以内に返信します」という風に、「何をどうするのか」「何が起こるのか」をターゲットの視点から、具体的に分かりやすく示すことが信頼感を得る上で大切なんです。たかが数文字、されど数文字です。
LPに限らずWebサイトやECサイト、SNSなどネットでのコミュニケーションは基本的に一方通行になりがちなものです。たとえ本質的には同じことを言っていたとしても、言葉の選び方や言い回しひとつで印象がかなり左右されます。CTAボタンのテキストも同じで、手を抜いてはいけない大事な要素のひとつです。

そうなんです、CTAに限らずデザインを凝る前にまずは中身やコンテンツ、内容に注力するのが第一に注力すべき事なんです。
前述のボタンテキストも同じ事ですね。ターゲットは制作サイドが思うほどチョロくありません。

デザインは0を1にする力は持っていません。ですが40を95にする力は持っています。なのでまず40までは地力で頑張らなければなりません。
地力というは商品のスペックの事ではなく、マーケティング戦略の軸を指します。
軸が整っていない、もしくはブレさせてしまうと、どれだけ素敵なデザインのLPを作ったとしても、成果は40で止まってしまいます。

お待ちかねの実践タイム

さて、それでは実践タイムです。
前回のキービジュアル同様、百聞は一見にしかずということで「じゃあお前はどういう風にCTAを作るのか」という所を解説して行けたらと思います。もう少々お付き合いいただけたら幸いです。

せっかくなので前回の非実在キービジュアルの設定を使い回していきます。
使い回していきます！だってせっかく設定作ったし！！

toC向け商品のCTAデザイン例

前回の「1日中パンプスを履くことが多い20〜40代社会人女性をターゲットにした手ごろな価格のセミオーダーパンプス」をもとに作ったCTAデザインがこちらです。
キービジュアルや通常コンテンツとのバランスにも注視してご覧ください。

デザインのポイント・注意点や意図についてもまとめてみました。

toB商品のCTAデザイン例

「デスクワークの単純作業を効率化したい中間管理職をターゲットにしたRPAツール」をもとに作ったCTAデザインがこちらです。
こちらもキービジュアルや通常コンテンツとのバランスにご注目ください。

こちらもデザインのポイント・注意点や意図についてまとめました。

そして、せっかくなのでASUE用のCTAも…お披露目させてもらっていいですか…。ごめんなさいね手前味噌で…。
LPとコーポレートサイトは、そもそも公開している目的が違うのでCTAの仕様も異なります。ASUEのサイトにあるCTAをLP風にアレンジするとこんな感じになります。

Webデザインでは「F型レイアウト」「Z型レイアウト」という、要素を配置する上でのセオリーがありますが、CTA内部に限定してもこの辺りのノウハウは活かせます。CTAボタンがある都合上、Z型レイアウトで最後にボタンを押してもらうように誘導するのがベターです。もちろん、それに限らない手法だってあります。
キービジュアルの時と同様、視線誘導や基本的なノウハウ、人間の心理的な部分を大いに活用して活用して活用しまくって、ターゲットの目に留めてください。

これが数字を出せるCTA作りの、最初の一歩です。