マテリアルデザインを作る6つのコツ
マテリアルデザインはGoogleにより、明確なガイドラインが定められています。マテリアルデザインを作るとき、まずはガイドラインを確認するといいでしょう。
ただ、ガイドラインの情報量は膨大で、一度にすべて覚えるのは難しいです。英語で書かれているのもネックです。Google翻訳で日本語に直せるものの、やはりはじめから日本語で書かれた文章よりは読みづらいでしょう。
そこで、ガイドラインを踏まえた「簡易版・マテリアルデザインの作り方」を紹介します。これから紹介する6つのコツを念頭に置いておくことで、マテリアルデザイン作成のポイントを押さえられ、ガイドラインも理解しやすくなるでしょう。
- 1．直感的に意味がわかる素材を使う
- 2．色の数を抑える
- 3．影をつけて立体感を出す
- 4．背景＋1レイヤーのデザインを意識する
- 5．画面レイアウトでは3つの構成要素を意識する
- 6．画面レイアウトでは3つの構成要素を意識するユーザーの操作を起点に、わかりやすいモーションをつける
なお、マテリアルデザインのガイドラインは下記リンクから確認できます。
1．直感的に意味がわかる素材を使う
マテリアルデザインの最大の特徴は「ユーザーにとってわかりやすく、直感的に操作できる」ことです。そのためには、直感的に意味がわかる素材を使わなくてはなりません。
ここで大切なのはボタンの作り方やアイコンの選び方です。下記リンクからボタンやアイコンについてのガイドラインを確認したり、アイコンデザインのテンプレートをダウンロードしたりできます。
2．色の数を抑える
マテリアルデザインでは色の数を抑えることで、画面の視認性を高めています。
ガイドラインでは使える有彩色は4色までと決められています。色の選び方も決まっており、1色のメインカラーに対して同じ色合いのサブカラーが2色、目立たせる部分に使うアクセントカラーが1色です。
色に関するガイドラインはこちらから確認できます。画面のどの部分にどんな色を使えばいいのかなども決まっているため、色選びのときにチェックしましょう。
3．影をつけて立体感を出す
マテリアルデザインでは画面上の素材に影をつけることで立体感を出します。どの素材に、どのように影をつけるのかが決まっています。
基本的には、影のつけ方は現実世界の物理法則に従えばOKです。詳しいガイドラインや注意点は、こちらから確認できます。
4．背景＋1レイヤーのデザインを意識する
マテリアルデザインでは「背景＋1レイヤーの画面構成」を意識します。
マテリアルデザインで画面に配置される素材には、実体があります。透明な素材や折れや曲がりのある素材は避けましょう。各要素は重ねず、背景の上にある1つのレイヤーに配置していきます。
画面の構成要素（コンポーネント）はこちらから確認できます。各コンポーネントの作り方や配置の仕方もチェックしておきましょう。
5．画面レイアウトでは3つの構成要素を意識する
マテリアルデザインでは、画面レイアウトが次の3要素から構成されます。
出典：ボタン - マテリアル デザイン
App bar
出典：ボタン - マテリアル デザイン
今表示されているのは何の画面なのかの説明、メニューや検索などの主要なアイコンと一緒に表示する場所です。
Navigation
出典：ボタン - マテリアル デザイン
各画面・機能にアクセスするためのメニューを表示する場所です。
Body
コンテンツを表示するための場所です。画面のほとんどを占める構成要素で、テキストやカード、ボタン、画像などで構成されています。
各要素の作り方や縦横寸法などについては、こちらで確認できます。
6．画面レイアウトでは3つの構成要素を意識するユーザーの操作を起点に、わかりやすいモーションをつける
マテリアルデザインでは、ユーザーの操作を起点に構成要素をモーションさせることで、操作が画面に与える影響を表します。
たとえばタップ・クリックした部分を中心にして画面が切り替わっていったり、スワイプに合わせてメニュー（Navigation）が表示されたりなどです。
モーションのガイドラインはこちらで確認できます。どのようなモーションがユーザーにとっての使いやすさを高めるのか、要素・目的ごとにどんなモーションをつければいいのかの動画もあります。
