[日本語]マテリアルデザインの3原則

はじめに

マテリアルデザインガイドラインを読む際、翻訳機能を使って日本語に変換して読むと、どうしても日本語として不自然でしっくりこない箇所が度々登場し、何度読んでも”なんとなーく”分かったような。。分かっていないような気持ちになっていました。

そこで、今一度マテリアルデザインと向き合って、この”なんとなーく”をスッキリさせたい!!ガイドラインを日本語でも分かりやすい言葉にしたいと思い記事を書きました。
(個人的な解釈も含まれます)

自身の理解を深めるため、そして、同様の悩みを抱えているUIデザイナーの方やこれからマテリアルデザインについて学んでいきたい方に読んでいただけたら嬉しいです。

序章

マテリアルデザインは、 Google が作成したデザイン システムで、Android、iOS、Flutter、Webなど、さまざまなプラットフォームで同じように機能することを目指して構築されています。

https://material.io/design/introduction

Google - Material Design

『Materal』は直訳すると『物質的』という意味で、その名の通り現実世界の物質(モノ)をベースとして、物理的な法則に則った表現で設計されている為、初めて触れるユーザーにも操作が分かりやすくなっているのが特徴です。

マテリアルデザインの3原則

① 置き換えて考える

マテリアル デザインでは、UIを『紙とインク』に置き換えて考えます。
光の反射や影の落とし方も、現実世界の物理的法則とその質感からインスピレーションを得て作られています。

https://material.io/design/introduction#principles

② 大胆に、生き生きと、意図的に

重要なコンテンツやユーザーが選択したコンテンツを画面いっぱいに表示するなど大胆に強調することで、ユーザーを適切なコンテンツへ注目させ、アプリ内での体験に没頭させることができます。
また、見出しなどに適切なタイポグラフィや強調表現を行うことで、ユーザーの操作や理解を手助けします。

https://material.io/design/introduction#principles

③ モーション(動き)には意味がある

マテリアルデザインではモーション自体に意味を持ちます。
ユーザーの操作をきっかけとして新たな要素を表示したり変化を示す際に、適切なモーションをつけることによって、ユーザーを注目させ、体験の連続性を感じさせます。

https://material.io/design/introduction#principles

まとめ

マテリアルデザインガイドラインの序章・3つの原則にいて、(個人的な解釈を含めつつ）まとめました。
はじめに原則を知り理解することによって、今後のマテリアルデザインでのUI設計の際の全体像が掴みやすくなると思います。

何より、これまではiOSやAndroidでそれぞれデザインを設計しなければならなかったのが、マテリアルデザインを導入することによって、異なるプラットフォーム間で共通のコンポーネントを使用することができるのは、UIデザイナーにとっても開発エンジニアにとっても、効率化を図るための大きなメリットですね。

次回は、『Surfaces』についてまとめていきたいと思います!