コンバージョン率の高いCTAボタンの8つの特徴

[8 Characteristics of High-Converting CTA Buttons](https://www.crazyegg.com/blog/high-converting-cta-buttons/)から学んだことを日本語で記述しました。

# 前提
## CTAとは何か
- CTA(Call-to-Action)とはユーザーに何をして欲しいかを伝えるテキストを指します
    - CTAボタンというのは `ログインする` `カートに入れる` `今すぐ購入` のようなボタンを指します
        - ユーザーにログイン操作や、購入操作を促すボタンです


## なぜCTAが重要なのか？
- CTAはコンバージョンに影響するから
    - CTAがコンバージョンとバウンスの分かれ目になる

# コンバージョン率の高いCTAボタンの8つの特徴

## 1. ボタンであること。
- クリエイティビティは、CTAのコピーなど、サイトの他の部分で発揮してください。
- 特徴
    - 形や枠が決まっている。
    - 周囲と異なる色である。
    - テキストが表示されている。
    - 長方形である必要はないが、通常は長方形である。角を丸めたり、角を削ったり、影をつけたりすることもありますが、どれもボタンであることを目立たなくする効果があるので、まったく問題ありません。
- 理由
    - ユーザーがそれに慣れているから
        - ユーザーが探しやすいから
        - 混乱させないから
- CTAボタンは、そのページが何をすべきページなのかを示している
    - アカウントを作る
    - 購入する
    - メールマガジンに登録する
    - 無料で使ってみる
- これが目立つ、ユーザーにとってわかりやすい、ということが重要


## 2. 説得力のあるコピー。動詞を使用する。
- 理想は、「送信」以外の動詞を使うことです。
- ユーザーがクリックするかどうかを決定するのは、そのコピーです。
- 限られたスペースで、なぜそのボタンをクリックする必要があるのかをユーザーに伝える必要があります。そのスペースを使って、ユーザーがアクションを起こしたときに何が期待できるかを正確に伝える必要があります。
- 文言にこだわりすぎる必要はない
- CTAのコピーを比較的短くすることも重要です
    - シンプルで読みやすく即座に判断できるものがよい
- 効果的なことばは以下のようなもの; これらの動詞はいずれも行動を意味し、読者にとって明確な利益をもたらすからです。
    - Start
    - Stop
    - Build
    - Join
    - Learn
    - Discover
- [行動を促すのに効果的であるとされている言葉](http://www.guilamuir.com/the-12-most-persuasive-words-in-the-english-language/)
    - You
    - Easy
    - Guarantee
    - Save
    - New
    - Proven
    - Results
    - Free

## 3. 論理的な配置であること。視線はジャンプではなく、経路をたどって移動します。
- CTAは目に留まる場所に設置しましょう。
- [動線が長くサイズが小さいとユーザーが到達しにくい](https://webdesign.tutsplus.com/articles/applying-fitts-law-to-mobile-interface-design--webdesign-6919)
- ユーザーの視線の流れを意識する
- ボタンの配置を決めるにはA/Bテストが有効で、時間をかける価値はある

## 4. コントラストの強い色を使っている
- あまり時間をかけずにさまざまな色を試してみて、ページ上の他の要素からボタンが目立つようにしましょう。
- 色はそこまで重要ではない
- 目立たなければならないので、他の要素とコントラストがあることは重要

## 5. 直前のアクションに近い位置にある
- CTAボタンにユーザーを誘導するために、ユーザーのアクション（画面スクロール等）の流れにCTAボタンを配置するようにします。
ユーザーの認知・視覚の流れに配置することになります。

## 6. 他のアクションと競合させない
- コンバージョンを実現するためにはCTAボタンが最もわかりやすく、注意を引く要素である事が大事。
- 他の要素はコンバージョンを直接生み出すものではないので、CTAよりも目立たせてはいけない。

## 7. 一人称を使う
- `View Your Dashboard` ではなく `View My Dashboard` とする
    - `my trial`, `my guide` 等を使う。`マイページ`というのと同様でしょうか。
- ユーザーファーストの意識をもってユーザーとコミュニケーションをとるのが重要である。（これが Your ではなく Myとする理由になるということが私には理解できていないですが）

## 8. とても具体的にする
- ユーザーへのオファーを具体的に書く
    - `104件の取引` というように書く

## ABテストをする
- **最終的には検証しつづけることでしかコンバージョンを増加させられない**
- この記事で書いたすべてのことをテストすべき
- コンバージョンを向上させる要素が見つかったらまたテストをする
- 施策、結果、意思決定、そして次の施策、というように改善サイクルを回すのがよい
- そうすることで長期的にコンバージョンと収益を増加させることができる


# 良いCTAについてのまとめ

1. **ボタンであること**。クリエイティビティは、CTAのコピーなど、サイトの他の部分で発揮してください。
1. **説得力のあるコピー**。動詞を使用する。理想は、「送信」以外の動詞を使うことです。
1. **論理的な配置であること**。視線はジャンプではなく、経路をたどって移動します。CTAは目に留まる場所に設置しましょう。
1. **コントラストの強い色を使っている**。あまり時間をかけずにさまざまな色を試してみて、ページ上の他の要素からボタンが目立つようにしましょう。
1. **直前のアクションに近い位置にある**。心とポインターは、共生関係にあります。ユーザーの認知・視覚の流れに直接入り込むことで、あなたのCTAはその一部となります。
1. **他要素と競合させない**。CTAを他の重要度の低いアクションと競合させることで、コンバージョンを失わないようにしましょう。CTAは、ランディングページの明確な焦点であるべきなのです。


# 参考リンク
## 良いCTAボタンについて、ざっと目を通しておきたいもの
- [How to create call-to-action buttons: 60+ amazing CTA examples to supercharge your marketing efforts](https://www.gosquared.com/blog/call-to-action-buttons)


## その他重要なもの
- [A Step-by-Step Guide to Creating the Best Call to Action for Conversions](https://www.crazyegg.com/blog/best-call-to-action/)
- [21 Captivating Call to Action Examples to Steal](https://www.crazyegg.com/blog/call-to-action-examples/)
- [When is a Click More Important than a Purchase?](https://marketingexperiments.com/email-marketing/when-is-a-click-more-important-than-a-purchase)
- [6 Of My All-Time Favorite Conversion Rate Optimization Case Studies](https://www.crazyegg.com/blog/conversion-rate-optimization-case-studies/)
- [Increase Clicks with these 12 Call-to-Action Phrases](https://www.crazyegg.com/blog/call-to-action-phrases/)
- [Applying Fitts’ Law To Mobile Interface Design](https://webdesign.tutsplus.com/articles/applying-fitts-law-to-mobile-interface-design--webdesign-6919)
- [How to do A/B Testing and Improve Your Conversions Quickly](https://www.crazyegg.com/blog/ab-testing/)
- [Your Step-by-Step Guide to A/B Testing with Google Optimize](https://www.crazyegg.com/blog/ab-testing-google-analytics/)
- [Do Your Pages Talk TO Customers or AT Customers? Why the subtle shift in message makes all the difference](https://marketingexperiments.com/conversion-marketing/talk-to-customers-not-at)
- [Landing Page Optimization: Best Practices, Tips, and Tools](https://www.crazyegg.com/blog/landing-page-optimization/)