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サイトにひと味加えたい時に役立つ、イラスト&ピクトグラム素…

    一般的にWebサイトに掲載する写真は具体性や専門性が大切と言われています。たしかに企業のオウンドメデ…

  2. ファイルをコンパクトにして表示速度をUP。JavaScript/…

    スマートフォンやタブレットの普及によってコミュニケーションのスピードが早まるなか、Webページに表示…

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

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

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

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

  5. フォントひとつでバナーの印象は変わるー。訴求ポイント別のバナーの…

    スマートフォンが普及して時間・場所を問わずWebサイトに接触できるようになったいま、多くのユーザーが…

  6. ユーザーに声をヒントにWebサイトを改善。手軽に利用できるアンケ…

    Webサイトの効果を示すデータは大きく2つに分けられます。1つはアクセス数やクリック率(CTR)、コ…

  7. 認知科学によって利便性を追求。Googleが推奨する「マテリアル…

    無料でダウンロードできるアイコンやフォント、ベクター素材などを上手く利用しながらデザインやレイアウト…

  8. 再生回数230万回。参考にしたいブランディング動画Android…

    Webサイトの制作・リニューアルに明確な目的に設定が必要になるのと同じように、動画コンテンツを活用す…

PICKUP

PAGE TOP