UIデザインガイドライン

マテリアルデザイン|No.39-2/4:States|日本語解説

この記事から得られること

この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「States(状態)」の概要を日本語解説で学ぶことができます。

全4回の今回は第2回目となります。

また、「States(状態)」の1回目を確認したい場合は、こちらの記事をご確認ください。

1回目:

マテリアルデザイン|No.39-1/4:States|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「States(状態)」の概要を日本語解説で学ぶことができます。この章の内容は「ボタンのデザイン」をする上では必須の知識となりますので、ぜひ学んでいただければと思います。...

この章の内容は「ボタンのデザイン」をする上で必須の知識となりますので、ぜひ学んでいただければと思います。

Material Design : Design section “States”
URL:https://material.io/design/interaction/states.html#usage

今回の記事では「状態(State)」の具体的なルールや使い方について詳しく解説します。

なお、この記事は「約5〜7分」で読める内容となっています。

この記事の前提

この記事では、私が実際に「マテリアルデザイン」を読んだ経験から「理解しておくべき基本的な内容」を抜粋して紹介しています。

また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。

理由は、日本語に翻訳しますと不自然な表現となるためです。

少し読みにくい部分もあるかもしれませんが、ご了承ください。

また、この記事は、記事上の各画像を細かく見ていただくためにも「パソコンでの閲覧」を推奨していますが、「スマホのブラウザ」でももちろん閲覧可能です。

なお、この記事を読み進めるなかで、もし分からない専門用語が多い場合は、「マテリアルデザイン」ガイドラインの最初の「概要編」の記事から順番に読み進めることをおすすめします。

マテリアルデザイン|No.00:概要と構成|日本語解説この記事では、Googleが提供しているUIデザインガイドライン「マテリアルデザイン(Material Design)」の概要と、そのコンテンツ構成について学ぶことができます。...

Disabled|無効


出典:Material Design : Design section “States”
URL:https://material.io/design/interaction/states.html#disabled

「Disabled(無効)」状態は、コンポーネントもしくはUI要素が操作できない状態のときに使用します。

表現方法としては「Enabled(有効)」状態よりも強調しない表現にする必要があるため、「無効」状態では、「有効」状態の38%の不透明度で表現します。

また、「無効」状態は上の図の②のように、配色や高さの変化によって「無効」状態であることを示す場合もあります。

上の図はサンプルであり、①は「有効」状態、②は「無効」状態を示しています。

Disabled state inheritance|「無効」状態の適用範囲


出典:Material Design : Design section “States”
URL:https://material.io/design/interaction/states.html#disabled

マテリアルデザインでは「無効」状態を適用できるコンポーネントと、適用できないコンポーネントがあります。

「無効」状態を適用できる代表的なコンポーネントは以下の通りです。

  • Toggle button|トグルボタン(上の図の①)
  • Selection control|選択コントロール(上の図の②)
  • Text field|テキストフィールド(上の図の③)
  • Icon|アイコン
  • Grid item|グリッドアイテム
  • List item|リストアイテム(上の図の④)
  • Card|カード
  • Chip|チップ
  • Button|ボタン

Behavior|具体的な動き・ふるまい

出典:Material Design : Design section “States”
URL:https://material.io/design/interaction/states.html#disabled

そのほかの「無効」状態の具体的な動きとして、上のサンプルムービーのように、「無効」状態のコンポーネントはタップしてもホバーしてもその状態は変わりません。


出典:Material Design : Design section “States”
URL:https://material.io/design/interaction/states.html#disabled

なお上の図のように、「無効」状態のコンポーネントに対して、①ホバー、②フォーカス、③ドラッグ、④プレスすることはできません。

Hover|ホバー


出典:Material Design : Design section “States”
URL:https://material.io/design/interaction/states.html#hover

「Hover(ホバー)」状態は、ユーザーがカーソルを移動させてUI要素上に停止させたときに使用する状態のことです。

「ホバー」状態はUI要素の内容の邪魔にならない表現にする必要があります。

また「ホバー」状態は、コンポーネント内のUI要素(上の図の①)、コンポーネント全体(上の図の②)、もしくはコンポーネントの一部(上の図の③)に適用することができます。


出典:Material Design : Design section “States”
URL:https://material.io/design/interaction/states.html#hover

そのほかに、上の図の①のように、「ホバー」状態の時のみ、追加のUI要素が表示されるパターンもあります。

