デザイン

デザイン

ボタンに使うべき色とは?CTAと配色の関係について、ポイントを解説!

4,709 views

読了時間 : 約2分28秒

異なるボタンに明快な色のコントラストをつけ、ユーザを正しい選択に導きましょう。必要なアクションがわからないような状況は、ユーザに不安を引き起こし、作業を遅らせてしまいます。それによって作業から脱線してしまうような誤ったアクションを選択させてしまうことさえあるかもしれません。

 

ボタンには3種類のアクションがあります:

  1. 1.ポジティブ – 情報の変更、送信、または追加
  2. 2.ニュートラル – 変更しない、またはある画面に戻る(キャンセルなど)
  3. 3.ネガティブ – 情報を削除、リセットまたはブロックする

 

モーダルウィンドウでは、よくこれらのアクションを並列させて表示します。ユーザが異なるアクションを区別するためには、ボタンの色にその役割が反映されている必要があります。

 

 

ポジティブアクションに最も明るい色を使おう

ポジティブアクションはモーダル中で最もよく使われます。ユーザは、どの操作で作業を完了できるかを知る必要があります。そのため、すべての中で最も高い色のコントラストをポジティブアクションに与えて、識別しやすくするといいでしょう。その隣に置かれているニュートラルまたはネガティヴアクションは、色のコントラストが低くなるようにしましょう。

ベストな色のコントラストを作るには、ポジティブアクションボタンを寒色系の色で塗りつぶし、中に白いテキストを使います。青、緑、紫のような寒色は、ユーザーの目を癒します。また、白いテキストは見やすく、通常の黒いテキストよりも目立ちます。

 

ポジティブアクションの隣に置かれたニュートラルまたはネガティヴアクションは、塗りつぶさないように。塗りつぶしてしまうと、色のコントラストを損なってしまいます。代わりに、枠線のみを表示します。このようにして背景とブレンドさせ、ユーザの注意がポジティブアクションにのみ向けられるようにします。

 

 

 

ネガティブアクションに最も高いコントラストを加える場合

基本的にネガティブアクションには、ポジティブアクションよりも高いコントラストを加えないほうがいいでしょう。

ポジティブアクションの方がより頻繁に選択され、安全であるため、ユーザがポジティブアクションとネガティブアクションの2つを取り間違えないようにすることが大切です。しかし、ネガティブアクションとニュートラルアクションの2つだけが隣り合う場合、ネガティブアクションにより高いコントラストを加えたほうがいいでしょう。

この場合、ネガティブアクションボタンを暖色系の色で塗りつぶすといいでしょう。赤、オレンジ、黄色のような温かみのある色は、ユーザの目を刺激し、ユーザが見た際に、ボタンをクリックする前に注意して考えなければならないと思わせます。

 

 

 

ニュートラルアクションに最も低いコントラストを

モーダルウィンドウにはニュートラルアクションはありません。常にポジティブまたはネガティブアクションとの対になっています。ですので、ニュートラルアクションは、他のアクションより目立たないように、色のコントラストを低くするといいでしょう。

ボタンの枠線を黒くすることで、それがニュートラルアクションであることを十分伝えることができます。塗りつぶしていないので、ポジティブまたはネガティブアクションよりも注目されることはありません。

 

ボタンの枠線とテキストには、灰色を使わないようにしましょう。機能しないボタンだと勘違いされる恐れがあります。枠線やテキストは、背景と対比しながら目に見えるようにしましょう。

 

 

 

最後に

ボタン色のコントラストが明確になればなるほど、ユーザはより早く作業を完了することができます。色はユーザーインターフェイス上重要な役割を果たします。色とは美学だけでなく、ユーザに行動を導くツールでもあるのです。

 

 

▼CTAと色の関係についても学んでみませんか?こちらの記事をご参照ください。

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

 

 

 

※本記事はHow Button Color Contrast Guides Users to Actionを翻訳・再構成したものです。

【コンビニでも使える!メルペイ初回利用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: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