Googleが推奨するマテリアルデザインとは？フラットデザインとの違いを理解しよう

マテリアルデザインとはどんなデザインのことを言うのか、理解できていますか？昨年Googleが公式にガイドラインを発表し、一躍話題となったトレンドデザイン。１年経った今、デザイナーであれば知っていて当然かと思いますが、非デザイナーであればその曖昧な定義を正しく理解できている人は少ないのではないでしょうか。

改めてマテリアルデザインについて調べたことをまとめます。

マテリアルデザインって？？

マテリアルデザインは、
「合理的な余白と動きを使った統一理論に基づいたもの」
と定義されます。

なんのこっちゃわかりませんが、とりあえず下記動画を観てみてください。

どのようなビジュアルと動きをするのか簡潔にまとめられた動画。マテリアルデザインについて、だいたいのことは伝わったのではないでしょうか。

ここで湧く疑問。

これってフラットデザインとどう違うの？

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

フラットデザインとマテリアルデザイン、一見すると同じように見えませんか？この似通った２つのデザインの違いについて、しばしば議論になることがあります。

フラットデザインを紹介するサイトで、マテリアルデザインが紹介されていたりと、巷の情報の中では曖昧で混乱することもあるかもしれません。

非常にデザインが近いことや、フラットデザインから派生してマテリアルデザインが生まれたことなどもその理由です。

非常にややこしい２つのデザインですが、いくつかの「違い」があるので、そのポイントを押さえておきましょう。

フラットデザイン

スマホが急速に普及して、世はPCよりもスマホサイトの方が重要であるケースが目立つ
「モバイルファーストの時代」に入りました。

スマホの小さな画面で表現できることには限界があります。そして生まれたのがフラットデザイン。

重要な機能のみを取り入れ、その他の一切の無駄を排除したシンプルなデザイン。シャドウ（影）やグラデーション、テクスチャといった装飾は使いません。アイコンや配色、タイポグラフィーらを中心に組み立てられていきます。

フラットデザインが普及したことで、リッチな画像素材を使用する必要性も少なくなりました。読み込み速度が速くなり、シンプルな画面からサイトの伝えたい事をダイレクトに表すことができます。

スマートフォンで長時間閲覧しても、ユーザーにストレスを与えにくいデザインであるのですが、一方でフラットデザインには、「どこを押せば良いかわからない」などユーザーにストレスを感じさせるケースも多々見られます。

マテリアルが生み出すのは「触感」

そんな課題も解決するのが、フラットデザインから派生して生まれ、「光・影」や「奥行き」の表現が含まれたマテリアルデザインです。

「視覚」ではなく「触覚」にポイントを置くマテリアルデザインでは、触れるかのような「物質（Materil）」を表現しています。

スキューモーフィズムのように、現実世界と瓜二つのビジュアルを表現することを目的とはしていません。ただ、現実世界にある物質が持つ「質量」を表してあげることで、それに近いユーザー体験のサポートを実現しています。

マテリアルデザインとフラットデザインは、シンプルなビジュアルの中に余白が多くあることで、見る人が何に集中すればよいのかが伝わりやすいデザインです。

それに加えて「触感」を得たマテリアルデザインは、操作の仕方を直感的に予想することができ、フラットデザインより更にストレスレスなユーザー体験を実現できるとされています。

マテリアルデザインが強調するのは、ユーザーの「アクション」。

操作する人の心理を正しく理解し、導いてあげなければ、そこに生まれるのは「ストレス」。シンプルだからこそ、難しく、的確な理解と想定が必要なのです。

Googleがマテリアルデザインで実現したい事

Googleの取り組みは大胆で壮大です。

2014年、公式にガイドラインを発表し、自社のサービスに積極的に取り入れているマテリアルデザイン。

Googleが開発するandoroidはもちろんのこと、youtube等を視聴することができる時計「Android Wear」や自動車用の「Android auto」など、あらゆる場面に適用。スマホやタブレットのみにとどまりません。

あらゆるジャンルがある中、ひとつのUIフレームワークをすべてのプロダクトに適用しようとしているのです。

デザインといえばまずAppleを思い浮かべる人が多い中、Googleはデザイン領域でも勝負に出ました。Googleがが関わるサービスを見れば「これがGoogleだ」と人々に思わすことができるGoogleの世界観の構築を目指しているとも言われています。

「エキサイティングでモダンで、使えるものにしたかった」
Androidのデザイン責任者を務めるマティアス・デュアルテ氏が、米Gizmodoのインタビューにそう答えました。

Googleにとっても、会社の中の人々が横断的に参加したプロジェクトで、困難を乗り越えて進んできたことを語っています。

⇒gizmodo「マテリアル・デザインって何？ Androidデザイン責任者にインタヴュー」

マテリアルデザインをどう取り入れていけばいいか

ここまでで、「マテリアルデザインとは何なのか」「フラットデザインとどう違うか」「Googleがいかに力を入れているか」が伝わったでしょうか。

それでは、そのマテリアルデザインをどう取り入れていけばいいのでしょう。

Googleが公表しているガイドラインが、今のところマテリアルデザインについて最も体系だって説明されているチュートリアルかと思います。全文英語の結構な文章量なので、読み込むのはなかなかハードですが、図を多く使われていますし、Google翻訳に突っ込めばだいたい言っていることはわかります。

⇒Googleガイドライン

おおまかに以下の３つのことを強調しています。

・触れて感知できる
・プリント印刷されたようなデザイン
・意味あるアニメーション

紙とインクでできた奥行きある素材。それらが紙を重ねて構成されているかのように設置していくというイメージでしょうか。

そのシンプルな構成とレイアウトについては、Googleがテンプレートを無料で公開しています。。aiファイルでダウンロードができるので、レイアウトに迷ったら一度ダウンロードしてみてください。ワイフレなので、シンプルなテンプレートですが、ガイドラインに沿ったグリッドで正しく配置されているレイアウトは、間違いありません。

上記Googleが用意したガイドライン以外にも、マテリアルデザインについて参考になるサイトがいくつかあるのでご紹介します。マテリアルデザインを取り入れるのに迷ったら下記サイトを見てみてください！それでは！

参考になるサイト

Materialize
http://materializecss.com/
動きのサンプルが豊富。CSSも記述されているので、実装の参考になること請け合い。

MaterialUp
https://www.materialup.com/
毎日12個のデザインサンプルが更新されます。マテリアルデザインに使用できる素材を無料でダウンロードすることが可能。シェアボタンがあるので、デザインの参考に開発チームメンバーに共有もできますね。

Material Interaction
http://material.cmiscm.com/
マテリアルと双方向性（インタラクション）がわかるサイト。