UIデザインガイドライン

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

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

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

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

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

今回は「States(状態)」の章の全4回の第3回目であり、以下の「状態」について解説します。

  • Focus|フォーカス
  • Selected|選択

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

1回目:

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

2回目:

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

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

この記事の前提

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

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

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

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

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

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

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

Focus|フォーカス


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

「Focus(フォーカス)」状態は、キーボードによる操作などによってUI要素が選択された際に使用する状態です。

「フォーカス」状態は、その「フォーカス」状態の表現以外の表現で示されることはないため、ユーザーにわかりやすい表現にする必要があります。

なお上の図は「フォーカス」状態の例を示しており、コンポーネント内のUI要素①、コンポーネント全体②、コンポーネントをおおう円形③として表現することができます。


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

また上の図の①のように、「Elevation(高さ)」を用いて、「フォーカス」状態を示すことができます。


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

また上の図の①のように、「フォーカス」状態で「選択」状態を表示することもできます。

それでは次に「フォーカス」状態の適用範囲について解説します。

Focus state inheritance|「フォーカス」状態の適用範囲


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

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

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

  • 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#focus

また、コンポーネント内の以下のUI要素は「フォーカス」状態を適用することができます。

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


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

また、「フォーカス」状態を適用できないコンポーネントには、シート全体(上の図の①)、ダイアログ全体(上の図の②)、アップバー全体(上の図の③)があります。

それでは次に「フォーカス」状態の具体的な動きについて解説します。

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

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

「フォーカス」状態は、ユーザーのキーボードや音声入力によってUI要素に適用され、ユーザーがUI要素に対する操作を完了するまで適用されます。

また、「フォーカス」状態は、上のサンプルムービーのようにフェードアニメーションを使って表示もしくは非表示になります。

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

また、「フォーカス」状態を切り替えた際は、上のサンプルムービーのようにコンポーネントごとに規定されている順番で表示されます。


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

また、「フォーカス」状態は、上の図のように「①ホバー(Hover)」「②アクティブ(Activated)」「③選択(Selected)」状態と組み合わせて表示することができます。

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

なお、上のサンプルムービーのように、UI上で表示される「フォーカス」状態は1つだけです。

次に、「フォーカス」状態の「オーバーレイ」の不透明度について解説します。

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


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

「フォーカス」状態は、その「フォーカス」状態の表現以外の表現で示されることはないため、ユーザーにわかりやすくするために、オーバーレイの不透明度は高く設定する必要があります。

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

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

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

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

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

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

Selected|選択


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

「Selected(選択)」状態は、タップ、カーソル、キーボード、音声などによる操作によって、UI要素が選択済みであることを示す状態です。

「選択」状態は、簡単に認識できるように「中」程度に強調する必要があります。

「選択」状態の「オーバーレイ」は、上の図のように、

  • A:オーバーレイ
  • B:「選択」状態のアイコン

を使用して表現します。

それでは次に「選択」状態の適用範囲について解説します。

Selected state inheritance|「選択」状態の適用範囲


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

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

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

  • Grid list item|グリッドリストアイテム(上の図の①)
  • List item|リストアイテム(上の図の②)
  • Card|カード(上の図の③)
  • Chip|チップ(上の図の④)
  • Data table|データ表
  • Menu item|メニューアイテム
  • Picker|ピッカー


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

また、「選択」状態を適用できないコンポーネントは以下の通りです。

  • Button|ボタン(上の図の①)
  • Text field|テキストフィールド(上の図の②)
  • App bar|アップバー(上の図の③)
  • Dialog|ダイアログ(上の図の④)
  • Backdrop|背景
  • Bottom navigation|ボトムナビゲーション
  • Sheet|シート
  • Divider|仕切り
  • Expansion panel|拡張パネル
  • Alert|アラート
  • Snackbar|スナックバー
  • Tab|タブ
  • Tooltip|ツールチップ

それでは次に「選択」状態の具体的な動きについて解説します。

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

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

「選択」状態は、上のサンプルムービーのように、フェードアニメーションによって、表示非表示に切り替わります。

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

また、「選択」状態は、上のサンプルムービーのように、ユーザーが選択した順番でUI要素に反映されます。


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

また、「選択」状態は、以下の状態と組み合わせて表示することができます。

  • Hover|ホバー(上の図の①)
  • Focus|フォーカス(上の図の②)
  • Pressed|プレス
  • Dragged|ドラッグ


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

また、「選択」状態は、上の図のように、複数のUI要素に対して同時に適用することができます。

次に、「選択」状態の「オーバーレイ」の不透明度について解説します。

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


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

「選択」状態は、ユーザーが識別できるレベルで「オーバーレイ」を適用する必要があります。

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

①:
UI要素のカラー : 100% #FFFFFF
アイコンカラー : 100% #6200EE
オーバーレイ不透明度 : 8% #6200EE

②:
UI要素のカラー : 100% #6200EE
アイコンカラー : 100% #FFFFFF
オーバーレイ不透明度 : 16% #FFFFFF

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

まとめ

今回は「状態」における「Focus(フォーカス)」と「Selected(選択)」状態について解説しました。

ユーザーが使用するデバイスによって使用できる「状態」は異なるため、もし複数のデバイスでアクセスできるようなUIをデザインする際は「このUIどのようなデバイスで操作されるか」は意識してデザインすることをおすすめします。

最後までお読みいただきありがとうございます。
今回の記事は以上です。

この内容がみなさんのUIデザインの勉強になりましたらうれしいです。
引き続き、UIデザインの勉強を一緒にしていきましょう。

続きを学びたい方は

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

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

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

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA