UIデザインガイドライン

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

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

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

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

また、この章は説明の量が多いため、4回に分けて解説します。

今回は全4回の第1回目です。

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

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

この記事の前提

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

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

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

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

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

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

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

Statesとは?


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

「States(状態)」とは、UI要素の「今の状態」をユーザーに伝えるための表現のことです。

「状態」の表現によってUI要素を大幅に変えてはいけませんが、ユーザーが理解できるレベルには表現を変える必要があります。

そしてこの「状態」の章では、「状態」の原則、種類、その使い方や、具体的な表現方法などを解説しています。

まずは「状態」の原則について解説します。

Principles|原則

「状態」には、以下3つの原則があります。

Distinct|明確さ


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

「状態」は、その優先度にしたがって、周りのUIと区別できる明確なアフォーダンスを持つ必要があります。

Additive|付加的


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

UI要素に対して複数の「状態」が同時に起こっている場合は、その両方の「状態」を示す必要があります。

Consistent|一貫性


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

ユーザーが使いやすく理解しやすいように、「状態」はUI全体で一貫している必要があります。

それでは次に、「状態」の種類について解説します。

Types of states|「状態」の種類

「状態」にはさまざまな種類があるのですが、詳細の解説をする前に、すべての種類について簡単に解説します。

Enabled|有効


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

「有効(Enabled)」状態は、そのUI要素が操作できる状態であることを表現しています。

Disabled|無効


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

「無効(Disabled)」状態は、そのUI要素が操作できない状態であることを表現しています。

Hover|ホバー


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

「ホバー(Hover)」状態は、UI要素上にカーソルが置かれている(UI要素とカーソルが重なっている)状態を表現しています。

Focused|フォーカス


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

「フォーカス(Focused)」状態は、キーボードなどの入力デバイスによって、そのUI要素が選択されている状態を表現しています。

Selected|選択


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

「選択(Selected)」状態は、UI要素が「選択済みである」という状態を表現しています。

Activated|アクティブ


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

「アクティブ(Activated)」状態は、現在表示しているUIの位置や場所を表現しています。

Pressed|プレス


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

「プレス(Pressed)」状態は、UI要素がユーザーによってタップ(タッチ)された状態であることを表現しています。

Dragged|ドラッグ


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

「ドラッグ(Dragged)」状態は、ユーザーによってUI要素を移動させている状態であることを表現しています。

On|オン


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

「オン(On)」状態は、UI要素が持つ2つの状態に対して「有効」や「選択済み」状態であることを表現しています。

Off|オフ


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

「オフ(Off)」状態は、UI要素が持つ2つの状態に対して「無効」「非選択」状態であることを表現しています。

Error|エラー


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

「エラー(Error)」状態は、ユーザーによる間違いまたはUIシステム上のエラーが発生していることを表現しています。

それでは次に、「状態」を表現するためにUI要素に使用される具体的な表現について解説します。

Overlay|オーバーレイ


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

「オーバーレイ(Overlay)」とは、UI要素の「状態」を表すためのUI要素上に重なる半透明の(つまり不透明度のある)カバーです。

「オーバーレイ」の配色は、UI要素のテキストもしくはアイコンの色と同じ色になります。

ただし、UI要素の状態の変化によって、UI要素のテキストやアイコンの色が変わる場合、「オーバーレイ」の色は、最終的なUI要素の色と同じにする必要があります。


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

例えば上の図の①のように、「オーバーレイ」によって色を変化させ、今の「状態」を表現することができます。


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

また別の例として上の図の①では、「オーバーレイ」としてチェックマークを表示し、現在のUI要素が「選択」状態であることを示しています。

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


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

見やすさと色のコントラストを確保するために、オーバーレイの「不透明度」はUI要素上の内容によって調整する必要があります。

上の図の左側の①では、背景色が白(#FFFFFF)のときの各状態における「オーバーレイの不透明度」を示しています。

そして右側の②では、背景色が原色(#6200EE)のときの各状態における「オーバーレイの不透明度」を示しています。

まとめ


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

ユーザーがUIを操作する上では、そのUI要素における「状態(States)」を分かりやすく表現し、ユーザーにその「状態」を伝える必要があります。

また、その「状態」は、ユーザーを混乱させないためにもUI全体において統一されている必要があります。

マテリアルデザインにおける「状態」の表現を理解するのは重要ですが、その前にUI要素において「どんな状態が存在するのか」を理解することが、UIデザインを学ぶ上で大切だと思いますので、ぜひこの章の中で理解していただければと思います。

今回は「状態(State)」の概要と、全体に関わるルールについて解説しました。

次回以降で、各「状態」について詳しく解説していきます。

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

今回の記事は以上です。

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

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

続きを学びたい方は

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

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

一つ前のガイドラインを学びたい方は
マテリアルデザイン|No.38:Selection|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Selection(選択)」の概要を日本語解説で学ぶことができます。...

COMMENT

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

CAPTCHA