この記事は、2016年4月13日の記事を再編集したものです。

これからWebデザイナーとして働く方に確実に知っておいてほしい知識の1つに「マテリアルデザイン」があります。
2014年6月にGoogleが発表したマテリアルデザインは、現在Googleのほとんどのサービスに適用されており、採用する企業も徐々に増えています。

参考：
Google の新しいデザインガイドライン「Material Design」｜クラスメソッドブログ

AndroidやYouTubeなど身近なサービスに適用されているため、殆どの方が目にしたことがあるかと思いますが、マテリアルデザインの定義について、明確に理解できている方はどのくらいいるのでしょうか。

「わかりやすさ」を追求した結果生み出されたマテリアルデザインは、デザイン設計において非常に参考になる要素が多数含まれています。
マテリアルデザインを採用するしないに関わらず、Webデザイン関わる方であれば、マテリアルデザインを構成する要素は確実に知っておいた方が良いでしょう。

今回は、マテリアルデザインの基礎知識を解説します。
Webデザインについてよくわからない方でも理解しやすいように解説しているので、知識に不安がある方はこの機会にしっかり学んでおきましょう。

目次

  1. マテリアルデザインとは「物理的な法則に則った」デザイン
  2. マテリアルデザインが生まれるまでの歴史
  3. スキューモーフィズムはリアリティを重視
  4. フラットデザインはシンプルさにこだわる
    5. メトロデザイン（メトロUI、モダンUI）
  5. マテリアルデザインの特徴とは
  6. マテリアルデザインは３D空間を形成し、「紙」と「インク」で構成されている
  7. わかりやすさを向上させるためのモーション（動き）も重視されている
  8. マテリアルデザインとフラットデザインは似て非なるもの
  9. ルールが多すぎて覚えきるのは難しいので、実装するならテンプレ利用が◎
  10. マテリアルデザインのフレームワーク6選
  11. 押さえておきたいマテリアルデザイン表現方法

マテリアルデザインとは「物理的な法則に則った」デザイン

「マテリアル（material）」は、名詞の場合は「原料」「材料」、形容詞の場合は「物質的な」と訳されます。

「マテリアルデザイン（Material Design）」をそのまま直訳すると「物質的なデザイン」となり、その名の通り物理的な法則に則ったデザインを指します。

PC、スマホ、タブレット、スマートウォッチ、スマートグラス、または車まで、デバイスの形状は今後さらに多岐に渡ることは明らかです。何よりGoogle自身が多様なデバイス開発に勤しんでいます。
デバイスがどれだけ多様化しても対応できるよう、全デバイスに適用できる統合フレームワークを作ろうとしたのがマテリアルデザインの始まりでした。

どのデバイスでもわかりやすい操作性を実現するにはどうしたらいいかを突き詰めた結果、現実世界と同じ法則（物理法則）を踏まえたデザインが生まれました。
GoogleのAndroidデザイン責任者でるマティアス・デュアルテ氏は、物理法則を採用した背景について以下のように語っています。

これは見ばえを良くするために実世界を模倣したりコピーしたりということではありません。木製馬車みたいなラグジュアリー感を出すためにステーションワゴンにニセのウッドパネルをくっつけるのとは違います。そうじゃなくて、脳に対して実世界と同じ刺激を与えて、脳の負担を軽くしてやるってことなんです。（マティアス・デュアルテ氏）

引用：
マテリアル・デザインって何？ Androidデザイン責任者にインタヴュー : ギズモード・ジャパン

どのようなデバイスでも直感的に理解できるデザインを作成するのであれば、一貫したルール設計が必要です。
スマホでも時計でも車でも同一のルールを適用しようとした場合、人間なら誰もが生まれた時から理解を深めている現実世界の物理法則を利用するのが最も合理的だという判断のもと、マテリアルデザインの開発が進められたようです。

マテリアルデザインが生まれるまでの歴史

マテリアルデザインを理解するには、それ以前のデザイン思想のメリット・デメリットを頭に入れておく必要があります。マテリアルデザインには、以下の3つのデザイン要素が組み込まれています。
マテリアルデザインまでの歴史について見ていきましょう。

  • スキューモーフィズム（1890年頃〜）
  • フラットデザイン（1920年頃〜）
  • メトロデザイン（2010年頃〜）
  • マテリアルデザイン（2014年頃〜）

スキューモーフィズムはリアリティを重視

スキューモーフィズムは1890年頃から用いられているデザイン手法ですが、iPhoneで採用されたことをきっかけに爆発的に普及しました。
何かモノや概念をデザインする際「すでに現実世界にあるもの」を用いるのが特徴です。デザインの立体感を強調し、リアリティの表現を重視します。

