Material 3 vs Material 2 !? UIコンポーネント比較まとめ−1

![スクリーンショット 2022-04-13 11.38.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2371376/c031a50e-07fd-36f3-d570-fda0d5f05281.png)
Android12とPixel6の発売のために、Googleのアプリの多くはすでにMaterialYou（Material Design 3）に更新されています。 2021年のAndroidDevSummitで、GoogleはMaterial Design 3の詳細を説明し、デベロッパーがアプリの構築に使用できる更新されたUIコンポーネントを披露しました。

![スクリーンショット 2022-04-13 11.40.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2371376/2d99566a-31f7-5a0a-ab64-7a235937f910.png)

手始めに、「マテリアルデザイン3」は、正式には、デベロッパーのドキュメント全体で使用されているGoogleの最新のデザインシステムのより技術的な名前です。 数字は、以前の「マテリアルデザイン2」システム（マテリアルテーマを見た）と区別するのに役立ちますが、「M3」の省略形も一部の場所で使用されています。 それに比べて、「Material You」は、Pixel 6の宣伝に使用されている、より一般向けで親しみやすいモニカです。

<h1>BUTTONS</h1>
<b>Styles</b><br>
Material Design 3：Contained、Outlined、Text<br>
Material Design 2：Filled、Tonal、Elevated、Outlined、Text<br><br>

Googleは、「ボタンのテキストは文の大文字小文字であり、すべて大文字ではありません」と述べています。 Material Design 2で定義されていたContainedスタイルはElevated/Filled/Filled Tonalに置き換え、より高い高さと新しい最小幅があります。
![button.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2371376/e141fc9d-f286-778e-69bf-ca6abba4013b.png)


<b>States</b>
Material Design 3：Enabled、Hovered、Focused、Pressed、Disabled
Material Design 2：Enabled、Hovered、Focused、Pressed、Dragged、Disabled
Material Design 3のデザインシステムにはDraggedのステートがありません。
![button (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2371376/3b489684-05e4-9512-0b58-aa06e6163c4d.png)

<h1>FLOATING ACTION BUTTON(FAB)</h1>
Material Design 3では円形から角丸に変更されてます。  Googleでは、「コンテンツがスクロールしているときにFABを画面に表示したままにする」ことをお勧めします。また、テキストラベルがないため、機能を明示することをお勧めします。

![FAB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2371376/f71544c0-410c-3c5e-27f8-0c5634f8ff8a.png)
<b>Material Design 3に新しく追加したサイズはLarge（96dp)があり、FABのExtended版のサイズ変更もあります。</b>
![FAB (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2371376/7208d758-133b-7b0c-be20-5c22b0dc70ef.png)

<h1>CHIPS</h1>
Material Design 3には、assist, filter, input, and suggestionの4種類が追加されました。半円は通常のボタンに使われてるため、Chipsは半円から、角丸に変更されました。

![button (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2371376/c6b53bd0-742d-f81b-a95a-fdbc644efae5.png)

<h1>DIALOGS</h1>
Material Design 3のダイアログには「corner radiusとタイトルのフォントサイズの増加に対応するためのパディングの拡大」にすぐに気付くでしょう。レコーダーアプリはすでにこれを実装しています（オーディオを削除する場合）。

![Dialog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2371376/c3a86464-3291-ba92-cc41-5dac148a23e2.png)

<h1>NAVIGATION BAR</h1>
「ナビゲーションバー」は、以前はM2では「ボトムナビゲーション」と呼ばれ、より口語的には「ボトムバー」と呼ばれていました。 背が高く、影はありません。Googleは、「比較的重要度が等しい」アイテムを配置することをお勧めします。<br><br>

現在表示しているタブは、「塗りつぶされたアイコンと対照的な角丸をしたアクティブなインジケーターで示され、非アクティブな状態は輪郭が描かれたアイコンで表されます」。 更新されたMaterial Design 3アプリはすべてこのコンポーネントを採用していますが、Gmailはリリース直後に高さをM2時代に戻しました。 テキストラベルを削除して、高さをさらに下げることを計画している可能性があります。
![Dialog (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2371376/4c7b8ca6-2e0f-b91f-fd8a-fcb4966194d1.png)

<h1>その他のコンポーネントUI比較</h1>
GoogleのMaterialDesign 3のデザインシステムがまだ更新中のため、他のコンポーネントや新規コンポーネントが発表されたら次の記事として投稿させて頂きます。

<h3>参考</h3>
1. <a href="https://m3.material.io/">Material Design 3 </a><br>
2. <a href="https://www.figma.com/community/file/1035203688168086460">M3 - Figma</a><br>
3. <a href="https://material.io/">Material Design 2</a><br>
4. <a href="https://www.figma.com/community/file/778763161265841481">M2- Figma</a>