現実世界を取り入れる！マテリアルデザインについてまとめてみた
今回は、マテリアルデザインについてまとめていきます💡
基礎からコンポーネントまで、さまざまな知識が掲載されていますが、今回はところどころ抜粋してまとめていこうと思います🫶
マテリアルデザインとは？
マテリアル デザインは、Google のデザイナーと開発者によって構築およびサポートされているデザイン システムです。「直感的でわかりやすいUIを実現すること」を目的としています。
マテリアルデザインは直訳すると「物質的なデザイン」という意味で、その名の通り現実世界の物質的な法則に則ったデザインになっています。
コンポーネントの配置から使用できる色の数まで厳格にルールが決まっていることも特徴です。
マテリアルデザインの特徴
1.現実世界の物理的法則を取り入れる
2.紙とインクの要素で組み立てる
3.色の数を少なく配色する
4.影を活用して立体感を作る
5.連続性のあるアニメーション
マテリアルデザインの基礎
マテリアルデザインは6つの基礎によって構築されています。
Accessibility - アクセシビリティ
Customizing Material - マテリアルのカスタマイズ
Design tokens - デザイントークン
Adaptive design - アダプティブデザイン
Interaction states - インタラクション状態
Material A-Z - マテリアルAZ
アクセシビリティ
💡アクセシビリティを理解することで、視覚障害や聴覚障害、状況障害（腕の骨折等）を持つ全てのユーザーの使いやすさを向上させることができます
色とコントラスト
色とコントラストはアプリの内容を見て理解し、適切な操作をするために役立ちます。
要素間に十分な色のコントラストがあることで、視力の低いユーザーにも使いやすくなります。
コントラスト比は「1:1」や「21:1」のように表され、数字の差が大きいほどコントラスト比（2つの色の差）が大きくなります！
推奨されているコントラスト比は下の通りです⇩
カラーコードでコントラスト比をチェックできるサイトなどもあります🥰
デザイントークン
💡デザイントークンとは、色やフォント、スペーシングなどのデザインシステム内で使用されるデザインを定義したスタイル値のこと。デザインするための最小要素のこと。
デザイントークンのメリット
デザイントークンはUIの一貫性を保ち、スタイルの変更や再利用性の向上、開発者とデザイナー間のコミュニケーションの改善などに役立ちます。
デザイントークンが活躍する場面
・製品の設計を更新するか、新しい製品を構築する予定がある
・デザイン システムが複数の製品またはプラットフォームに適用されている
・将来的にスタイルを簡単に維持または更新したい
・ダイナミック カラーなどの機能を含め、マテリアル デザインを最大限に活用したい
デザイントークンについては下記のサイトがわかりやすかったのでオススメ🫶
スタイル
標高（Elevation）
マテリアルデザインは、現実世界の物理法則に則って画面を構成しています。そのため、X軸、Y軸のみならず、Z軸（奥行き・高度・標高というイメージ）も想定してデザインされています。
マテリアルデザインでは、全ての面とコンポーネントに標高値という概念が組み込まれています。Googleがコンポーネントごとに標高値を定めてくれていますのでよかったら確認してみてください⇩
標高値の差は、色の違いやシャドウによってユーザーに伝えることが可能です👀
引用元：Material Design
モーション（Motion）
マテリアルデザインでは、アニメーションのデザインに関するルールもまとめられています。良い例と悪い例を見てみると、アニメーションでこんなに印象が変わるのか！と驚きました👀
例えば、クリックしてから開くまでの時間が早すぎてもユーザーにとって不快になってしまいます。早ければ早いほど良いのではなく、ユーザーにとって心地の良いアニメーションを心がけましょう🫶
コンポーネント
コンポーネントは、UIを作成するための必須要素です。マテリアルデザインでは、アクションコンポーネント・コミュニケーションコンポーネントなど用途ごとに掲載されています。ここではいくつか抜粋して紹介していきます✍️
スナックバー（Snackbar）
スナックバーとは、画面の下部に表示されているバーのことです。アプリが実行した（または実行する）プロセスをユーザーに通知したり、アクションを起こすためのボタンが設置されています。
💡スナックバーのポイント
・スナックバーはユーザーの体験を妨げてはなりません
・通常はUIの下部に表示されます
・自然に消えることも、ユーザーがアクションを起こすまで画面上に残ることもあります
・一度に表示できるスナックバーは一つだけです
・スナックバーはダイアログより優先度の低いものに使用しましょう
ボトムアプリバー（Bottom app bar）
ボトムアプリバーにはナビゲーションとキーアクションが表示されます。
💡ボトムアプリバーのポイント
・最大4つのアイコンボタンと、フローティングアクションボタンを含めることができます
・ボトムアプリバーはナビゲーションバーとは別物です。ナビゲーションバーは目的地へのアクセスを提供しますが、ボトムアプリバーは目的地とアクション、両方を含むことができます。
・アクションが0または1つの時には使用できません。2-4個設置してください。
ナビゲーションバー（Navigation bar）
ナビゲーションバーを使用することで、画面の行き来が容易になります。
💡ナビゲーションバーのポイント
・ナビゲーションバーには3~5個目的地を設定する
・目的地はアプリ内のどこからでもアクセスできる必要がある、重要度の高いページにする
・現在いるページのアイコンは塗りつぶされたアイコン・その他のページのアイコンは白抜きの（線のみの）アイコンを使用しましょう
まとめ
今回はマテリアルデザインについてまとめてみました！Google翻訳を使いながら読んでいったのですが、直訳で読むと意味が捉えづらく難しい箇所もありました😭
読むのはだいぶ労力がいりますが、マテリアルデザインのルールは本当に細かいところまで決められているのでしっかりと守って作れば、質が高く使いやすいデザインを作ることが可能になると思います💡
参考サイト
この記事が気に入ったらサポートをしてみませんか？