material05.jpg
例えば、Windowsの「ごみ箱」アイコンは、いかにも現実世界にあるごみ箱と似た形のデザインです。これによって、私たちはファイルをそこに捨てればよい、ということが理解できます。

スキューモーフィズムのデメリットはデータサイズの大きさです。リアリティを重視するあまりに過剰に装飾が施されてしまうと、CPU（コンピューター全体の処理能力）やGPU（コンピューターの画像処理能力）を多く必要とします。

フラットデザインはシンプルさにこだわる

material06.jpg
フラットデザインは、スキューモーフィズムの過剰装飾をできる限り抑えたい、というニーズから生まれたデザイン手法で、シンプルさを強く意識しています。Facebookのログイン画面もフラットデザインです。

フラットデザインは、1920年頃から使われているデザイン手法ですが、2013年夏にiPhoneのiOS7で採用され大きく注目を集めました。ユーザーが直観的に理解できるうえに、データサイズが小さくて済みます。ユーザーにとっても作り手にとってもwin-winであると考えられました。

一方で、シンプルでありすぎるがゆえに、重要な機能とあまり重要ではない機能の違いがわかりづらい、という問題点があります。

フラットデザインから派生したものとして、マイクロソフトが作り上げたメトロデザインがあります。

メトロデザイン（メトロUI、モダンUI）

metroui.jpg
画像引用：http://lifehacker.com/5841764/windows-8-in-depth-part-1-the-metro-ui

メトロデザイン（メトロUI、モダンUI）は、Windows Phone7やWindows8で導入されていたデザイン手法で、マイクロソフトが作り出しました。

スキューモーフィズムにありがちな過剰な装飾をそぎ落とすために生み出されたという点では、フラットデザインの一種と考えることもできます。

従来のアイコン型ではなく、「タイル」と呼ばれるパネルが並べられるのが大きな特徴です。タッチパネルをタップしたりスワイプしたり、といった操作がしやすい点にメリットがあります。

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

マテリアルデザインは上記の三つのデザイン要素を踏まえたうえで生まれたデザイン手法で、Googleが利用を推奨しています。
フラットデザインやメトロデザインの持つシンプルさはできるだけ残しつつ、スキューモーフィズムが目指した「わかりやすさ」の表現を目指しています。
具体的には、光や影、質量をフラットなデザインに取り入れることで、ユーザーの「わかりやすさ」を担保しようとしています。

それでは、マテリアルデザインは具体的にどのような要素で構成されているのでしょうか。

マテリアルデザインは３D空間を形成し、「紙」と「インク」で構成されている

現実世界のルールを適用するため、マテリアルデザインは3次元で表現されています。

material04.jpeg

  • 縦・横に加えて高さも意識した設計に*

カラム（枠）と文字は基本的に「紙」と「インク」で構成されており、印刷物を意識した作りとなっています。

material01.jpeg

  • 「紙」を表現するために「光」と「影」を調整する必要がある。*

material02.jpeg

  • 紙が重なりあう場合は、重なる部分に影を入れる必要がある。影が入っていない右側の図はマテリアルデザインと見なされない。*

material03.jpeg
3次元を表現するため、各要素を重ねる場合はどの要素が上にあり、どの程度の距離感なのかを考慮して影や光を設計する。

画像引用：
https://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties

わかりやすさを向上させるためのモーション（動き）も重視されている

マテリアルデザインは、操作時のモーションが豊富に盛り込まれています。
Googleが公開しているマテリアルデザインのデモムービーを見てみましょう。

　 　 ユーザーがタップしたりスワイプしたりした際のレスポンスが明確に表現されています。 モーションが重視されるのは、表示されている画面でどのような操作ができるのか、自分が今行った操作はどのような影響なのかが直感的にわかるようするためです。

マテリアルデザインとフラットデザインは似て非なるもの

マテリアルデザインはフラットデザインの要素を取り入れていますが、一般的なフラットデザインの場合、シンプルで見やすい反面、操作できる部分がわかりづらいというデメリットがありました。
そのようなわかりづらさを解消するため、物理法則に加えて操作時のモーションが実装されています。

ルールが多すぎて覚えきるのは難しいので、実装するならテンプレ利用が◎

ここまで紹介したトピックはマテリアルデザインの基本的な構成要素です。
実際には、色、レイアウト、コンポーネント等、詳細なルールが決められており、全てを覚えきるのはなかなか厳しいでしょう。

