マテリアルデザインとは？歴史とトレンドから考える今後のUIデザイン

2022年2月16日
web

2021年秋に発表されたAndroid 12にて、新しいUIデザインMaterial You（マテリアルユー）が採用され話題となりました。

Material You（マテリアルユー）とは、ユーザー自身がボタンの色やカードの形状を、好みのUIデザインになるよう自由にカスタマイズできるようにしたものです。

そして、そのMaterial You（マテリアルユー）の基礎となっているデザインがマテリアルデザインです。

現在では多くの方が日常的に利用しているGoogleマップやYouTube、AndroidなどのサービスにおいてもUIデザインの基となっています。

Webに限らず、デザインを考えるうえでこれまでのトレンドの流れを知っておくことは非常に大切です。

そこで今回は、多くの媒体で主流となったマテリアルデザインについて解説していきます。

また、今後予想されるデザインの移り変わりについても解説していきますので、これからWebサイトやアプリのUIデザインを作ろうと考えている方の参考になれば幸いです。

1 マテリアルデザインとは
2 マテリアルデザインのメリット
3 マテリアルデザインのデメリット
4 おすすめのフレームワーク
5 Webデザインの歴史とトレンド
6 マテリアルデザインとフラットデザイン2.0の違い
7 今後のトレンド
8 終わりに

マテリアルデザインとは

マテリアルデザインは、2014年にGoogleが発表したデザインのガイドラインです。

直訳すると「物質的なデザイン」となり、その名の通り現実世界の物質的な法則に則ったデザインになっています。

ユーザーの直感的な操作を可能にし、ストレスの少ないユーザビリティの実現を目的としています。

マテリアルデザインでは、基本的な構成要素を紙とインクのみ、つまり実際の印刷物に見立てた要素で組み立てられています。また、ボタンの配置や使用できる色数などルールが厳密に決まっていることも特徴です。

Googleが公式なガイドラインを定めていますので、もしマテリアルデザインを取り入れたい方は参考にするとよいでしょう。

また、便利なフレームワークも充実しているため、実装のハードルはそこまで高くありません。

マテリアルデザインのメリット

マテリアルデザインを取り入れることの最大のメリットは、操作した時のアクションやコンテンツを構成する要素の組み立てが現実世界と同じ法則で存在していることです。

ユーザーがストレスを感じることなく直感的に操作でき、画面上の情報を理解しやすくなります。

また、Googleで公式のルールが定められているため、そのガイドラインやフレームワークに沿ってサイトを作成すれば、制作者のスキルに関係なくユーザビリティやデザイン性の高いものが作れる点もメリットといえます。

マテリアルデザインのデメリット

ルールやフレームワークに沿って画一的に質の高いデザインを作れる、というメリットを紹介しましたが、ガイドラインを定められているという点が、場合によってはデメリットにもなります。

仕様が決まっていることで、グラフィックデザインとしての差別化やオリジナリティを追求することが難しくなってしまうからです。

マテリアルデザインを上手く取り入れながらコンテンツの特徴を魅力的に引き出すには、それなりのスキルが必要になるため、個性を打ち出したデザインや他との差別化を図りたい場合には不向きであるといえるでしょう。

Webデザインの歴史とトレンド

これまでのWebにおけるデザインの歴史を振り返ってみましょう。

Webデザインを語るうえで欠かせないのが、「スキューモーフィズム」と「フラットデザイン」です。

スキューモーフィズム

スキューモーフィズムとは、アプリや機能を、実在する物や機器そのものに似せたデザインや装飾のことです。

スマホやタブレットの創世記である2000年代中盤から2010年代初期にかけて広まりました。

ガラケーからの移行が加速しインターフェースへの理解がまだ浸透していなかった時代において、ユーザーが親しみやすく直感的に操作できるようにしたスキューモーフィズムは、特にタッチデバイスの普及に大きく貢献しました。

一昔前のiPhoneのアプリ等を思い出していただけると、イメージが湧きやすいのではないでしょうか。

後に主流となるフラットデザインが抵抗なく受け入れられたことも、スキューモーフィズムのおかげであるといえます。

その後、2013年にフラットデザインを採用したiOS7をAppleが発表したことで、Web業界は一気にフラットデザイン思考へ移行していきます。

フラットデザイン

