マテリアルデザインで知らなかったところ (スタイルまで)

マテリアルデザインを用いてアプリなどを作っているときにちゃんと理解していないとアドバイス出したりできないので、ちゃんと読んでみたいと思っていました。
多分ちょっと読んだことがあれば知っていることだと思うのですが、自分は恥ずかしながらまともに読んだことがなかったので全部読んでいます。
本当は実装の話をしたいのですが、とりあえずガイドラインを知らないと何も始まらないと思うので、、
今回は実装にはフォーカスせずに話します。
何か誤りなどありましたらご指摘、または編集リクエストお願いします。

日本語版も公開されたので、とても読みやすくなりました。
https://material.google.com/jp/

**おすすめ度を★をつけて紹介します。**

# マテリアル基礎編


https://material.google.com/jp/ でマテリアル デザイン (Material Design)をダウンロードします。

## 概念的なところはそんなに多くないので読める★★★

マテリアルデザインの目的と基本原理について説明されています。
ここは普通に読んだほうがいいかもです。
`マテリアルはメタファーである`というのがあるのですが、これは、ちょっと続きにある`マテリアルの環境`などを読んでからのほうが頭に入ってくるかもしれません。
![image](https://qiita-image-store.s3.amazonaws.com/0/27388/c6165680-4c3c-3ea1-cc0b-973b144f6c2e.png)


## マテリアルのシートには1dpの厚さがある

マテリアルデザインの環境(あのカードとかがある空間)は決まりがいくつかあります。ここは基本的なところなので、ガイドラインを見ておくことをおすすめします。
普段あまり意識しないので、トリビア的な感じになってしまいますが、説明されています。

```
マテリアルの xy 軸のサイズ（単位は dp）はさまざまですが、厚さは均一（1 dp）です。
```

![image](https://qiita-image-store.s3.amazonaws.com/0/27388/43050db0-2a2e-38fa-0b3a-573511027862.png)


## 二種類の光があり、その影を組み合わせて表示される

これもトリビア的な感じです。
影を擬似的に作るときに参考になるかもですね。

```
主要光が方向性のある影を作り、環境光が
すべての角度からやわらかな影を作ります。
```

![image](https://qiita-image-store.s3.amazonaws.com/0/27388/44a4f20a-35e6-a12b-cbe8-792e362e55aa.png)

## 静止高度とレスポンシブ高度がある★★★
選択されているときに浮き上がるアニメーションです。
ここらへんはここで一応実装について話しています。
http://qiita.com/takahirom/items/2e67333adecb189dbc93

静止高度: いつものマテリアルオブジェクトの高さ(Elevation)
レスポンシブ高度: 要素を押していると浮き出るマテリアルオブジェクトの高さ(Elevation)

静止高度 + 動的高度オフセット = レスポンシブ高度
みたいですね

影に注目
![](https://qiita-image-store.s3.amazonaws.com/0/27388/4f323b3c-ed41-d1d1-953c-e383fc61d957.gif)

```
サイズに関係なく、すべてのマテリアル オブジェクトには
静止高度（変わることのないデフォルトの高度）があります。
```

```
一部のコンポーネント タイプでは、ユーザーの入力（通常時、フォーカス時、押下時など）や
システム イベントに応じて高度が変化するレスポンシブ高度が使用されています。
こうした高度の変化は、動的高度オフセットを使用して一貫して実装されます。
```


## 同じコンポーネントであれば、常に静止高度はアプリ間で常に一定★★
FAB(丸い浮いているボタンのFloating Action Button)ならどのアプリでも静止高度は6dp!(ちゃんとドキュメントに高さが書いてある)

```
同じコンポーネント タイプの静止高度はアプリ間で常に一定です（たとえば、FAB の高度
があるアプリでは 6 dp、別のアプリでは 16 dp などと変わることはありません）。
```

# マテリアル モーション
アニメーションについてです。

https://material.google.com/jp/ でモーション (Motion)をダウンロードします。

結構たくさん章があってちょっと読みにくいです。
切り口が２つあり、概要説明と、それぞれの詳細の説明という感じになっているみたいです。

概要説明
![image](https://qiita-image-store.s3.amazonaws.com/0/27388/7cd58976-a857-b4cd-4eb4-5bbd013d2d25.png)

それぞれの詳細
![image](https://qiita-image-store.s3.amazonaws.com/0/27388/48fe8462-3a12-b6d2-09af-6493ae43a7b8.png)

## モーションパターンの意義が分かる動画がある★★

モーションの概要説明の締めくくりとしてでてくるものです。

```
モーションの意義
上記のようなモーション パターンのメリットが、次の 2 つの例からわかります。
上記のパターンに従っているアプリと、従っていないアプリを比べてみましょう。
```


![motion_sicle.gif](https://qiita-image-store.s3.amazonaws.com/0/27388/983e4a2c-705b-3167-f5fa-856bd4a1d85f.gif)

またモーションの重要性というところで以下が重要なものとしてあげられており、多くの要素が入っているようです。

```
・ ビュー間の焦点のガイド
・ ユーザーが操作を完了すると何が起きるのかヒントを示す
・ 要素間の階層的、空間的な関係
・ 背後で行われている処理（コンテンツの取得、次のビューの読み込みなど）から注目をそらす
・ キャラクター、洗練、楽しみ
```


## アニメーションの時間は移動距離、要素の速度、サーフェスの変化に合わせてアニメーションごとに継続時間を調整★

大きなアニメーションの継続時間は 300～400 ms、
小さなアニメーションでは 150～200 ms になります
この画像は500dpの移動に375msかけるみたいな意味です。
![image](https://qiita-image-store.s3.amazonaws.com/0/27388/14e5b651-0244-0126-631c-5674040ca16b.png)

120dpの移動では225msくらいみたいです
![image](https://qiita-image-store.s3.amazonaws.com/0/27388/e34e35f2-7255-3f02-a087-9fed6f667367.png)

移動距離に合わせて、時間はこんな感じ 175ms=0dp 500ms=500dp以上みたいな感じで調整する
![image](https://qiita-image-store.s3.amazonaws.com/0/27388/9e0a6174-187d-af52-2ba5-7e2ee4adc298.png)


またこの章を見ていくと複数のものが動く複雑なアニメーションでは375ms使うのが普通みたいです。

## 画面の大きさや環境によってアニメーション速度を変える

タブレットなどでは少し長めにしたり、Wear端末では短くしたりするようです。

```
端末が大きいほどマテリアルの移動距離を長くする必要があるため、
小さい端末より移行は若干遅くなる可能性があります。
```

## イージングカーブには4種類ある★★★

標準カーブ、減速カーブ、加速カーブ、急カーブ


標準カーブ
すぐ加速して、ゆっくりとまるのが自然で楽しい動きでいいらしい
利用場所: 画面内での運動(拡大なども含む)、相対運動(カードが出てきてがSnackbarと一緒に動くような場合)
![curve.gif](https://qiita-image-store.s3.amazonaws.com/0/27388/9ef60193-8af0-d0d2-6963-87a5885a7719.gif)

標準カーブ
利用場所： 画面内の運動

減速カーブ
利用場所: 画面に入る運動

加速カーブ
利用場所: 画面から完全に出る運動

急カーブ
利用場所： 画面から一時的に出る運動


## アニメーションに弧を描かせるのは下に重力が働いているから★
丸くアニメーションさせる弧を用いた運動では、丸くアニメーションさせます
画面内の運動なので、標準カーブが利用されます。

```
画面境界内の 2 地点間の要素の運動は、自然な凹型の弧を描きます。画面上の運動はすべて、
標準カーブを使用します。
```

重力があるので、重力があることを考慮したカーブになっている必要があるようです。(これをGoogle Playアプリが無視しているような気が、、)

```
現実の世界で重力に逆らって上昇するには、力が必要です。
画面上でも要素を上方向に移動するには、減速しながら上に向かうという運動を通して
加速中の力を表現する必要があります。
```

![curve.gif](https://qiita-image-store.s3.amazonaws.com/0/27388/90bea714-b69e-442d-bb80-f97f582b9e70.gif)

# スタイル


https://material.google.com/jp/ でスタイル (Style)をダウンロードします。

## カラーパレット
### テキストやアイコンやデバイダーには透明度を利用する★★

透明度を利用することで、背景色によらずに、柔軟に表示できるようです。

```
黒や白の透過テキストは、背景色が変わっても読みやすく鮮明なままであるため、
グレーのテキストよりも柔軟に使用できます。
```

こんな感じで定義されているので参考にすると良さそうです。

![image](https://qiita-image-store.s3.amazonaws.com/0/27388/9552ada0-8994-6f58-ae13-010e8fa8631a.png)
![image](https://qiita-image-store.s3.amazonaws.com/0/27388/76054cb8-10d2-8e41-3ab9-8151373cc77a.png)

### colorPrimary = 500番台 colorPrimaryDark = 700番台 ★★★
Androidで開発する時にテーマに指定する、colorPrimaryやcolorPrimaryDarkはマテリアルデザインパレットの番号が決まっているようです。

![image](https://qiita-image-store.s3.amazonaws.com/0/27388/036c869b-a901-28b2-e090-6676798c236f.png)


![image](https://qiita-image-store.s3.amazonaws.com/0/27388/f0f03784-6588-3b9e-6d9a-c31a2511d95a.png)

ちなみにテーマのcolorPrimaryやcolorPrimaryDarkについては以下に書かれています。
https://developer.android.com/training/material/theme.html

## 画像

### スクリムを利用して文字を読みやすくする★

```
画像の上に表示する文字を判読しやすくするため、スクリムを使用してテキストを保護します。
スクリムは、軽量な半透明のマテリアル レイヤです。
```

![image](https://qiita-image-store.s3.amazonaws.com/0/27388/114ef626-8ae8-6467-e9ab-89eb22267846.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/27388/fd4c7181-88a5-0935-ea27-ee2606ad515d.png)

## タイポグラフィ


### 日本語は`高密度`に相当する★★

```
高密度: 大きなグリフに対応できるよう行間に余裕を持たせる必要がある言語の文字。
中国語、日本語、韓国語が該当します。Noto では、これらの言語に対して 7 種類のウェイトが用意されています。
```


### ヒンディングというものがあり、Androidでは使わないらしい。

```
ヒンティングとは、低解像度のディスプレイでも文字を見やすくするための
調整（変形）処理の情報（ヒント）をフォントに埋め込むことです。
ヒンティング処理されたフォントは、ヒンティングなしのフォントに比べて容量が大きくなります。
```

```
Android と Mac OS X（ヒントを実装していない）では、
ヒンティングなしのバージョンを使用する。
```

### 高密度文字は大きさを変える★★

日本語は英語のままで利用することはできないようです

```
タイトル スタイルからキャプション スタイルまでのフォントサイズは、英語より 1 px 大きくなっています。
```

![image](https://qiita-image-store.s3.amazonaws.com/0/27388/adfdd0fb-94ee-ad2f-a084-82eab97cbb97.png)

### 動的な大きさの文字を使っていい

動的な大きさの文字を使っていいようです。ただし、タイポグラフィスケールを基準にして選択されるようです。

```
大型文字を適切に使うと、アプリの魅力が増す、レイアウトを引き立てる、
コンテンツが判読しやすくなるなどの効果が得られます。
動的文字は、レイアウト内のテキストの長さが不明な場合でも使用できる大型文字です。
動的文字のサイズは、空きスペースと文字サイズを推定した上で
タイポグラフィスケールを基準にして選択されます。
```

![image](https://qiita-image-store.s3.amazonaws.com/0/27388/ce0086f7-a412-729f-ba82-ebc25eaaa697.png)

## 文章

### 文章に関するガイドラインが存在する★★★
存在そのものが知らなかったのですが、便利そうです。
文言に悩んだときなど十数ページかかれているので見てみると良さそうです。

![image](https://qiita-image-store.s3.amazonaws.com/0/27388/0b0b7907-626d-c877-78a1-f580fbc3e26c.png)

# まとめ
読んでみると様々な発見があり、これまでの自分のマテリアルデザインの誤りなどについてグサグサ来るのでおすすめです。