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

今回も引き続きマテリアルデザインの主なコンポーネントについてです。
前回、小さいコンポーネントを紹介しましたが、今回は目に付きやすいマテリアルデザインの特徴的なコンポーネントを紹介していきます。

Part.3 : マテリアルデザインのコンポーネント（中）

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

次回
Part.4 : マテリアルデザインのコンポーネント（大、ダイアログ）（たぶん4/9ごろ）


# コンポーネント（中）

## カード
関連するデータが記載された紙のようなもの。カード内には概要を表示して、詳細への遷移元になる。
以下のような情報を表示するのに適している。

- 画像、動画、テキスト等で構成される１つのコレクションを複数タイプで表示する場合。
- コメントなど長さが大きく変わるコンテンツをサポートする場合。
- お気に入りやコメントなど複雑な動作を含む場合。
- 4行以上のテキストを表示する場合。

### こんな感じ
<img width=30% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3cXVadmtJa19wT3M/components_cards_content1.png">

カードには多種多様な情報を含めることができる。
メインの機能は「対象とする要素の情報表示」と「他のビューへの入り口」のため、無関係な情報を表示しすぎないように気をつける。


### 使いどき
<table width=60%>
<tr><th width=40%> 概要 </th><th width=60%> イメージ </th></tr>
<tr><td> 
１つのコレクションを複数タイプで表示する
 </td><td> <img width=100% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3am9VWWFlbHVJNDg/components_cards3.png">サムネイルがある要素とない要素を混ぜて一覧で表示している</td></tr>
<tr><td> 
長さが大きく変わるコンテンツをサポートする
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3Q3BSMEZNOVNOWU0/components_cards_behavior7.png"></td></tr>
<tr><td> 
複雑な動作を含む
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsZWNWWDZVek41S1U/components_cards_content2.png"></td></tr>
<tr><td> 
4行以上のテキストを表示する
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3NGo3QkpVWTNBZzA/components_cards_content3.png"></td></tr>
</table>

### やっていいこと、だめなこと
<table>
<tr><th width=30%> 概要 </th><th width=35%> OK </th><th width=35%> NG </th></tr>
<tr><td> 
操作数が少ない同種のコンテンツはカードにしない
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsZGZTVVJIWW4zZWs/components_cards8.png">素早く目を通せて、選択しやすい<br><br></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsM3ZqMmJXdjRyZk0/components_cards9.png">別々の情報のように見えて、全体に目を通しにくくなる。</td></tr>
<tr><td> 
画像ギャラリーにはタイルを使用する
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsN2F1Y2RWNzQ0R1U/components_cards10.png">同種の場合はタイルの方が視認性が高まる</td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQscVl0VzR1SlZkMWM/components_cards11.png">同種のコンテンツにカードは不要<br><br></td></tr>
<tr><td> 
インラインリンクを使用しない
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3MHFUUWc0Sll0Mk0/components_cards_action2-do.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3ODh2X0tOeTVXcjQ/components_cards_action3-dont.png"></td></tr>
<tr><td> 
カード内でスクロールさせない（２重スクロール、横スクロールはだめ）
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3X3FmbXU5WXF0VlU/components_cards_behavior5.png">追加の要素がある場合は展開できるようにすべき</td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3eEdpVE9jVm54OG8/components_cards_behavior4.png"><br><br><br><br></td></tr>
</table>

## 展開パネル
タップで追加情報を表示することができる。簡単な値の選択や、広告キャンペーン情報を集約して表示する場合に使用する。

### こんな感じ

<b>閉じた状態</b>
<img width=80% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B7WCemMG6e0VVTZEdXBGMkFMSk0/components_material_expansionpanels_collapse.png">
閉じた状態では要約した情報を表示する。

<b>開いた状態</b>
<img width=80% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B7WCemMG6e0VOHlHaFBfZW1xQVE/components_material_expansionpanels_expand.png">
開いた状態では、情報の追加・編集を行うことができる。

## タブ
アプリ内の表示の切り替えを簡単に行うことができる。

