CTAボタンとは? 作り方の基本・クリックしたくなるCTAボタンを解説

2021年7月24日

Webサイトのコンバージョン率を上げるために、ユーザーにクリックしてもらうために、どうCTAを改善したら良いか悩んでいませんか? CTAの典型例である「CTAボタン」について、作り方の基本から効果的なデザイン方法を解説します。

CTAボタンとは

CTAボタン(「しーてぃーえー」ボタン)とはWebサイト上の「ユーザーへ特定の行動を促すボタン」のことです。

CTA(Call To Action)は「ユーザーの行動を喚起する」という意味で、よくWebサイトで見かける「今すぐ購入」や「詳細を見る」、「新規登録」と表記されたひときわ目立つボタンは全てCTAボタンです。

CTAボタンは2つの要素から成り立っています。

  1. ボタンであることを認知させるデザイン
  2. アクションを促すフレーズ・デザイン

おおよそ2つの要素を満たしていればCTAボタンと言えますが、最近はより効果的にコンバージョン獲得へつなげるため、行動経済学や心理学の知見をデザインに反映させるなど、さらなるCTAボタンの改善が模索されています。

なぜCTAボタンが重要か

WebマーケティングにCTAボタンが重要である理由は、多くのユーザーがWebサイトをほとんど見ていないからです。

海外のコンサルティング会社Speeroの調査によると、平均的に、Webページを最後まで閲覧するユーザーは60%であり、その多くは詳細を確認せず流し読みしています。

CTAボタンはユーザーにどんな行動を起こして欲しいかを明確に、一瞬で伝えることができます。流し読みしてしまう多くのユーザーを顧客にしたいのであれば、CTAボタンの導入は必須と言えるでしょう。

作り方の基本

CTAボタンは基本的に2つの要素から行動を喚起していると言いました。

  1. ボタンであることを認知させるデザイン
  2. アクションを促すフレーズ・デザイン

以下ではそれぞれの要素に注目して、CTA ボタンの基本的な作り方を解説していきます。

ボタンであることを一目瞭然にする

CTAボタンはボタンであること、つまりクリックできることがユーザーに一目瞭然でなければいけません。

ボタンはそれだけで、人間の「押したい」という欲求を刺激することができます。クリックできることが明らかなデザインだけで、コンバージョン率アップが期待できるのです。

例えば以下のようなデザインの工夫を加えれば、簡単にボタンであることを示すことができます。

立体

影をつけ、押し込むことができると錯覚させることで、ボタンであると認知させます。このような視覚の錯覚を「錯視」と呼びます。

GENERAL ASSEMBLY
https://generalassemb.ly/

GENERAL ASSEMBLY はアメリカを中心に、専門家によるソフトウェアエンジニアリングやデータサイエンス、UXデザインなど需要の高いスキルトレーニングを個人や企業に向け提供している会社です。

画面中央の四角い赤色の「Browse Courses」(コースを探す)と「Get Started」(始めてみましょう)のCTAボタンは、Webページを訪れたユーザーにクリックできることを強調することで、アクションを促しています。

色が変化する

カーソルがボタンの上に来たとき、色を変化させることによってボタンであることを示します。

Tripadvisor
https://www.tripadvisor.com/

アメリカのオンライン旅行会社 Tripadvisor のHPでは、画面中央にある7つの四角い白いCTAボタンにカーソルを合わせると色が反転し、ボタンであることを示します。

どのボタンにカーソルがあっているか瞬時に判断できるため、複数のボタンが隣接して配置されていることによる誤クリックも防ぐことができます。

色、形をパターン化する

Webサイト上のクリックできるボタンの色を統一にしておきます。ボタンでない部分とわかりやすく区別できる色を選びましょう。

Microsoft Teams
https://www.microsoft.com/ja-jp/microsoft-teams/group-chat-software

Microsoft が提供するビジネスコミュニュケーションプラットフォームである Teams のHPでは、コンバージョンにつながる「Sign up for free」や「Learn more」が目立つように、むらさき色のCTAボタンで統一されています。すでに登録されている方向けの「Sign in」はコンバージョンに繋がらないため、白いボタンで作られています。

「Work」「Home」「School」のボタンは、それぞれの場面におけるサービスの効用を説明するページに遷移します。フレーズそれ自体や、写真の中にあることから、ボタンであるかどうかの判断が難しくなりそうですが、むらさき色が使われているためクリック可能なCTAボタンがあるとユーザーは瞬時に判断できます。

クリックすると何が起きるのか

CTAボタンをクリックすることでどんなメリットがあるか、簡潔に示すことが重要です。

