マテリアルデザインの特徴を解説！フラットデザインとは何が違う？

マテリアルデザインは、Googleが推奨するデザイン手法のガイドラインです。
PC向けに作成したデザインは、画面の向きやディスプレイの幅が変わると、レイアウトが崩れたり、操作性が悪くなったりすることがあります。
しかし、スマートフォンやタブレットなどモバイル端末からWebサイトにアクセスするユーザーが増えたため、デバイスが変わっても対応できるシンプルで直感的なデザインが求められています。
今回は、マテリアルデザインの基礎知識からその特徴、フラットデザインとの違いについてご紹介します。

目次

 

 

マテリアルデザインとは？

2014年6月、Googleより新たなデザインガイドラインとして、マテリアルデザインが発表されました。マテリアルは直訳で「物質的な」「具体的な」という意味で、ユーザーの操作性を重視して、感覚で理解できることを目的としています。

物質的なデザインとは、現実世界にある物の動きや影、奥行きに沿ったデザインを意味しており、ユーザーが感覚で捉えられるように、デバイスの違いによる操作性の差異をなくしています。直感的に理解できるよう、平面の画面でも立体的に見えるようにデザインするなど視覚的な工夫を取り入れています。例えば、「どのボタンがどのような意味をもっているのか」や「どこであればクリックできるのか」など、誰が見てもすぐにわかるように表現されています。

マテリアルデザインは、デバイスごとのディスプレイサイズに合わせて、デザインを最適化しやすいように装飾を減らし、シンプルなデザインを基本としています。装飾が多く施されているWebページは、スマートフォンなどのモバイル端末で表示した場合、デザインが大きく崩れる危険性があります。デバイスによらないデザインを適用することで、利用者にとってストレスが少ないサービスを提供することができます。

 

 

マテリアルデザインの特徴

直感的に理解しやすいマテリアルデザインは、視覚的に情報を取り込みやすくする工夫が多くあります。

●マテリアルデザインのベース

マテリアルデザインは、「紙」と「インク」の表現で形成されています。
紙は文字やアイコンなどの要素を配置するための土台となるものです。現実世界と同じように、通り抜けなど物理的に不可能な動きは表現できません。一方、インクは紙の上に配置された写真や文字といった要素を指します。
実際の画用紙に紙を重ねて貼り付けると厚みが出て影ができるのと同じように、マテリアルデザインも要素に影をつけることで、奥行きや高さ、幅などを立体的に見せることができます。

●特徴

画面の中でたくさんの色を使用するとユーザーの注意が散漫になってしまうため、マテリアルデザインではあまり多くの色数を使いません。平面でも3Dのように立体的に見せるために、「影」を活用して表現しています。例えば、2枚の紙が重なり合っているデザインの場合、上にある紙の縁に影を入れることで、視覚的に重なっているように見せることができます。
奥行き感も光と影のバランスで表現が可能です。2枚の紙の間に広めの影を入れることで、紙同士の距離を長く見せたり、反対に影の幅を狭くして距離を短く見せたりすることもできます。

動作面では、ボタンにマウスポインタを合わせると色が変わるなど、アニメーションを多く採用しています。関連性のあるアニメーションによって、ユーザー自身が操作しているような感覚を演出するためです。

 

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

マテリアルデザインと同じように、フラットデザインも無駄を省いたシンプルさを特徴にしています。具体的に、どのような違いがあるのでしょうか。

●フラットデザインの特徴

フラットデザインは、無駄をそぎ落としたシンプルな平面デザインです。過剰な装飾がないため、ファイル容量を小さく抑えられるのが特徴です。どこに何があるのかわかりやすい作りになっており、ユーザーの視覚的負担を軽減させることができます。洗練された都会的な印象を与えられる半面、一画面でデザインが統一されているため、重要な要素を目立たせられないという一面もあります。
そのシンプルさとデータ容量の少なさから、スマートフォンのアイコンやロゴにフラットデザインが多く用いられています。

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

フラットデザインの場合、画面上の変化があまりないためアイコンなどの要素がわかりにくくなってしまいます。一方、マテリアルデザインはアニメーションで意味のある動きを加えることで視覚的変化をつけ、ユーザーにわかりやすく表現しています。そのため、フラットデザインのシンプルさを残しつつ、感覚的な操作を可能にした新しいデザインとしてマテリアルデザインは位置づけられています。

しかし、マテリアルデザインはフラットデザインに比べて一画面のファイル容量が大きいため、読み込み速度が遅くなるというデメリットがあります。
どちらか一方で制作するよりも、マテリアルデザインとフラットデザイン双方の良さを生かしながらWebサイトを作成するとデザインの幅が広がるでしょう。

 

マテリアルデザインで大切な要素

Webサイトを作成する際にポイントとなる、マテリアルデザインの重要な要素について見ておきましょう。

●影

影は、各オブジェクトの関係や距離を知るための手掛かりになります。例えば、写真を表示する場合、リストの中から見たい画像をクリックすると背面が薄暗くなり、写真がはっきりと表示されます。この影の動きによって、ユーザーは写真が上にあるオブジェクトであることを理解します。また、画面をスクロールした場合は、影の動きによって「上に移動したのか」「下に移動したのか」を表現することが可能です。

●アニメーション

ユーザーの操作に対して感覚的なサポートを行うのが、アニメーションの役割です。視覚的な動きがあると、ユーザーは自身が行った操作を認識しやすくなります。例えば、タップ操作を行うとオブジェクトに波紋を表現する「Ripple（リップル）」というアニメーションがあります。ユーザーは波紋のエフェクトによってタップしたオブジェクトを認識し、操作を感覚的に捉えやすくなります。

●厚み

厚みは紙のレイアウトで表現します。「つなぎ目」と「段差」の2つがあり、つなぎ目は2枚の紙を並べてつなぎ合わせたイメージで、見た目に奥行きはありません。一方、段差は紙が重なって厚みが出ているイメージです。影によって背面・前面を表現するため、見た目に奥行きを出すことができます。

●ボタン

ボタンには「フロート型（フローティング）」「持ち上げ型（レイズド）」「フラット型」の3つの種類があります。フロート型は、紙のレイアウトでつなぎ目に配置された場合、両方の紙にまたがるものです。段差に配置される場合は上になる紙に属し、画面がスクロールされると連動して動きます。持ち上げ型はボタンを隆起させたり、リップルのような動きをしたりするもので、フラット型は操作時に色が変化するなどの動きがありますが、持ち上げ型とは異なり、隆起することはありません。
ボタンの重要度や画面のレイアウトとの兼ね合いを考慮しながら、最適な表現を選択しましょう。

 

直感的な操作で使いやすいマテリアルデザイン

マテリアルデザインは3Dのような立体的表現を用いて、直感的な操作性とユーザーの利便性を向上させるといわれています。
Googleで公開されているマテリアルデザインのガイドラインに沿って作成していくと要素を取り入れやすく、比較的簡単に導入することができるでしょう。
また、Webサイトだけでなく、アプリの開発などにもマテリアルデザインは活用することができます。
Googleでフォントや素材なども提供されているため、一から作るのが難しい場合はこれらを活用してみるのもおすすめです。

 

 

■ホームページ制作に関連した記事

WordPressを使ったWEBサイト制作でおすすめの会社7社

 

 

EC-CUBEを使ったECサイト構築でおすすめの制作会社8社