デザイン

デザイン

デザインでコンバージョン率を高める!CTAボタン・デザインの注意点

3,700 views

読了時間 : 約2分32秒

ユーザのコンバージョンの最も直接の媒介になるのは、言うまでもなくCTAのボタンです。

このボタンのデザイン如何によって、コンバージョン率が大きく違ってくることが知られています。

ボタンという要素だけに絞ったとき、効率のよいボタンとはどんなものでしょうか。

本記事では、CTAボタンデザインの基本を紹介します。

 

 

ボタンのUXを考える

 

GmailのUXを見てみましょう。

1-457QctR-_EHnN4uV_7zizQ

下の方に青い送信ボタンがあるのにお気づきでしょうか。

この場合、このボタンで重要な役割を果たしているのは「送信」という文字ではなく、ボタンの色と位置です。

アプリ版の送信ボタンには「送信」という文字はなく、青い紙飛行機のアイコンになっていますが、いずれにせよユーザが一目でCTAのトリガーとして認識できるようになっているのです。

1-DO1EOP1AqPbQwuaRhxpyfg

 

 

ボタンでユーザの目を引く方法

 

科学的に立証された色彩心理学とデザインの法則を組み合わせることによって、効果的なCTAボタンをデザインすることができます。

 

・位置

ユーザの目を引くにはボタンの位置を計算する必要があります。CTAボタンに気付いて反応してもらうために目立ちやすい場所を選びましょう。

 

・明確なメッセージ(モバイルデバイスの場合はアイコン)

動詞(買う、ダウンロードする、見る、など)を使うとユーザに具体的なアクションを促すことができます。また、ユーザとの信頼関係を築くために、アクションをとるとどんなメリットがあるのかを伝えましょう。

 

・形

丸いボタンよりも四角形のボタンがおすすめです。

 

・大きさ

周りのエレメントとの大きさの対比が重要です。大きければ大きいほど重要なエレメントということになるので、ボタンの役割の重さを考えて適切に設定しましょう。

 

・色

ユーザの心理に働きかけるため、色は非常に重要な要素です。周囲とのコントラストを大きくするのがおすすめです。

 

・別の選択肢も提示する

時にはユーザに別の選択詩を提示したほうが、後々CTAにつながりやすくなる場合があります。

 

 

色彩心理学を活用する

 

色によって特定の感情を引き出したり、相手に与える印象を変えたりすることができます。

いくつか例を挙げると、

・赤:権力、情熱、愛、ネガティブ

・緑:成長、お金、環境、ポジティブ

・青:信頼、平和、誠実、安全、ポジティブ

・黒:フォーマルさ、ラグジュアリー、洗練、ニュートラル

・グレー:使用できない

・茶色:アウトドア、食べ物、大地

・オレンジ:自身、明るさ、親しみやすさ

・紫:ロイヤリティ、ミステリアス、スピリチュアルな

 

もう一つ重要になってくるのがコントラストです!

例えば、比較的大きなボタンには周りのエレメントや背景とのコントラストを抑えた色を、比較的小さなボタンには明るい色を使うのがおすすめです。

全体のデザインに干渉しないように注意しながら、目につきやすいボタンをつくることを意識しましょう。ボタンのコピーの色もよく考えて選んでくださいね。

悪い例:

1-OMd4wCjFoAyu9q92fEcn9w

良い例:

1-IHMQ2fOZmYTNfGwdYLlNkA

 

 

ボタンのデザインのコツ

 

最後に私が実際にプロジェクトでボタンをデザインする際に気を付けていたことを紹介します。

まず、4つのフィーリングを象徴する色をそれぞれ確認しました。

 

・ポジティブ(保存、送信、ダウンロード):青や緑

・ネガティブ(削除、ブロック、リセット):赤

・ニュートラル(詳しくみる、別の選択肢の提示):黒

・使用できない:グレー

 

背景が白いと、これまで挙げてきた色彩やコントラストの効果を実感しやすいかと思います。

0-8DNcQtz6ieV6GK2t-

隣り合うボタンのコントラストが似ていると、ユーザはどこを見ればよいのか分からなくなります。

色はユーザのアクションとUXを左右する重要な要素なのです。

 

 

以上は、コンバージョン率を改善するシンプルな方法です。

ぜひ実践してみてください。

 

 

※本記事は、Best Practices for 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: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