ボタンのインタラクティブな側面（ステート）をきちんとデザインする | アドビUX道場 #UXDojo

エクスペリエンスデザインの基礎知識

ウェブサイトが静的な画像やアセットの組み合わせだった時代は過ぎ去りました。今日のウェブやモバイル体験は、かつてないほどインタラクティブで、デザイナーはそれに対応する必要に迫られています。

UI要素のデザインに、マイクロインタラクションを加える方法を理解すると、制作することになるサイトに付加価値を与え、エンドユーザーの操作性を向上させられるようになります。このガイドでは、ボタンを題材にして、ステートをデザインすることでインタラクティブな要素を作成する方法を紹介します。

ボタンの様々なスタイル、形状、およびインタラクティブなステート。

ステートとは?

ステートをデザインする方法を説明する前に、ステートとは何かを確認しておきましょう。ステートとは、ある要素が、状況に応じてとり得るさまざまな形態のことです。たとえば照明のスイッチにはオンとオフの2つの状態があり、外観によりその時点の状態を知ることができます。これはUIに使われるトグルスイッチの場合も同様で、下の例では「オン」のステートは緑、「オフ」のステートは灰色で表現されています。

オン（緑）とオフ（灰色）の異なるステートを持つボタン。

しかし、ステートは静的な切り替えの表現に限定されません。フロントエンドの「言語」が積極的に用いられる状況において、ステートはインタラクティブな要素の表現の手段として進化しています。

UIデザインにおけるボタンのステートの種類

インターフェイスデザインで使用されるステートの種類を理解するため、この記事ではUIデザインに一般的な使用される要素である「ボタン」に注目します。ボタンはUIの中で最もインタラクティビティの高い要素のひとつであり、いくつかのステートを持つことが普通です。

以下のステートは、CSSボタンに適用される一般的なステートの種類です。

デフォルト: 操作は行われていないが、操作可能な状態のボタンの外観。ノーマルステートと呼ばれることもある
ホバー: マウスカーソルがボタンの上に置かれた状態を表す。デスクトップ向けのデザインに特有のステートで、モバイルデバイスでは通常サポートされない。カーソルが画面上を移動したときに、操作可能な要素であることを示すのに有効
フォーカス: アクセシビリティにとって重要なステート。このステートに注意を払わないスタイルが多く見られるが、タブを使ってウェブサイトをナビゲートする際にボタンを強調表示するには欠かせない。ブラウザのデフォルト（水色のアウトライン）を借りて表現されることが多い
アクティブ: これもあまり活用されていないステートのひとつ。クリックまたはタップの状態を表すために使用され、多くの場合に、その外観はボタンが押された状態を表現する
ディセーブル（無効）: ボタンが操作できないことを示すステート。アクションの実行を妨げる処理が行われている場合や、使用にはアップグレードが必要なプレミアム機能などに使用される。アクションが使用できない理由を説明するツールチップと組み合わせることを考慮すべき
ローディング（読み込み中/処理中）: ページを保存している場合やファイルをアップロードしている場合のように、アクションが実行され、システムがそれを処理中の場合に使用される。進行状況を示すアイコンと組み合わされることが多い。アクションの重複を防ぐためにディセーブルと組み合わされることがある

ステートの種類は、デザインするUI要素によって異なります。たとえば、入力フィールドには、フォーカス、ホバー、ディセーブルに加えて、空のフィールドやエラーを表すためのステートも含まれるでしょう。

ボタンのステートをデザインする

ボタンやその他のUI要素のステートをデザインするときは、そのステートが何のために存在するのかを意識して、それに応じてデザインすることが重要です。

まずデフォルトのステートから始めましょう。これは、デザイン済みのバージョンをそのまま使うことになるかもしれません。次に、デザイン規約と、各ステート共通のパターンを考慮しながら、個々のステートをデザインします。これはサイトのスタイルに依存したものになるでしょう。

プライマリボタンとセカンダリボタンそれぞれの、一連のステートを示すビジュアル。

アートボードにすべてのボタンのステートを並べておくと、互いにどのように関連しているかを確認するのに役立ちます。その際、ボタンの種類（プライマリ、セカンダリなど）ごとに並べると良いでしょう。

