セマンティックカラー

定義

セマンティックカラーとは、色そのものに決まった「意味」を持たせて使う色のことです。緑は成功や 完了、黄色やオレンジは注意や警告、赤はエラーや危険、青は案内や情報、というように色と意味を ペアにしておきます。このペアは信号機や道路標識のように、長い時間をかけて社会全体に積み重なった 文化的な習慣から来ているので、ユーザーは文字を読む前に、色を見ただけでおおよその状態の 見当をつけます。つまりセマンティックカラーは、ブランドの好みで選ぶ色ではなく、ユーザーとすでに 交わしてある約束を守るための色なのです。

なぜ重要か

これらの色が大切なのは、ユーザーが画面の状態をとても素早く把握する助けになるからです。フォームを 送信したときに赤いメッセージが出れば何かが間違っていると、緑のバッジが見えれば無事に処理された のだと、ユーザーは文字を読む前に一瞬で理解します。もしエラーを緑で、成功を赤で塗ってしまうと、 ユーザーは毎回立ち止まって文字を読み直さなければならず、習慣に逆らった画面は不安で信頼しにくく 感じられます。セマンティックカラーを一貫して守ることは、製品全体で状態表現の共通言語を作る作業 であり、ユーザーの学習負担を大きく減らします。ある画面で覚えた色の意味が別の画面でもそのまま 通じるので、ユーザーは新しい機能に出会っても、すでに知っているルールで状態を読み取れるように なります。

よくある間違い

• 色ひとつだけで意味を伝えてしまうことです。赤い枠線だけでエラーを示すと、色覚に多様性のある ユーザーは、それが正常な状態と何が違うのかを区別できません。色はあくまで意味を補助するもので あり、色だけがすべてを担ってはいけません。
• 状態の色をブランドの色と混ぜて使うことです。ブランドが緑だからといって、成功バッジも完了通知も すべて緑で塗ると、いざ状態を区別すべき場面で色が何の合図も出せなくなります。状態の色とブランドの 色は役割が違うので、互いに重ならないよう分けておく必要があります。
• 習慣を無視して新しい色のペアを勝手に決めてしまうことです。エラーを青に、成功を紫に変えると 個性的に見えるかもしれませんが、ユーザーが一生かけて身につけてきた合図とずれてしまい、毎回 意味を覚え直す負担を強いることになります。

実務のヒント

• 色だけで意味を伝えず、必ずアイコンとテキストを一緒に使いましょう。エラーには赤色と一緒に警告 アイコン、そして何が間違っているかを説明する文言を添えれば、色が見えない状況でも意味がきちんと 伝わります。これがアクセシビリティの基本です。
• 成功・注意・エラー・情報という四つの意味の色を、最初に確定してトークンとして定義しておきましょう。 チーム全体が同じ値を参照すれば、画面ごとに状態の色がばらばらになる事態を防げます。
• 状態の色にも、明るい背景用と濃い文字用の段階を一緒に用意しておきましょう。背景と文字に同じ原色を 使うと、コントラストが崩れたり派手になりすぎたりしがちです。

関連概念