Googleマテリアルデザインフレームワーク「Material Design Lite」を使おう！
Googleマテリアルデザインの簡単な説明と、マテリアルデザインフレームワークの紹介、Material Design Liteの使い方を解説します。
マテリアルデザインを取り入れることで、誰にでも機能が分かりやすいUIデザイン、大手webサービスと親和性の高いデザインを生み出すことができます。
この記事で説明してること
- Googleマテリアルデザインの概要
- マテリアルデザインを使ったフレームワークの紹介
- Material Design Liteの使い方
- 既存サイトへのMaterial Design Liteの組込み方
Googleマテリアルデザインの概要
マテリアルデザインとは、Googleが提唱しているデザインガイドライン。
ざっくり言えば、機能を分かりやすくするためのデザイン手法。様々なデバイスに対応し、直観的な操作ができるデザインにするのが目的。
現実の物と同じように、影や奥行などを意識することで直観的な操作ができるように考えられている。
また、多くのサービスで共通のデザイン手法を用いることで、ユーザーが操作に対する反応を予測できるようになる。
Twitterをはじめとする多くのメジャーサービスやアプリに取り入れられている。基本的にGoogle系サービスやAndroidはマテリアルデザインでできているので、マテリアルデザインを使うと大手と操作性が近くなり違和感なく操作できるというもの。
印刷デザインの手法も取り入れられている。
マテリアルデザインとフラットデザインの違い
フラットデザインは、装飾を押さえた平面的なデザイン。
フラットデザインはシンプルで文字を識別しやすいが、見出しやボタン・フォームなどを識別しにくいというユーザビリティ上の欠点があった。
マテリアルデザインでは、陰影と奥行、優先順位やレイヤー階層、操作と挙動などを意識してデザインすることで「実際に触っているような感覚」でサイトやアプリを扱えるようになる。
マテリアルデザインの考え方
マテリアルデザインには、たくさんのルールがあるので代表的なものだけ書いてみたい。
マテリアルデザインでは、画面の中を「マテリアル環境」という３D空間える。
よく「紙」と「インク」を例に説明されているので、ここでも例に習う。
マテリアル＝紙
マテリアルデザインでは、ボックスやボタンをマテリアルという。マテリアルは1dpの厚みのある紙みたいなもの。厚みは1dp。
例えば、昔よくあった光沢のある半球のようなボタンはNG。マテリアルは1dpなので光沢は出ない。
紙は3次元空間で光を受けて影を落とす。紙は3次元空間に浮かぶことができる。つまり高度をもつ。（高度は影で表現）
影で高さを表現した例。
マテリアルは高さを持っているので、例えばz-indexでボックスが重なるような場合には、上になる要素が下の要素に影を落とす。
コンテンツ＝インク
マテリアルデザインでは、コンテンツはインクで印刷されたもののように扱う。写真も動画も文字もインク。
インクで印刷されたものなので、マテリアル(紙)の動作には影響を受けない。
正直、ここまでは言われなくても今までなんとなくやっていた方も多いと思う。
ユーザー操作とアニメーションを関連付ける
アニメーションがユーザー操作をサポートすることになっているので、ユーザーの操作に対して分かりやすいアニメーションをつけてユーザーを誘導する努力が求められる。
重さがある
マテリアルデザインでは、マテリアル(紙)には重さがあるのでCSS3やjQueryなどのアニメーションにも注意する必要がある。
例えば、アニメーションで何か動かす時には、重さがあるので等速運動はしない。イージングを使うときには、jQueryでいうswingやeaseInExpoみたいな感じで、「質量」が加わった動きになる。
その他のルール
さらにたくさんのルールがあるので、詳細を確認するときには公式をチェックする。
マテリアルデザインを使ったフレームワークの紹介
ここまで見てきたように、マテリアルデザインには様々なルールがある。
すべてのルールを自分で考えて適用するのは大変なので、Googleマテリアルデザインフレームワークを使うのが一般的だ。
マテリアルデザインを使ったフレームワークの代表的なものは下記。
インストールは全てnpmに対応している。
Material Design Lite
Google公式のマテリアルデザインフレームワーク。
軽量でシンプルなのが特徴。
Material Design for Bootstrap
Bootstrapを使ったマテリアルデザインのテーマ。
Bootstrap＋テーマなのでファイルが重くなるのが難点だが、Bootstrapに慣れてると構築が楽。
Material Design for Bootstrapのパーツ一覧
Material Design for Bootstrapの配布ページ
Materialize
マテリアルデザインCSSフレームワーク。
Bootstrapに近い感じのCSS命名規則なので使いやすく、機能も多い印象。
MUI
マテリアルデザインCSSフレームワーク。
軽量かつ外部ライブラリに依存しないのが特徴。HTMLメールにも対応してたり、幅広い対応がウリ。
React、Angular、Web Components、メール対応など。
Phonon
マテリアルデザインCSSフレームワーク。
MUIと同じく、外部ライブラリに依存しない軽量フレームワーク。基本的にはMobile Frameworkの位置づけ。
RiotJS, AngularJS, RequireJS, VueJS、Apache Cordova、PhoneGap対応。
Angular Material
AngularJS公式のマテリアルデザインCSSフレームワーク。
Angular使いにはたまらない逸品だが、Angular必須なので使わない人には無視される。
Material-UI
React.js公式のマテリアルデザインコンポーネント。
Reactコンポーネントなので、ちょっと凝ったUIのパーツを作りたい時とかにいいかもしれない。
マテリアルデザインで使えるツール
MATERIAL DESIGN ICONS
Google製のマテリアルデザイン向けアイコンフォント。
MATERIAL DESIGN RESIZER
Google製のマテリアルデザイン向けサイトビューワー。
基本的にはChromeのDeveloper Toolsにある「device toolbar」とそう大差ないが、マテリアルデザインに対応したUIブレークポイントを使用してるのでやっぱり便利。
Free Material Design Ui Kit
マテリアルデザインベースのUIコンポーネント。Bootstrap的に組み合わせて作りたい時に使う。
半透明系で青系のデザイン。
Free Material UI Kit
マテリアルデザインベースのUIコンポーネント。Bootstrap的に組み合わせて作りたい時に使う。
基本色を7色から選べるので、デザインに合わせやすい。
Material UI Kit: Cooking
その名の通りCookingがテーマのUIコンポーネント。
料理・飲食系のサイトやアプリに良さそう。
Android 5.0/Material Design
Androidアプリを再現したPSDキット。
これはマテリアルデザイン関係なく持っとくと便利。ダウンロードはAdobe IDが必要。
Material Design Liteの使い方
Material Design Liteを使うには、CDNが便利。
Bootstrapなどと比べると導入がものすごく簡単。
ヘッダーでCDNを読み込むだけですぐに始めれる。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>ライブラリを読み込んでいるとは思えないすごい軽さ。
あとはマニュアルに従ってhtmlをコーディングするだけで簡単に構築できる。
See the Pen MDLコンポーネンツまとめ by houzes (@houzes) on CodePen.
まとめ
Googleマテリアルデザインを使うと、ユーザビリティの高いサイトを構築できる。とても便利なガイドライン。
マテリアルデザインサイトを作るには、Material Design Liteを使うと早くて便利。
公式サイトには、簡単な使い方からテンプレートの作り方まで詳しく解説されている。英語だけど。