状態色とは?ホバー・エラーなどUIの状態を色で伝える方法

記事内に広告が含まれています。

ボタンにカーソルを乗せると色が変わる、入力ミスをすると枠が赤くなる。こうした細かな色の変化は、ユーザーに安心感を与えるための重要な工夫です。

この記事では、状態色とは何か、そしてUIの状態を色でどう伝えればよいのかを、初心者向けに解説します。

基本の理解

まずは状態色とは何か、そしてなぜ必要なのかを押さえましょう。

状態色とは、ボタンやリンクなどのUI要素が持つさまざまな状態(通常時・ホバー時・選択中・エラー時など)ごとに割り当てる色のことです。色の変化によって、ユーザーは自分の操作(カーソルを乗せた、クリックしたなど)がきちんと画面に反映されていることを認識できます。

エラー状態などを色で示すことで、問題が起きていることに素早く気づいてもらえるという効果もあります。

見た目が常に同じままだと、ユーザーは自分の操作が反映されているのか分からず、不安になったり同じ操作を繰り返してしまったりします。特にエラーなど、ユーザーに何らかの対応を求める状態は、他の状態よりも目立つ色で伝える必要があります。

実践としては、リンクやボタンにカーソルを乗せた際(ホバー)、色を少し変化させて反応していることを示します。選択中のタブやメニュー項目には、他とは異なる色をつけて現在地を分かりやすくします。入力エラーが起きた項目は、赤系統の色で枠線やメッセージを表示し、注意を引くのが一般的です。

状態色を設計するときに陥りやすい失敗と、よくある疑問をまとめます。

エラー表示に使う赤色が、アクセントカラーなど他の目的で使っている色と被ってしまい、本当に注意すべき箇所が埋もれることがあります。エラー用の色は、他の用途と重複しないよう専用に用意しましょう。
色だけでエラーや状態を示し、文字やアイコンによる補足がないと、色を判別しにくいユーザーに伝わらないことがあります。WCAGの達成基準1.4.1「色の使用」でも、色だけに頼らず情報を伝えることが求められています。色に加えて、テキストやアイコンでも状態を伝えるようにしましょう。

Q. 状態色にはどんな種類を用意しておくべき?
A. 最低限、通常時・ホバー時・エラー時の3種類を用意しておくと、多くの場面に対応できます。加えて、選択中(アクティブ)や操作できない(無効)状態も用意すると、より丁寧なUIになります。
Q. エラー以外に、成功や注意を表す色もある?
A. 一般的に、成功は緑系統、注意・警告は黄色やオレンジ系統、エラーは赤系統が使われることが多いです。これらもアクセントカラーなど他の用途と重複しないように設計しましょう。