UIデザインガイドライン

マテリアルデザイン|No.31:Applying shape to UI|日本語解説

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

この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Applying shape to UI(UIへの形状の適用)」の概要を学ぶことができます。

Material Design : Design section “Applying shape to UI”
URL:https://material.io/design/shape/applying-shape-to-ui.html

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

この記事の前提

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

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

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

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

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

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

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

Applying shape to UI|UIへの形状の適用

マテリアルデザインでは、コンポーネントに対して「形状」を適用する際、ルールにしたがって適用する必要があります。

そしてこの章(記事)では、コンポーネントに「形状」を適用する際のルールについて解説します。

それではまず、「形状」をグループ化するためのルールについて解説します。

Shape categories|形状カテゴリ

マテリアルデザインにおけるコンポーネントは、そのサイズにしたがって、以下の3つの「形状カテゴリ(Shape categories)」に分類されています。

  • Small components
  • Medium components
  • Large components

コンポーネントをカテゴリ化することにより、「形状」の1つの値を変更した際、同じカテゴリの他のコンポーネントに対して、その変更した値を適用することができ、その「統一性」を保つことができます。


出典:Material Design : Design section “Shape and motion”
URL:https://material.io/design/shape/applying-shape-to-ui.html#shape-scheme

3つの「形状カテゴリ」に当てはまるコンポーネントは、上の図の通りです。

なお、図の中で「※」が付いているコンポーネントについては、「角」の変更ができません。

それでは次に、「形状カテゴリ」が持つ「カテゴリ属性」について解説します。

Category attributes|カテゴリ属性

「形状カテゴリ」は以下3つの「カテゴリ属性(Category attributes)」を持っており、それぞれの「カテゴリ属性」はカスタマイズすることができます。

  • Shape family|角の形状
  • Shape size|角のサイズ
  • Symmetry|角の対称性


出典:Material Design : Design section “Shape and motion”
URL:https://material.io/design/shape/applying-shape-to-ui.html#shape-attributes

例えば上の図の「Button」は、「カテゴリ属性」も含め、以下の属性を持っています。

  • Component|コンポーネント : Button
  • Element|コンポーネント内の要素 : Container
  • Category|形状カテゴリ : Small
  • Shape family|角の形状 : Rounded
  • Shape size|角のサイズ : 4dp;4dp;4dp;4dp


出典:Material Design : Design section “Shape and motion”
URL:https://material.io/design/shape/applying-shape-to-ui.html#shape-attributes

また、上の図のような「Modal bottom sheet」は、「カテゴリ属性」も含め、以下の属性を持っています。

  • Component|コンポーネント : Modal bottom sheet
  • Element|コンポーネント内の要素 : Container
  • Category|形状カテゴリ : Medium
  • Shape family|角の形状 : Rounded
  • Shape size|角のサイズ : 4dp;4dp;n/a;n/a

それでは3つの「カテゴリ属性」について、具体的に解説します。

Shape family|角の形状


出典:Material Design : Design section “Shape and motion”
URL:https://material.io/design/shape/applying-shape-to-ui.html#shape-attributes

1つ目の「カテゴリ属性」として「Shape family(角の形状)」というものがあります。

これはコンポーネントの「角」のことであり、上の図のように2種類のいずれかの「角」を適用することができます。

そしてそれぞれの「角」の名称は以下の通りです。

  • Rounded corner|丸角
  • Cut corner|切り角

Shape size|角のサイズ

次に2つ目の「カテゴリ属性」である「Shape size(角のサイズ)」は、コンポーネントの「角」の半径やカット長のことであり、「絶対値」もしくは「%(パーセンテージ)」を使って適用します。

「絶対値」とは「2dp」などの特定の値のことであり、コンポーネントの「角」の半径やカット長が「絶対値」の場合、コンポーネントの高さの変化に関係なく、その値は同じままとなります。

次に「%(パーセンテージ)」とは、その言葉の通り「割合」の値のことであり、こちらはコンポーネントの高さの変化に応じて、コンポーネントの「角」の半径やカット長が変化します。

なお、高さが変化するコンポーネントに対して「丸角」を採用する場合は、「形状(角)のサイズ」は「絶対値」を使用し、「%」は使用しないでください。

「丸角」に「%」を使用した場合、コンポーネントの高さが高くなるにつれ「丸角」の半径が大きくなり、コンポーネント内のコンテンツ(画像やテキスト)がコンポーネントからはみ出てしまう懸念があります。

Component symmetry|角の対称性


出典:Material Design : Design section “Shape and motion”
URL:https://material.io/design/shape/applying-shape-to-ui.html#shape-attributes

コンポーネントの「角」は、上の図のように、「対称」「非対称」のいずれかを指定することができます。

「対称」の場合は、1種類の「Shape family(角の形状)」と「Shape size(形状(角)のサイズ)」を指定しますが、「非対称」の場合は、コンポーネントの4つの各「角」に対し「Shape family(角の形状)」と「Shape size(形状(角)のサイズ)」を指定します。


出典:Material Design : Design section “Shape and motion”
URL:https://material.io/design/shape/applying-shape-to-ui.html#shape-attributes

