FruGraの提供でお送りします。

FruGraが心に留めたことを発信するブログです。

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

f:id:FruGra:20180625231901p:plain
 本日は聞いたことあるような気がするけど何ものなんだろうという、「フラットデザイン」と「マテリアルデザイン」を紹介します。どちらも似たようなデザインなので難しいと思われるかもしれませんが、私も今日スライドを作っていて、ふと気になったので調べてみました。 

フラットデザイン

ずばり、立体感や光沢感、透明感などの装飾的要素をなくした平面的なデザインのことを指します。

フラットデザイン自体は1950年代ごろとずいぶん古くから存在しているようなのですが、2000年代からマイクロソフトWindowsに取り入れ始めました。

Windows 8をきっかけに人気が急上昇したそうです。こんな画面みたことありますよね。かつてはモダンUI*1だとかメトロUIだとか呼ばれていました。

f:id:FruGra:20180625232556j:plain

 Windows Vistaで使われていたWindows Aeroのようなリッチデザインからシフトしてきたわけです。

ところで、フラットデザインでは原則として影を使いません

ということは、アイコンをクリックしたりタップして意味があるのか、ぱっと見ても分からないですよね。

 そこでマテリアルデザインの登場です。


マテリアルデザイン

マテリアルデザインとは2014年にGoogleが発表した新しいデザインのことです。

マテリアルというのは「物質」を意味しており、簡単にいうと、現実世界の質感を平面で表現したものということになります。
例えば影によって距離感を表すことができます。このページの最初にある画像を見て頂ければ一目瞭然かと思います。これならタップしてみようという気になりますよね。

 他にも緩急のあるアニメーションも特徴的です。現実世界での動きを参考にしているので、自然に受け入れることができます。 
このようにマテリアルデザインフラットデザインの進化系だと考えればよさそうですね。

 

ミニマリズム

さて、ここまでフラットデザインマテリアルデザインを比較しつつ流れを追ってきましたが、これらのデザインはともにミニマリズムというスタイルに属します。

 装飾を必要最小限まで省略する表現スタイルなのですが、Webデザインだけでなく、芸術やファッションにも共通するものです。皆さんのおなじみのブランドにもたくさん使われているはずですよ。

たとえばPICTOというブランドをご存じでしょうか。こちらはまさにミニマルという感じですね。

f:id:FruGra:20180625234825j:plain

https://www.nordicfeeling.jp/fs/nordicfeeling/c/picto

最近ではこういったデザインもすっかり定着して受け入れられてきましたが、ひと昔まえからすると急激な変化ですよね。今後10年、20年後にはいったいどんなデザインが流行っているのでしょうか。