アプリ・Webデザインにマテリアルデザインを意識して用いる手法

アプリ・webデザインにマテリアルデザインを意識して用いる手法

「マテリアルデザイン」とは、Googleが提唱する新しいデザインガイドラインです。Googleでは、デザイン関連のガイドラインを今までにも公表していましたが、今回の「マテリアルデザイン」はこれに代わる新しいガイドラインになるかと思います。

今回は、この新しいガイドライン「マテリアルデザイン」とは何なのか、アプリケーション・Webデザインに用いる場合はどうすればいいのか考えてみます。

マテリアルデザインとはなにか

Google Design

Googleのマテリアルデザインのサイトがこちらになります。公式のサイトということだけあり、こちらのを目を通しているだけでマテリアルデザインについて多くのことを学ぶことができます。

「マテリアルデザインは、紙とインクの古典的なデザインから着想を得て、最新テクノロジーを利用し、どんなデバイスでも使いやすく、統一感のあるユーザー体験を提供するためのデザイン」というのがこのマテリアルデザインのガイドラインの基礎となる考えになっています。

普段、私達が生活するなかでモノを見たり触ったりする感覚をモバイル、タブレット、デスクトップその他複数のデバイスにわたるものにも直感的に、その場にあるよう利用できるようにするのが目的になってきます。

すべてのマテリアル(物質)には質量がある

現実世界のすべての物質には質量を持っています。物質がいきなり消えたり、止まったり、方向が変わったりすることはしません。さらに物質には光が当たり反射したり、影ができたりもします。

そのような常識の中で生活している私達にとって、Webサイトやアプリケーションの中で、なにかしらのアクションをした時、急にページが切り替わる、閉じてしまう、など操作によって何が起こったのかわからないのはストレスになってしまいます。

これらのストレスを回避するためには、人間の生活に中にある動きに合ったアニメーションを必要になってきます。

Chat animacia 2

ユーザーの動きに合わせて、画面内のオブジェクトが流れるようにアニメーションすることによって、ユーザーに対して、自分がきちんとアクションを行っているという実感を直感的に与え、操作によって何が起こったのを把握させ、次のシーンへつなげるアニメーションが必要になってきます。

マテリアルデザインの特徴

Meaningful transitions   Animation   Google design guidelines

Meaningful transitions

上記であげたアニメーションの他に、いくつか特徴的な例があります。

  • シャドウなどを用いることで、オブジェクトに面を持たせることで、奥行きなど伝えやすく、それが触れる(タップ/クリック)ことができるものだとユーザーに直感的に認識できるようにする。
  • 光、面、奥行き、動きを利用することで、各オブジェクトがどのように作用しあうかをユーザーに直感的に伝えやすい。
  • リアルなライティングにより、オブジェクトを本物らしさを高める
  • 遷移と現在いる場所を意識させるアニメーション
  • 質感をなくし、統一感のある配色を用いる
  • 余白を意識する重要性

マテリアルデザインを意識する手法

現在までに数多くのモバイル・アプリが作られデザインのセオリーなども存在してきたが、Googleによってマテリアルデザインとして再定義されたことにより、アプリの業界だけではなく、Web業界にも影響を与えることは必至になるかと思います。その中で、私達Webデザイナーがマテリアルデザインのどんな点に意識してデザインしたらよいのか、上記で挙げた特徴例からまとめてみました。

シャドウを効果的に使ったデザイン

スキューモーフィズムデザインが流行った際には、シャドウを用いられることが多かったが、フラットデザインがトレンドになった今、シャドウは極力使われないデザインが増えてきた。しかし、マテリアルデザインでは、ユーザーがアクションを起こす場所・起きた場所などで少しおおげさなシャドウを使うことで強調し、コンテンツの変化を表す表現で用いる。

Whatismaterial 3d elevation2

image by Objects in 3D space

 

遷移と現在いる場所を意識させるアニメーション

Webのデザインでも、ページリフレッシュを行わずにJavascriptなどを使うことによって、同一画面内で遷移を完結させるようなデザインが増えてきている。マテリアルデザインでも、画面から画面に遷移する際も、滑らかに繋がるよう、遷移させることが推奨されている。

そうすることにより、ユーザーが自分の起こしたアクションによって、自分がどこにいて、どこへ移動したか、自分がどの階層にいるかなどをわかりやすく表現できる。

質感を落とした統一感のある配色

スキューモーフィズムデザインでは、質感があるようなデザインが多かった。しかしマテリアルデザインでは、そういった表面上の質感は排除する。配色などはハイライトで強調した鮮やかな色彩を用いることが多い。(参考記事:配色のトレンドのパターンと便利なツールのまとめ

Color   Style   Google design guidelines

マテリアルデザイン カラーについて 

意味を伝えることができるアイコン

今までのデザインでも多くのアイコンが使用されてきました。アイコンには「どのようなモノか」「何を意味しているか」を小さいスペースでユーザーに直感的に伝えることができるツールとされてきました。そのアイコンを見ただけでなにができるか、なにを意味しているものかわかないアイコンはユーザーにとって優しくありません。

Googleでは、そのようにアイコンの形、角、あしらい、シャドウなど定義しています。

Icons   Style   Google design guidelines

余白を意識する重要性

マテリアルデザインは、すべてのデバイスで表現を共通化し、よりシームレス(継ぎ目のない)な設計思考がある。

Googleのマテリアルデザインのサイトを見てみると、「普通の余白」と思うより多めに余白をとっている。レスポンシブWebデザインが取り入れられているいま、余白を多めにとることによって、デバイス幅が狭くなった時に、その余白を有効に活用できる。

マテリアルデザインを取り入れる際には、「大胆な余白」を意識するように心がけたい。

まとめ

公式サイトを見るだけではわからないことがあり、それらのことをすべて理解し、これからのアプリケーション・Webデザインに適切に落としこんでいこうと思ってもなかなか難しいのではないかと感じます。ですが、いままのガイドラインにはなかったデザインを数値化して目に見えるようになっているところでは、とても画期的なのではないかと思いました。

今後、アプリケーションだけではなく多くのWebサイトでもマテリアルデザインを取り入れたサイトが増えてくるかと思い、進化と実用化が大いに期待できワクワクしてきちゃいます。