Lonely Doll’s frontend blog

Web や アプリの Frontend 技術についてのブログです

マテリアル デザイン ってなに? フラット デザインとどう違うの? / What is difference between material design and flat design ?

マテリアル デザイン ってなに? フラット デザインとどう違うの? / What is difference between material design and flat design ?

そうだ、マテリアル デザイン はじめよう。

今更ながらふと思い立ち、マテリアル デザインの勉強をはじめた。
マテリアル デザインって、これも今更ながら説明はいらないと思うけど、Google が 2014 年の Google I/O で発表した、デザインのガイドラインのことだ。

マテリアル デザイン ってなに?

マテリアル( material )って直訳すると「物質」だけど、公式サイトではこの言葉に込められた、マテリアル デザインの思想について次のように書かれている。

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

(超訳)
「マテリアル(=物質的)」というメタファーは、合理化された空間と運動システムを統合する理論を表しています。マテリアルは、紙とインクの研究に触発された触覚的な現実に基づいていますが、技術的に進歩し、想像力と魔法に対してオープンです。

つまり、これまでにもあったようなフラット デザインのシンプルさに加え、手触り感を表現しよう、という感じなのだろう。
このことは、Google が公開している マテリアル デザイン の動画を見ても良くわかる。

Material design

ほんの些細なことだけど、ボタンの影があったり要素をドラッグするときに少し浮いた感じになるあたりが「物質」を感じさせる、つまり「マテリアル」なんだろうな。
また、マテリアル デザインは クロス デバイス 環境を意識して開発されているとのこと。つまり、スマホやデスクトップ パソコン、更にはテレビやウェアラブル 端末などでも、同じような直感的な印象を与えられるように、ということが意識されている。

じゃあ フラット デザインはどうだったの・・・?

日本語版には無いんだけど、英語版の Wikipedia には詳しい解説がある。

Flat design is a style of interface design emphasizing minimum use of stylistic elements that give the illusion of three dimensions (such as the use of drop shadows, gradients or textures) and is focused on a minimalist use of simple elements, typography and flat colors.

(超訳)
フラット デザインは、インターフェース デザインのスタイルで、3次元を思わせる最低限のスタイル要素(陰影、グラデーション、肌感)を強調したもので、シンプルな要素、タイポグラフィ、フラットな配色を用いた最小限の表現にフォーカスしたものである。

ちょっと翻訳がいい加減だけどゆるしてほしい。
派手なエフェクトなどはやめて、見ている人に伝えたい要素がひと目で分かりるような、シンプルなデザイン、ってとこじゃないだろうか。

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

この2つのデザイン コンセプトは、シンプルさを追求する、という点で共通するところはあるけど、より物体の動きや配置などにこだわったのが「マテリアル デザイン」ってことじゃないだろうか。
マテリアル デザインに関するさまざまなサイトを見ても、「エレメントの位置関係を意識して表現する」「操作に対するレスポンスをデザインとして表現する」「モノの動きを重要視する」といった記述が目立つ。このあたりは、エフェクトは最小限にしよう、としていた フラット デザインに比べると、人とシステムのインタラクションを重視している、といえるだろう。

先程の Google の動画に加えてもう一つ、Making Material Design という動画が公開されていて、この マテリアル デザイン を開発した人たちのインタビュー形式で マテリアル デザインに込められた思いが紹介されている。そこでもやはり「人とシステムの関係を直感的に表現したい」といった趣旨の発言があり、シンプルさをキープしながらも必要な動作を表現することで、より人に使いやすいデザインとなることを重視して開発されたのが マテリアル デザイン、という感じだ。

Making Material Design

・・・ところでこの動画の中で、マテリアル デザイン を開発するために作ったモックとか資料が出てくるんだけど、デザインそのものの開発ってやっぱり大変なんですね・・・
実際にアプリやサイトで見る人は裏にそんな苦労があるとは全然気が付かないんだろうなぁ・・・でも、そんな苦労に支えられた些細な違いがユーザーとアプリやサイトの関係をより良くするのだ、と思うと奥が深いなぁ・・・