エンジニアの副業におすすめのサービス11選!メリットや戦略も解説
- 【PR】
- エージェント
- クラウドソーシング
「CTA(Call To Action)ボタン」は、ユーザーの行動を促し、商品やサービスへのコンバージョンに繋げるための重要な要素です。
今回は、ユーザーをコンバージョンに導くCTAボタンの作り方、配置・テキスト・デザインのポイントをまとめました。
CTAボタンとは、Webサイト上でユーザーのクリックを促し、アクションを完遂(コンバージョン)してもらうためのボタンです。
たとえば、ホテルの予約サイトなら「予約する」ボタン、動画サービスなら「視聴する」「会員登録する」などがCTAボタンにあたります。
CTAボタンの目的はさまざまですが、主に
などの目的で設置されることが多いです。
ユーザーにとってほしいアクションを考えて、CTAボタンの配置やデザインを検討しましょう。
ここからはCTAボタンを作成するときのポイントを、
の3つに分けてご紹介します。
まずはCTAボタンの配置を考えていきます。
CTAボタンは、ユーザーに探させてはいけません。ユーザーの視線や行動に沿った位置に配置する必要があります。
一般的にCTAボタンがよく配置される場所として、以下の3つが挙げられます。
順に詳しくみていきましょう。
『Slack』のWebサイトは、2か所に「無料で試してみる」ボタンを設置しています。ひとつは最初に目に入るコンテンツの末尾、もうひとつはサイトの末尾です。
コンテンツに惹かれたユーザーをコンバージョンに繋げやすい、定番の配置です。
食料品配達サービスの『instacart』ではサイトの随所にCTAボタンを設置しています。LPなどの縦に長いページの時にこのような手法がよく用いられます。
魅力的な情報を見たユーザーが「登録・購入したい!」と感じる、その瞬間を逃さないようにしているのです。
ただし、CTAボタンを入れすぎるとクドくなるため、注意が必要です。
フリーランス・副業向けマッチングサービス『Workship』は、画面の右下にCTAボタンを固定表示しています。サイト内にはCTAボタンが複数ありますが、緑色で統一されているため、まとまった印象です。
LPのように縦に長いページや、オウンドメディアのように広いコンテンツを扱っているサイトの場合は、ユーザーがCTAボタンに到達する前に離脱してしまう可能性があります。そのためCTAボタンを固定の位置に表示しておき、ユーザーの目に常に触れるようにしておくのが有効です。
もちろんフッターではなく、ヘッダーに配置するのも有効です。『issuehunt』のLPを見てみましょう。
ページをスクロールするとヘッダーの色が変わり、CTAボタンに自然と視線が行くようになっています。
ここまでCTAの配置について考えてきました。重要なのは、サイトやアプリ全体でCTAを配置する箇所に一貫性を保つこと。あるフォームでは、右側にCTAがあり、別のフォームでは左側にあると、ユーザーがストレスを感じ離脱する要因になります。
CTAボタンのテキストやコピーを考えるときには、以下の2つを意識しましょう
「こちらをクリック」よりも、「日時を指定して予約する」「すぐに購入する」のように、ボタンを押したら何が起こるのかを具体的に説明しましょう。
なぜ。いまボタンを押すべきなのかというメリットを書きましょう。「購入する」よりも「本日中なら10%off!」といった具体的なメリットを記述するのが大切です。
もし会員登録してもらうサービスで無料期間があるなら、「会員登録する」よりも「30日間無料で体験する」の方がユーザーの登録へのハードルが下がり、コンバージョンの改善に繋がるでしょう。
テキストやコピーを考えるときには、ナッジ理論が参考になります。
ナッジ理論とは?ノーベル経済学賞を受賞した、人を操る現代の魔法
Workship MAGAZINE
CTAボタンのデザインでは、以下の4点を意識してみましょう。
スマートフォン上でも快適にCTAボタンを押してもらうためには、ボタンサイズも重要です。人の指に合わせた大きさにしましょう。
MIT Touch Labの調査によると理想的なCTAボタンのサイズは、平均的な指の大きさから考えて10mm×10mmが理想とされています。
同じ形やテキストを使用しても、CTAボタンの色を変えるだけでこれだけ印象が変わります。
与えたい印象に合わせたカラーや、コーポレートカラーを用いて、CTAボタンを作成しましょう。
しかし、赤や緑など、特定の色には、固定化された意味があるので注意が必要です。
赤はエラーなどアクションの失敗を、緑は登録完了など成功を示します。
UI/UXデザイナーのための「色」活用ガイド。色選び基礎からツール活用方法まで
Workship MAGAZINE
CTAボタンにアイコンを追加することも有効です。
人と+マークのアイコンを追加するだけで、ユーザーが「フォロー」のイメージを直感的にとらえやすくなります。
またアイコンの追加は、ボタンであることが分かりやすくなるというメリットもあります。
【商用OK/無料】シンプル&おしゃれ!フリーアイコン素材サイト25選
Workship MAGAZINE
CTAボタンの形は大きく分けて
の3種類があります。以下でそれぞれの特徴や、実際にCTAボタンが使われているWebサイトをご紹介します。
■四角いCTAボタン
いま話題の電動キックボード『Lime』。
LimeのLPでは、四角いCTAボタンを採用しています。四角いことでビビッドなグリーンがよりシャープに目立ち、ボタンが認識しやすくなります。
スタイリッシュさを出したい時に、四角いCTAボタンは有効です。
■角丸のCTAボタン
パスワード記録アプリの『forgetti』は、角丸のCTAボタンを採用しています。
角丸は日常的に触れている自然な形なため、ユーザーに親しみやすさを与えます。
またCTAボタンの角を丸くすることで、ページのグリッドから逸脱するため、ユーザーの視線を集めたり、CTAボタン内のテキストに目を向けさせたりできます。また、角丸はユーザーの目にも優しく、CTA内のテキストが理解しやすくなるという調査もあります。
■円形のCTAボタン
タスク管理サービス『sunsama』のLPは、登録ボタンとチャットボットボタンの、2種類のCTAボタンが設置されています。
チャットボットのCTAボタンを円形にし、アクセントカラーのオレンジを用いていることでCTAボタンを目立たせ、コンバージョンに繋げています。
円形のCTAボタンは目立ちますが、子どもっぽさが出てしまう可能性もあるため、サービスの特徴に合わせて形を選びましょう。
最後に、思わず押したくなるようなCTAボタンを4つご紹介します。
それぞれのWebサイトでどのような工夫がされているのか、チェックしていきましょう。
AmazonのCTAボタンは、アイコンとテキストを並べているのが特徴です。アイコンによって、CTAボタンによるアクションがぐっと分かりやすくなります。
「カートに入れる」「今すぐ買う」の2種類のCTAボタンを設置していますが、色分けとアイコンの活用で見分けやすくしているのもポイントです。
Airbnbのランディングページに設置されているCTAボタンは、Airbnbのコーポレートカラーを使い、ページのなかでもっとも目を引く場所に配置されています。
CTAボタンを角丸にすることでユーザーに親しみやすい印象を与えており、「探す」という文字にも視線が集まります。
NetflixのCTAボタンは、ビビットな赤。背景を黒一色にすることでCTAボタンを際立たせる工夫がされています。
また「30日間の無料体験を始める」とボタンに書くことで、無料で始められることを強調し、会員登録へのハードルを下げているのも特徴です。
SpotifyのWebサイトは、角の取れた丸いCTAボタンを使用しています。楽しそうでポップな印象をユーザーに与えていますね。
「プレイリストの作り方」「今すぐ登録する」という2つのCTAボタンがありますが、とくに重要な会員登録のためのCTAボタンには色をつけて強調しています。
今回はCTAボタンの作成ポイントを複数紹介しましたが、もっとも大切なのは目的に合ったCTAボタンを作成することです。
さまざまなWebサイトのCTAボタンを参考にしながら、ユーザーをコンバージョンに導くボタンデザインをぜひ考えてください。
(執筆:mattun 編集:じきるう)
UI/UXデザインにおける8つの黄金法則【ベン・シュナイダーマン氏に学ぶ】
Workship MAGAZINE
UI/UXデザインでやってしまいがちな7つの失敗
Workship MAGAZINE
ボーダーにエフェクトを追加するコードスニペット8選。CTAボタンや入力フォームなどに!
Workship MAGAZINE