Material Design 3 要点まとめ #13 Shape

Material Design 3 ガイドラインの要点をまとめたものです。
第13回はShapeの章。M3コンポーネントのシェイプの種類とカスタマイズに関する内容です。短い。

Material Design

M2からの更新ポイント

• M3のシェイプは2つのファミリー x 7つのスタイルで構成されている。

• M2では、コンポーネントのシェイプの分類は「コンポーネント全体のサイズ」を基準にした3種類（Small・Medium・Large）だったが、M3ではコンポーネント全体ではなく「角の形状のサイズ」を基準にした7種類（None・Extra-small・Small・Medium・Large・Extra-large・Full）になった。

シェイプスケール

• シェイプスケールは、シェイプの角の形状を定義する概念。2つのファミリー x 7つのスタイルで構成されている。

• 2つのファミリー：RoundedとCut

• 7つのスタイル：None・Extra-small・Small・Medium・Large・Extra-large・Full

• シェイプスタイルは4箇所それぞれ別々に定義することができる。

シェイプのカスタマイズ

• シェイプスケールはデザイントークンで管理されている。

• コンポーネントのシェイプをカスタマイズする方法は次の2種類。

  • デザイントークンの値（つまりスタイル自体）を編集する。編集すると、そのスタイルが適用されているコンポーネントすべてに変更が反映される。

  • 特定のコンポーネントに適用するスタイルを変更する。例えば、通常「Full」が適用されているボタンコンポーネントのシェイプを「Small」に変更する、など。

M2ではコンポーネントと不可分に結びついたものだったシェイプのバリエーションが、独立してデザイントークンで整理されるようになりました。コンポーネント単位で個別にカスタマイズするのではなく、シェイプトークン自体の編集やコンポーネントとの組み合わせ変更をうまく利用することに寄って、体系を壊さずにブランドに合わせたデザインを実現できるということですね。うまく使いこなせば便利そう。