目次
UIを勉強したことがある人なら誰でも一度は聞いたことがある「マテリアルデザイン」
昨年のGoogle I/O 2021でも「Material You」が発表され話題になりましたね。日々アップデートされているマテリアルデザインですが、今回は基本的な概要、原則、最後に個人的な活用方法について紹介していきます。
マテリアルデザインとは？
マテリアルデザイン（Material Design）とは、2014年にGoogleが提唱したデザインシステムのことです。明確なガイドラインが定められたデザインであり、どのデバイスでも「見やすく、直感的に操作できるWebページ・サービス」を作ることを目的としています。
元々は同じサービスなのにデバイスによってデザインが異なり「ユーザーがデバイスごとに使い方を覚えなければならない」というのが業界全体の課題でした。それらを解決するためにデザインを統一化し、見え方、操作性を同じにした上で、デバイスによって最適な見え方を提供する（アダプティブデザイン）という考え方からスタートしています。
https://material.io/design
マテリアルデザインの原則
原則1 現実世界の物理的法則を取り入れる
マテリアルデザインは、光を反射したり影を落としたりするなど、現実世界の物理的法則をもとにデザインされています。そうすることで、ユーザーが直感的に操作できることが目的です。
画面の表面は、紙とインクの要素で成り立っており、ベースとなる部分は紙のように、切ったり、並べたりすることができます。また影をつけることで、奥行きを表現し、手前にあるものほど優先順位が高いとされています。
例えばボタンであれば、テキストリンク＜フローティングボタン＜ダイアログの順番で上に重ねられており、手前にあるものほど情報の優先順位が高いことが分かります。
原則2 印刷物のようなデザイン
紙の上にはインクということで、マテリアルデザインは、フォント（タイポグラフィ）、グリッド、余白、色、画像などの印刷デザイン手法に基づいて、設計されています。これは、実際の紙とインクの関係＝印刷物に近いほど、ユーザーにとっても馴染みがあり、画面の情報を理解しやすくすることが目的です。
原則3 意味のあるアニメーション
装飾としてのアニメーションではなく、意味のあるアニメーションを使用します。
例えば、「現在地を見失わないためのアニメーション」としては、モーダルがそれにあたります。新しいウインドウで開くのではなく、その画面の上で表示されることで、現在地を見失いません。また、人間は動いているものに目が行くため、動きをつけることで視線を誘導し、助けるアニメーションなども存在します。
マテリアルデザインの活用方法
マテリアルデザインは、原則の上でコンポーネントや色など、様々厳格なガイドラインが定められています。2018年以降「Material Theming」としてアップデートされ、従来の決まったデザインではなく、プロダクトやブランドイメージに沿った形でカスタムカラーやコンポーネントの形状がサポートされるようになりました。
ただ、個人で活用するには、主にコンポーネントから作りたい機能のスタンダードな形を学ぶ、パターンを知るというような活用方法がいいかなと思います。必ずしも、このルールの中でデザインしなさいと提唱しているのではなく、ユーザーにとって使いやすく、業界全体としての統一感を目的として定められているので、知識として入れておくと、ユーザー体験の良いデザインを作るヒントになるのではないかと思います。
英語のサイトではありますが、OK/NGが比較された図での解説や、Chromeであれば拡張機能などで日本語にして見ることもできるので（変な日本語になりますが）、日本人でもうまく使っていけるのではないかと思います。
今後マテリアルデザインを活用してみる際の、足掛かりになれば幸いです。
