これからのデザイントレンドといえば「マテリアルデザイン」でしょう。これはGoogleが2014年〜提唱している考え方です。この記事では、マテリアルデザインの基本と作り方を総まとめしていきます。
1. マテリアルデザインとは？
マテリアルデザインにはいくつかの特徴があります。また厳密なルールも決まっています。
その1. 現実の物理法則を取り込む
マテリアルデザインでは「実際に触れることのできる現実世界」に基づいた表現がされます。
普段馴染みのある「物体の重なり」や「影のつき方」などを再現することで、ユーザーが「どのように操作すれば良いのか」が直感的に分かるようになります。
その2. 印刷物向けデザインの基本要素を取り込む
マテリアルデザインは、紙に印刷するようなイメージで考えると捉えやすくなります。
文字や画像、余白の使い方などは印刷物向けのデザインを参考にします。それにより、階層構造や重要なポイントを示しやすくなります。
その3. 連続性のある動き
ユーザーの操作に対して、直感的に分かりやすいアニメーション（モーション）で反応します。
連続性のある動きにすることで、ユーザーの注意を引きながら、分かりやすく流れを示すことができます。
とはいえ、何に対しても動きをつけるべきではありません。また派手すぎる動きをつけるべきでもありません。「控えめ」かつ「明確」な動きにすることが大切になります。
その4. 厳密なルール
上記の3つのポイントを自分なりのとらえ方で実践してもマテリアルデザインにはなりません。Googleのガイドラインで厳密なルールが決まっており、それをできる限り守ることが重要です。「影のつけ方」から「ボタンの形」「紙の重なり方」「レイアウト」まで嫌になるほどに細かいルールが用意されています。
これには理由があります。どの端末、どの閲覧環境でも「デザイン・レイアウト・動き」を統一化することで、パッと見たときに操作が分かりやすくなるのです。
現状、普段私たちが見るWebサイトやアプリでも、なんとなく決まっている規則はあります。例えば、をクリックすればメニューが表示されることは想像がつきます。このような規則性をガイドラインでより明確化することで、ユーザーが迷わずに操作できるようになるわけですね。
具体的にどんなデザイン？
では、ガイドラインを忠実に守ったWebデザインは具体的にどのようなものなのでしょうか。現状、参考になるAndroidアプリはたくさんあるのですが、完璧なお手本となるWebサイトはGoogleのサービス関連のものくらいかもしれません。
Google+
Google+は典型的なマテリアルデザインと言えるでしょう。ボタンからナビゲーションバーまでガイドライン通りの表現がされています。
Google ウォレット
Googleウォレットもシンプルにマテリアルらしさを感じることができます。
Google Trips
Google Tripsはモバイルアプリですがとても参考になります。マテリアルデザインの楽しさを感じるのにピッタリです。
Googleのサービス、アプリ、Webサイトのほとんどがマテリアルデザインで作られています。実際にどのように作られているかを見るのはとても勉強になります。
メリット
マテリアルデザインを取り入れることには大きなメリットがあります。
直感的に分かりやすいデザイン
マテリアルデザインにはGoogleが考え抜いた「優れたデザインの要素」が詰め込まれているため、本当に分かりやすく美しいデザインとなっています。
統一化されたルールにより操作が分かりやすい
さきほど説明した通り、明確に統一されたガイドラインにより「説明するまでもなくユーザーが使い方を知っている」デザインを実現することができます。
デメリット
「明確なガイドラインゆえに個性を出しくくなる」というのがデメリットとしてよく挙げられます。しかし、現状ではマテリアルデザインを取り入れたWebサイトはそう多くありません。そのため、ガイドラインを守りつつ今までにない表現をすることは十分に可能でしょう。
「影をつける＝マテリアル」ではない
たしかに影が特徴的なのですが「影がついていればマテリアル」というのは間違いです。「影がつくデザインの1つにマテリアルデザインがある」というイメージですね。また、常に影が使われるわけではありません。分かりやすく、見やすくするために影を活用するのです。
2. 作り方とガイドライン
ここからはマテリアルデザインの作り方・考え方をまとめて解説していきます。
Z軸（奥行き）まで考える
マテリアルデザインを作るときには、平面（XとY軸）だけでなく、奥行き（Z軸）まで考えます。
複数枚のシートを重ねるイメージ
基本的に紙（シート）を重ねていくようなイメージでデザインを進めていきます。メニューバーやボタンはそれぞれ1枚のシートです。
これらのシートが重なり合うことでマテリアルデザインは作られるのです。
シートの厚さはどれも1dp
シートの厚さはどれも1dpで統一されています。「ペラペラの紙が重なっている」のだと考えましょう。
「dp」というのは、Androidアプリ特有の大きさの単位です。px数で換算すると1dp＝1〜3px程度となります（閲覧する端末の画面解像度により異なります）。Googleのガイドラインでは、大きさの単位がdpで書かれているのです。詳しくは「いまさら聞けないdp入門」が参考になりそうです。
シートからはみ出してはいけない
シートの上では文字や画像などを自由に使うことができます。全体をカラフルに塗りつぶしてもOKです。ただし、シートからはみ出るような表現はNGです。
シート（紙）の上にインクで写真や文字、背景色がプリントされているのだと考えると分かりやすいかと思います。
重なり順が決まっている
シートの種類（コンポーネント）ごとに置かれる高度が決まっています。言い換えると、重なり順が決まっているのです。上図のデザインでは、１番下に「カード*」、その上に重なるのが「メニューバー」、その上が「フローティング操作ボタン*」となります。* 後で意味を解説します。
ボタンやメニューバーなどのデザインを構成する1つ1つのパーツは「コンポーネント」と呼ばれます。
層の重なりは影で表現する
影の大きさを変えることで「どちらが上に重なっているのか」が分かります。
例えばこの図であれば、青のバーよりも大きめの影がついているピンクのボタンの方が高度が高くなっています。
高度＝子要素に対する相対値
注意したいのは、ガイドラインで決められた高度は親要素に対する相対的な値ということです。つまり親要素の高度が高くなれば、その分だけ子の高度が高くなります。
高度と重なり順の考え方については、以下の記事で詳しく解説しました。
ユーザーのアクションにより浮き上がる
マテリアルデザインでは、クリックやタップ、ホバー（カーソルを当てること）により、シートの高度が高くなる表現がよく使われます。ただし、何でもかんでも浮き上がるわけではありません。ガイドラインによりこのような表現が使われるものは決まっています。 高度が変わるべきコンポーネント
現実の物理法則に逆らわない
浮き上がるといっても「上に位置しているものを突き抜ける」ような表現はNGです。実世界が起こり得ない表現はユーザーを迷わせてしまいます。
親要素が動けば子も動く
ユーザーが違和感なく操作できるように「親要素」と「子要素」の関係をよく考えましょう。
親要素が動いた場合、子要素も合わせて動きます。
フローティング操作ボタン（ピンクのボタン）は独立しています。親はスクロールされている部分では無いため、合わせて動くことはありません。
シートは移動・結合・拡大・縮小できる
シートは移動させることも、拡大・縮小することもできます。さらに繋げてもOKです。
ただし、これらの変化をつけるときには、平面に沿った動きをするようにしなければなりません。
連続性のあるモーション
クリック（タップ）した部分から広がるように画面を遷移させることで、ユーザーが「つながり」や「関係性」を把握しやすくなります。
タップすると波紋が広がる表現（リップル）
ユーザーがボタンを押した際には、シンプルかつ明確なアニメーションで反応します。
マテリアルデザインではクリックにより波紋が広がる「リップル」と呼ばれるエフェクトがよく使われます。インクが広がるイメージをすると分かりやすいかもしれません。
このエフェクトのかけ方は以下の記事で解説しています。簡単なので是非試してみてください。
3. これだけは覚えておきたいコンポーネント
マテリアルデザインでよく使うコンポーネント（ボタンなどのパーツ）とその作り方を紹介していきます。
ボタン
マテリアルデザインでは主に3種類のボタンを使用します。
フローティング操作ボタン
そのWebページやアプリの最も重要な操作が割り当てられるボタンです。1ページにつき1つしか使ってはいけません。英語ではFAB（Floatin Action Button）と略されます。
浮き出しボタン
隆起したように見えるボタンです。ホバーによりふわっと浮き上がります（影が大きくなります）。クリック・タップ時にはリップルエフェクトがかけられることが多いですね。
フラットボタン
ごく単純なテキストのボタンです。他の文字と見分けがつくようにカラフルな色が使われることが多いですね。
感覚で「ここに浮き出しボタンを使おう」なんて考えてしまいそうですが、使い分け方もきちんとガイドラインで解説されています。
どうやって使い分ける？
ピラミッドの上にあるボタンほど目立ちます。また下ほど使用頻度が高くなるかと思います。
長くなってしまいそうなので詳しくは別の記事でまとめました。是非目を通してみてください。
カード
カードはその名の通り、関連性のある情報をまとめる四角い紙です。1つのカードには1つのテーマについての情報を載せます（プリントするというイメージです）。
これはカードの一例です。影により少し隆起したように見えるかと思います。「現実世界のように触れられる」感覚を再現しているわけですね。
カードには文字からリンク、画像などまで様々なモノをプリントすることができます。
カードの背景はカラフルな色で塗りつぶしてもOKです。ただし文字がハッキリと見えるように文字色とコントラストをつける必要はあります。また、カードのサイズは内容により柔軟に変えることができます。
この他にも使い方のルールが決まっています。詳しくは以下の記事で解説しました。
ツールバー（アプリバー）
ツールバーは画面上部に表示されるこの図のようなバーです。メニュー
現在作り方についての記事を作成中です。
4. マテリアルデザインをもっと学ぼう
具体的な作り方やデザインのポイントを解説する記事は、今後どんどんと追加していく予定です。@saruwakakun
各コンポーネントについての解説
具体的なデザインの方法
リファレンス
ガイドラインはどこで見れる？
以下のリンクから日本語のガイドラインをPDFで見ることができます。 マテリアルデザイン・ガイドライン
最後に
マテリアルデザインには細かなルールが決まっており、改めて作ることの難しさも分かりますね。しかし、ガイドラインを守るサイトが増えれば増えるほど、ユーザーがマテリアルデザインに馴染みを持つようになります。言い換えると、ユーザーが「何がどこにあり、どうやって操作したら良いのか」が直感的に分かるようになります。そのときにマテリアルデザインの真の価値が出てくるのでしょう。