マテリアルデザイン
マテリアルデザインとは
普段の生活の中で、下のようなデザインを見たことはありますか？「何となくGoogleっぽい」と感じた方がいるかもしれませんが、Google以外でもこのようなデザインを取り入れているアプリやウェブサイトはたくさんあります。
マテリアルデザインは、Googleが作った、デジタルコンテンツ向けのデザインガイドラインです。ウェブサイトやアプリに取り入れることで、異なる端末間の画面に統一感を与えることができます。公式ドキュメントが公開されており、このドキュメントに従って作成することで誰でも簡単に自分のアプリやウェブサイトにマテリアルデザインを取り入れることができます。ただし、これを全部読むのはなかなか大変なので、概要をまとめてみました。
この記事では、マテリアルデザインの４つの原則を見ていきます。
タンジブルサーフェス
１つ目は「タンジブルサーフェス」です。紙のようなものがあって、その上に何かが乗っているという考え方です。
紙なので、分かれる・くっつく・重なる・浮き上がるなどすることができます。
このようなデザインにすることで、ユーザーは「上の紙をどけたら下に何かあるだろう」「影が濃いものは手前にあるだろう」ということを説明することなく理解することができます。
また、紙という物理的なものをデバイス上で表現するために重要な概念が「高さ」です。
このように高さを使うことで、ユーザーがどこに注意を向けるべきかを一貫した方法で知らせることができます。
印刷物のようなデザイン
土台が紙だとしたら、その上に乗っているものは何でしょうか？次に出てくるのは「印刷物のようなデザイン」という考え方です。
例えばキーライン（上の画像の赤い点線の部分）をそろえることで、ドキュメント全体の配置をそろえることができたり、見やすいフォントを使用するということです。
意味のあるアニメーション
マテリアルデザインにおいて、アニメーションは装飾ではありません。 「ナビバーが移動して出てきた」「右にスワイプすれば隠すことができるだろう」という風に、ユーザーが直感的に操作を理解できるようなアニメーションである必要があります。 また、人間は動くものに引きつけられます。どこに目を向けるべきかを明確にし、視線を誘導するためにアニメーションが用いられることもあります。
アダプティブ・デザイン
４つの原則の最後は「アダプティブデザイン」という考え方です。これはサイズが違う画面でどのように表現するかを定めたものです。違うデバイスからアクセスしても、ユーザーが「同じアプリを使っている」と感じられるデザインがアダプティブデザインです。
アダプティブデザインと似た概念に「レスポンシブデザイン」というものがあります。レスポンシブデザインとは、デバイスやブラウザが異なっても同じコンテンツや機能を利用できる「デバイス」を中心とした考え方であるのに対して、レスポンシブデザインは異なる環境・状況・使用目的をもつユーザーが同じコンテンツと機能を利用できる「ユーザー」を中心とした考え方であると言えます。複数のデバイス、サイズに対応したデザインであることは共通していますが、表現方法やそれを実現するための技術面で若干の違いがあります。
まとめ
マテリアルデザインの４つの原則についてまとめました。もともとマテリアルデザインは、Googleアプリが異なるデバイス間で大きくデザインが異なっており、ユーザーが普段使っていないデバイスからアクセスすると操作方法が分かりづらいという問題を解消するために導入されました。 マテリアルデザインを導入することで異る端末間の画面に統一感を与え、より良いユーザーエクスペリエンスを実現することができます。ただし全てをマテリアルデザインにする必要はなく、マテリアルデザインを使っている所もあれば、独自の色を出している所もあっても良いと思います。