フラットデザインとマテリアルデザインは何が違うの?

記事公開日:2018.05.14

最終更新日:2018.08.29

865 PV

近年、身の回りのWebサイトや紙媒体のデザインが、マテリアルデザインからトレンドのフラットデザインに変更されています。今回の記事では「フラットデザイン」と「マテリアルデザイン」の違いを書きたいと思います。

フラットデザインとは

フラットデザインとは、平面的で立体感や質感がほとんどないデザインを指します。文字の大きさもできるだけ小さくし、タイポグラフィもシンプルなものを使用します。フラットデザインは「フラット=平らな・水平な」という名前が付いているように、実にシンプルです。

 

基本的には、グラデーションや影などのエフェクトをできる限りかけないようにするのですが、最近では薄いグラデーションや軽い影があってもフラットデザインと呼ばれることがあります。

フラットデザインのメリット

装飾を限界まで控えたデザインなので、ユーザーの目に優しくストレスもかかりにくいデザインです。合わせて、コンテンツがシンプルなデザインですので、レスポンシブデザインになってもユーザーが見やすく、シンプルなタイポグラフィを使用しているので読みやすく、色や要素もはっきりしているデザインですので、配置などわかりやすくなっています。

 

また、Webサイトではフラットデザインのほうが容量が少ないので、読み込みに時間がかからず、ユーザーのストレスを軽減できます。コンテンツのデザインがシンプルですので、レイアウトの変更なども比較的簡単にできます。

 

縦長のwebデザインギャラリー・サイトリンク集から様々なフラットデザインのサイトが見れますので、デザインや配色に迷った際に参考にしてみてはどうでしょうか?

 

フラットデザインのデメリット

シンプルなデザインであるが故に、フラットデザインは似たようなものが多く存在します。また操作性については、エフェクトを極限にまで抑えたデザインですので、モーションなどの視覚情報が無く、ボタンを押せるかどうかわからないなどの課題があります。

マテリアルデザインとは

フラットデザインと同じように、シンプルなデザインが特徴のデザインです。フラットデザインは、立体感・質感が全くないデザインですが、マテリアルデザインは、「現実世界の物理原則」を基に、立体感や質感を重視して作られています。まるで自分で直接触ることができるような、直接触って操作しているような感覚になるのがマテリアルデザインです。

 

フラットデザインは、「なんとなくフラットに見えるように作る」というように感覚で作成しているので、デザイナーの感覚によって自由に作成されますが、マテリアルデザインは明確なルールが決まっています。

 

Googleが、2014年にガイドラインを発表したのもフラットデザインとは違うところです。マテリアルデザインはGoogleが開発したものです。

参考:Google Design

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

マテリアルデザインは立体感・質感を重視しているので、ボタンやテキストリンクなどを見つけやすくなっています。また、マテリアルデザインは、画面上で実際に自分の手で触って操作しているような感覚になりますので、ユーザーはストレスを感じずに操作をすることができます。

 

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

マテリアルデザインは、立体感・質感などを出すためエフェクトを使用します。フラットデザインと比較すると、容量が大きくなってしまうため、画面表示の速度などが遅くなる可能性が高くなります。

 

また、マテリアルデザインの長所でもある質感が、ユーザーの端末の画面上で表現するのが難しいため、レスポンシブデザインには向かないです。

カラーパレットのWebサービス「material design palette」

独特な配色のマテリアルデザインですが、実際デザインするとなると配色や配置に悩まされそうです。しかし、配色の悩みを解決してくれるWebサービスがあります。「material design palette」です。

 

使い方は簡単で、使用したい2色を選択するだけで、アクセントカラーやテキストカラーなどを自動で抽出してくれます。実際使用しましたが、本当に便利でした。

フラットデザインに変わったいろいろなもの

iphoneやandroidなどスマートフォンが普及して、ユーザーは様々なデバイスでWebサイトを見るようになりました。ここ数十年で身の回りの様々なデザインが、マテリアルデザインからフラットデザインに変わっていますのでご紹介します。

アプリケーションのデザイン

ここ数年で、スマートフォンのアプリのデザインが、フラットデザインに変わっています。例えば、LINEのトーク画面です。

 

LINEのトーク画面が、少し前までマテリアルっぽいデザインでした。吹き出しに影がついていたり、吹き出しの背景がグラデーションになっているのがわかります。

しかし、現在のLINEのデザインでは、影もグラデーションも消えています。トレンドのフラットデザインを取り入れたはいいものの、デザインの変更は賛否両論みたいです。

Googleのロゴデザイン

Googleのロゴタイプも、マテリアルデザインからフラットデザインに変更されています。1999年くらいまでは、立体感のあるロゴタイプのデザインでした。

2018年現在では、ベタ塗りのフォントが太いデザインに変更されています。Googleのロゴもフラットデザインのトレンドにのったのでしょう。

結局どっちのスタイルがいいのか?

近年、私たちの身の回りのデザインがフラットデザインに変わっていますが、フラットデザインもマテリアルデザインも要所要所で使い分ければいいと思います。 フラットデザインが今はトレンドになっていますが、今後マテリアルデザインが再びトレンドになることもあります。ユーザーにとって最適なスタイルを選択しましょう。

このエントリーをはてなブックマークに追加