マテリアルデザインを取り入れたい方は、Googleが提供しているマテリアルデザインのフレームワークの利用をオススメします。

マテリアルデザインのフレームワーク6選

1.polymer

Polymer_Project.png
https://www.polymer-project.org/1.0/

Googleから提供されているフレームワークです。
「Web Components」という新しい技術が使用されておりいて、導入のハードルは少し高めです。
Web Componentsとは、今後Webデザインの標準になる予定の技術で、ホームページで利用する各パーツをコンポーネントにしてページを作成していきます。

2.Material Design Lite

Material_Design_Lite.png
http://www.getmdl.io/index.html

こちらもGoogleから提供されているフレームワークです。
CSS、font、Javascriptのライブラリがあります。
すべてのクラスには、Material Design Liteを示す「mdl」という接頭語がつきます。

コンポーネントに加えて、コンポーネントが組み合わされて作成されたダッシュボード系などのテンプレートが5種類用意されています。
クリックエフェクトなども細かくコンポーネント化されているので、美しくモダンなデザインを実現することができます。

3.Material Design For Bootstrap

Material_Design_For_Bootstrap.png
http://fezvrasta.github.io/bootstrap-material-design/

マテリアルデザインをBootstrapのテーマとして実現するフレームワークです。
組み込み方は比較的簡単で、bootstrapのあとに該当cssを読み込むだけです。

例：
<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-material-design.css" rel="stylesheet">
<link href="ripples.css" rel="stylesheet">

ナビゲーションバーやテーブル、フォームなどが用意されています。
独自に作成されたアイコンは、シンプルながら親しみのあるかわいらしい雰囲気があります。

ただし利用する際は、このフレームワークの作者に問い合わせが必要になります。
詳細は、ライセンスを確認してください。

4.MUI

MUI.png
https://www.muicss.com/

Googleマテリアルデザインガイドラインに準拠した、CSS・JavaScriptフレームワークです。
WebやiOS、Androidなどはもちろん、HTMLメールにも対応している点が特徴です。

ドロップダウンやグルッドシステム、タイプグラフィといった、基本的なコンポーネントが揃っているのですぐに開発を始めることができます。
カスタマイズが簡単でデザインパターンも多く用意されている上に非常に軽量ですので、試してみるとよいでしょう。

5.Materialize

Materialize.png
http://materializecss.com/

Googleマテリアルデザインガイドラインに基づいたフレームワークです。
オープンソースですので、個人ても商用でも無料で使用することができます。

Bootstrapと似ていますので、Bootstrapを使用したことのある方はすぐに使うこなすことができます。
また、ダウンロードやセットアップについて丁寧に解説されていますので、マテリアルデザインを初めて取り入れる方にも親切です。

さまざまなコンポーネントが多く用意されていて、簡単なHTMLで実装することができます。加えて、コンポーネントを組み合わせて作成されたテンプレートが2種類用意されていますのですぐにホームページを作成することも可能です。

6.Material UI

Material_UI.png
http://www.material-ui.com/#/

Googleマテリアルデザインが提供しているインターフェースパーツを、コンポーネントとして配布しているフレームワークです。
トップページにデモがありコンポーネントのプレビューを確認することができるので、このフレームワークを使用してデザインを構築することをイメージしやすくなっています。

補足：Material UI Colors

Material_UI_Colors.png
http://materialuicolors.co/

マテリアルデザイン用のカラーチャートを閲覧することができるページです。
マテリアルデザインに合う色をすぐに探して、そのままカラーコードをコピーして利用することができますので非常に便利です。

トップページには、基本の色が一覧で表示されています。
その中から使用したい色を選択すると類似色が表示されますので、色をクリックするとカラーコードをコピーすることができます。

押さえておきたいマテリアルデザイン表現方法

さて、ここからはマテリアルデザインの表現方法について、ご紹介していきます。
デザイン初心者の方は学びの一つとして、すでにデザイン制作を実践されている方はアイデアを膨らませる材料として、ぜひ参考としてください。

1.Stories

chap_1.jpeg
https://material.uplabs.com/posts/stories-interface

美しい写真を紹介するスマートフォンサイトのWebサイト。
クリックすると記事が最初に表示されていたページに重なるように表示され、画面の重なりを感じさせます。また、クリックした時にもそれを表す影がアニメーションとして表示されており、とてもわかりやすいデザインです。ブログのスマートフォン向けデザインで、参考にしたいデザインです。

2. Android Wear 1.x to 2.0 Notification Card

chap_2.jpeg
https://material.uplabs.com/posts/android-wear-1-x-to-2-0-notification-card

