約2分28秒0014異なるボタンに明快な色のコントラストをつけ、ユーザを正しい選択に導きましょう。必要なアクションがわからないような状況は、ユーザに不安を引き起こし、作業を遅らせてしまいます。それによって作業から脱線してしまうような誤ったアクションを選択させてしまうことさえあるかもしれません。情報を削除、リセットまたはブロックするモーダルウィンドウでは、よくこれらのアクションを並列させて表示します。ユーザが異なるアクションを区別するためには、ボタンの色にその役割が反映されている必要があります。ポジティブアクションに最も明るい色を使おうポジティブアクションはモーダル中で最もよく使われます。ユーザは、どの操作で作業を完了できるかを知る必要があります。そのため、すべての中で最も高い色のコントラストをポジティブアクションに与えて、識別しやすくするといいでしょう。その隣に置かれているニュートラルまたはネガティヴアクションは、色のコントラストが低くなるようにしましょう。ベストな色のコントラストを作るには、ポジティブアクションボタンを寒色系の色で塗りつぶし、中に白いテキストを使います。青、緑、紫のような寒色は、ユーザーの目を癒します。白いテキストは見やすく、通常の黒いテキストよりも目立ちます。ポジティブアクションの隣に置かれたニュートラルまたはネガティヴアクションは、塗りつぶさないように。塗りつぶしてしまうと、色のコントラストを損なってしまいます。代わりに、枠線のみを表示します。このようにして背景とブレンドさせ、ユーザの注意がポジティブアクションにのみ向けられるようにします。基本的にネガティブアクションには、ポジティブアクションよりも高いコントラストを加えないほうがいいでしょう。ポジティブアクションの方がより頻繁に選択され、安全であるため、ユーザがポジティブアクションとネガティブアクションの2つを取り間違えないようにすることが大切です。ネガティブアクションとニュートラルアクションの2つだけが隣り合う場合、ネガティブアクションにより高いコントラストを加えたほうがいいでしょう。この場合、ネガティブアクションボタンを暖色系の色で塗りつぶすといいでしょう。赤、オレンジ、黄色のような温かみのある色は、ユーザの目を刺激し、ユーザが見た際に、ボタンをクリックする前に注意して考えなければならないと思わせます。ニュートラルアクションに最も低いコントラストをモーダルウィンドウにはニュートラルアクションはありません。常にポジティブまたはネガティブアクションとの対になっています。ニュートラルアクションは、他のアクションより目立たないように、色のコントラストを低くするといいでしょう。ボタンの枠線を黒くすることで、それがニュートラルアクションであることを十分伝えることができます。塗りつぶしていないので、ポジティブまたはネガティブアクションよりも注目されることはありません。ボタンの枠線とテキストには、灰色を使わないようにしましょう。機能しないボタンだと勘違いされる恐れがあります。枠線やテキストは、背景と対比しながら目に見えるようにしましょう。最後にボタン色のコントラストが明確になればなるほど、ユーザはより早く作業を完了することができます。色はユーザーインターフェイス上重要な役割を果たします。色とは美学だけでなく、ユーザに行動を導くツールでもあるのです。▼CTAと色の関係についても学んでみませんか?こちらの記事をご参照ください。Actionを翻訳・再構成したものです。コードを追加する』で「JP20gd6nv7」を入れてください。※1000円分無料で頼めます。