[日本語]マテリアルデザイン 『About shape』#25

はじめに
今回は『マテリアルデザインガイドライン』の『Navigation transitions』について解説していきます。なお、この記事は私が(翻訳機能を使って)ガイドラインを読む中で、日本語訳に違和感を感じたり、理解が難しいな。と思った箇所を分かりやすい言葉に置き換えるなど、一部個人的な解釈が含まれます。
正しい情報は下記のガイドラインをご確認ください。
引用元 Google - Material Design URL：https://material.io/
※動画・画像データ等はこちらから引用させていただいております。

About shepe(形状について)

マテリアルデザインにおける「Shape(形状)」は、「Surfaceの形状」のことで、デフォルト(初期値)は「半径が4dpの丸角がある長方形」となっています。
そして、このデフォルトの形状をベースに、「Cornerの角度・カーブ」や「Edgeの角度・カーブ」などを変えることによってデザインしていきます。

Emphasis(強調)

「形状」によって、Surfaceを「強調」させ、ユーザーの注意を向けることができます。

例えば、下の画像の、丸い「Floating action button」と湾曲した「bottom app bar」の組み合わせは、画面上のその他の形状とは異なることで「強調」されています。

Identity(アイデンティティ)

「形状」によって、Surfaceの「アイデンティティ(固有性)」を表現することもできます。

例えば、下の画像では、角丸の「Entry chip」によって、「アイデンティティ」が表現され、ユーザーに認識してもらうことができます。

States　(状態)

「形状」によって、Surfaceの「状態」を表現することもできます。
例えば、下の画像のカードは、選択すると形状が変わり、選択された「状態」を示します。

Branding(ブランド)

「形状」によって、UI全体の「ブランド」を表現することもできます。

例えば下の画像では、一貫した「形状」を使用することによって、UI全体の「ブランド」を表現しています。

Shape and meaning(形と意味)

Communicating meaning(意味を伝える)

「形状」は、その「目的」や「意味」を反映するために使用します。
また、surfaceの「形状」だけでは曖昧な場合、テキストやアイコンを使用することで「意味」を補強するのに役立ちます。

例えば、下の画像の吹き出しのように表示されている「Menu」に「丸くない角」を左上に作ることによって、画面左側の「Navigation drawer」と「Menu」がつながっているという「意味」を示しています。

なお、下の画像の「CANCEL」のボタンのように、あいまいな「意味」となってしまう「形状」はしないでください。

「CANCEL」は「戻る」という意味ですが、下の「CANCEL」ボタンでは「進む」という意味の矢印型の形状になっているため、ユーザーが誤解してしまいます。

Components and shape(コンポーネントと形状)

ユーザーにそのコンポーネントの「形状」を認識してもらう必要があります。
例えば、下の画像のように、ユーザーがコンポーネントと認識できないような「形状」にすることは禁止されています。

コンポーネントを認識できない形状を使用しないでください。

ユーザーの操作を妨げる形状を使用しないでください。このボタンの場合、タッチ ターゲットが小さすぎます。

コンポーネントを認識できない形状を使用しないでください。このボタンは、その上にあるチップと形状がよく似ているため、2 つのコンポーネントを区別するのが難しくなっています。

Shape customization tool(形状カスタマイズツール)

マテリアルデザインガイドラインでは、さまざまなコンポーネントの「形状」をカスタマイズし、実際に確認することができる
「Shape customization tool」が用意されています。

また、各コンポーネントの推奨値については、こちらでご確認ください。

まとめ

今回は、「About shape(形状について)」についてまとめました。
ユーザーの誤解を招くことのない「使いやすいUI」をデザインするためにも、適切な「形状」について理解しておきたいですね。

今回も最後まで読んでいただきありがとうございました。