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

今回はマテリアルデザインの主なコンポーネントについてです。
前回散々、UIパーツだの要素だの言ってきましたが、そいつらは実際どんなものがあるんだい？ってところを拾っていきます。
いつの日か「ここのUIってこんな感じもどうですかね？」「あー。確かにAndroidってこんな感じのUI多いよね。」「でしょー！」みたいな話ができるようになることを祈って、説明向け資料をまとめていきます。

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

前回
[Part.1 : マテリアルデザインの概観](http://qiita.com/kazu04r/items/a90f0bb52c39e4a980ea)

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

# コンポーネントってなんなのさ？
機器やソフトウェア、システムの構成する部品や要素のこと。
今回の場合は、マテリアルデザインを表現するための部品のこと。

# コンポーネントを知ると何がいい？
デザインはコンポーネントをうまく組み合わせていくという作業です。
コンポーネントを知る最大のメリットは組み合わせる要素が増えることです。

こういう名言があります。

*配られたカードで勝負するしかないのさ…それがどういう意味であれ　*
　　　　　　　　　　　　　　　　　　　　　　　*〜スヌーピー〜*

コンポーネントを知らない人はこのカードの量が圧倒的に少ないです。
今回はこのカードを増やす作業をしましょう。カードが増えればよりその場に適した方法・要素を選ぶことができ、それが良いデザインにつながるはずです。
（スヌーピーさんありがとうございます！）

# コンポーネント（小）

## ボタン
ユーザが触れたとき、どのような作用が生じるか明確に伝えるもの。
アプリのカラーテーマに沿ってデザインする。

### ボタンのタイプ
<table>
<tr><th width=19%></th><th width=27%> フローティングアクションボタン </th><th width=27%>浮き出しボタン</th><th width=27%>フラットボタン</th></tr>
<tr><td>イメージ</td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B7WCemMG6e0VUl95QlVMNXJLU3c/components_buttons_usage1.png"></td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B7WCemMG6e0VbDh6YmNiYVc3SHM/components_buttons_usage2.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B7WCemMG6e0VNDg3V3ZjU2hsNGc/components_buttons_usage3.png"> </td></tr>
<tr><td>使用例</td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B7WCemMG6e0Vb0pRdVVtOElwTHM/components_buttons_usage4.png"></td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B7WCemMG6e0VTEp2XzZSTzVBMUU/components_buttons_usage5.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B7WCemMG6e0VaDdZWXpLXzNicjg/components_buttons_usage6.png"> </td></tr>
<tr><td>特徴</td><td>アプリのメイン機能の操作を行う。</td><td>平面のレイアウトに次元を追加する（強調）。</td><td>レイヤが過剰になることを防ぐ。</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/0B6Okdz75tqQsTDEwRlFpUmZtVm8/components_buttons_main11.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsS2U2VUVCOVFaRlU/components_buttons_main12.png"></td></tr>
<tr><td> 
フラットボタンを使用する場合は見分けがつくかどうか気をつける
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsMF8xdDNDNUc0Zk0/components_buttons_main7.png">見分けがつかない場合は浮き出しボタンを使用する</td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsZk0xMExROVpzLWs/components_buttons_main8.png">どこがボタンかわからない<br><br></td></tr>
</table>

### 他のボタン
 - 切り替えボタン
 関連する操作グループをひとまとめにできる（操作が３つ以上ある場合に使用する）
 <img width=50% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3V2JKWk9EbzFaMjg/components_buttons_togglebuttons1.png">

 - 切り替えアイコンボタン
操作が一つだけの場合に使用する
<img width=50% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3SVpCSlV4MmRERGM/inline-components_buttons_toggleicons.png">

 - プルダウンボタン
複数の選択肢から選ぶ場合に使用する
<img width=50% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3SUZmdHBlLWk1d3M/components_buttons_dropdown1.png">


## ボタン：フローティングアクションボタン
メインの操作を促す場合に使用する。
画面の最前面に浮いているような円形のアイコンで表示され、「作成」「お気に入り」「共有」「ナビ」「検索」などの機能を持たせることができる。

### こんな感じ
<table>
<tr><th width=50%> 通常サイズ </th><th width=50%> ミニサイズ </th></tr>
<tr><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsQUxBamxwdy15Vlk/patterns_actions_fab1.png">
ほとんどの場合こちらを使用する。
</td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsS2J0RmRySnJfZTg/patterns_actions_fab2.png">
他の視覚要素と統一感を持たせる場合にのみ使用する。
</td></tr>
</table>

### できること
肯定的な操作を行う。（「作成」「お気に入り」「共有」「ナビ」「検索」等）
<img width=70% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B1PhAWhtrRTrWktOTnVaYk1TaU0/patterns_actions_fab_qualities1.png">


以下の操作は行うべきではない。

- 否定的な操作（削除、アーカイブ等）
- 具体的でない操作
- 通知、エラー（バッジをつけてはダメ）
- テキスト切り取りのような限定的な操作
- 音量調整、フォントの変更等、ツールバーが持つべき操作

<img width=70% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3Q1N3MVZFU1M5dVE/patterns_actions_fab_qualities2.png">


### 使いどき
<table>
<tr><th width=50%> 概要 </th><th width=50%> イメージ </th></tr>
<tr><td> 
<i>トリガー</i> <br>
 特定の操作を起こしたり、別の場所に移動したりする。
 </td><td> <img width=100% src="https://qiita-image-store.s3.amazonaws.com/0/82592/9d2d2e7b-b67a-d635-bd72-63e3268bb0cb.gif"></td></tr>
<tr><td> 
<i>ツールバー</i> <br>
 関連する操作を表示する。表示領域を確保することができる。
 </td><td> <img src="https://qiita-image-store.s3.amazonaws.com/0/82592/6fd7bca8-d930-eaa8-b99b-22ceb09cf594.gif"></td></tr>
<tr><td> 
<i>クイックアクセス</i> <br>
 最もよく使われる操作を表示する。
 </td><td> <img src="https://qiita-image-store.s3.amazonaws.com/0/82592/8c1c8c2e-f9c0-ef82-ffdd-a328f60f158c.gif"></td></tr>
<tr><td> 
<i>モーフィング</i> <br>
 アプリの構造の一部に変形する。フローティングアクションボタンに戻れるようにする。
 </td><td> <img src="https://qiita-image-store.s3.amazonaws.com/0/82592/cea3d0d8-5350-724b-4730-dec52b6a87d7.gif"></td></tr>
<tr><td>
<i>全画面表示</i> <br>
 別のコンテンツを表示する。フローティングアクションボタンに戻れなくていい。
 </td><td> <img src="https://qiita-image-store.s3.amazonaws.com/0/82592/24da7608-ab4c-e9d8-951f-8d20b279cefd.gif"></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/0B1PhAWhtrRTrV2hRR2lPZ3kyZFE/patterns_actions_fab_qualities7.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B1PhAWhtrRTrekhFaTJmbDhSM0U/patterns_actions_fab_qualities6.png"></td></tr>
<tr><td> 
余計な立体感をつけない
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B1PhAWhtrRTrV2hRR2lPZ3kyZFE/patterns_actions_fab_qualities7.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B1PhAWhtrRTrVTdJdFNQZFc5VmM/patterns_actions_fab_qualities8.png"></td></tr>
<tr><td> 
画面ごとに操作が異なる場合、一度消えてから再表示する
 </td><td> <img src="https://qiita-image-store.s3.amazonaws.com/0/82592/959364b7-df31-6dc2-b109-2058b3f2db3e.gif"></td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/978f1cec-d213-0564-d12e-9cadf2dc3625.gif"></td></tr>
</table>

## チップ
複雑なエンティティを簡略化した小さなUI要素。写真、短いタイトル、簡単な情報を含めることができる。

### こんな感じ

OR検索の条件に使ったり
<img width=70% src="https://qiita-image-store.s3.amazonaws.com/0/82592/ba315a3c-04bd-3d96-d9cc-fe73f0ff9bc9.gif">


連絡先情報に使ったりする
<img width=30% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bx4BSt6jniD7aF92ZTRxOTU4U00/components_chips_contact1.png">

## テキストフィールド
ユーザがテキストを入力したり、選択、切り取り、コピー、貼り付けできる。
オートコンプリート機能でデータを検索することもできる。

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

1. ラベル
2. ヒント
3. ヘルパー

アンダーラインで入力欄を表現する。

### 使いどき
<table>
<tr><th width=50%> 概要 </th><th width=50%> イメージ </th></tr>
<tr><td> 
<i>単一行入力</i> <br>
 テキスト入力のカーソルが右端に達すると自動的にコンテンツを左にスクロールする。
 </td><td> <img width=100% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3TVJMNzF0Z3BhZjQ/components_textfields_single2.png"></td></tr>
<tr><td> 
<i>複数行入力</i> <br>
 一行に収まらないテキストが自動的に新しい行に分かれる。カーソルが下端に達すると自動的に縦方向にスクロールする。
 </td><td> <img width=100% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B9msDEx00QXmVThjSndOLXA1WWM/components_textfields_multiline2.png"></td></tr>
<tr><td> 
<i>フル幅入力</i> <br>
 より詳細なタスクに使用する。
 </td><td> <img width=100% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B9msDEx00QXmeUtpUlpZREV3MlU/components_textfields_full2.png"></td></tr>
<tr><td> 
<i>オートコンプリート入力</i> <br>
 入力候補や入力補完がリアルタイムで表示される。ユーザがより正確に効率よく情報を入力できる。
 </td><td> <img width=100% src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsOEdQX292cEQ5Skk/components_textfields_search2.png"></td></tr>
</table>

### フローティングラベル
ユーザがテキスト入力欄に入力しようとすると、フローティングインラインラベルが移動して、上に浮いて表示される。
 <img width=50% src="https://qiita-image-store.s3.amazonaws.com/0/82592/f9fda2f4-a995-ccc1-e553-814f29da629a.gif">

## プログレス
アプリでコンテンツを読み込んでいる間に表示する。
１つの画面に１つのインジケータのみ表示する。

インジケータには以下の表現方法がある。

- **確定**　処理完了までの時間を表示する
- **不確定**　処理完了まで待機する必要があることを表示する

### こんな感じ
<table>
<tr><th width=19%></th><th width=27%> 線形インジケータ </th><th width=27%>円形インジケータ</th><th width=27%>線形・円形統合</th></tr>
<tr><td>イメージ</td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/3a02c7d1-2f5a-7349-d7e7-9a6dd46ecbb8.gif"></td><td> <img src="https://qiita-image-store.s3.amazonaws.com/0/82592/274554a2-a166-9cba-68b9-c364f9335932.gif"></td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/0db9b58f-798a-1bb6-9d78-1112fcdc6867.gif"></td></tr>
</table>

### 使いどき
<table>
<tr><th width=50%> 概要 </th><th width=50%> イメージ </th></tr>
<tr><td> 
<i>初回コンテンツ読み込み</i> <br>
 </td><td> <img width=100% src="https://qiita-image-store.s3.amazonaws.com/0/82592/6cef0f78-6b53-926c-e311-f71cad0d2367.gif"></td></tr>
<tr><td> 
<i>上スクロールで追加コンテンツ読み込み</i> <br>
 </td><td> <img width=100% src="https://qiita-image-store.s3.amazonaws.com/0/82592/90759645-cea4-7a8e-5ab2-f937555bf64b.gif"></td></tr>
<tr><td> 
<i>下スワイプで更新</i> <br>
 </td><td> <img width=100% src="https://qiita-image-store.s3.amazonaws.com/0/82592/46c99b2f-dbf9-9405-6665-5976963e45db.gif"></td></tr>
</table>

## スライダー
ユーザがつまみの部分を移動させ、値を選択するためのもの。
音量、輝度、彩度といった強度を設定するためのインターフェース。

### こんな感じ

<table>
<tr><th width=20%></th><th width=40%> 連続スライダー </th><th width=40%>非連続スライダー</th></tr>
<tr><td>イメージ</td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/cb480e74-c0b8-0de7-e7d9-5bd64aafcf15.gif"></td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/5387ae43-4f4a-81cc-e396-8426ed01f3e7.gif"></td></tr>
<tr><td>概要</td>
<td>値を特定する必要のない<b>主観的な設定</b>に使用する</td>
<td>値を特定する必要のある<b>客観的な設定</b>に使用する。メモリがある場合はメモリにスナップする</td>
</tr>
</table>


## スナックバーとトースト
画面上に簡単なメッセージを表示するためのもの。
スナックバー：画面下部に表示する。アクションを含めることができる。
トースト：画面下部に表示する。アクションを設定することができない。

### こんな感じ
<table>
<tr><th width=20%></th><th width=40%> スナックバー </th><th width=40%>トースト</th></tr>
<tr><td>イメージ</td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/59ae56ab-12e0-2364-51d9-50e8a43b48c1.gif"></td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/a3411b81-919b-eee3-3bd1-fd5b870f975e.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/0Bx4BSt6jniD7M2QzbjlPWUwtcXc/components_toasts_usage1.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bx4BSt6jniD7YzA0VE1uS0xPd2s/components_toasts_usage2.png"></td></tr>
<tr><td> 
表示は１つまで
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bx4BSt6jniD7M2QzbjlPWUwtcXc/components_toasts_usage1.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bx4BSt6jniD7ZDd4OXY0X0t3cEE/components_toasts_usage4.png"></td></tr>
<tr><td> 
アクションは１つまで。終了やキャンセルは使用しない
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bx4BSt6jniD7M2QzbjlPWUwtcXc/components_toasts_usage1.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bx4BSt6jniD7Mm02RldQdm5XWTA/components_toasts_usage6.png"></td></tr>
<tr><td> 
フローティングアクションボタンを塞がない
 </td><td> <img src="https://qiita-image-store.s3.amazonaws.com/0/82592/59ae56ab-12e0-2364-51d9-50e8a43b48c1.gif"></td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/7e455745-b5d5-e335-b4e2-1aa2ca921eb2.gif"></td></tr>
</table>

## ツールチップ
ユーザが特定の要素にフォーカスした場合に表示されるラベル。
モバイルの場合は、ロングタップで表示される。

### こんな感じ
<table>
<tr><th width=20%></th><th width=40%> 通常時 </th><th width=40%>ロングタップ時</th></tr>
<tr><td>イメージ</td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bx4BSt6jniD7UTZwTkp6c2ctZVU/components_tooltips_touch3.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsdXVGLWFxR1ZfQXM/components_tooltips_touch4.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/0B6Okdz75tqQsZ3pOU1BrYzZuUWM/components_tooltips_usage1.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsb3YzV0VDOFhMY1U/components_tooltips_usage2.png"></td></tr>
<tr><td> 
シンプルな情報を表示する
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsc2t3ZC1BYjh4XzQ/components_tooltips_usage3.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsbDBoVW53SjlJaE0/components_tooltips_usage4.png"></td></tr>
</table>

## セレクションコントロール
ユーザが項目を選択するためのもの。
テーマのアクセントカラーを使用する。

### こんな感じ
<table>
<tr><th width=19%></th><th width=27%> チェックボックス </th><th width=27%>ラジオボタン</th><th width=27%>スイッチ</th></tr>
<tr><td>イメージ</td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bx4BSt6jniD7T2xGbGo0cUlPVG8/components_switches_check1.png"></td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bx4BSt6jniD7Z1NaaXh2ZkpDRkE/components_switches_radio1.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bx4BSt6jniD7NDg4aGIzVXYxVEE/components_switches_switch1.png"> </td></tr>
<tr><td>特徴</td><td>選択肢から<b>複数</b>の項目を選択する場合に使用する。</td><td>選択肢から<b>単一</b>の項目を選択する場合に使用する。</td><td>一つの設定の状態を切り替える場合に使用する</td></tr>
</table>

## メニュー
一時的な新しいマテリアルシートを開いて表示する選択肢の一覧。
ユーザは一覧から選択することで操作を行う。

### こんな感じ
<table>
<tr><th width=20%></th><th width=40%> 閉じている状態 </th><th width=40%>開いている状態</th></tr>
<tr><td>ヘッダーメニュー</td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B_udO5B8pzrzN2RZYTY5dnE0RG8/components_menus_usage1.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bzhp5Z4wHba3RktrSGVxbkhFaTg/components_menus_usage2.png"></td></tr>
<tr><td>リスト内メニュー</td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bx4BSt6jniD7c0ZsY292S1ZxZGs/components_menus_usage4a.png"><br><br><br><br><br>
</td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0Bx4BSt6jniD7eTlxdXpxd2Y3M00/components_menus_usage4b.png">
関係ないアイテムは削除して表示する。条件を満たす必要がある場合は無効にして表示する。
</td></tr>
<tr><td>シンプルメニュー</td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/fe7325b1-2516-5db8-cb17-ff923cc12e2f.png">
</td><td><img src="https://qiita-image-store.s3.amazonaws.com/0/82592/94b08e3c-f39a-3ee8-2128-58424994ee43.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/0B6Okdz75tqQsbXpoZkNIcXgxc3M/components_dialogs_simplemenus3.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsWVNNYWoxV3hYT28/components_dialogs_simplemenus5.png"></td></tr>
<tr><td> 
テキストが折り返される場合はダイアログを使用する。
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsM1JlMU1GQlVCajg/components_dialogs_simplemenus10.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsdzQ5ekJONHpJaU0/components_dialogs_simplemenus11.png"></td></tr>
<tr><td> 
スクロール可能な場合はスクロールバーを常に表示する。
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsM3lfVmVsWk9KRUE/components_dialogs_simplemenus12.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsX1p4YVVlWjk4MTA/components_dialogs_simplemenus13.png"></td></tr>
<tr><td> 
メニューアイテムは重複しない
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsdF8wbDhKSUpVM2s/components_dialogs_simplemenus14.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B6Okdz75tqQsdTVtZzBDcVVQSE0/components_dialogs_simplemenus15.png"></td></tr>
<tr><td> 
メニュー表示位置は常に左揃え（タップした場所によらない）
 </td><td> <img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B_udO5B8pzrzV05ZRkdMOFRidkU/components_dialogs_simplemenus16.png"></td><td><img src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B_udO5B8pzrzYnRPT2RCdkh6R28/components_dialogs_simplemenus17.png"></td></tr>
</table>