Material Designはなぜ必要か
一番の目的はアプリのデザインを統一することです！
例えばあるアプリにおいてホーム画面とプロフィール画面でまるで別々のアプリかのようにデザインが異なっていると変ですよね？
アプリはデザインが統一されている必要があります。そのためにDesign Systemがあります。
Design System
Design Systemとは、アプリの中でデザインがブレないように用意するコンポーネントや、プロダクトにおけるデザインの決まり事を意味します。
例えば、SmartHRさんはプロダクトのDesignSystemを公開されているので、一度読んでみるとDesign Systemについての理解が深まるかと思います。
どのような意図を持ってデザインしているかという基本原則や、各デザインで使用されるカラーパレット、タイポグラフィ、ボタンなどのコンポーネントの形などの規定がわかりやすくまとめられています。
このように、アプリはアプリごとにDesign Systemを持っている必要があります。
ちなみに、Material DesignもDesign Systemです。
実際にMaterial3のドキュメントのホームに行くと確認できます。
Material 3 is the latest version of ... design system
Material Designをどう使う？
Material DesignはDesign Systemであり、アプリはそれぞれ固有のDesign Systemを持っている必要があるということをお話ししました。
しかし、必ずMaterial Designに基づいたアプリを作らないとだめというわけではありません。
1番の目的はアプリのデザインが統一されていることです。
デザインさえ統一されていれば、Material Designに準拠していなくても問題はないのです。
（もちろんGoogleさんがおすすめしているDesign Systemなので準拠しているに越したことはないですが）
Material Designはあくまで手段です。
Material Designで提供されている機能の全てを使わないといけないわけではないのです！
例えばデザイナーさんとのやりとりをもっと円滑に行うための、ユビキタス言語*として扱うのが良いと考えます。
*ユビキタス言語とは、全員で同じ言葉でコミュニケーションを行うための共通言語の定義
参考：Chatwork WebのUIに1つ1つ丁寧に名付けをしている話（ユビキタス言語検討会について）
MaterialDesignは従来のデザインとどう違う？
- 従来のデザイン（Material 2）
- 凹凸がある・立体的
-
elevation(陰)がある - 色が濃い
- 四角い・角がはっきりしている
-
Material 3
- 平面的
-
elevation(陰)がない - 色が淡い
- 全体的に丸い
一言でいうと、かわいくなってます。（♡）
先ほども言及しましたが、Material3に準拠してかわちぃ♡デザインにしないとダメ絶対！というわけではありません。
1番の目的はアプリのデザインが統一されていることです。
ColorPalletについて
アプリのデザインを統一することにおいてどのようなときにどの色を使うのかは非常に重要です。
このようなとき、CollorPalletを用いてアプリで使用する色を管理します。
Material3のドキュメントでは簡潔にCollorPalletの使い方やそれぞれの色の役割をまとめてくれています。
参考カラーパレット画像 from ドキュメント
大体こんな感じです。（多分）
-
primary color … ブランドカラー（例： LINE:緑, twitter:青）
- onPrimary … primaryの上に載せる文字の色など
- secondary color … primaryの補色
- surface … カードなどの色
- outline … カードの外側・枠線
- error … エラーの時の色
Material 3のCollor palletに準拠していると何が嬉しい？
ダークモード対応が楽ちんです。
ライトモード、ダークモードそれぞれのカラーパレットを作成し、それを切り替えるだけで良くなります。
まとめ
今回はMaterial Designの目的やMaterial Designが提供する最新のDesign SystemであるMaterial 3の特徴についてと、アプリのDesign Systemを統一するのに非常に重要な要素であるColor Palletについて勉強していきました。本当はもっと色々なコンポーネントをピックアップしたかったですがまた今度にします。 