Webサイト全体でコンバージョンの価値をどれだけアピールしていても、流し読みするユーザーにはボタンが何を意味しているのかわかりません。ボタンをクリック後にユーザーにどんな変化が起きるのか予測できなければ、クリックに抵抗感を抱いてしまいます。

たとえば、「ここをクリック!」とだけ書いたボタンがあったとしたらどうでしょうか。説明が不足しているため、ユーザーはクリックしてどのようなメリットがあるのか想像ができません。ほとんどのユーザーはボタンを無視します。ユーザーに、クリックしてもらうモチベーションをもってもらうには「どんな変化が起きるのか」を伝える必要があります。

CTAボタン自体や周辺のテキスト、イラストを工夫することで、ユーザーがアクションを起こす最後の「一推し」をすることができます。

簡潔なテキスト

ユーザーの理想の姿を言葉にしたり、具体的なメリットをボタンに表記します。文字数がなるべく少ない方が良く、それでも伝わるフレーズを選ぶことがポイントです。

Spotify
https://www.spotify.com/jp/

音楽ストリーミングサービスを提供するSpotifyは、画面左下の青い「3ヶ月の無料体験を開始」というCTAボタンで、3ヶ月間無料でサービスを利用できることを強調しています。

「3ヶ月」と「無料」というキーワードによって、Webページを見てサービスに興味を持ったユーザーに対し、このボタンをクリックすれば間違いなくサービスをうけられる安心感を与え、クリックのハードルを下げています。

イラスト

矢印やアイコンなどの記号や図形を用いて、何のボタンか瞬時に判断できるようにします。

mercari
https://www.mercari.com/jp/

フリーマーケットアプリを提供するメルカリのHPでは、画面右下の丸く赤いCTAボタンにカメラのアイコンが使用されています。

メルカリで出品するには、出品したい品の「写真を撮る」行為から始まります。出品したい品が近くにあるユーザーに対し「いますぐ写真を取って出品しましょう」とカメラのアイコンを用いて登録を促しています。

CTAボタンを含むCTAエリアの改善

ボタン上に情報が入り切らない場合、ボタン周辺をCTA エリアにすることで解決できます。

Slack
https://slack.com/intl/ja-jp/

Slackは、グループチャットや1対1のメッセージング、音声通話が可能なチームコミュニケーションツールです。

画面中央の「無料で試してみる」ボタン周辺のCTAエリアにある「新しい働き方へシフトしましょう」は、ボタンをクリックすることで顧客が獲得するメリットを端的に表現しており、サービス登録に迷う顧客への最後の一押しをしています。

CTAボタンをより目立たせる方法

紹介したCTAボタンの基本要素に加えて、主導線と副導線でボタンデザインを区別することで、コンバージョンアップを期待できます。

主導線とはあなたのWebサイトで最もユーザーにとって欲しい行動のことです。副導線は主導線以外にできればとって欲しい行動のことです。

ユーザーは均等に選択肢が分かれていると、選ぶことを躊躇ってしまいます。ユーザーが迷わずコンバージョンに向かって行動できるように、コンバージョンに優先順位をつけ、明確に示すことも大切です。

例えば、ボタンデザインの区別には以下の方法が使われます。

  • サイズを変える
  • 色の濃度を少し変える
  • バナーに固定する
  • 動きをつける

かもめエンジニアリング株式会社
https://kamome-e.com/

こちらのサイトの上部に注目して見ると

  • 緑色がパターンとなり「ボタンであること」を表しています。
  • それぞれのボタン内のフレーズとボタン周辺のテキストによって「クリックすると得られること」が瞬時にわかります。
  • 主導線である「詳細はこちら」のボタンは、バナーに固定され、サイトをスクロールしても常に目に入ります。さらに、ほかのボタンと差別化するように緑の補色である赤にし、「ぷるぷる」と動くアニメーションによって、ユーザーの注意を引いています。

まとめ

CTAボタンは、ボタンであること、クリックするとメリットがあることをデザインとフレーズで表現することが大切です。2つのポイントを抑えてCTA ボタンを導入すれば、コンバージョン率を高めることができます。今回解説した基本的な作り方を参考にして、効果的なCTA ボタンを作成してみてください。

CTA ボタンを作りたいけれど、難しいという場合は「ぽちっとクリック」がおすすめです。訪問者の目を引くデザインのCTAボタンを、かんたん設定ですぐ設置することができます。デザインもサイトにあわせて複数から選ぶことができます。スマートフォンやタブレットのマルチデバイスにも対応。無料登録はこちらからいただけます。

