今年のデザインのトレンドが、マテリアルデザインの表現であることは、間違いありません。
GoogleのAndroidをベースにしたデザイン手法であるマテリアルデザインは、当初モバイル端末向けのインターフェイスとしてスタートしました。しかし現在では、デバイスやプラットフォームの境界を越えて使われています。
ここ数年はフラットデザインが最大のトレンドですが、マテリアルデザインはフラットデザインにはできないユーザビリティを高めるための装飾をきちんと加えることができます。フラットデザインのように、視覚的な魅力を重視して装飾をそぎ落とすのではありません。マテリアルデザインの根幹は、ユーザビリティなのです。
マテリアルデザインライトとは？
引用元：Android
マテリアルデザインライト（Material Design Lite : MDL）は、マテリアルデザインの次段階です。マテリアルデザインの概念を受け継ぎ、あらゆるデバイスで最適化したものです。MDLは、ガイドラインやコンポーネント、各種のテンプレートとツールを含むため、デザイナーは事前知識がほとんどなくてもMDLのWebサイトを作成することができます。
MDLはそもそも、あらゆるデザイナーが手軽に使いこなせることをコンセプトにしています。
MDLは 「従来の」マテリアルデザインの改訂版かもしれませんが、決して劣化版ではありません。MDLでデザインされたほとんどのサイトは、安定していて使いやすく、美しい見た目をしています。
MDLの思想は、マテリアルデザインの目的である、次のことに帰結します。「どんなプラットフォームやデバイスサイズでも一貫した体験ができるような、単一の基盤システムを開発します。モバイルでの教訓が根本にあり、タッチパネルや音声、マウス、キーボードはもっとも重要な入力手段です。」
さらに、MDLはあらゆる部分がオープンソースなので、さまざまなルール、テンプレート、ベストプラクティス、コードのスニペットが、MDLのWebサイトやGitHubに用意されています。
物理の原則
引用元：Rumchata
MDLのスタイルの見た目の美しさは、物理学をベースにしたものです。そのためデザイナーは、現実世界に存在するような自然な見た目や機能を作り出すことを目指す必要があります。
このシンプルなコンセプトが、マテリアルデザインの本質であるユーザビリティを支えています。このコンセプトを基に作られたレイヤーやカード、モーション、カラーなどのデザイン要素を考慮しましょう。
引用元：MDF
引用元：Serio Verify
これらの要素をマテリアルデザインの外観に作成する方法を理解してもらうために少し物理学的に説明します。
- x軸、y軸についてはさまざまな推奨がありますが、厚さは統一されていなければなりません。
- 影は自然な光源が当たっているように、z軸上に自然に落ちるようにします。
- コンテンツは、好きな色や形で、どの平面にも配置ができます。
- マテリアルデザインでは、コンポーネントは固体で、透明ではありません。
- コンポーネントを同じ場所に重ねて配置することはできません。レイヤーは背景の上に写真要素を重ねる場合のみ許され、１つのコンポーネントだけしかないのは許されません。
- コンポーネントは縮小や拡大ができますが、曲がったり、折れたりしてはいけません。滑らかに動きます。
- コンポーネントを分割したり、組み合わせたりすることもできます。
- コンポーネントの動作はどの軸を基準にすることもできますが、ユーザーのインタラクションに応じて動くべきです。
コンポーネントの組み合わせ
引用元：wrk.
MDLには、デザインを始める上で役立つユーザーフレンドリーな機能が充実しています。ビジュアルデザインは主に見た通りのものですが、MDLがほかと異なる部分はそのバックボーンにあります。
MDLはJavaScriptベースではなく、すべてのデバイスで動作するようにデザインされます。古いブラウザでは機能水準を落として、どのプラットフォームからも同じようにアクセスできます。その結果どのように機能するのかを必ずしも知っておく必要はありませんが、MDLがほとんどのデバイスで機能することは覚えておいてください。これはMDLのデザインが理由です。
MDLを始めるもっとも簡単な方法は、テンプレートを選択することです。選択可能なテンプレートは６つで、それぞれのテンプレートには、コンポーネントやカラーパレットなどのデザインに必要なものが付属しています。しかし、MDLの特に優れている点は、ユーザーが好きなだけカスタマイズすることができることです。テンプレートは単なる出発点にすぎません。
テンプレートに加えて、MDLには大規模なコンポーネントライブラリがあり、さまざまに組み合わせて、独自の作品を作成することができます。Webサイトが重くなり過ぎないように、コンポーネントのコードの一部のみを取得することも可能です。
これらのパーツは、フォント（Roboto）、レイヤーのスタイルやコンポーネント、カラーパレットなどの基本要素はマテリアルデザインと同じですが、より軽くて扱いやすいものになっています。そのため、ほぼすべてのコンポーネントをデザインに追加したり、削除したりすることができます。また、実験が必要な場合、マテリアルデザインで制作されたものではないサイトにMDLのコンポーネントを使用することもできます。
マテリアルカラーパレット
MDLでもっとも視覚的な側面の１つに、付属のカラーパレットがあります。マテリアルデザインのプロジェクトでは、鮮やかで目立つ色を多く使用します。細かい色相まで十分に色が提供されており、予想できないほどの色の組み合わせができます。
マテリアルデザインにおいて、カラーは原色と１つのアクセントカラーで構成されるパレットが基本になります。ただ、色に関しては、賢く選択をするべきでしょう。
引用元：Dropbox Business
Dropbox Businessは、早期からデザインコンセプトを採用しつつ、ブランドアイデンティティを維持している典型的な事例です。幸いにもDropbox Businessがブランドカラーに採用している青色は、マテリアルデザインととても相性がいいため、白と黒のほかに青１色のカラーパレットを使ってわかりやすく表現しています。マテリアルデザインのスタイルを使いつつも、ブランドがアイデンティティを維持するために機能している点で、MDLととても共通する部分があります。
引用元：Pumperl gsund
Pumperl gsundのサイトは、Dropbox Businessとは反対に２色の明るい色ですべてを表現しています。このサイトでは、白と黒でほかのすべてを表現しているミニマルな背景に対して、色がどのように使われているかに注目してください。
引用元：Fila
MDLプロジェクトは、上の写真のFilaのように、全体を目立つ色で表現することもできますが、これを上手くまとめることは難しいです。サイトを上手く機能させるには、適切なコンテンツを考える必要があります。 Filaの場合、カラフルなスポーツウェアのレイアウトと大胆な色使いが完璧に調和しています。
結論
MDLは、マテリアルデザインをより使いやすく、柔軟にした形であり、ほぼすべてのWebサイトデザインに対して、全体的にも、部分的にも実装することができます。MDLは、全体の機能性を高め、ユーザビリティに注目し、整った線と体形で有名なデザインを生み出すのです。
61の事例の分析結果に基づいたUIに関する事例をもっと見るには、無料の電子書籍Web Design Trends 2017をダウンロードしてください。
