Googleが推奨！マテリアルデザインの2016年のトレンドを学ぼう
2014年6月、Googleから発表されたデザインガイドライン「マテリアルデザイン」。当時トレンドだった、スキューモーフィズムやフラットデザイン同様、今もなお、マテリアルデザインはWebデザインの主流の一つです。
特徴は、質感やアニメーションを用いた「ユーザーにとってわかりやすいデザイン」を基本としたデザインで、こうした知識・情報はデザイナーだけではなく、ディレクターやプログラマーも学ぶことで、"ユーザーにより使いやすいUI・UXを提供"するための重要な手がかりとなるはずです。
そこで今回は、マテリアルデザインの様々な活用方法を取り上げている、Webサイトやアプリ、ツールのギャラリーサイト「MaterialUp」を教材とし、基礎からオススメの表現方法について、幅広く紹介していきます。
新たにWebサイトを構築しようとお考えの方、リニューアルを検討されている方、ぜひ必見です。
マテリアルデザインとは
まずは、マテリアルデザインそのものについてご説明します。
前述のとおり、マテリアルデザインは、2014年6月にGoogleが「Google Material Design」として発表したデザインガイドラインです。ユーザーにとってわかりやすいデザインを提供することを目標とし、スマートフォンやタブレット、テレビ、眼鏡、腕時計……に至るまで、様々なデバイスで統一されたマテリアルデザインを取り入れています。これにより、操作性も統一され、デバイスが変わっても使いやすいUI・UXを実現できると言われています。
参照記事：マテリアルデザインとは?基本概念と実務で使える無料フレームワーク6選
代表的なデザイン手法とマテリアルデザインの強み
マテリアルデザインの登場までに、覚えておきたいデザイン手法が2つあります。
それが、「スキューモーフィズム」と「フラットデザイン」です。
Webデザインの手法の一つである「スキューモーフィズム」は、参考にするモデルケースに寄せてデザイン制作を行い、ユーザーが直感的に理解しやすいようにする手法になります。例えば、紙製のカレンダーに似せてカレンダーのソフトウェアをデザインする、というようなイメージです。
もう一つの「フラットデザイン」は、2014年頃から一気に主流となったデザイン手法です。こちらの手法は、装飾性をできるだけ抑えたシンプルな平面的なデザインが特徴です。
そして、特にフラットデザインでよく課題として挙げられた、”シンプルなデザインが逆に本文やラベルなどの存在感を打ち消してしまう”という点をなくしたのが、「マテリアルデザイン」となります。マテリアルデザインは、光や影、奥行きのある表現を追加することで、よりわかりやすいUI・UXを作り出すことができます。
マテリアルデザインのポイント
・要素の重なりを物理的にとらえ、平面の中に、明確なZ軸の概念を持つ
・わかりやすいUXを実現するアニメーション・インタラクション
2016年◆押さえておきたいマテリアルデザイン表現方法
さて、ここからはマテリアルデザインの表現方法について、ご紹介していきます。
デザイン初心者の方は学びの一つとして、すでにデザイン制作を実践されている方はアイデアを膨らませる材料として、ぜひ参考としてください。
1.Stories
https://material.uplabs.com/posts/stories-interface
美しい写真を紹介するスマートフォンサイトのWebサイト。
クリックすると記事が最初に表示されていたページに重なるように表示され、画面の重なりを感じさせます。また、クリックした時にもそれを表す影がアニメーションとして表示されており、とてもわかりやすいデザインです。ブログのスマートフォン向けデザインで、参考にしたいデザインです。
2. Android Wear 1.x to 2.0 Notification Card
https://material.uplabs.com/posts/android-wear-1-x-to-2-0-notification-card
こちらは、通知カード等の本人確認書類のマテリアルデザインです。こちらのサイトでは、2つの円が重なることでAndroidのバージョンが異なることを示しています。
3.Responsive / Web Rebranding — Material Design
https://material.uplabs.com/posts/responsive-web-rebranding-material-design
SNSアプリのマテリアルデザインです。ボタンに影をつけることで、デザイン上にあるボタンそのものの存在感を出すことができます。また、Facebookやtwitter、Youtubeのメニューが立ち上がりますが、それ以外が影で覆われていることから「共有メニュー」というのが伝わりやすいデザインに仕上がっています。
4.Material Wrap - Multi-Purpose Web App
https://material.uplabs.com/posts/material-wrap-multi-purpose-web-app
こちらはブログページのマテリアルデザインで、ボタンと背景デザインが重なることで存在感を強くするというのを表現した例になります。まず、右下のピンクのボタンに注目してください。ヘッダー部分の青い帯と、その上に影がついたピンクのボタンが重なって配置されることで、ボタンの存在感が増しています。同じように右上の表示にある「ベルマーク」に「通知マーク」が重なって表示されることでアクティブ感を出し、新着情報というのを表しています。
5.Customer Service
https://material.uplabs.com/posts/customer-service
こちらは、カスタマーサービスがどのように行われるかを示したデザインです。
よくマテリアルデザインは「紙とインク」を基本としていると言われ、その重要なポイントとして「重なり」があります。紙を重ねることや色を塗り重ねることによって表現され、青を基調とした画面に補色である黄色のドレスを着た女性を配置することで、一層重なりが感じられるデザインに仕上がっています。ぜひ、色彩の面で参考にしたいデザインです。
6.InfiniteCycleViewPager
https://material.uplabs.com/posts/infinitecycleviewpager
こちらは、スワイプ機能によってコンテンツが上下左右へと動くデザインです。コンテンツ一つひとつに影がつけられており、重なりを意識したアニメーションで、わかりやすいデザインを実現します。ぜひとも、複数のアイテムを見せるようなショッピングサイトなどのギャラリー部分で参考にしたいデザインです。
7.Music Card Quantum
https://material.uplabs.com/posts/music-card-quantum
音楽再生サービスのデザイン例です。水色の背景に対して白のコンテンツに影がつけられており、コンテンツが浮き上がっているような印象を受けます。こうしたデザインはフラットデザインよりもマテリアルデザインで構成されることで、それぞれの存在感が増し、ユーザーへの情報伝達もしやすくなります。
8.Dashboard Concept 0.1
https://material.uplabs.com/posts/dashboard-concept-0-1
ブログなどでよく用いられるデザインの一つです。青のボタンに影をつけることで「ボタン」だというのが明確になり、ユーザーに対して「クリックしよう」というアクションの想起につながります。また、メニューにマウスオーバーした際、影がつくようになっている点も参考にしたいポイントです。
9.Candles - Material Trading Platform (WIP)
https://material.uplabs.com/posts/candles-material-trading-platform-wip
トレーディングサービスに関するデザインです。影が黄色のボタンが中央のメインエリア部分やヘッダーの拡大・縮小ボタンに使われていて、サイトの中でポイントとなるべき部分に使われています。
■まとめ
以上が、マテリアルデザインの基礎と2016年主流の表現方法になります。いかがでしたでしょうか。
わかりやすいUI・UXを実現する上で、ぜひ参考にしたいマテリアルデザイン例をご紹介しました。気になる表現方法はありましたでしょうか。
英語が苦手な方もいらっしゃると思いますが、MarerialUPには、上記のデザインの他にも様々なマテリアルデザインが日々アップデートされていますので、ぜひ参考にしてみてください。