あわせて読みたい
2021年12月1日

Web広告のコンバージョンとは? 意味と専門用語(CVR、CTR、CPA)を解説

Web広告を出稿するとき、重要となるのがコンバージョン(CV)です。初心者の方にもわかりやすいように、Web広告におけるコンバージョンの基礎知識から関連ワード、具体的な改善方法まで解説します。
2021年9月23日

直帰率とは? 業界平均や改善方法、2種類の直帰率、離脱率との違いなど

アクセス解析で「直帰率」は重要な指標であるものの、何を示しているのか、改善にどのように活かせばよいのか、思いのほかわかりづらいものです。「直帰率」の業界平均がどれくらいなのか、改善方法はどのようなものがあるのか、解説します。
2021年9月5日

今さら聞けない「ランディングページ(LP)」とは? 成果の出る作り方や注意点など

「ランディングページ(LP)なんて1枚ものの、チラシみたいなものでしょう? かんたんに作れるよね」と思うかもしれません。しかし成果を出すにはノウハウがあるのです。LPとWebサイトの違いや売れるLPの作り方、LP制作の注意点などを解説します。
2021年8月13日

CVR(コンバージョン率)とは? 基礎知識から業界別平均値、改善方法を解説

CVR(コンバージョン率)は、Webマーケティングの成果を計る重要な指標の一つです。では、CVRの数字は何を意味しているのでしょうか? この記事では、基本的な定義の解説から、CVRを活用する方法まで詳しく紹介します。
2021年7月31日

コンバージョン(CV)とは? Webマーケティングにおける意味を徹底解説

Webサイトの運営をはじめると「コンバージョン」という言葉をよく耳にします。コンバージョンはWebマーケティングにおける最重要単語ですが、その意味は複雑です。コンバージョンとは何か、Webマーケティングにおける定義と重要性をわかりやすく解説します。
2021年7月31日

今さら聞けない「離脱率」とは? 直帰率との違いや改善点も解説

Webマーケティングで成果を上げるために欠かせないデータの1つが「離脱率」です。近しい概念に「直帰率」という専門用語も出てくるため、ややこしいと感じるのではないでしょうか。この記事では、離脱率の概念や計算方法、改善のポイントを解説します。
2021年7月24日

【必見】売れるランディングページ(LP)の作り方|7つの手順と5つの注意点

LP制作は大変というイメージを持たれているのではないでしょうか。しかし、一つ一つの作業は単純です。注意点を押さえながら手順を踏めば、LP制作はそこまで難しいものではありません。この記事では、LP制作の具体的な7つの手順や5つの注意点、効率化のポイントを徹底解説します。
2021年7月24日

【厳選】LP制作に役立つ無料テンプレート5選|おすすめツールも紹介

ランディングページ(LP)制作にはデザインも重要な要素。LPのデザインをゼロから考えて制作するのは、とても大変ですよね。そこで活躍するのが、テンプレートやツール。この記事では、星の数ほど存在するテンプレートの中から厳選した5つの無料テンプレート(レスポンシブデザイン)と、LP制作に役立つおすすめのツールを3つご紹介します。
2021年7月24日

【厳選】LP制作に役立つ有料サービス2選|おすすめのテンプレートも紹介

ランディングページ(LP)制作においてデザインも重要な要素。そこで活躍するのが、テンプレートや有料ツールです。この記事では、星の数ほど存在するテンプレートの中から厳選した5つのテンプレート(レスポンシブデザイン)と、LP制作に役立つおすすめの有料ツールを2つご紹介します。
2021年7月24日

【厳選】LP制作の参考になるデザインサンプルサイト3選

ランディングページ(LP)の制作案件では、クライアントの業種ではどのようなLPが好まれるか、競合がどのようなLPを出しているか、気になりますよね。この記事では、数多くのLPサンプルサイトの中から、厳選した3つのサイトをご紹介します。
2021年7月24日

CTAボタンとは? 作り方の基本・クリックしたくなるCTAボタンを解説

Webサイトのコンバージョン率を上げるために、ユーザーにクリックしてもらうために、どうCTAを改善したら良いか悩んでいませんか? CTAの典型例である「CTAボタン」について、作り方の基本から効果的なデザイン方法を解説します。
2021年7月24日

CTAとは? CTAを改善するコツを紹介

Webサイトから資料請求が来ない、ECサイトで売り上げが上がらない・・・。Webマーケティングにおいて、Webサイトの成果を高める手法のひとつが「CTAの改善」です。CTAとはどういう意味なのか、CTAを改善するコツを紹介します。