LITERALLY

知っておくと楽しい知識をまとめて紹介

流行りのGoogleマテリアルデザインがすごい件

今更だけど「マテリアルデザイン」がスゴイ。デザイナーだけでなくノンデザイナーもその考え方を知っておく価値があると思う。

f:id:tsukuruiroiro:20170401162046p:plain

マテリアルデザインは2014年〜Googleが提唱している考え方だ。主にアプリやWebサイトに採用される。Googleのサービスにはだいたいマテリアルデザインが採用されている。はじめの一步としては「マテリアルデザイン=Googleっぽいデザイン」と考えるとイメージが湧きやすいのではないかと思う。

f:id:tsukuruiroiro:20170401163201p:plain

Google+Google MapGmailなんかは典型的なマテリアルデザインと言える。

 

マテリアルデザインの何がスゴイのか

「マテリアルデザインとは何か」と合わせてそのスゴさについて解説していく。

 

1. 厳密なガイドライン

よく比較される「フラットデザイン」とはここが決定的に異なる。フラットデザインは誰かが「こうやって作るもんだぞ」と提唱したわけではない。明確なガイドラインはなく、Windowsらしいフラットデザインもあれば、iOSらしいフラットデザインもある。それぞれが解釈したフラットデザインとなるのである。

一方、マテリアルデザインはGoogleが厳密なガイドラインを発表している。それも超厳密。ボタンの形から角の丸み、余白や色の使い方などまで「こうするべき」というのが指示されている。

f:id:tsukuruiroiro:20170401171327j:plain 

「それの何が良いの?」と思うかもしれないが、大きなメリットが2つある。

1つめは、デザインのセンスが無くてもガイドラインを守っていれば、ある程度は美しくオシャレでユーザビリティの高いデザインを作れること。ガイドラインを読むと本当にその完成度の高さに驚く。「Googleの考える最高のデザイン=マテリアルデザイン」なのである(きっと)。

f:id:tsukuruiroiro:20170401172132p:plain

2つめは、はじめてそのページを開いたユーザーでも、操作の仕方が直感的に分かること。ガイドライン通りに作られたWebサイトやアプリが増えれば増えるほど、ユーザーは使い方を覚えていく。どこがボタンで、どこがメニューなのか、どこをタップしたらメニューを閉じることができ、どうスクロールしたら次のコンテンツに進めるのか、が直感的に分かるようになるのだ。

つまりマテリアルデザインを採用するWebサイトやアプリが増えれば増えるほど、マテリアルデザインはユーザーにとって使いやすいデザインになる。このあたりがフラットデザインと決定的に異なる。というより、過去のあらゆるデザイントレンドと異なる。

 

2. 現実世界のように操作できる

f:id:tsukuruiroiro:20170401171456p:plain

マテリアルデザインの軸となる考え方は「現実世界の物理法則に則る」ことだ。まるで画面の中に紙が置かれているかのような奥行きのある表現がされる。紙同士が突き抜けたり、紙から文字がはみ出たりすることはない。現実の物理法則に逆らうことになるからだ。現実世界の物体を扱うかのように操作ができるため、何をするべきなのかが直感的に理解しやすい。

 

3. 触っていて気持ちが良いアニメーション

f:id:tsukuruiroiro:20170401171123p:plain

マテリアルデザインでは、連続性のある美しいアニメーションが使われる。 といっても目障りになるような派手すぎるものではない。ユーザーが正しく操作できていることを気持ちよくフィードバックためのアニメーションだ。とにかく触っていて気持ちが良いのだ。

 

マテリアルデザインはこれから普及するか

現状、マテリアルデザインを採用しているWebサイトはあまり多くない(Androidアプリだと結構あるが)。理由の1つに「取り入れることの難しさ」があると思う。ガイドラインが細かく複雑なのだ。しかし、教材やテンプレートは増えつつある。今後マテリアルデザインを採用するハードルは低くなっていくだろう。

「ガイドラインが厳しくて個性を出しづらい」というデメリットの声をよく聞くが、大抵のシーンでは個性よりもユーザビリティの方が大事になるはずだ。また、ガイドラインを守りながらもユニークな表現はできる。

何より、前述の通りマテリアルデザインは多くのWebサイトやアプリで採用されればされるほどその価値が高くなる。

今後、加速度的にマテリアルデザインのWebサイトやアプリが増えていくはずだ。

 

マテリアルデザインの作り方を学ぶ

マテリアルデザインの作り方については以下の記事が参考になるはずだ。

 

英語のガイドライン

また、日本語のガイドラインがPDFで配布されている。

マテリアル – 日本語