こんにちは、デザイナーの西山 将平（@24sy___）です。

無効状態のボタンは、多くの場合「グレーアウト」で表示されますが、いくつかデザインのパターンがあるので、実際に洗い出してみました。

本記事では、無効状態のボタンデザインのベストプラクティスをシェアしたいと思います。もしあなたが無効状態のボタンデザインに悩んでいるなら、きっと参考になると思います。

今後もリサーチを重ねて、無効状態のボタンのベストプラクティスについて追記していこうと思います。

無効状態のボタンのベストプラクティス

僕自身も、様々なブランドのデザインシステムを拝見しましたが、「不透明度を下げる表現」は、ボタン自体の見やすさにも影響があるので、正しく配置されていても低コントラストになり、認識できない人もいると思います。

そのため、ほとんどの人がアクセスできないと判断できるグレーアウトのボタンを、多くのアプリ内で使用されているので、それに合わせる方がUX的にも良いと考えました。

無効状態のボタンデザインのパターン

無効状態のボタン（Disabled Button）は、非アクティブ状態の「まだ押せない、アクセスできないボタン」のことを指します。

無効状態のボタンは、多くの場合「グレーアウト」で表示されますが、いくつかデザインのパターンがあるので、実際に洗い出してみました。

• プライマリーカラーのトーンをあげて、無効状態のボタンとのコントラストを強くする
• アクティブなボタンにシャドウをつけて、無効状態のボタンとの違いを出す
• 無効状態のボタンのトーンを下げて、グレーアウトする
• 無効状態のボタンのホバー時に「カーソル無効」を使用する
• 無効状態のボタンにサポートテキストを追加

各ブランドのデザインガイドラインを比較

現在、公開されている各ブランドのデザインガイドラインをリサーチして、無効状態のボタンを比較を行いました。

僕が調べた限りでは、無効状態のボタンは通常のボタンよりもトーンを下げて、グレーアウト表示を採用していることが多いことが分かりました。

例外として、Shopifyのようにトーンを上げる表現もありますが、UX的にどちらの表現が良いのか検証していきたいと思います。

無効状態のボタンについての仮説

多くのユーザーが、グレーのボタンを「押せる、アクセスできるボタン」ではなく、「まだ押せない、アクセスできないボタン」だということを認識しているので、「不透明度を下げる表現」よりも、無効状態のボタンには「グレーアウト」が深く浸透しているデザインなのではないかと思います。

また、アプリやWebサイトによっては、ボタンの数が多くなるにつれて、優先度を数パターン定義したボタンを使用することになると思います。

その場合は「不透明度を下げる表現」は、ボタンがあること自体を認識しずらくなる懸念も考えられます。

僕個人としては、優先度を定義したボタン全ての無効状態は、グレーアウトに統一するのが良いのではないかと思いました。

ただ、これはあくまで僕個人の意見なので、もう少しリサーチを重ねることにしました。

仮説まとめ

• 多くのユーザーが、グレーのボタンを「まだ押せない、アクセスできないボタン」だということを認識している
• 「不透明度を下げる表現」は、ボタンがあること自体を認識しずらくなる懸念がある
• 優先度を定義したボタン全ての無効状態は、グレーアウトに統一するのが良いのではないか

UX movementの記事から考察

無効状態のボタンについての色々な記事を見ていき、興味深い記事を見つけました。

Why You Shouldn’t Gray Out Disabled Buttons

Why You Shouldn’t Gray Out Disabled Buttons

How should disabled buttons appear when they’re inactive? Th…

https://uxmovement.com/buttons/why-you-shouldnt-gray-out-disabled-buttons/

この海外の記事（UX movement）で投稿されている内容は、「不透明度を下げる表現」の方がベターだということを主張されていて、以下が記事の要点になります。

・グレーのボタンは前景要素がより目立つので、ユーザーはグレーの無効なボタンをクリックする可能性が高くなる

・グレーは優先度の低いボタン（キャンセルボタンなど）でよく使用されているので、二次的なアクションと間違えやすい

・無効状態のボタンを透明にすることで、ユーザーを混乱させることなく非アクティブ状態を示せる

「不透明度を下げる表現」vs「グレーアウト」

ただし、記事のコメント欄では、多くのデザイナーたちが「グレーアウト」の表現の方がベターだという意見が見られました。

・ユーザーは、グレーのボタンを普遍的な無効化されたボタンと見なすことがよくある

・視力の弱い人の中には、ボタンが半透明にするとボタンが見えにくくなっている

・ユーザーテストでは、不透明度の低いボタンに混乱していることがわかっている

①グレーのボタンは目立つので、クリック率が高くなる？

グレーのボタンは前景要素がより目立つので、ユーザーは灰色の無効なボタンをクリックする可能性が高くなる

グレーボタンが目立つことでクリック率が上がるのであれば、背景のカラーによって改善できるのかなと思います。

②グレーのボタンは二次的なアクション（キャンセルボタンなど）と間違えやすい？

グレーは優先度の低いボタン（キャンセルボタンなど）でよく使用されているので、二次的なアクションと間違えやすい

ユーザーに二次的なアクションを促す際に、「戻る」「キャンセル」などの文言が記載されるので、間違えやすいことはないと考えられます。

ビジュアルデザイン的にも、キャンセルボタンは、グレーの枠線でデザインされたボタンを使用すれば、グレーの塗りのボタンが「無効状態のボタン」であることが分かるのではないかと考えました。

③無効状態のボタンを透明にすることで、非アクティブ状態を示せる？

無効状態のボタンを透明にすることで、ユーザーを混乱させることなく非アクティブ状態を示せる

無効状態のボタンを透明にすることで、必ずしも「ユーザーを混乱させることなく非アクティブ状態を示せる」とは言い切れないはずです。

無効状態のボタンデザインは「色」はもちろんのこと、「その他の要素」でも非アクティブであることが分かるようにデザインすることで、ユーザーが混乱することを減らせると思います。