非活性ボタンの「色」について考える

デザインチームがお届けするブログリレーです。
現在弊社では「テーマ別ブログリレー」を開催しています。
デザインチームの投稿はこちらの記事一覧からご覧いただけます。

はじめに

みなさんは「非活性」（無効）ボタンを作成するとき、どのような色にしていますか。
一般的には「グレー」か「半透明」の2つがよく使われます。

私自身も理由を深く考えずにグレーを選んでいましたが、その理由を問われても「なんとなく非活性っぽいから」としか答えられませんでした。

非活性ボタンについてのブログ。グレーのボタンと半透明のボタン。

しかし、この「なんとなく」には明確な根拠がありません。
「なぜそのデザインにしたのか」を自分の言葉で説明することが大切です。

そこで今回は、「グレー」と「半透明」のどちらがより非活性ボタンに適しているのかを検討しました。
結論としては、「半透明がより適している」と感じたので、その理由を紹介します。

ボタンには、操作状況に応じたさまざまな状態があります。
一般的に使用されるボタンの状態を紹介します。

非活性ボタンについてのブログ。ボタンの状態3パターン。通常、押下、活性、フォーカス、非活性の5種類。

「現在このボタンは無効なのでクリックできない」ことをユーザーに伝える役割を持ちます。
つまり「パッと見て操作不能であること」が自然に伝わる必要があります。

視覚的な存在感を薄められる
「クリックできそう」に見えるデザインは避けたいので、目立たないボタンが望ましいです。
半透明（不透明度を下げる）にすることで、自然と視線が向きにくくなり、「押せない」という印象を与えることができます。
不透明度の目安は40%以下が良いと考えます。
グレーは「非活性」以外の目的でも多用されており、他のボタンと混同される可能性がある
「キャンセル」「戻る」や優先度の低いボタンのような「非活性以外」の状態でも使われることがあります。
実際にサイトの例を挙げて紹介します。

非活性ボタンについてのブログ。Backlog モーダルの「キャンセル」ボタン
「キャンセル」ボタンの背景色：● #e5e5e5

非活性ボタンについてのブログ。Slackのメッセージのプラスボタン
「＋」ボタンの背景色：● #f4f4f4

非活性ボタンについてのブログ。AppleのMacのページにあるスライダー。
矢印の背景色：● #d2d2d7

非活性ボタンについてのブログ。Figmaのヘッダー。
ボタンの背景色：● #f5f5f5

非活性ボタンについてのブログ。Notionのサイトの切り替えタブ。
タブの背景色：● #f5f5f5

非活性ボタンについてのブログ。Nintendoサイトのフッター。
「サイトマップ」ボタンの背景色：● #e6e6e6

非活性ボタンについてのブログ。ニンテンドーミュージアムのサイト。
「くわしくはこちら」ボタンの背景色：● #f1f1f3

私が思っていたよりも、グレーのボタンが「非活性以外」の状態で使われていることが分かりました。

なお最近では「ボタンを非活性にするのではなく、押せない理由をメッセージで明記するのが望ましい」という考え方が広まっています。
たしかにエラーメッセージがあると、ユーザーは解決策が分かりやすいですね。

ただし、「非活性ボタンを使うべきではない」というわけではなく、状況によっては効果的な場合もあるので、本記事では「非活性ボタンのデザイン」に絞って考察しました。

本記事では、「非活性ボタンの色として半透明がより適している」という結論になりました。