1. まとめトップ

Googleマテリアルデザインとフラットデザインって結局何が違うの?[UI/UX]

マテリアルデザインのサイトのまとめをみていると「あれ?これフラットデザインじゃないの?」ということがよくあると思います。ややこしい気もしますが「考え方が違う」という部分からなら理解しやすいと思います。

更新日: 2015年05月10日

33 お気に入り 106674 view
お気に入り追加

マテリアルデザインのサイトのまとめをみていると「あれ?これフラットデザインじゃないの?」ということがよくあると思います。
実際マテリアルデザインじゃないものまでマテリアルデザインとして紹介しているサイトも、ありますよね?

最初に言っておくと初期のフラットデザインから派生した中に、ほぼマテリアルデザインと言って良いものももともとあります。
ややこしい気もしますが「考え方が違う」という部分からなら理解しやすいと思います。

まずフラットデザインって?

わかりやすいフラットデザインの例です。

・質感や立体感がほとんどない
・エフェクトは最小限
・文字も最小限
・目的や商品が一目でわかる
・部品の機能が一目で分かる
・各要素がくっきりしている
・グラデーションを使わない
・シンプルなタイポグラフィ
・シンプルなグリッドレイアウト

「エフェクトは最小限」がポイント。

ざっくり言ってしまうとフラットでシンプルなやつです。見た目がフラットだったらフラットデザインですね。わかりやすい。

もともとは完全にフラットでしたが、途中から多少の影やグラデーションがあってもフラットデザインに分類されるようになった、という部分がマテリアルデザインと混同される原因になっています。
ただ影を許容してしまうと混乱するので、影があった時点でフラットデザインから「フラットデザインっぽいデザイン」になると思っちゃっていいです。淡いグラデーションは割とOKです。
基本的に「フラットな見た目」という見た目での分類であることを知っていれば大丈夫です。

メトロUIもなんか似たやつだよね?

モダンUIに名前が変わった関係で「モダンなUI」のイメージがおかしいことに

メトロUIはどこか遠くの別の世界のやつです。今となってはデザインの話の中でそうそう出てくる事はありません。
言われるまで存在を忘れていた方は今一度忘れてください。

それで、マテリアルデザインって?

マテリアルデザインは画像で見ただけではどういうものという理解は難しいと思います。最低限のコンセプトは知っておきましょう。

Material is the metaphor

物質(マテリアル)は比喩(メタファー)です

The use of familiar tactile attributes helps users quickly understand affordances.

よく知られた触覚の特質を使用すると、ユーザが速くアフォーダンス(見た目から連想する機能)を理解する助けになります。

なんとなくスキュアモーフィズム的に聞こえますが、視覚ではなく「触覚」という表現であることに注意してください。
※スキュアモーフィズム - ざっくりいうと現実にある物を模したリアルなアイコンを使うと、みんな(パソコンとかスマホとか初めてな人にも)現実での経験から機能を推測できるから伝わりやすいよ!ということです。フラットデザイン化する前のiPhoneなどのiOSをイメージしてください

The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other.

光、外観と動きの基本原理はスペースに対して、そしてお互いに関してオブジェクトがどのように動いて、相互作用して、そして存在するかを伝えることへの鍵です。

「触覚の特性」というのが動画で見るとわかりやすいです。
慣性のある動きをします。

エレメントの位置関係を意識してください

マテリアルデザインではZ軸の概念を積極的に取り入れています。エレメントが図のように重なっているイメージを持つ事が全ての前提となります。

重なり合えば必ず影が出来ます。濃く小さな影、淡く大きな影、それを真上から見たとしてもそれぞれのエレメント同士の距離感がつかめるはずです。
そして、ご覧のとおりそれぞれのエレメントには厚みがありません。ぺらっぺらです。

マテリアルデザインは紙から着想を得たデザインなので、机の上で紙が浮いているイメージです。
その紙はくっ付いたり変形したりしますが、他の紙を突き抜けるようなことはありません。
また、重なって存在する事もできません。

ぱっと見の違い

④のようにエレメントと影の形が一致しないような影のつけ方はガイドラインにはありません。
ですが、色々なサイトを見ていると「許容されそうな雰囲気」はあります。

マテリアルデザインではこのようないわゆる普通のボタンは「Raised button(隆起したボタン)」と呼ばれ、枠のないテキストだけのボタンであっては不都合があるときに使います。

影を取り入れたフラットデザインに関しては扱いがあいまいですが、一応はフラットデザインから外れます。

特徴的なボタン

丸い車のマークのボタンがフローティングアクションボタンです。
これはページ内の最も重要度の高いボタンで、1ページ内に最大で1つまでしか使用できません。
マテリアルデザイン以外での使用頻度はあまり高くないので、これがあったらいかにもマテリアルデザイン!という感じです。

操作に対してレスポンスを返します

たまにマテリアルデザインについて書いてあるサイトにレスポンシブとだけ書いてあって紛らわしいですが、レスポンシブデザインのことではないです。

ユーザーの操作に対して反応を返してあげると操作感があがって良いですよ、ということ。

マテリアルデザインでは動きを重要視します

当然「動く=マテリアルデザイン」ではありませんが、動きが多いのがマテリアルデザインの特徴です。

タップしたフローティングアクションボタン自体がアニメーションの起点になってコンテンツが展開されています。

アニメーションの起点はタップした場所からであることが多く、ユーザーの操作が直接作用したことがわかりやすい動きが特徴です。

どこがアニメーションの起点になるのかわかりやすい例です。

アニメーションには理由があります。
ユーザーが自分がしている事と、その結果がつながっていることを理解する為に役立ちます。

1 2





WEBデザイナーです
デザイン関係をまとめようと思ったんです。



  • 話題の動画をまとめよう