ボタンの状態：インタラクションを伝える
わずかな視覚的な変化によって、ユーザーは5種類のボタンの状態（有効・無効・マウスオーバー・フォーカス・押下）を区別しやすくなる。
ボタンは、クリックやタップでアクションを実行する、中核となるユーザーインタフェース要素だ。適切にデザインされたボタンは、ユーザーの期待を正確に設定し、インタフェースとのインタラクション方法の理解を助ける。明確なボタンラベルに加えて、ボタンの状態を効果的に示すことが良いデザインにはきわめて重要である。
ボタンの状態の説明
ボタンをクリックしようとしても何も起こらない、というイライラする状況を経験したことがあると思う。では、ボタンをクリックできるときと、できないときとをどう知ればいいのか。デザイナーは通常、その種の情報を、ボタンの状態（クリック可能か、押下されたか、マウスオーバーされているか）を示す、わずかな視覚的な手がかりによって伝える。
最も一般的に使用されるボタンの状態は次のとおりである：
- 有効（Enabled）
- 無効（Disabled）
- マウスオーバー（Hover）
- フォーカス（Focus）
- 押下（Pressed）
有効状態（Enabled State）
「有効」状態はデフォルト状態と呼ばれることもあり、ボタンが押下できる、またはその他の方法で操作できることを示す。ボタンがこの状態にあるときはクリックやタップが可能で、そのボタンが意図するアクションを実行できる状態にある。
ボタンが利用可能でアクティブな状態にあるときは、特にプライマリーボタンやCTA（call-to-action）ボタンでは、ユーザーの注意を引くようにするのが望ましい。
「有効」の典型的なスタイルには次のような視覚的特徴がある：
- ボタンと周囲のデザインとのコントラストが強い
- ラベルが読み取りやすい
- 立体感を加えるためにスキューモーフィックな影をつけることがある（任意）
無効状態（Disabled State）
「有効」状態の反対は「無効」状態である。この状態はボタンのアクションが利用できないことを示す。つまり、そのボタンは現在、クリックやタップはできない。「無効」状態ではユーザーが操作しようとしてもボタンの見た目は変わらない。
たとえば、ユーザーがフォームですべての必須項目を入力していない場合、そのフォームの「送信」ボタンはアクティブではないかもしれない。
「無効」の典型的なスタイルには次のような視覚的特徴がある：
- 薄いグレーやその他の彩度を落とした色、あるいは、有効状態よりも控えめな色調を用いて、クリックやタップができないことを示す
- ラベルと背景のコントラストが弱い（ただし可読性に注意）
「無効」状態のラベルは「有効」状態のラベルほど高コントラストである必要はないが、それでも人々が読み取れるようにしておくべきだ。一方で、そのボタンがクリック可能だと誤解させるほどコントラストを高くすべきではない。ボタンの状態をデザインする際は、ボタンがユーザブルで視覚的にはっきり区別できるかどうかを確かめるために、実際のユーザーでテストするとよい。
また、「無効」状態のボタンにはコードにARIA-disabled: true属性を追加しておくべきである。この属性により、ボタンは引き続きタブフォーカスを受け取れる一方で、スクリーンリーダーにはボタンが非アクティブであることが示されるため、ユーザーに「無効」状態であることが伝わる。
マウスオーバー状態（Hover State）
「マウスオーバー」状態は、ユーザーがボタンや他のデザイン要素の上にマウスカーソルを移動したときに発生し、ボタンがクリック可能であることを示すことを意図している。（この状態は、マウスを使用しないユーザー、たとえばモバイルユーザーには当然ながら表示されない）。ユーザーが意図せずボタンにマウスオーバーした場合（たとえば、画面上をマウスで移動していたため）に色の変化が起こらないよう、この状態にはわずかな遅延（約150～200ミリ秒）を設ける必要がある。
典型的な「マウスオーバー」状態には次のような視覚的特徴がある：
- 有効状態と比べて背景色がわずかに暗くなる
- カーソルが矢印から手の形に変わる
フォーカス状態（Focus State）
「フォーカス」（または「キーボードフォーカス」）状態は、どのアクティブなボタンにキーボードフォーカスがあるかをユーザーが把握できるようにするものだ。ユーザーが「Tab」キーを使ってページ上のさまざまなアクティブな要素間を移動する際、フォーカス状態は現在選択されている（かつ、「Enter」キーで実行できる）要素を示す。フォーカス状態は、ユーザーがキーボード操作を行った後、すばやく（約100～150ミリ秒で）発生すべきである。そうでないと、ユーザーが再びキーボードで「Tab」キーを押してしまい、目的のボタンを見逃す可能性がある。
デフォルトでは、「フォーカス」状態は要素の周囲の青い輪郭線で示される。ただし、ビジュアルデザイン上の要件やブランド基準に合わせて、フォーカス中の要素の見た目は容易にカスタマイズできる。
とはいえ、フォーカスを示す方法として、色の変化のみに頼るのではなく、ストロークや輪郭線を用いることを2つの理由から強く推奨する。第一に、そうした表示がデフォルトのシグナルであり、多くのユーザーがそれを期待している。第二に、色の変化だけでは、一部の視覚障害のある人には知覚されない可能性があるためである。
押下状態（Pressed State）
「押下」状態は、ユーザーがボタンをタップまたはクリックしたことを示すものである。この状態は、システムがユーザーのアクションを受け付けたことについてフィードバックを提供することを意図しており、通常はごくわずかな色の変化または最小限の非常に短いアニメーションとして現れる。「押下」状態は、押下のアクションが瞬時だとユーザーが認識できるよう、100～150ミリ秒以内に表示すべきである。このフィードバックがタイムリーでない場合、ユーザーはボタンを繰り返し押してしまい、問題を引き起こす可能性がある。
その他の状態：ローディングと選択
これら5つの基本的なボタンの状態（「有効」「無効」「マウスオーバー」「フォーカス」「押下」）に加えて、デザインシステムに含めるべき基本的な状態が他にもいくつかある。
ローディング状態
このボタンの状態は、そのボタンに対応するアクションが実行中であることをユーザーに知らせるものだ。この状態は完了までに時間がかかる傾向のあるアクションに使用される（たとえば、バックエンドでの検証が必要な場合や、大きなドキュメントの読み込みが必要な場合など）。
「ローディング」状態では、通常、「有効」状態が用いられ、そのボタンラベルの左側にローディングスピナーやインジケーターが追加される。ローディングが完了してアクションが実行されると、多くの場合、スピナーがアニメーションしてチェックアイコンに変わり、そのアクションが成功したことが視覚的に示される。
選択状態
「選択」状態はチェックボックスやラジオボタンに関連づけられ、ユーザーがその選択肢を選択したことを示す。なお、この状態はボタンの状態では「ない」が、ボタンの「押下」状態と混同されることがあるため、ここで取り上げる。
ボタンの状態とボタンのスタイルの違い
ボタンのスタイルとは、インタフェース上でボタンが視覚的にどのように表現され、どれだけ視覚的に強調されるかを指す。インタフェースでは、UIにおけるボタンの重要度に応じて、プライマリー（第1）・セカンダリー（第2）・ターシャリー（第3）の3種類（またはそれ以上）のスタイルで区別するのが一般的である。同じボタンでも、ユーザーのアクションやシステムの状態に応じてその時々でボタンの状態は変化する。しかし、各ボタンのスタイルは上記のいずれか1つである。
プライマリー（第1）
プライマリーボタンは、ユーザーの注意を引き、（訳注：メールなどの）「作成」（訳注：ファイルなどの）「新規作成」「保存」「購入」といった、重要またはよく行うアクションへと誘導するために視覚的に最も強調される。プライマリーボタンは通常、強調され塗りつぶされたボタンである。
セカンダリー（第2）
セカンダリーボタンは視覚的強調が中程度で、重要度が低い、または頻繁ではないアクション向けである。このアクションはたとえば「キャンセル」や「返信」である。セカンダリーのスタイルは通常、アウトラインボタンである。
ターシャリー（第3）
ターシャリーボタンは視覚的強調が最も弱く、任意または補助的なアクション（例：「もっと見る」）に充てられる。
有用なボタンラベルも忘れずに
ボタンの状態はユーザブルな優れたボタンをデザインするうえできわめて重要だが、同じくらい重要なのがラベルだ。ラベルはそのボタンが何を行うかを明確に記述し、単独でも意味が通るだけの十分な内容を備えつつ、簡潔であるべきだ。「続行」や「次へ」といった汎用的なラベルは使わないようにしよう。ボタンラベルのようなちょっとしたUXコピーが、サイトの機能の探しやすさやアクセシビリティに大きく貢献するのである。
