デザイン初心者でもわかる！Material Designのまとめ✨

ももやんです。今回はGoogleのMaterial Design（マテリアルデザイン）について簡単にまとめます🐶

Material Designの大きなテーマ

マテリアルデザインは、光の反射の仕方や影の出来かたなど、現実世界の法則を取り入れたガイドラインです。紙とインクをベースに考えられており、UI上には階層が存在しています。

🌟Surfaces

UIを構成しているコンポーネントは「Surfaces」と呼ばれています。Surfacesは紙をベースに考えられています。そのため、基本のSurfacesは白く、1dpの高さがあり、必ず影を作ります。

出典：https://material.io/design/environment/surfaces.html#properties

🌟Elevation

各コンポーネントの階層の高さのこと。マテリアルデザインはX軸、Y軸の他にZ軸（高さ）も存在しています😲

出典：https://material.io/design/environment/elevation.html

Resting elevation
各コンポーネントに規定されている、止まっている時のそれぞれの高さのこと。

Dynamic elevation offset
各コンポーネントに規定されている、移動中のコンポーネントの高さ。ユーザーの操作が完了するとResting Elevation（元の位置）に戻ります。

🌟Shadows

コンポーネントの高さに合わせて、規定の影の大きさや濃さを使用します。なので、コンポーネントの大きさが変わっても、階層が変わらない場合は影に変化はつけません⚠️

出典：https://material.io/design/environment/light-shadows.html#shadows

💡ポイント
パララックス効果を使用すると、奥行きが表現できているので影はなくてもOKです⭕️ Spotifyではパララックス効果を使用しています✨

🌟Navigation

それぞれの画面へ移動する際の画面遷移の仕方のことで、マテリアルデザインには3種類のナビゲーションがあります！

Lateral navigation
上階層の画面を横移動できるナビゲーション。

出典：https://material.io/design/navigation/understanding-navigation.html#lateral-navigation

Forward navigation
前方向へ移動できるナビゲーション。より深い階層の画面へ遷移するタイプ。

出典：https://material.io/design/navigation/understanding-navigation.html#lateral-navigation

Reverse navigation
前の画面に戻るナビゲーション。

出典：https://material.io/design/navigation/understanding-navigation.html#lateral-navigation

🌟Bottom app bars

モバイルだけで使用できる、Floating Action Button（FAB）、アクションを行ボタンやナビゲーションメニューから構成されるapp bar。アクションを行うボタンがない、１つだけの場合は使用できません❌

Centered FAB
真ん中にFABを配置したもの。ナビゲーションアイコンのほかに、最低１つ、最大２つのアクションを配置します。

出典：https://material.io/components/app-bars-bottom#anatomy

End FAB
一番右にFABを配置したもの。最低２つ、最大４つのアクションを配置します。

出典：https://material.io/components/app-bars-bottom#anatomy

No FAB
FABがない場合は、メニューアイコンと最低２つ、最大で４つのアクションを配置できます。

出典：https://material.io/components/app-bars-bottom#anatomy

💡ポイント
Bottom app barとBottom navigation barは併用できないので、どちらかのみにしましょう⚠️ Top app barとBottom app barは併用できますが、ナビゲーションアイコンやオーバーフローメニューが２つ存在しないようにしましょう🙅‍♀️

🌟FAB

最重要または最も使用されるアクションを行うボタン🔘最上層に配置するもので、基本的には丸い形をしています。必要ない場合には表示しないことも可能です！

出典：https://material.io/components/buttons-floating-action-button#usage

💡ポイント
FABは画面の遷移中は非表示、遷移後にまた表示されるようにしましょう。マップなどの例外を除いて、同時にFABが2個表示されることは基本的にはありません🙅‍♀️

🌟Top app bars

左から右に書く言語では、ナビゲーションアイコンは一番左に、その右隣にタイトル、その右にアクションを配置しますが、必ず全ての要素を表示する必要はありません💡また、・・・のようなオーバーフローメニューが必要な場合は一番右に配置します。

Regular
よく使われる一般的なナビゲーション。

出典：https://material.io/components/app-bars-top#anatomy

Prominent
Regularよりも縦幅が大きいタイプ。長いタイトルを表示したり、画像を表示したりすることに向いています☺️Top app barを強調したい場合にも有効です！

出典：https://material.io/components/app-bars-top#anatomy

💡ポイント
タイトルは改行したり、省略したり、文字を極端に小さくすることはできません🚨長いものでもProminentに収まるくらいのタイトルにしましょう！

🌟Bottom navigation

モバイル、タブレットで使用する、最上層の3つから５つの画面へ移動できるナビゲーション。アイコンとラベルでどの画面かわかるようにします。スペースがない時などは、現在開いている画面だけラベルを表示することも可能です💡

出典：https://material.io/components/bottom-navigation#anatomy

🌟Buttons

ボタンには４つのタイプがあります。

1. Text button (low emphasis)
ボタンとはわかるものの、そこまで強調する必要がない場合に使用します。

2. Outlined Button (medium emphasis)
Text buttonよりかは強調させたい場合に使用します。線のみで囲まれているので、Contained buttonよりは控えめです。

3. Contained button (high emphasis)
需要なアクションを行うボタンなど、他のものよりもかなり強調させたい場合に使用します。背景色と影があるので、Text buttonやOutlined Buttonよりも強調することができます。

4. Toggle button
他のタイプに比べて使用頻度の低いボタン。いくつかのアクションからなるボタンのグループで、レイアウトやスペーシングを調整するときに使用されています。

🌟Sheets

モバイルで多く使われる、補助的な役割をするコンポーネント。ユースケースによって3種類のSheetsを使い分けます🐱

Standard bottom sheets
マルチタスクに向いているタイプ。画像のように音楽を再生したり、一時停止しながら他の画面を見ることもできます✨

出典：https://material.io/components/sheets-bottom#usage

Modal bottom sheets 
モーダル表示にするタイプ。ユーザーに集中してもらうために、一時的に後ろの画面は操作できないようにします😲Sheets内のリストは多くなりすぎないようにしましょう。

出典：https://material.io/components/sheets-bottom#usage

Expanding bottom sheets
右下に表示できるSheetsの一部を表示できるタイプ。ボタンに似ていますが、FABとは違う動きをします⚠️この場合では、「サポート」をタップすると画面全体に表示され、全ての情報を見ることができます👀

出典：https://material.io/components/sheets-bottom#usage

出典：https://material.io/components/sheets-bottom#usage

おわりに

初めて使ったスマホはAndroidでしたが、すぐにiPhoneに乗り換えて以来あんまり使ってきませんでした💧Material Designを読んで「このボタンこういう意味があったのか！」と新しい発見ばかりでした、、、iOSとAndroidどちらもデザインできなくては！もう少しMaterial Design勉強します😢