2017年DroidKaigi「エンジニアが武器にするMaterial Design」に感化され、わが社でもデザイナー向けマテリアルデザイン勉強会をしてみようと思います。スライド
いつの日か「わぁー、イケてるね！（わくわく）」みたいなデザインができる日が来ることを祈って、説明向け資料をまとめていきます。

Part.1 : マテリアルデザインの概観

次回
Part.2 : マテリアルデザインのコンポーネント（小）

マテリアルデザインってなんなのさ？

物質デザイン。デザインパーツを物質として捉え、現実世界のルールに沿うことで、ユーザに直感的な操作を誘導するデザインのこと。

基本の考え方

• マテリアルデザインとは紙とインクの要素で出来ている
• オブジェクトの重なりを物質的に捉える（３次元）
• 意味のあるアニメーションでより直感的に

紙とインク

紙？

UIパーツは紙でできていると考える。
紙は以下の特徴を持つ。

• 重ねられる
• 厚さがある（1dp）
• 四角 or 丸 複雑な形はとらない
• 大きさは自由に変えられる
• 無色

インク？

紙の上の色は全てインク。文字も絵も全てインク。
複雑な形は紙の上に複雑なインクを塗って表現する。
インクの色は自由に変更できる。

３次元的な捉えかた

マテリアルデザインの要素は全てx,y,zの方向を持つ。

• 標準の厚さは1dp
• z軸の正の値が高さを表現する

マテリアルデザインでは配置した要素を以下のように捉える。

意味のあるアニメーション

マテリアルデザインでは、空間的な関係、機能、意図などを美しく流れるよう表現する。（詳しくは次回以降）

例：スムーズな再生・停止のトランジション

マテリアルってなんなのさ？

マテリアルデザインのパーツ。UIを表現するためのもの。
固有の性質と動作を持つ。

マテリアルの性質

性質	OK	NG
xy軸のサイズがあり厚さは均一（1dp）
影を使って、相対的に高度を表現する
形状や色に制限はない
境界からはみ出すことはない
入力イベントは通り抜けない
複数のマテリアルは同じ点を共有しない
変形できる
いい変形。悪い変形	平面に沿った変形	折りたたむ。ダメ（意図せず高度が変更されるから）

動作	イメージ
自由に生成、消滅する
軸に沿って移動する
ユーザの操作はZ軸に沿う

高度と影

マテリアルデザインでは自身の空間モデルを表現するために、高度と影という概念を持つ。

高度

オブジェクトのZ軸方向の距離のこと。

上のオブジェクトと下のオブジェクトは6dpの距離がある。

コンポーネントごとの高度は以下のように定義されている。

静止高度

コンポーネントごとのデフォルト高度のこと

動的高度

ユーザの入力やシステムイベントで変化する高度のこと(上記の図のCard,FAB,etc...)

例：FABを持つレイアウトの重なりの表現

それぞれの高さは以下のとおり

コンポーネント	高さ
AppBar	4dp
Card	2dp
FAB	6dp

重なりの順は以下のようになる
FAB > AppBar > Card

影

マテリアルデザインでは奥行きを影で表現する。

主要光と環境光

マテリアルデザイン環境化では仮想の光が画面内を照らす。
画面内を照らす光には２種類あり、それぞれが別々の影を作りだす。

主要光	環境光	主要光＋環境光
方向性のある影を作る	全ての角度に柔らかな影を作る	マテリアルデザインで使用する

２種類の影を合わせて、マテリアルの影は作られる。

影の使い方

OK	NG1	NG2
適切	影がない。ボタンと背景の区別が付かない	要素が同じ高度（それぞれの要素は同じ点を共有できない）

階層

オブジェクトは、親子関係をもち、それぞれ独立して動かせる場合と、親によって動きを制限される場合がある。
マテリアルデザインでは、影の大きさでボタンがどの親要素に属しているかを伝え、ユーザーが操作した際の画面の動きをイメージさせる。

ブルーのボタンはカードに属すのでスクロールに合わせて動く。

赤のボタンはルートに属すのでスクロールに合わせて動かない。