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. 外注 or 自社制作?バナー制作会社を利用する場合のメリット&デ…

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

  2. Webサイトに動画コンテンツを取り入れるメリット&実際の制作費

    Youtubeをはじめとした動画配信プラットフォームが普及し、スマートフォンで場所・時間を問わず動画…

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

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

  4. マンネリ化したWebデザインから脱却したい時は注目。心理学におけ…

    制作したWebページの効果が伸び悩んでいる時や、何となくマンネリ化した印象を拭えない時などは、行動心…

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

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

  6. Webサイトのプランニングに活用できる「マインドマップ」(前編)…

    ユーザービリティ向上やコンバージョン率改善など、Webサイト制作の目的はさまざまです。目的を実現する…

  7. ランディングページ制作に携わるなら知っておきたい、行動心理学の4…

    訪問したユーザーを納得させ、具体的なアクションに導くことが求められるランディングページ制作。Webデ…

  8. CTRが約300%UPしたオウンドメディアも。SNSシェアボタン…

    多くのWebサイトに設置されているFacebookやTwitterといったSNSのシェアボタン。ペー…

PICKUP

PAGE TOP