デザイン

デザイン

CTA(行動喚起)ボタンの「ベタなデザイン」を知ろう!あなたはボタンをどう作っている?

4,150 views

読了時間 : 約2分5秒

ちょっと見渡すだけでも私たちの身の回り(物理的な)には数々のボタンがあります。エレベータの「▲▼」ボタン、キーボード、食券機、電灯スイッチ……

 

こうして見るとボタンはユーザーの「行動を喚起する(Call To Action=CTA)」という役割を担っていることを改めて再認識させられますが、それはWebサイト上のボタンでも同じです。つまり「問い合わせ/登録/決済/申し込み/ユーザー情報の送信」などのユーザーの行動を喚起するCTAボタンのことです。

 

大半のビジネス用Webサイトの根本的な目的は、なんらかのユーザーの行動を促すことにあります。「CTAボタンまでユーザーを連れて行き、CTAボタンをクリックしてもらう」がそうしたWebサイトのゴールになります。

 

そこでこのCTAボタンについて「平均的なCTAボタン像」を調査したレポートがありましたのでご紹介します。こちらのレポートはあくまでも、「HTMLメールにおけるCTAボタン」を調査したものですが、「Web上のCTAボタン」をデザインする際にも数々のヒントを与えてくれるのではないでしょうか。

 

(※こちらの調査は、「ReallyGoodEmails」に掲載されているすべての企業のEメールからCTAボタンを収集したものです)

 

CTAボタンの「Height(高さ)」

1-ohZI3ANqoqf9ZzaH458Z_A

 

・CTAボタンの「Height」の全体平均は47.9pixel

(※WebサイトのCTAボタンで高さ47.9pixelのボタンは小さすぎる印象ですが、HTMLメールはスマホに送られることを前提にしており、スマホ表示時のサイズとしてご参考ください)

 

・最も高さが低かったCTAボタンは20pixel

Appleは高さ44pixel以上をCTAボタンのスマートフォン上のタッチポイントとして推奨していますが、それを下回るCTAボタンも結構存在するようです。

 

・最も高さがあったCTAボタンは119pixel

 

CTAボタンの「カラー」

1 TWpkvcZgACsMjHzCBtlj3A

・48%の企業がCTAボタンを自社のロゴと同じ色に合わせている(ロゴがモノトーンでない場合)

 

・「青色」が最もCTAボタンに使われる色で、「茶色」が最も使われない色

 

 

CTAボタンの「カタチ」

 

・CTAボタンの54%は角丸ボタン

 

・90度の角をしたボタンは28%の使用率

 

・円柱形のCTAボタンは18%の使用率だったが、昨年の調査よりも上がっているためトレンドになりつつある?

 

 

CTAボタンの文字数

1-ll7CVU8k2TR9efIZaSixTg

・CTAボタンに記載される文字数の平均は14文字(※これは半角英数の文字数、日本語全角なら7文字程度?)

 

・もっとも文字数が少なかったCTAボタンは3文字(「YES」ボタン)

 

・もっとも文字数が多かったCTAボタンは66文字

これはさすがにちょっと長すぎますね。

 

 

こうしたある意味CTAボタンの「ベタな表現」を知ることで、あえて「ベタ」を外してみたり、あるいは同じ「ベタ」でもちょっとしたアレンジの勘どころをつかめるものです。

 

自分がデザインしているCTAボタンはベタなのか、尖っているのか?参考にされてみてはいかがでしょうか?

 

 

(※本稿は「Everything You Wanted to Know About Email CTA Buttons」を参考にしています)

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:1000円分
※さらにメルペイスマート払で2000円分ポイント!
 友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

期間中の金・土限定でd払い利用で最大20%のdポイント還元中!
■エントリー期間:2020/2/29(土)23:59 まで
■キャンペーン期間:2020/2/24/(月)23:59 まで

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

以下のリンクから『プロモーション コードを追加する』で「JP20gd6nv7」を入れてください。初回利用が2000円オフになります!
※プロモコードは日本国内でのみ利用可能

 

2000円オフで登録» »当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber

Uber

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