UIデザインガイドライン

マテリアルデザイン|No.28:Shape and hierarchy|日本語解説

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

この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Shape and hierarchy(形状と階層)」の概要を学ぶことができます。

Material Design : Design section “Shape and hierarchy”
URL:https://material.io/design/shape/shape-hierarchy.html#developing-hierarchy

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

この記事の前提

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

また、マテリアルデザインで使用されている専門用語は「英語のまま」使用しています。
理由は、日本語に翻訳しますと不自然な表現となるためです。
少し読みにくい部分もあるかもしれませんが、ご了承ください。

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

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

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

Shape and hierarchy|形状と階層


出典:Material Design : Design section “Shape and hierarchy”
URL:https://material.io/design/shape/shape-hierarchy.html#developing-hierarchy

コンポーネントに対して「独自の形状」を適用することによって、そのコンポーネントを別の「階層」としてユーザーに認識させ、強調させることができます。

例えば上の図では、「Floating action button」を独自の丸い形状にすることにより、他の長方形のコンポーネントと別の「階層」であることを表現しています。


出典:Material Design : Design section “Shape and hierarchy”
URL:https://material.io/design/shape/shape-hierarchy.html#developing-hierarchy

上の図のように、「Floating action button」を他のコンポーネントと同じ形状にしますと、目立ちにくく、見つけるのが難しくなるため、注意が必要です。

関係性|Relationships


出典:Material Design : Design section “Shape and hierarchy”
URL:https://material.io/design/shape/shape-hierarchy.html#surface-relationships

Surfaceの「形状」によって、そのSurface間の「関係性」を示すこともできます。

まず、同じ「形状」のSurfaceは、それぞれのSurfaceが「同じもの」であることを示しています。

逆に「形状」の違いが大きいほど、それぞれのSurfaceは「別々のもの」であると示すことができます。

上の図では、各「Card」の「形状」を同じにすることによって、それぞれの「Card」が「同じもの」であると示しています。


出典:Material Design : Design section “Shape and hierarchy”
URL:https://material.io/design/shape/shape-hierarchy.html#surface-relationships

また、他のSurfaceを示すように、矢印のような「形状」を使用すれば、それぞれのSurfaceが「関係しているもの」であると示すことができます。


出典:Material Design : Design section “Shape and hierarchy”
URL:https://material.io/design/shape/shape-hierarchy.html#surface-relationships

ただし、それぞれの要素が「一対一で関連していない」場合は、「形状」を使って「関係しているもの」として表現することは望ましくありません。

例えば上の図では、「Dialog」の「形状」を右向きの矢印にすることによって、その背景の右側にあります「Card」と「関係がある」ことを示していますが、このような「Dialog」の「形状」の使い方は推奨されていません。

また、マテリアルデザインの以下のWebページでは、この「関係性」に関するサンプルムービーがあるため、よろしければご確認ください。

Material Design : “Shape and hierarchy” > Surface relationships
URL:https://material.io/design/shape/shape-hierarchy.html#surface-relationships

まとめ


出典:Material Design : Design section “Shape and hierarchy”
URL:https://material.io/design/shape/shape-hierarchy.html#developing-hierarchy

Surfaceの「形状」をデザインする際、その「階層」や「関係性」を意識しながらデザインすることが重要です。

特に、色に頼れないようなUIをデザインする場合は、この「形状」のデザインが重要になってきますので、「形状」については理解しておくことをおすすめします。

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

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

続きを学びたい方は

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

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

※作成中です※

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

COMMENT

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

CAPTCHA