デザイナーに届けたい…マテリアルデザイン事始め Part.1

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

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

次回
[Part.2 : マテリアルデザインのコンポーネント（小）](http://qiita.com/kazu04r/items/a0494b559a301f67b13b)

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

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

## 紙とインク

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

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

<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B8v7jImPsDi-aTBFT1FDVEstenM/whatismaterial_materialproperties_physicalproperties_thickness_01_yes.png" width=30%>

### インク？
紙の上の色は全てインク。文字も絵も全てインク。
複雑な形は紙の上に複雑なインクを塗って表現する。
インクの色は自由に変更できる。
<img src="https://qiita-image-store.s3.amazonaws.com/0/82592/aba10d61-b4e3-4d84-d8a9-082bd071ab75.gif" width=50%>

## ３次元的な捉えかた
マテリアルデザインの要素は全てx,y,zの方向を持つ。
<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bx4BSt6jniD7UXpQYWltVjNPWXc/whatismaterial_environment_3d.png" width=50%>

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

マテリアルデザインでは配置した要素を以下のように捉える。
<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B8v7jImPsDi-eV81TDFrR2ZPU1E/whatismaterial_3d_elevation4.png">


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

例：スムーズな再生・停止のトランジション
![5.gif](https://qiita-image-store.s3.amazonaws.com/0/82592/4d1463da-015a-58a7-b9ed-d2f675ed2e52.gif)

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

マテリアルの性質

<table>
<tr><th width=30%> 性質 </th><th width=35%> OK </th><th width=35%>NG</th></tr>
<tr><td> xy軸のサイズがあり厚さは均一（1dp） </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B8v7jImPsDi-aTBFT1FDVEstenM/whatismaterial_materialproperties_physicalproperties_thickness_01_yes.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B8v7jImPsDi-Sno0Qy1FY3UtaFk/whatismaterial_materialproperties_physicalproperties_thickness_02_no.png"> </td></tr>
<tr><td> 影を使って、相対的に高度を表現する </td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/4027f4f5-d7bb-00d7-493a-eeec11c7c194.gif"</td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/1aa22dd3-5a7f-9d07-d870-83bac5021ca3.gif"/> </td></tr>
<tr><td> 形状や色に制限はない </td><td colspan=2><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/aba10d61-b4e3-4d84-d8a9-082bd071ab75.gif"> </td></tr>
<tr><td> 境界からはみ出すことはない </td><td colspan=2><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/a886d3b3-38c1-c1e8-61e7-8b910dd034f2.gif"> </td></tr>
<tr><td> 入力イベントは通り抜けない </td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B0iWdZjcphyMeTJkV0N5by1vTXc/whatismaterial_properties_physical3.png"</td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B0iWdZjcphyMbV9BRUdVWFdvdTA/whatismaterial_properties_physical4.png"/> </td></tr>
<tr><td> 複数のマテリアルは同じ点を共有しない </td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bx4BSt6jniD7aVhXV0EtZ29OSU0/whatismaterial_properties_physical5.png"</td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bx4BSt6jniD7UFdUMnRKaW5PSXM/whatismaterial_properties_physical6.png"/> </td></tr>
<tr><td> 変形できる </td><td colspan=2><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/f3d08679-1627-ce43-ad97-85d822f59663.gif"> </td></tr>
<tr><td> いい変形。悪い変形 </td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/7a2705f4-7cf3-42be-0c2b-900a56b0e86f.gif"/>
平面に沿った変形
</td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/57ff292c-ac0a-7c22-2d71-24ed1b8f3b71.gif"/>
折りたたむ。ダメ（意図せず高度が変更されるから）
</td></tr>
</table>

<table width=70%>
<tr><th width=30%> 動作 </th><th width=70%> イメージ </th></tr>
<tr><td>自由に生成、消滅する</td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/683e21d7-317b-c5e0-0ab0-f1fa9c562674.gif">
 </td></tr>
<tr><td>軸に沿って移動する</td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/7440960f-0a72-b7bb-dcab-8fb06e8ecd5e.gif">
 </td></tr>
<tr><td>ユーザの操作はZ軸に沿う</td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/02885ecd-2d59-d568-5395-be7e6063a2f6.gif">
 </td></tr>
</table>

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

## 高度
オブジェクトのZ軸方向の距離のこと。
<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsTVdGcm1LX0dVeGM/whatismaterial_3d_elevation1.png">
上のオブジェクトと下のオブジェクトは6dpの距離がある。

コンポーネントごとの高度は以下のように定義されている。
<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3VG9SaVpNbkpHb2s/whatismaterial_3d_elevation2.png">

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

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

例：FABを持つレイアウトの重なりの表現
<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B8v7jImPsDi-cUtqZzE0REdJdnc/whatismaterial_3d_elevation3.png">

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

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

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

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

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

|主要光|環境光|主要光＋環境光|
|:-----------------:|:------------------:|:------------------:|
|方向性のある影を作る|全ての角度に柔らかな影を作る|マテリアルデザインで使用する|
|<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsSFZUZ01GTk13T28/whatismaterial_environment_shadow1.png">|<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsdDhaaTMwMTFVLTA/whatismaterial_environment_shadow2.png">|<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsNnVmbTNMUF9DR0U/whatismaterial_environment_shadow3.png">|


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

### 影の使い方

|OK|NG1|NG2|
|:-----------------:|:------------------:|:------------------:|
|<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3U1JzN0ltV1ViUWs/whatismaterial_3d_elevation_shadow3.png">|<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsYUJ6a1luU1ZtUWs/whatismaterial_3d_elevation_shadow1.png">|<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3ZDc2TUNPMEdNSkE/whatismaterial_3d_elevation_shadow2.png">|
|適切|影がない。ボタンと背景の区別が付かない|要素が同じ高度（それぞれの要素は同じ点を共有できない）|

# 階層

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

<img src="https://qiita-image-store.s3.amazonaws.com/0/82592/2c06af9a-e19a-a5c2-016c-312c9207161b.gif" width=50% />
ブルーのボタンはカードに属すのでスクロールに合わせて動く。

<img src="https://qiita-image-store.s3.amazonaws.com/0/82592/91d9c99b-f9e7-233e-144c-4fa7ffcd76f5.gif" width=50% />
赤のボタンはルートに属すのでスクロールに合わせて動かない。