menu

ユーザーを適切に導くCTAボタンの3つのパーツと、デザインのポイント

制作

予約や購入の起点となるCTA(コール・トゥ・アクション)ボタンは、コンテンツや入力フォームと並んでWebサイトおける重要な要素です。どんなに質の高いコンテンツを用意しても、CTAボタンが埋もれてしまえばアクションにつながらず、Webサイトで具体的な成果をあげることはできません。

多くの場合、CTAボタンは「文字」と、矢印などの「アイコン」、「背景」(クリッカブルな囲み部分)の3つのパーツで構成されます。ユーザーにCTAボタンを分かりやすく示し、アクションを起こさせるためにはそれぞれどんな点を意識して制作すればいいのでしょうか?

・文字部分はサイズにひと工夫
「購入する」、「問い合わせはこちら」といったCTAボタンの文字。目立たせようとするあまりつい大きくしてしまいがちですが、機能をひと目で伝えるためにも、文字サイズには気を配りたいものです。

効果的な文字サイズの目安としては、文字の高さ(タテ方向)が背景の30%程度、幅(横方向)が背景の60%程度。ユーザーの目を引くためには、やはり適度な余白が必要です。Webサイトのレイアウトにもよりますが、これ以上大きくても小さくても、情報は伝わりにくくなります。

・位置が変われば印象が大きく変わるアイコン
文字とあわせて、矢印などのボタンもCTAボタンの大切な要素です。現在ではWebデザイン全体のトレンドを汲んで、ハイライトやシャドウを使わないフラットデザイン風のアイコンが主流になっています。ユーザーをスムーズに誘導する意味でも過度な装飾は避け、シンプルにまとめるのがいいでしょう。

一般的な矢印型アイコンの場合、文字の左側に設置すると、「入る」(=より具体的な情報が掲載された下層ページへ移る)という印象を与え、右側だと「移動する」(=外部ページや別途設けられた入力フォームに遷移する)イメージを与えると言われています。

ボタンをクリックすると別ウィンドウでページが開く場合などは、アイコンを右側に設けた方がユーザーのイメージとマッチし、スムーズな印象を与えられるかもしれません。

・背景部分はちょっとしたアクセントも効果的
制作会社によっては「座布団」などと呼ばれたりすることもある、CTAボタンの背景部分(クリッカブル部分)。アイコンと同様に現在はフラットデザイン調のシンプルものが主流ですが、テキスト量が多めのページなどでは、四隅に丸みを持たせたり、若干のハイライトを入れたり、過度にならない範囲でアクセントを加えることによって、存在感を与えることもできます。

Web制作に関するご依頼、ご相談、お見積はこちら

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

Amazonでもおなじみのレコメンデーション。4つのタイプと導入方法

Webサイトの運用で起こりがちな3つのトラブル&対応方法について

関連記事

  1. キービジュアル・広告制作に役立てたい、絵画・アート作品のコレクシ…

    Webサイトのキービジュアルや広告のクリエイティブを制作する際は、歴史的な名画やアート作品に目を向け…

  2. 有力キュレーションマガジンも導入。スマホの動画視聴にマッチしたタ…

    バーチャルリアリティ(VR)やオーグメンテッドリアリティ(AR)と並び、新しい動画コンテンツのトレン…

  3. コントラストやトーン&マナーを工夫してさらに効果を高める、バナー…

    動画などさまざまなメディアが発達した今でも、Webサイトにおけるバナーの重要性に変わりはありません。…

  4. フラットデザイン化に使える無料アイコンのダウンロードサイト

    ページの表示速度アップやレスポンシブ対応、アピールしたい要素を強調できることなど、さまざまなメリット…

  5. 上手く使って確認やオペレーションの手間を軽減。Google Ch…

    ソースの修正や検索キーワードのピックアップ・確認など、何かと細かい作業がつきもののWebディレクター…

  6. Photoshopの編集作業をより快適にする、ショートカットキー…

    メインの画像編集ソフトとしてPhotoshopを使っている場合、初期設定のカスタマイズとあわせて使い…

  7. SNSとも相性抜群。心理テスト系コンテンツの3つの特徴・効果とは…

    会員登録や資料請求を目的とする各種ポータルサイトや結婚情報サイト、占いサイトなどでは、ユーザーが手軽…

  8. 短時間で効果的なバナーを作成するために押さえておきたい3つのポイ…

    インターネット黎明期から業種・目的を問わずあらゆるWebサイトで使われてきたバナー。動画やSNSをは…

PICKUP

PAGE TOP