こちらは、通知カード等の本人確認書類のマテリアルデザインです。こちらのサイトでは、2つの円が重なることでAndroidのバージョンが異なることを示しています。

3.Responsive / Web Rebranding — Material Design

chap_3.jpeg
https://material.uplabs.com/posts/responsive-web-rebranding-material-design

SNSアプリのマテリアルデザインです。ボタンに影をつけることで、デザイン上にあるボタンそのものの存在感を出すことができます。また、Facebookやtwitter、Youtubeのメニューが立ち上がりますが、それ以外が影で覆われていることから「共有メニュー」というのが伝わりやすいデザインに仕上がっています。

4.Material Wrap - Multi-Purpose Web App

chap_4.jpeg
https://material.uplabs.com/posts/material-wrap-multi-purpose-web-app

こちらはブログページのマテリアルデザインで、ボタンと背景デザインが重なることで存在感を強くするというのを表現した例になります。まず、右下のピンクのボタンに注目してください。ヘッダー部分の青い帯と、その上に影がついたピンクのボタンが重なって配置されることで、ボタンの存在感が増しています。同じように右上の表示にある「ベルマーク」に「通知マーク」が重なって表示されることでアクティブ感を出し、新着情報というのを表しています。

5.Customer Service

chap_5.jpeg
https://material.uplabs.com/posts/customer-service

こちらは、カスタマーサービスがどのように行われるかを示したデザインです。
よくマテリアルデザインは「紙とインク」を基本としていると言われ、その重要なポイントとして「重なり」があります。紙を重ねることや色を塗り重ねることによって表現され、青を基調とした画面に補色である黄色のドレスを着た女性を配置することで、一層重なりが感じられるデザインに仕上がっています。ぜひ、色彩の面で参考にしたいデザインです。

6.InfiniteCycleViewPager

chap_6.jpeg
https://material.uplabs.com/posts/infinitecycleviewpager

こちらは、スワイプ機能によってコンテンツが上下左右へと動くデザインです。コンテンツ一つひとつに影がつけられており、重なりを意識したアニメーションで、わかりやすいデザインを実現します。ぜひとも、複数のアイテムを見せるようなショッピングサイトなどのギャラリー部分で参考にしたいデザインです。

7.Music Card Quantum

chap_7.jpeg
https://material.uplabs.com/posts/music-card-quantum

音楽再生サービスのデザイン例です。水色の背景に対して白のコンテンツに影がつけられており、コンテンツが浮き上がっているような印象を受けます。こうしたデザインはフラットデザインよりもマテリアルデザインで構成されることで、それぞれの存在感が増し、ユーザーへの情報伝達もしやすくなります。

8.Dashboard Concept 0.1

chap_8.jpeg
https://material.uplabs.com/posts/dashboard-concept-0-1

ブログなどでよく用いられるデザインの一つです。青のボタンに影をつけることで「ボタン」だというのが明確になり、ユーザーに対して「クリックしよう」というアクションの想起につながります。また、メニューにマウスオーバーした際、影がつくようになっている点も参考にしたいポイントです。

9.Candles - Material Trading Platform (WIP)

chap_9.jpeg
https://material.uplabs.com/posts/candles-material-trading-platform-wip

トレーディングサービスに関するデザインです。影が黄色のボタンが中央のメインエリア部分やヘッダーの拡大・縮小ボタンに使われていて、サイトの中でポイントとなるべき部分に使われています。

まとめ

Webデザインは、表面を綺麗に見せるものではなく操作性を向上させるための要素として認識しなければいけません。
UI/UXを考慮して設計することが本来のデザインであり、デザイナーの仕事です。

参考：
今更聞けない…。UI（ユーザーインターフェース）とUX（ユーザーエクスペリエンス）の意味を理解しよう

Androidのデザイン責任者であるデュアルテ氏が語っているように、マテリアルデザインは認知科学に基いて開発されたデザインであり、Googleがわかりやすさを徹底的に追求した結果が詰まっています。
「ユーザーに違和感なく操作してもらうためにはどのような設計にすればいいのか」
「次のアクションを起こしてもらうためにどのようなモーションを追加すればいいのか」
デザイン設計の際に迷った時は、マテリアルデザインが実装されたページを実際に触ってみると、良いヒントが得られるかもしれません。

このニュースを読んだあなたにオススメ

CSSの基本～スタイルシートとは
高品質なのに無料！マテリアルデザインのアイコンをDLできるサイト3選
参考にしたい！スマホサイトデザイン集5選