マテリアルデザインとフラットデザインの違いは?特徴や長所を比較

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

「フラットデザイン」と「マテリアルデザイン」って一見似ており、違いが分かりづらいですよね。この記事では、2つの違いを分かりやすく解説します。

2. ガイドラインの違い

いつから流行りだした?

  • フラット:2012年頃〜普及。ガイドラインは無い
  • マテリアル:Googleが2014年にガイドラインを発表した

facebookやInstagram

フラットデザインは「iPhone」や「Windows」「Instagram」「facebook」などなど大御所たちがどんどんと採用することで普及が進んできました。どこかの企業が「フラットデザインはこうやって作るもんだ」と発表したわけではありません。

そのため、フラットデザインは一口で言えないほど様々な表現がされています。なんとなく「こうやって作るべき」という考え方は決まっていますが、人々のとらえ方次第で自由にデザインができます。つまり作り方のルールがあいまいなのです。

Chrome icon min

マテリアルデザインはGoogleにより明確なガイドラインが発表されています。「ボタンの位置や形」や「影のつけ方」までルールが決まっています。

つまり、作り方のルールがハッキリとしているのです。

ポイント
マテリアルデザインはガイドラインに則って作る!フラットデザインは比較的自由に作る

マテリアル寄りのフラットデザイン

違いを分かりづらくしているのはこの部分です。フラットデザインは自由度が高いため「なんとなくマテリアルデザイン寄りにすることもできてしまう」のです。

しかし、いくら自由といってもフラットデザインに影をつけて奥行き感を出すことはありません。そのために「2つの違いは影なんだ」と捉えられがちなのですね。

3. マテリアルらしさ

マテリアルデザインには明確なガイドラインがあるために「これぞマテリアル」と言えるような特徴的なパーツがあります。

▼ カード

カード

「カード」と呼ばれるパーツがよく使われます。平面上に置かれた紙がイメージされており、背景には自然な影がつきます。

しかしマテリアルデザインだからといって常にカードが使われるわけではありません。

▼ フローティング操作ボタン

フローティング操作ボタン

浮き上がったような丸いボタンもよく使われます。このボタンの使いどころや形や配置位置はガイドラインでしっかり決まっています。

▼ 段差のあるメニュー

メニュー

少し大きめの影をつけて段差を表現したメニューもよく使われます。Googleのサービスでよく見かけますよね。

▼ クリック時に波紋が広がるボタン

ボタン

クリック時に波紋が広がるようなボタンが取り入れられることもよくあります。

他にもガイドラインで定められたパーツがたくさんあります。最近では、フラットデザインだけど「一部にだけマテリアルデザイン風のボタンやメニューを取り入れてみた」ようなものもよく見かけます。それゆえに境目が曖昧になっているわけです。

マテリアルデザインは操作が分かりやすい

上で紹介したようにマテリアルデザインでは「どこがクリック(タップ)できるボタンなのか」が非常に分かりやすくなっています。

タイルの背景色

一方でフラットデザインでは、現実世界のような奥行きの表現がないため「どこがボタンなのかが分かりづらい」のです。

マテリアルデザインは、フラットデザインのデメリットをうまくカバーしているとも言えるでしょう。

4. マテリアルデザインとフラットデザインのメジャー度の違い

現状では断然フラットデザインの方がメジャーです。しかし、マテリアルデザインが取り入れられたWebサイトやアプリは徐々に増えつつあります。今後マテリアルデザインのWebサイトはどんどん増えていくでしょう。

5. 結局どっちが良いの?

では、結局どちらが良いのでしょうか。個人的な意見では以下のようになります。

  • 個性的な表現がしたい → フラット
  • 使いやすさ・分かりやすさが何より大事 → マテリアル
  • 今後のトレンド(予想) → マテリアル
サルワカ