なお、画面の端に固定されているコンポーネントの画面端側の「角」は、カスタマイズすることはできません。

上の図の右側のように、画面端の「角」をカスタマイズした場合、後ろ側にあるコンテンツが見える隙間が生じ、ユーザーの操作のUI操作の集中を妨げる原因になります。

ここまでの解説をまとめると

ここまでの解説をまとめますと、以下の通りとなります。

マテリアルデザインにおける各コンポーネントは「形状カテゴリ(Shape categories)」と呼ばれる以下3種類に分類されます。

  • Small components
  • Medium components
  • Large components

また、それぞれの「形状カテゴリ」は、以下3種類の「カテゴリ属性(Category attributes)」を持っています。

  • Shape family|角の形状
  • Shape size|形状(角)のサイズ
  • Symmetry|角の対称性

そして、それぞれの「カテゴリ属性」を変更することによって、各コンポーネントの「形状」を一括で変更することができます。

Shape overrides|形状のオーバーライド


出典:Material Design : Design section “Shape and motion”
URL:https://material.io/design/shape/applying-shape-to-ui.html#shape-attributes

一部のコンポーネントに対して「形状カテゴリ」とは異なる「形状」を指定したい場合、「オーバーライド(Override)」というかたちで指定することができます。

例えば上の図のように、左側の①は「形状カテゴリ」で指定したコンポーネントですが、右側の②のように、オーバーライドによって指定したコンポーネントに変更することができます。

なお、オーバーライドした際のコンポーネントの属性の値は以下の通りです。

  • Component|コンポーネント : Chip, Floating action button
  • Element|コンポーネント内の要素 : Container
  • Category|形状カテゴリ : Override
  • Shape family|角の形状 : Rounded
  • Shape size|角のサイズ : 50%

Full-screen components|フルスクリーンコンポーネント

フルスクリーンでコンポーネントを表示する際、コンポーネントの「角」に「形状(丸角かカット角)」を使用することは禁止されています。

その理由は、フルスクリーン時に、より多くのコンテンツを表示するためです。

How content and shape affect one another|コンテンツと形状がお互いに与える影響とは?

Changes to content|コンテンツの変更による影響

コンポーネント内のコンテンツを変更することにより、コンポーネントの「形状」に影響を与えるケースがあります。

例えば、コンポーネントの「角」を「%」で指定していた場合、コンポーネント内のコンテンツの「テキスト」が長くなるケースにおいては、「テキスト」の行が増え、コンポーネントの高さが高くなることにより、「角」の「%」にも影響します。

Shape choice|形状の選択による影響


出典:Material Design : Design section “Shape and motion”
URL:https://material.io/design/shape/applying-shape-to-ui.html#picking-shapes

「Shape family(角の形状)」の変更によって、コンポーネント内のコンテンツに影響を与えるケースがあります。

上のムービーのように「角」の変更によって、コンテンツがコンポーネント内に収まらないケースが出てくることがありますので注意が必要です。

Baseline shape values|形状の基準値

マテリアルデザインでは、各コンポーネントに対して「形状」の「基準値」と「推奨範囲」を設けています。

各コンポーネントの具体的な値の表は、以下のマテリアルデザインのWebページからご参照ください。

出典:Design section “Shape and motion”:Baseline shape values
URL:https://material.io/design/shape/applying-shape-to-ui.html#baseline-shape-values

なお、表の各項目については、以下の通りです。

  • Category or component:形状カテゴリもしくはコンポーネント
  • Corners can be shaped?:角はカスタマイズ可能か?
  • Rounded Min / Max:丸角の最小/最大値
  • Cut Min / Max:カット角の最小/最大値
  • Baseline theme values:マテリアルデザインにおける「角」の基準値

また、以下のコンポーネントについては「形状」のカスタマイズは禁止されています。

その理由は、「形状」を変更した際、ユーザーがコンポーネントに対して誤った操作をしてしまう懸念があるためです。

  • App Bar: Bottom
  • App Bar: Top
  • Banner
  • Checkbox
  • Divider
  • Expanding bottom sheet (when full screen)
  • Modal bottom sheet (when full screen)
  • Radio button
  • Standard bottom sheet (when full screen)
  • Tabs

まとめ

マテリアルデザインでは、「形状カテゴリ(Shape categories)」「カテゴリ属性(Category attributes)」という考え方を用いて、コンポーネントの「形状」を一括でデザインする概念があります。

今回の章は少し難しい内容だったかもしれませんが、UIの統一性やブランドを保つためにも、この概念を理解してデザインに活かすことをおすすめします。

また、各コンポーネントの「形状」には「基準値」と「適用範囲」があり、使いやすさを保持したまま「形状」を変更することができますので、この値も活用してデザインすることが重要です。

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

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

続きを学びたい方は

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

次のガイドラインを学びたい方は
マテリアルデザイン|No.32:Understanding motion|日本語解説この記事では、Google社提供の「マテリアルデザイン」UIガイドラインの「Understanding motion(モーションの理解)」の概要を日本語解説で学ぶことができます。...

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

COMMENT

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

CAPTCHA