フラットデザインは、平面的で装飾が少なく情報の整理に特化したデザインになっており、マテリアルデザインと並んで現在のWebデザインのトレンドとなっています。

フラットデザインが広まった背景としては、多くのユーザーのリテラシーが高まり、リアルな質感を追求せずとも画面上の機能を理解できるようになったことが挙げられます。

また、デバイスの多様化に伴いレスポンシブレイアウトの重要性が増したことも要因の1つです。

立体的でリアルな装飾はコンテナを可変させることが難しいため、柔軟性に優れたフラットなデザインは保守・管理の面にも活かされていました。

しかし今度は、シンプルさを追求するあまりUIが直感的ではなくなり、操作しにくくなる可能性が出てきました。

そこで登場したのが、フラットデザイン2.0と呼ばれる考え方です。

フラットデザイン2.0

基本的なフラットデザインの特徴は残しつつ、「UIが直感的でない」という課題を解決するためにシャドウやテクスチャといった要素を加えた手法がフラットデザイン2.0です。

ただし、あくまでもフラットデザインを基本としているため、2次元的な要素を認識しやすくさせることが目的です。

アニメーションも、従来のフラットデザインに比べ多く取り入れられています。

マテリアルデザインとフラットデザイン2.0の違い

マテリアルデザインとフラットデザイン2.0は、一見同じようなデザイン手法に思えますが、本質的な考え方や概念は異なります。

まず大きな違いとして、マテリアルデザインにはGoogleのガイドラインがしっかり定められているのに対し、フラットデザイン2.0には明確な基準は設けられていない点です。

デザインのルールを統一することにより、どんなデバイスであってもユーザーが同じ操作感で利用することができるのはマテリアルデザインのよい点といえるでしょう。

一方で、フラットデザイン2.0はマテリアルデザインに比べて自由な表現が可能で、他のデザインと上手く組み合わせることにより、差別化を図ったり、よりオリジナリティの高いものが作れたり、といった利点があります。

また、マテリアルデザインには縦と横だけではなく奥行も存在しています。

現実世界の法則をベースにしているマテリアルデザインと、あくまでもフラットデザインからの派生であるフラットデザイン2.0の両者では、根本的な成り立ちが違うことを理解しておく必要があります。

しかし、どちらのデザイン手法も「洗練されている」という部分では共通していますね。

今後のトレンド

ここまでは主にWeb業界におけるデザインの歴史やマテリアルデザインについて解説しましたが、今後はどういったデザイン手法が主流となっていくのでしょうか。

ニューモーフィズムとグラスモーフィズム

2020年頃から、ニューモーフィズムと呼ばれる新しいデザインのトレンドが徐々に注目を浴びています。

今後様々なサービスやサイトで見かけることが増えるかもしれません。

ニューモーフィズムとは、前述したスキューモーフィズムの新しい形「ニュー + スキューモーフィズム」という意味を持ち、リバイバル的に話題となりました。

フラットデザインやマテリアルデザインにも似た見た目ですが、その大きな特徴は、「要素がベース（背景）と繋がっている」というものです。

一枚の板で全てが構成されているイメージで、主張しすぎず洗練された印象を与えることができます。

しかし、実装ハードルの高さやクレーター錯視（見方によって、出っ張っているのかへこんでいるのかが分かりにくくなる錯覚）が起こりやすい等の懸念点があり、ユーザビリティの観点からは議論の余地を残しています。

新鮮で斬新的なインパクトを与えることができるため、サイトやコンテンツによっては有効なデザインであるといえます。

ニューモーフィズムの次に来るのでは、と話題になっているのがグラスモーフィズムです。

ニューモーフィズムの不透明な質感を、すりガラスのようなぼかした質感に変化させたものです。2020年、Appleが新しいOS Big Surにこのスタイルを採用したことで、今後はさらなる人気が予想されます。

終わりに

まだ30年にも満たないWebデザインの歴史の中でも、これだけ激しい移り変わりがあるということは、現在の主流なデザインも今後は大きく変遷していくことでしょう。

しかし、トレンドに関わらず大切なことは、常にエンドユーザーの利便性を考えてデザインすることです。

そのうえでコンセプトに合った手法を取り入れる、もしくはオリジナリティのあるデザインを自分で作ってみるのも面白いかもしれません。