マテリアルデザインとは何か?- 最新Webデザイントレンド

マテリアルデザインとは何か?- 最新Webデザイントレンド

あなたはマテリアルデザインという言葉を聞いた事がありますか?

マテリアルデザインは、2014年6月にGoogleが発表したwebやアプリデザインのガイドラインの事です。

マテリアルデザインを採用する事で、UI(ユーザーインターフェイス)に一貫性を持たせる事が出来るので、どのデバイスからアクセスしても操作性に統一感を持たせる事が出来ます。

使いやすく、統一感のあるデザインには安心感と親近感が生まれUX(ユーザーエクスペリエンス)の最大化につなげる事が期待出来るのです。

Googleが提唱しているマテリアルデザインのガイドラインルールは数多くありますが、今回はその中でも重要な4つの概念を解説しています。ぜひ参考にして下さい。

1.なぜGoogleはマテリアルデザインを開発したのか?

1-1.Googleのプロダクトは昔見た目がバラバラだった

Googleの昔のプロダクトは見た目がバラバラだった

出典 google Developers Japan

ひと昔前のGoogleのプロダクトはgmailを例にとると、デスクトップ、iPhone、android端末で見た時にデザインが全くバラバラでした。

1-2.ユーザーがデバイスごとに使い方を勉強する必要があった

アクセスしているデバイスごとにユーザーは使い方を覚える必要があった

出典 google Developers Japan

各デバイスでgmailのインターフェイスデザインが異なっていた為ユーザーはアクセスしているデバイス端末ごとに使い方を覚える必要がありました。

使い方がわかりにくいとユーザーは混乱してしまい離脱につながってしまいます。これはホームページを持つ企業やWeb・IT業界の最大の問題だったのです。

2.Googleが2014年マテリアルデザインを発表

マテリアルデザイン

出典 google Developers Japan

2014年6月にGoogleがマテリアルデザインを発表しました。

これまでのバラバラだったデザインがすべてのデバイスで統一される事でユーザービリティが向上し、UX(ユーザー体験)の最大化に成功したのです。

3.マテリアルデザイン4つのデザイン原則

マテリアルデザイン4つのデザイン原則

マテリアルデザインには大きくわけて4つのデザイン原則があります。

  1. タンジブルサーフェス
  2. 印刷物のようなデザイン
  3. 意味があるアニメーション
  4. アダプティブデザイン

これら4つがマテリアルデザインの大きなコンセプトになります。

3-1.【第一コンセプト】タンジブルサーフェスとは?

タンジブル サーフェス 画像出典 dribbble.com

マテリアルデザインでは、画面が小さな四角い紙(英語だとサーフェス)によって出来ていると考えていて、紙のようなものの上に何かがあると仮定するとWebでいろいろな表現が、出来るのです。

  • 紙が重なっていると、その下の紙には影が出来る
  • 紙と紙がくっつく
  • 紙と紙が離れる
  • 紙を動かす事が出来る

紙の概念をデジタル上で表現する事で、ユーザーがどのように動くのかというのを説明する事なく理解してもらえる。これがマテリアルデザインの第一コンセプトタンジブルサーフェスです。

3-2.【第二コンセプト】印刷物のようなデザイン

印刷物のようなデザイン

第一コンセプトで紹介した土台に紙という概念を使うならその上にのっかっているものは何かと言われると”印刷物”のようなデザインが必要であるという事です。印刷の世界には良いデザインルール・ガイドライン・実例が存在します。これらのルールなどをマテリアルデザインにそのまま利用しようという考えです。これが第二のコンセプトです。

印刷の世界で使われるキーラインという手法

印刷業界のキーライン

Webデザインでもプリントデザインでもどこに文字を揃えて表示させるのかというキーラインという概念があります。縦に引いたガイドラインに合わせてテキストや画像を配置するだけで、デザインが美しく見えるのです。

3-3.【第三コンセプト】意味があるアニメーション

画像出典:dribbble.com

マテリアルデザインでは、アニーメーションをよく使いますが、それは単なる装飾ではなく、意味のあるアニメーションであるべきと考えます。その動きによって、ユーザーになんらかの情報を伝える事が出来るのです。これがマテリアルデザインの第三のコンセプト。意味のあるアニメーションです。

3-4.【第四コンセプト】アダプティブデザイン

アダプティブデザイン

ユーザーに対して「裏で使われているシステムは全く同じですが、各デバイスで端末で最適なインターフェイスデザインになるように表現しています」という事を伝えるのがアダプティブデザインの役割です。

ユーザーからするとどの端末からアクセスしてもデザインが似ているので、いちいち端末ごとに使い方を覚える必要がありません。アダプティブデザインを採用する事で、UX(ユーザー体験)を最大化させる事につながるのです。

4.マテリアルデザインのまとめサイト紹介

4-1.Material Up

material design daily Material Up

4-2.Material Design Awards 2015 by Google Design

Google Material Design Award

Masterial Design Awards 2015 by google design

4-3.Material Design Awards 2016 by Google Design

Material Design Awards 2016 by Google

Masterial Design Awards 2016 by google design

5.マテリアルデザインまとめ

マテリアルデザインの4つの概念とマテリアルデザインがどのような問題を解決したのか理解いただけましたでしょうか?

2017年現在、多くのサイトがマテリアルデザインを採用しているわけではありませんが、クライアントが同じような問題で困っている場合は、Webデザイナーとしてマテリアルデザインの採用を検討する必要があります。今後、需要はどんどん高まる事が予想されますのでWebデザイナーの方は一度マテリアルデザインについて知識を身につけておく事をおすすめします。

Googleのマテリアルデザインガイドラインでも勉強する事が出来ます。

コメントを残す

Photoshop本で挫折した方必見!! Webデザイナーに必須のPhotoshop力がたった7日で身につく動画講座

STACK DESIGN

一生涯使える人気のスキル!Photoshopを使ったデザイン力がたったの7日間で身につくオンライン動画講座。すべて無料で受講出来ますので、この機会にぜひご活用下さい。

  • デザイナー歴13年のプロが、デザインする時に使うテクニックのみを厳選してわかりやすくご紹介。無駄なテクニックはすべて排除。
  • デザインにかかる作業時間を10倍スピードアップさせるショートカットキーをご紹介。
  • あなたのわからないを現役デザイナーがすべて解決!解決するまで質問し放題です。
  • PC・スマホ・タブレット対応。学校、カフェ、通勤、通学あなたがどこにいても動画で学習出来ます。