« ブログのトップページに戻る

Google提唱! マテリアルデザインって何?

   投稿者 : 2015年7月6日 By

イメージ画像

「マテリアルデザイン」とは、2014年7月にGoogleが発表した新たなデザインガイドラインである。「マテリアルデザイン」は直訳すると「物質(素材)デザイン」。デジタルの世界に物質的な現実的要素を取り込んだデザインというのが大枠にある。
その基本コンセプトには「マテリアルデザインとは、紙とインクの古典的なデザインから着想を得て、最新テクノロジーを利用し、どんなデバイスでも使いやすく、統一感のあるユーザー体験を提供するためのデザイン」と記されている。「紙とインク」というマテリアルを基本としたデザインに最新テクノロジー、つまりアニメーション技術により、最高のユーザーエクスペリエンスを実現することが「マテリアルデザイン」なのである。今やFacebook、LineといったアプリやGoogleMapやGMailなど、Googleが提供しているその他多くのAndroidアプリは、このマテリアルデザインガイドラインに沿って設計されている。今後はAndroidアプリの多くがマテリアルデザインを踏襲するように設計され、さらにアップグレードされるだろう。
今回はAndroidアプリデザインばかりではなく、多方面のデザインに影響を与えるだろう、Googleが推奨するマテリアルデザインガイドラインの概要について整理してみた。

Google Material design introduction:https://www.google.com/design/spec/material-design/introduction.html

Google Design:http://www.google.com/design/

 

1.Googleが推奨するマテリアルデザインの特徴は?

1.「紙とインク」という概念でデザイン

マテリアルデザイン=物質的デザインと言っても、以前、多用されていたリアルな世界の質感表現(スキュアモーフィックデザイン)という意味ではない。シンプルにミニマムな古典的な「紙とインク」という概念が軸となっている。つまり、「紙」は背景デザインでありボタンデザイン、「インク」は色彩であり文字、アイコンであり、画像や動画でもあるのだ。

画像_01

それら紙は重なりをもってデザインされることで、ユーザーにタップできるものだと認識できるようなった。フラットデザインではしばしば、どこをクリックしてよいかわからないという欠点があるが、それらを解消したデザインだ。

また、全体ではカード型デザインを採用し、統一感あるデザインとなっている。厚みのあるカードに光があたり、シャドウができる。さらにカードにボタンがあり、その部分は触れる、タップできるものだとユーザーに直感的に認識できる階層構造になっている。

What is material?:https://www.google.com/design/spec/what-is-material/environment.html#

 

2.ロジカルなアニメーション

「紙とインク」でマテリアルな世界は表現されるが、これにさらにアニメーションを加えることで、より、リアルで高度なユーザー体験を提供できる。つまりこれまでのWebデザインでは常識であった、ページ遷移の仕組みなど、リアルにアニメーション化しているのが最大の特長と言える。単にアニメーション化するわけではない。
なぜアニメーションするのか?そこには、論理的意味あいがある。ユーザーは何かクリックしたりタップするとき、急にページが切り替わる、閉じてしまうなど動きをするが、これは明らかにバーチャルな世界である。
これを現実的な動きに置き換えることがアニメーションのポイントだ。急に画面が切り替わるのではなく、クリックした次のページにはスライドアニメーションの動きで誘導する。ユーザーはクリックしたことで、何が起こっているのかを明確に把握できることになる。下にアニメーションサンプルを何点かピックアップしたので、確認いただきたい。

 

アニメーション

出典:http://matome.naver.jp/odai/2142379522980270301/2142398879872654303

アニメーション_02

出典:http://matome.naver.jp/odai/2142379522980270301/2142398879872654703

アニメーションはユーザーの操作に合わせて、生活の中にある動き、イージングを再現することが基本となっている。現実的な動き、物理法則に従ったアニメーションとして規定されている。デザインガイドラインのIntroductionの次には、アニメーションが説明されいるのでこちらも参考にしていただきたい。

 

Google Material design animation:https://www.google.com/design/spec/animation/authentic-motion.html

 

まとめ

「マテリアルデザイン」はGoogleがカードデザイン、アニメーションを使い、「合理的な余白と動きを使った統一理論に基づいたもの」と定義している。これまでのiOSやWindows 8などで採用されている「フラットデザイン」と、デザイン要素のシンプルさでは共通する部分があるが、最大の違いは「光源、影、奥行き」の概念を持ち、アニメーションを用いで誘導するところにあるといえる。
googleの美意識の結晶ともいえるこのマテリアルデザインは、アニメーションを効果的に使うことで高度なユーザービリティを期待できる。今回は概要だけを取り上げたが、ほかにも色やタイポフェイス、言葉、レイアウト、アイコン、組合せ、ユーザービリティなどさまざまなガイドラインを提供している。
2015年以降はこのマテリアルデザインがAndoroidアプリだけではなく、Web業界のみならず、デザイン、エンジニア業界にも大きな影響を与えることは必至となるであろう。

 

参考にさせていただいたサイトURL:

関連する記事

必見!Eコマースサイトのデザイントレンド... スマートフォンの普及により、Eコマースにおいては、モバイルを含むあらゆる端末からスムーズに閲覧できるサイトが増えつつある。今回はそうした流れを踏まえつつ、2015年のデザイントレンドを紹介する。 1. 必要な情報を隠す!? メニューアイコン サイトのナビゲーションのように、ウェブサイトにおい...
押さえておきたい!スマホサイトのフォーム最適化のポイント... パソコンECサイトではコンバージョン率があるのに、スマホECサイトでは成約に至らないケースが多いのはフォームに問題があるケースが多い。せっかくスマホECサイトを作ったのに売上が伸びない、効果が発揮されないなど悩みがある方も多い。パソコンに比べ、入力にストレスを感じることの多い、スマホサイトのフォ...
海外販売に関する補助金・助成金情報(2018.February)... 今年も早いもので、もう2月に入り1月の30日には平成29年度補正予算も成立となり、新たに補助金・助成金の募集が開始されるようだ。 補助金・助成金とは国や地方自治体から民間企業へ資金支援する返済不要のお金である。 補助金と助成金の違いは、補助金には予算があり、要件が合致しても受給できない可能...
海外展開に関する補助金・助成金情報(2016.December)... 今年も師走に入り、慌ただしくなってきた。今年最後の海外展開に関係する補助金・助成金の募集状況を紹介する。 補助金・助成金は国や地方自治体から支援される「返済不要のお金」である。助成金は要件が合えば基本的には受給でき、補助金は予算があるため、要件が合っても受給出来ない可能性がある。 今回は...
SNSで集客する際のポイントは?ーFacebook・Twitter編ー... SNSを利用し、実店舗への集客、WEBページへの誘導、ブランド力向上に取り組まれている事業者は多いだろう。 SNSを使ってもいっこうに効果が現れない、そもそも、SNSで集客はできるのかなど悩みはあると聞く。 今回はそのSNSで集客する際のポイントを確認し、現在行っているSNSコンテンツの...
ブログ派、ソーシャルメディア派。あなたはどちら?... 最新の企業間取引マーケティングと言えば、ブログではなくソーシャルメディアへと移り替わってきているようです。しかし、本当にソーシャルメディアこそが最も効果的なやり方なのでしょうか。 マーケティングに関する今月の調査を見てみると、細かいながらも注目すべき変化が現れています。2013年度、企業者に利...
このエントリーをはてなブックマークに追加
 

今なら海外展開の為の成功BOOKを無料ダウンロードできます。是非この機会にお読みください。