ホバーステート

ホバーステートは、ボタンがクリック可能な状態にあることを示すようデザインされるべきです。一般的なホバーステートのスタイルは、背景の塗りのカラーの明度を変えたり、ボタンの浮き具合、あるいは位置を変更します。

デフォルトのボタンよりも暗い塗りが適用されたホバーステートのスタイル。

フォーカスステート

フォーカスステートは、通常、ボタン周囲のアウトラインを強調する標準的なパターンが使われます。このステートはアクセシビリティの観点から重要であるため、慣習に従うことで分かりやすくします。ほとんどのブラウザーにはデフォルトのフォーカスステートがあり、可能であればそのまま利用するべきです。たとえば、Chromeでは下のような青色の輪郭が表示されます。

緑の塗りが指定されたデフォルトのボタンに青いアウトラインを追加したフォーカスステート。

アクティブステート

アクティブステートはあまり一般的ではありませんが、フラットスタイルのUIデザインでは役に立ちます。クリックアクションを実行したときにそれが必ずしも明確ではない場面でも、アクティブステートを使用すると、ボタンがクリックされたことを示す視覚的な手がかりを提供できます。

暗い枠線を追加し、背景の塗りを少し暗くすると、ボタンが押されているような効果を出せるでしょう。ボタンのサイズを若干小さくすると、効果をさらに強化することができます。

デフォルトのボタンに暗い色の線と塗りが適用されたアクティブステート。

ディセーブル（無効）ステート

ボタンの無効ステートは、アクションがその時点で使用できないことを明示するようデザインされているべきです。クリックすることができそうに見えるデザインは避けましょう。一般的に使われるテクニックは、不透明度を下げてボタンを目立たなくする方法です。ボタンのスタイルを変更すると、他の種類のボタンと混同される可能性があります。しかし、不透明度を下げた場合は、ボタンの存在感だけを減らすことができます。シャドウを削除し立体感を無くすのものメッセージを伝えるのに役立ちます。

デフォルトのボタンの不透明度を下げて、ボタンを目立たないようにしに無効ステート。

ローディング（読み込み中/処理中）ステート

読み込み中または処理中のステートを表す一般的な方法は、ボタンのラベルを変更し、加えてアイコンを導入することです。処理中ステートに回転するアイコンを使用すると、アクションが進行中であることを示せます。

デフォルトのボタンにアニメーション付きのスピナーアイコンが追加されたローディングステート。

覚えておくべき事柄

ボタンをデザインするとき、あるいはインタラクティブなUI要素のステートをデザインする際には、いくつか覚えておべき重要なことがあります。

慣習に従う – ボタンは非常にインタラクティブな要素で、同時に、ごく一般的に使用されるUI要素です。その動作や機能に対する期待が、ユーザー側にすでに存在しています。混乱を避けるために、独自のルールをあまりつくらないよう注意しましょう。
スタイルの一貫性を保つ – ウェブサイト、製品、ブランドのスタイルから大きく逸脱すると、ボタンのステートがつくり出す体験が違和感を与えてしまうことがあります。ブランドのルールの範囲内に収まるようにステートをデザインしましょう。
ステートをテストする – ボタンのステートのような一見小さなことでも、テストの重要性は変わりません。人々がステートにどのように反応し、操作するかについての理解が、製品の体験全体に大きな影響を与えることがあります。
複雑なアニメーションくを避ける – シンプルなアニメーションやトランジションはステートに価値を加え、ステート間の移動を明確に示すことができます。しかし、複雑なCSSアニメーションや派手なエフェクトを使用すると、アクションの意図を損なうかもしれません。

ボタンだけでなく、UIに使用される多くの要素に対してステートを適用することが可能です。ステートを使用することで、動的な感覚を与えたり、ユーザーに貴重なフィードバックを提供したり、目的の場所やアクションに誘くことができます。最良の結果を得られるように注意を払い、これらのインタラクションを意図的にデザインするようにしましょう。

この記事はDesigning States for Buttons & UI Interactions（著者:Matt Rae）の抄訳です