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. 月間ユーザー1億人以上のサービスも。Webディレクターが知ってお…

    世界中で10億人以上の人に利用されているSNS。Webサイトも分野を問わずSNSからの流入が増えてお…

  2. 外注 or 自社制作?バナー制作会社を利用する場合のメリット&デ…

    的確な制作手順をふまえたうえで、自社の商材やブランドイメージに合わせてレイアウトやフォントを工夫する…

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

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

  4. 時間による変化やこだわりの制作過程を数十秒で見せる、タイムラプス…

    インフォグラフィックと並んで、よりスピーディーに分かりやすく情報を伝えるWebマーケティングの手法と…

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

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

  6. 意外と知られていない?業務効率アップに役立つGoogle Chr…

    2016年に利用者数でInternet Explorerを上回り、ブラウザ利用シェアで世界1位に躍り…

  7. 購買率が1.68倍UP。ECサイトに取り入れたい「短め」デモンス…

    企業のメッセージやブランドの価値観を伝えるブランディング動画とあわせて、動画マーケティングに取り組む…

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

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

PICKUP

PAGE TOP