### こんな感じ
![ezgif-2-f40f5a8b2a.gif](https://qiita-image-store.s3.amazonaws.com/0/82592/13bd14eb-2f2f-b48c-75f3-27202849cfec.gif)

同レベルのコンテンツを整理するために使用する。タブ間のナビゲーションはコンテンツ領域をスワイプかタブをタップすることで行う。

### レイアウトパターン
<table>
<tr><th width=33%> デフォルト </th><th width=33%> 拡張バー </th><th width=33%>上部スクロール時の固定バー </th></tr>
<tr><td> 
<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsOUdyb0FjQTJTdlk/components_tabs_usage_mobile3.png">
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsc0lzb2VoMkFBNUE/components_tabs_usage_mobile1.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsbmZJbkdjeHE0RW8/components_tabs_usage_mobile6.png"></td>
<tr><th width=30%> 検索を含める </th><th width=35%> 横スクロール可能なタブ </th><th width=35%> テキスト色とインジケータ色を合わせる </th></tr>
<tr>
</tr>
<tr><td> 
<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsQS1FRUVwMkVvQ2c/components_tabs_usage_mobile2.png">
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsZ0RaTDMwMnRmTDg/components_tabs_usage_mobile5.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsVDk4V2Nnc2U3LTQ/components_tabs_usage_mobile4.png"></td></tr>
<tr><th width=30%> タブにアイコンを含める </th><th width=35%> アイコン色とインジケータ色を合わせる </th></tr>
<tr>
<tr><td> 
<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsbHJuWi04N0ZIc0E/components_tabs_usage_mobile7.png">
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsQ1Y4YXpwTkZ2MFU/components_tabs_usage_mobile8.png"></td></tr>
</table>

### やっていいこと、だめなこと
<table>
<tr><th width=30%> 概要 </th><th width=35%> OK </th><th width=35%> NG </th></tr>
<tr><td> 
レベルが異なる情報をタブで切り替えない
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQscExOcHhfYUdNZlE/components_tabs_usage_example1.png">Music-Movies-Books-Games とアプリ内で同一のレベルの情報を切り替える</td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsLXRnbUdwOW9XYXM/components_tabs_usage_example2.png">設定-ヘルプ等、本来画面を切り替えて行うべき操作をタブ内に設定しない</td></tr>
<tr><td> 
タブは単一の行で表示する
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsTTdvazhjTHlsWjg/components_tabs_usage_example5.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsVlczRTlQek9ObW8/components_tabs_usage_example6.png"></td></tr>
<tr><td> 
タブは入れ子にしない
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsVmowR3NUVWoxVWs/components_tabs_usage_example3.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsSDROTXNUNUdxMVE/components_tabs_usage_example4.png"></td></tr>
<tr><td> 
最大幅を超えるラベルは２行目から折り返す
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3WFR6bnJvaG9wclk/components_tabs_usage_content1.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsWll4Mk43cTVldlU/components_tabs_usage_content2.png"></td></tr>
<tr><td> 
ラベルの長さを変更しない（スクロールしないタブの場合）
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3WFR6bnJvaG9wclk/components_tabs_usage_content1.png"><br><br><br><br><br></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsbllqdHVoMHRZTlk/components_tabs_usage_content3.png">ラベルの長さを変更したい場合はスクロール可能なタブを使用する</td></tr>
<tr><td> 
アイコンとテキストを組み合わせない
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3WFR6bnJvaG9wclk/components_tabs_usage_content1.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsa2g3QkZxOE5FdGs/components_tabs_usage_content4.png"></td></tr>
</table>

## ツールバー
対象への操作を集約したもの。操作対象となるシートの一段上に表示する。

### こんな感じ

<img width=80% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B9PCOJnbdRP6NVBZNXNqTi1EekU/layout_principles_papercraft_toolbars4.png">
操作対象の一段上に表示されるため下の要素がスクロールしても画面外に押し出されることはない

## ボトムナビゲーション
１回のタップで最上位のビューを切り替えて、アプリ内で目的のものを探すことを簡単にするためのもの。

### こんな感じ

![ezgif-2-43fdd85281.gif](https://qiita-image-store.s3.amazonaws.com/0/82592/9f64fef8-92a0-8087-c2b9-3aa9d90b3dc4.gif)

スワイプでは遷移せず、ナビゲーション内の要素をタップ時に遷移する。

<table width=70%>
<tr><th width=50%> 特徴 </th><th width=50%> イメージ </th></tr>
<tr><td> 
アクティブなアクションをタップするとそのビューの上部に移動する
 </td><td> <img width=100% src="https://qiita-image-store.s3.amazonaws.com/0/82592/414de683-3aeb-2387-f752-0bf67fa41cd2.gif">
Booksがアクティブな場合、再度Booksをタップするとリストの最上部にスクロールする。
</td></tr>
<tr><td> 
遷移時にタスクの状態は保持しない
 </td><td> <img width=100% src="https://qiita-image-store.s3.amazonaws.com/0/82592/d74acf5f-ea18-7ad3-cdc3-ed73b9ebd42c.gif">
Booksでスクロールしても、遷移するとスクロールした場所はリセットされる。
</td></tr>
<tr><td> 
階層移動時にはナビゲーションバーを表示したままにする
 </td><td> <img width=100% src="https://qiita-image-store.s3.amazonaws.com/0/82592/b3f72f23-1b24-83ac-900b-5ddc1e35fa7b.gif">
Musicの1階層下に遷移した場合も、ナビゲーションバーを表示し続ける。
</td></tr>
</table>

### やっていいこと、だめなこと
<table>
<tr><th width=30%> 概要 </th><th width=35%> OK </th><th width=35%> NG </th></tr>
<tr><td> 
切り替えに横のモーションを使用しない。（タブとの違いを明確にするため）
 </td><td> <img src="https://qiita-image-store.s3.amazonaws.com/0/82592/9f64fef8-92a0-8087-c2b9-3aa9d90b3dc4.gif"></td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/b69baca3-007d-eca8-d4b4-3779248d19c7.gif"></td></tr>
</table>

## ボトムシート
画面下端から上にスライドされるシート。ユーザの操作によってのみ表示され、上にスワイプするとコンテンツをさらに表示できる。
ボトムシートは以下の用途で使用する。

- モーダル表示
- アプリ内の永続コンテンツ

### こんな感じ

<table width=70%>
<tr><th width=20%> モーダル </th><th width=40%> モーダル </th><th width=40%>永続コンテンツ </th></tr>
<tr><td>イメージ</td><td> 
<img width=100% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3VW9HUDhtTE5XZVk/components_bottomsheets_usage2.png">
 </td><td> <img width=100% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3dDZKN1lHNG1TekU/components_bottomsheets_usage1.png">
</td></tr>
<tr><td>特徴</td><td> 
メニューやダイアログの代わりになる。他のアプリへのディープリンクも表示できる。
 </td><td> アプリのレイアウトの一部として使用する。
</td></tr>
</table>

### 永続コンテンツ

メインビューを補完するアプリ内のコンテンツを表示する。
アクティブに使用されていなくても非表示にはしない。

<table width=70%>
<tr><th width=50%> 概要 </th><th width=50%> イメージ </th></tr>
<tr><td> 
独自のコンテンツを挿入する
 </td><td> <img width=100% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3ejJ0TERfdGgyNVk/components_bottomsheets_persistent5.png">
場所の詳細を画面に表示したまま、地図を操作できる。
</td></tr>
<tr><td> 
等価のコンテンツを表示する
 </td><td> <img width=100% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3NmZkN1NVRGgzM28/components_bottomsheets_persistent6.png">
</td></tr>
</table>

### モーダル

メニューやダイアログの代わりとして使用する。
他のUI要素よりも上に表示されるため、元のコンテンツを表示・操作する場合は閉じる必要がある。
またモーダル表示時には、注目を集めるために周りを暗くする。

<table width=70%>
<tr><th width=50%> 例 </th><th width=50%> イメージ </th></tr>
<tr><td> 
リスト表示
 </td><td> <img width=100% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3NWNQcUo1TnhhaWs/components_bottomsheets_modal1.png">
</td></tr>
<tr><td> 
サブテキスト付きリスト表示
 </td><td> <img width=100% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B7WCemMG6e0VS0RlMEx5Qk9PQjQ/components_bottomsheets_modal4.png">
</td></tr>
<tr><td> 
グリッド表示
 </td><td> <img width=100% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3UzA3RDctV2k0YUk/components_bottomsheets_modal2.png">
</td></tr>
</table>

モーダルは以下の操作で閉じることができる。

<table>
<tr><th width=25%> 下スワイプ </th><th width=25%> 外側をタップ </th><th width=25%> ×ボタンをタップ（あれば） </th><th width=25%> バックキーをタップ </th></tr>
<tr><td> 
<img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3a3Z2UGZJMkRWamM/components_bottomsheets_behavior1.png">
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3cGt6TlA0ZzNLdDg/components_bottomsheets_behavior2.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3cTdiQWp2TkI0NEE/components_bottomsheets_behavior3.png"></td>
<td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/381c8d23-e0f1-b2bd-94c9-b4603e1a4db0.png"></td></tr>
</table>


### やっていいこと、だめなこと
<table>
<tr><th width=30%> 概要 </th><th width=35%> OK </th><th width=35%> NG </th></tr>
<tr><td> 
モーダルを全画面に展開した場合は×ボタンを表示する
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3b1BpT0dRd0tFaUE/components_bottomsheets_modal_do.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3UTB0bG8tYWxVRG8/components_bottomsheets_modal_dont.png"></td></tr>
<tr><td> 
シートの高さは含まれるコンテンツによって設定する
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3MC0zbFNZaU1lUkk/components_bottomsheets_modal9.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3TnJEQUF3Y0JVb2c/components_bottomsheets_modal10.png"></td></tr>
<tr><td> 
最初からヘッダーに重なるように表示しない（ユーザが閉じる領域を確保するため）
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3Ym9QLTlfbUR4ekk/components_bottomsheets_modal11.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3YmVmTWVhMWtZbFk/components_bottomsheets_modal12.png"></td></tr>
</table>

# 社内勉強会やりました
※内容とは関係ないので興味がなければ読み飛ばしてください。
Part.1とPart.2のFABまで説明してみました。結果はまぁまぁ？なんとなくわかってくれたかな？って感じでした。
参加人数は、
　エンジニア：３人（新人アプリエンジニア）
　デザイナー：６人
　プランナー：２人
なかなかの大人数。

私の説明の仕方が稚拙でなかなか伝えられないところもありましたが次に活かせる所があったので紹介します。

## 反省点
- 堅苦しい説明が多かった。(Part.1はちょっと冗長だった？)
- 準備不足でアプリを見せながら説明ができなかった。（GenyMotionに適当なサンプルを入れるのに手こずってる間に発表時間になった）

## 次の目標
- 例多め。施策に取り込むイメージを湧かせる。
- 動きを見せる。こんな感じで入ってるんですよー、いいですよねーをする。

Part.1よりPart.2の方が評判が良かったです。（けどPart.1が一番大事だと思う…オープンにしたほうがいいのかな…）

※Part.3でコンポーネント終わらせるつもりでしたが、Listをまとめてたらすごく長くなったので分割します。