Hover state inheritance|「ホバー」状態の適用範囲


出典:Material Design : Design section “States”
URL:https://material.io/design/interaction/states.html#hover

なおマテリアルデザインでは「ホバー」状態を表示できるコンポーネントと表示できないコンポーネントがあります。

「ホバー」状態を表示できる代表的なコンポーネントは以下の通りです。

  • Icon|アイコン(上の図の①)
  • Text field|テキストフィールド(上の図の②)
  • Card|カード(上の図の③)
  • Button|ボタン
  • Floating action buttons (FAB)|フローティングアクションボタン:上の図の②
  • Toggle button|トグルボタン
  • Selection control|選択コントロール
  • Grid item|グリッドアイテム
  • List item|リストアイテム
  • Chip|チップ


出典:Material Design : Design section “States”
URL:https://material.io/design/interaction/states.html#hover

また、以下のようなナビゲーションコンポーネントなどでも「ホバー」状態を表示することができます。

  • App bar icon|アップバーのアイコン(上の図の①)
  • Action in a sheet|シート内のアクション(上の図の②)
  • Tab item|タブのアイテム(上の図の③)
  • List item|リストのアイテム(上の図の④)


出典:Material Design : Design section “States”
URL:https://material.io/design/interaction/states.html#hover

また、以下のコンポーネントは「ホバー」状態を表示することができません。

  • Tab|タブ
  • Bottom navigation|ボトムナビゲーション
  • Sheet|シート(上の図の①)
  • Dialog|ダイアログ(上の図の②)
  • App bar|アップバー(上の図の③)
  • Alert|アラート
  • Menu|メニュー

Behavior|具体的な動き・ふるまい


出典:Material Design : Design section “States”
URL:https://material.io/design/interaction/states.html#hover

また「ホバー」状態は、他の状態と組み合わせて使用することもできます。

上の図では、①の「フォーカス」状態、②の「アクティブ」状態、③の「選択」状態、④の「プレス」状態と組み合わせた例を示しています。

出典:Material Design : Design section “States”
URL:https://material.io/design/interaction/states.html#hover

なお、「ホバー」状態は、カーソルの位置に基づいてUI上に1つだけ発生する状態であるため、複数の「ホバー」状態が発生することはありません。

Overlay opacity values|オーバーレイの不透明度


出典:Material Design : Design section “States”
URL:https://material.io/design/interaction/states.html#hover

「ホバー」状態のときの「オーバーレイ」は、見やすさやアクセシビリティを考慮し、UI要素によって調整する必要があります。

上の図におけるそれぞれの「ホバー」状態の「オーバーレイの不透明度」は以下の通りです。

①:
UI要素のカラー : 100% #FFFFFF
テキストカラー : 100% #000000
オーバーレイ不透明度 : 4% #000000

②:
UI要素のカラー : 100% #6200EE
テキストカラー : 100% #FFFFFF
オーバーレイ不透明度 : 8% #FFFFFF

③:
UI要素 :画像
オーバーレイ不透明度 : 12% #000000

なお、「状態」における「オーバーレイ」について詳しく学びたい方は、以下の記事も合わせてご確認ください。

マテリアルデザイン|No.39-1/4:States|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「States(状態)」の概要を日本語解説で学ぶことができます。この章の内容は「ボタンのデザイン」をする上では必須の知識となりますので、ぜひ学んでいただければと思います。...

まとめ

今回は「状態」における「Disabled(無効)」と「Hover(ホバー)」状態について解説しました。

それぞれの状態でルールが異なるため、ユーザーを混乱させないためにも、マテリアルデザインのルールを採用する際は、各ルールの違いを理解しておくことをおすすめします。

最後までお読みいただきありがとうございます。

今回の記事は以上です。

この内容がみなさんのUIデザインの勉強になりましたらうれしいです。

そして引き続き、UIデザインの勉強を一緒にしていきましょう。

続きを学びたい方は

なお、「マテリアルデザインの続き」を学びたい方は、よろしければこちらの記事もご確認ください。

次のガイドラインを学びたい方は

※作成中です※

一つ前のガイドラインを学びたい方は
マテリアルデザイン|No.39-1/4:States|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「States(状態)」の概要を日本語解説で学ぶことができます。この章の内容は「ボタンのデザイン」をする上では必須の知識となりますので、ぜひ学んでいただければと思います。...

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA