マテリアルデザインを読んで学んだ、実践で使えるデザインテクニック第一弾

はじめに

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay16です！

昨日はRuby on Railsのバージョン6以降に取り組まれることが発表された、Action Mailboxについての記事でした。

Rails6で導入されるAction Mailboxを試してみた

今日は、私がマテリアルデザインの基礎（Material Foundation）を読み学んだ、実践で使えるデザインテクニックをご紹介します。

今年の5月後半にGoogle I/O 2018 collectionのアップデートが発表され、話題を呼んだマテリアルデザイン。

マテリアルデザインに関する記事はたくさんありますが、その多くは概念的な説明で、深くまで説明している日本語の記事はほとんどない気がします。

マテリアルデザインのガイドラインを少し読んでみたけど、長すぎて途中で挫折した…

英語が苦痛で最後まで読みきれなかった…

マテリアルデザインを表面上では知ってるけど、実際にどういう決まりがあるのか知らない…

という方にぜひ読んでいただきたいです。

ただし、今回の記事はあくまで私がマテリアルデザインを読んだ解釈です。
元のマテリアルデザインを忠実にというよりかは、自分が読んで解釈した結果、こういうところで実践的に使えそうだと思った、というところを抜粋しているので、ご注意ください。

記事の冒頭ではマテリアルデザインの説明をします。
すぐに実戦で使えるデザインテクニックを見たい方はこちらからどうぞ。
マテリアルの基礎と環境

マテリアルデザインとは？

マテリアルデザインとは、Google社が2014年に考案したデザインに対する考え方とガイドラインです。

具体的にはコンポーネントやレイヤーなどUIで表現することができるものの特徴を定めたドキュメントになります。

マテリアルデザインの環境やレイアウト、インタラクション、カラー、形などを定義しているものです。

マテリアルデザイン、と一口で言っても、それは大きく３つのパーツに分かれています。

Material System

• マテリアルデザインの目的や概念を記したパート
• その目的や概念を実際にマテリアルデザインを使ってデザインされた７つのアプリの関するデザインアーキテクチャなどで補足している

Material Foundation

• マテリアルデザインをレイアウトや色、形、アニメーションなど個々のコンポーネントに切り分け、それぞれのルール定義をしているパート
• アプリを作る際に参考にできる基礎が詰まっている

Material Guidelines

• 自分用にカスタマイズされたマテリアルテーマを作るためのパート
• どのようなところをカスタマイズできるのか、また、どうすればユーザーの使いやすさを保ったままカスタマイズができるのか説明している

今回はこの３つのパーツのうち、２つ目のMaterial Foundation部分から実践で使えるデザインテクニックをご紹介します。

マテリアルの環境

では、早速Material Foundationの中身を見ていきます。

まずはマテリアルの環境(environment)について。

この記事では「マテリアル」という言葉がよく出てきますが、「マテリアル」とはデザインツールでいう「レイヤー」のようなものです。幅、高さ、奥行きを持った形を変えられる「物質」です。マテリアルデザインではUIの「ヘッダー」、「フッター」、「ボタン」などの個々のコンポーネント、は全てマテリアルからできているとされています。

物理法則

マテリアルデザインの根本の考え方の１つとして、物理法則を取り込むというものがあります。

例えば:

• ボタンやヘッダーにも厚みや高さがある
• ボタンやヘッダーが他のマテリアル（レイヤー）よりも高い位置にある場合、下に影ができる
• マテリアルは他のマテリアルをすり抜けることができない

(ボタンやヘッダーが他のマテリアル（レイヤー）よりも高い位置にある場合、下に影ができるのサンプル画像)

マテリアル特有の動き

ただ、ここで他の記事であまり語られていないなと感じるのがマテリアル特有の動きです。
基本的には物理の法則に従った環境のマテリアルデザインですが、その法則と違った部分もあります。
（つまりマテリアル特有の環境や動きがあるということです）

例えば:

• マテリアルは形を変えられる
  • 普通の物理原則状の物体ならありえないですが、マテリアルは形を変えることができます

• マテリアルは透明度を変えられる
  • 同じく、普通の世界であれば紙がいきなり透けるということはありませんが、マテリアル空間だと可能です
• 複数のマテリアルを融合することができる
• マテリアルは浮くことができる

このようにマテリアル特有の動きを把握することで、限られたパソコンやスマホのスクリーンのスペースを有効活用できます。

デザインTips

マテリアルの環境の章で私が特に使える！と思った部分は以下2つです:

全ての要素の高さは決まっている

モーダル、ボタン、ヘッダーの影などをなんとなくで決めていませんか？
マテリアルデザインでは、全ての要素に対して、スクリーンから何dpの高さにあるのかが決まっています。

さらに、ユーザーがインタラクションを起こした際に、その要素がどれくらい浮いてくるのかも決まっています。（上記画像、斜線の位置です）

影は２種類存在する

マテリアルデザインでは、２種類の「光」が存在します。

• キーライト (画面の上部から降り注ぐ強めのライト)
• アンビエントライト (画面の全方向から淡く降るライト)

これは、太陽から降る強めの光とその光が部屋の中で反射してできる２つの光があるという考えをスクリーンに応用した考え方です。

(左がキーライトによりできる影、右がアンビエントライトによりできる影)

この２つの光によってできる、影も２種類のものを組み合わせて使うようにすると良いです。

レイアウト

注意: 厳密にいうと、1dp = 1px ではないのですが、本記事では分かりやすさを優先し、1dp = 1pxとします。

8dpグリッドを使用する

SketchやPhotoshopなどのデザインツールは、Shift + 矢印　を押すと、10px単位でレイヤーを動かすので、ついつい10px単位で考えがちですが、マテリアルデザインでは8という数字を使います。

• ヘッダー、フッターなどの大きなものは8pxのグリッドに沿って配置
• アイコンやフォントなど細かな調整が必要なものは4pxごとに調整

レイアウトグリッド

レイアウトグリッドとは、大まかな画面全体の配置を作る際に使うグリッドです。

これを１つ使うだけで、プロダクト全体のレイアウトに統一感がでます。

（レイアウトグリッドの間の隙間はガターと呼び、カラムの間に一定の間隔を作ります。左右の余白はマージンと呼び、ガターを幅を変えることができます。）

どのサイズの画面でどのレイアウトグリッドを使えば良いのかわからない…という方はこちらを参考にしてください。

Breakpointsの章の「Breakpoint system」

ブレイクポイントとiOSのデバイスごとのレイアウトグリッドのカラム数やマージン/ガターの推奨値を出してくれています。

おすすめアスペクト比 (縦横比)

UI内でどういうアスペクト比にすれば良いか困った場合にも、マテリアルデザインのガイドラインは役に立ちます。

私はマテリアルデザインをしっかり読むまでは、黄金比や白銀比などを意識して作っていたりしたのですが、こちらの方がシンプルでしっくりきました。

タッチとクリック要素の仕様

これはご存知の方も多いと思いますが…

• タッチできる範囲は少なくとも 48px × 48px (少なくとも8pxの間隔を設ける)
• クリックできる範囲は少なくとも 24px × 24px (少なくとも8pxの間隔を設ける)

例えばタッチできるアイコン自体を48pxにしなくても、タッチできるターゲットの空間が48pxであればOKです！
（下記図、２番参考）

ただし、段落の中やカレンダーの中などタッチ範囲が推奨の48pxよりも少なくてもOKとされるケースもあります。

おまけ

こちらはおまけです！

アイコンやタイポグラフィなど小さめのコンポーネントに4dpグリッドを使用している図です。

個人的には下部ナビの上paddingが8px, 下paddingが12pxになっていることが気になりました。

いつも何も考えず、アイコンと文字をグループにし縦に対してど真ん中に置いていたのですが、こういう余白の取り方もあるんですね…!

まとめ

以上、今日は私がマテリアルデザインの基礎（Material Foundation）を読み学んだ、実践で使えるデザインテクニックをご紹介しました。

概念的な話も多くなってしまいましたが、ちゃんとマテリアルデザインを順を追って読んでいくと、自分の知らないデザインテクニックに関する発見が多いです。

この記事が皆さんの今後に役立てば幸いです！