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. Webサイトのプランニングに活用できる「マインドマップ」(後編)…

    1つの主題から関連するキーワードやイメージを放射状に書き出していくことによって、複雑な概念や情報を分…

  3. 誰でも簡単にインフォグラフィックを作成できる無料ツール

    数値とイラスト、図形、グラフなどを組み合わせビジュアル化することによって、複雑な情報も直感的に伝える…

  4. クリック率19倍UPの事例も。Facebookも活用しているパー…

    閲覧履歴や購入履歴をベースとして、1人1人のユーザーにあわせたコンテンツを配信するパーソナライズは動…

  5. 観光や教育関連のサービスとも相性抜群のバーチャルリアリティ(VR…

    Youtubeなどの動画配信プラットフォームに加え、無料の動画素材や編集アプリなども身近になったいま…

  6. EFO(入力フォーム最適化)に役立つ、無料で使えるjQueryプ…

    ECサイトだけでなく、会員登録やアンケート、問い合わせなど、多くのWebサイトに設置されている入力フ…

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

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

  8. Webサイトをより洗練された印象に。海外のWebサイトで人気の合…

    「合字」とは2つ以上の文字を組み合わせて1つの文字として表現したもの。例えば、「AND」を「&」と表…

PICKUP

PAGE TOP