非活性ボタンに「グレー」は最適？　〜ボタンの色について考える〜

# はじめに

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

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

![yuki_2505_ translucent.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/469c46f5-a717-4f59-8c34-a0cb751da99b.png)

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

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

# ボタンの状態

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

- **通常（Default）**：操作可能な状態  
- **押下（Hover）**：マウスでホバーしたときの状態  
- **活性（Active）**：ボタンがクリックされているときの状態  
- **フォーカス（Focus）**：キーボードでフォーカスが当たっている状態  
- **非活性（Disabled）**：クリックできない無効の状態  

![yuki_2505_blog_button_status_type.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/8bf5468f-42df-42cd-bf25-7d46b3d96f43.png)

## 非活性ボタンの役割

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

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

## グレーのボタンが使われているサイト

### 例1） Backlog | モーダルの「キャンセル」ボタン
![yuki_2505_backlog_modal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/6ea3c39b-ae15-4acd-8c00-0bd272083861.png)
「キャンセル」ボタンの背景色：<font color="#e5e5e5">●</font> #e5e5e5

### 例2） Slack | メッセージの「＋」ボタン
![yuki_2505_slack01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/765416fc-68aa-480a-a720-959f2e90a869.png)
「＋」ボタンの背景色：<font color="#f4f4f4">●</font> #f4f4f4

### 例3） Apple（Mac） | スライダーの矢印
[https://www.apple.com/jp/mac/](URL "https://www.apple.com/jp/mac/")

![yuki_2505_apple_mac.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/06b787ce-ae0c-4d58-8539-fc4868d6ec4f.png)
矢印の背景色：<span style="#d2d2d7">●</span> #d2d2d7

### 例4） Figma | ヘッダーのボタン
[https://www.figma.com/](URL "https://www.figma.com/")

![yuki_2505_figma.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/a4147733-6a44-41f0-8485-bfa3befdd138.png)
ボタンの背景色：<span color="#f5f5f5">●</span> #f5f5f5

### 例5） Notion | 切り替えタブのボタン
[https://www.notion.com/ja](URL "https://www.notion.com/ja")

![yuki_2505_notion.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/345b0aa1-8099-40e4-9e16-860e61609ca6.png)
タブの背景色：<span color="#f5f5f5">●</span> #f5f5f5

### 例6） Nintendo | フッターの「サイトマップ」
[https://www.nintendo.com/jp/index.html](URL "https://www.nintendo.com/jp/index.html")

![yuki_2505_nintendo_footer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/866a710a-48e6-43c9-a847-012dbf3c6747.png)
「サイトマップ」ボタンの背景色：<span color="#e6e6e6">●</span> #e6e6e6

### 例7） Nintendo Museum | 「くわしくはこちら」ボタン
[https://museum.nintendo.com/index.html](URL "https://museum.nintendo.com/index.html")

![yuki_2505_nintendo_museum.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1104075/2c3aa76a-8092-44d3-9616-028d395fc984.png)
「くわしくはこちら」ボタンの背景色：<span color="#f1f1f3">●</span> #f1f1f3

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

## 注意書き： 非活性ボタンを使わないという選択肢

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

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

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

- グレーは他の用途（キャンセル、戻る、低優先ボタンなど）でも使用されており、非活性の状態を表すとは限らない。  
- 半透明のボタンは元のスタイル（色、サイズ、テキスト、エフェクトなど）を保ちつつ、非活性の状態であることが目で見て分かりやすい。  
- 背景に溶け込み、目立たないデザインにするために不透明度は40%以下（opacity: 0.4）が望ましい。  
- ボタンの役割を明確にし、役割に応じた適切なデザインを選択する。  
- 闇雲に非活性のボタンだけを使うのではなく、状況に応じて「押せない理由」を明記したメッセージがあるとより良い。  

# 引用

- [ボタンのインタラクティブな側面（ステート）をきちんとデザインする | アドビUX道場 #UXDojo](https://blog.adobe.com/jp/publish/2020/08/03/cc-web-designing-interactive-buttons-states)
- [UXデザイナーから学ぶ、無効状態のボタンをグレーアウトにしない理由 | コリス](https://coliss.com/articles/build-websites/operation/work/why-you-shouldnt-gray-out-disabled-buttons.html)
- [デザイナーが集まってボタンについて話し合ってみた | クラスメソッド発「やってみた」系技術メディア | DevelopersIO](https://dev.classmethod.jp/articles/buttonui_meeting/)
- [【UIパーツ徹底解説】ボタンの使い方 ｜fumufumuUI](https://fumufumuui.com/posts/ui-parts-button)