すべて強調したところ、どこを押すべきかわかりません。

この画面でお問い合わせボタンはどれですか

4つのボタンがそれぞれ異なる色で立っています。青いお問い合わせ、緑の詳細を見る、黄色の価格チェック、ピンクイベントの申し込み。画面は4箇所で同時に 「ここを押してください」と言っていて、訪問者はどこを押すべきか画面ではなく自分で探さなければなりません。

重要なことごとに色を一つずつ与えたからです。イベントも強調したい、価格も強調したい、お問い合わせも押せたかったです。

最初から9犬を選んだ人はいません

再現画面一つを開いて色を数えてみると9個が出ます。ロゴ、お問い合わせボタン、補助ボタン、カード頭3本、イベントバッジ、相談リンク、会社紹介リンクです。 9犬を選んだのではなく、 バナーひとつ バッジひとつつく度に色が一つずつついてきた結果です。

この画面は実際の顧客会社ではなく、一般的な構成を模した製作画面です。

数を数える前に役割から決めます

色をいくつに減らすかを決めるのは、順序が変わったことです。まず、各色が何をするのかを決めます。

色がいくつでなければならないというルールを与えるわけではありません。 この映像のパレットも4つあり、その中で強調が一つです。重要なのは、数ではなく、強調が一箇所だという点です。

ハイライトの上の文字はコントラストを再度選びます

強調色を決めたら、その上に上げる文字色が残ります。目で均等にしないでコントラストを作ってください。 WCAG 2.1 の相対輝度式で計算するとこうなります。

同じブランド色をそのままにして文字色だけを変えても通過することが多いです。ただし、この値は上記の組み合わせに対するものです。大きな文字やアイコン、非アクティブな要素は基準が異なるため、実際の画面で再度表示する必要があります。

今日やるべきことは色を減らすことではありません

画面を開いて 最も重要なボタンを一つ選んでください。 その後、その色が塗られた別の場所から色を引きます。トップイベントバナー、価格強調バッジ、本体内の補助ボタンのような席です。罫線だけ残しても十分読めます。

残りの強調色が一箇所だけあればそこが押されます。個数はその後に自然にまとめられます。

BlueCanvasのランディングページを開いてみます。含める項目と予想金額は模擬見積画面で確認できます。