1page.title=Android のマテリアル デザイン
2page.tags=Material,design
3page.image=images/cards/design-material-for-android_2x.jpg
4
5@jd:body
6
7<!-- developer docs box -->
8<a class="notice-developers right" href="{@docRoot}training/material/index.html">
9  <div>
10    <h3>デベロッパー ドキュメント</h3>
11    <p>マテリアル デザインを使用したアプリの作成</p>
12  </div>
13</a>
14
15<!-- video box -->
16<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
17<div>
18    <h3>ビデオ</h3>
19    <p>マテリアル デザインについて</p>
20</div>
21</a>
22
23<!-- video box -->
24<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
25<div>
26    <h3>ビデオ</h3>
27    <p>紙とインク: 重要なマテリアル</p>
28</div>
29</a>
30
31<!-- video box -->
32<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
33<div>
34    <h3>ビデオ</h3>
35    <p>Google I/O アプリのマテリアル デザイン</p>
36</div>
37</a>
38
39
40
41<p itemprop="description">マテリアル デザインは、複数のプラットフォームや端末の視覚、モーション、インタラクション デザインの包括的な指針です。
42Android はマテリアル デザイン アプリに対応するようになりました。
43Android アプリでマテリアル デザインを使うには、<a href="http://www.google.com/design/spec">マテリアル デザインの仕様</a>で定義されているガイドラインに従い、Android 5.0（API レベル 21）以降の新しいコンポーネントや機能を使用します。
44
45</p>
46
47<p>Android にはマテリアル デザインのアプリのビルドに使用できる次の要素が用意されています。</p>
48
49<ul>
50  <li>新しいテーマ</li>
51  <li>複雑なビューに対応した新しいウィジェット</li>
52  <li>カスタムのシャドウとアニメーション用の新しい API</li>
53</ul>
54
55<p>Android でのマテリアル デザインの実装については、<a href="{@docRoot}training/material/index.html">マテリアル デザインを使用したアプリの作成</a>をご覧ください。
56</p>
57
58
59<h3>マテリアル テーマ</h3>
60
61<p>マテリアル テーマには、アプリの新しいスタイルであるシステム ウィジェットがあります。このシステム ウィジェットを使うと、システム ウィジェットのカラーパレットを設定したり、タッチ フィードバックやアクティビティ遷移のためのデフォルトのアニメーションを設定したりできます。
62</p>
63
64<!-- two columns -->
65<div style="width:700px;margin-top:25px;margin-bottom:20px">
66<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
67  <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
68  <div style="width:140px;margin:0 auto">
69  <p style="margin-top:8px">暗い色のマテリアル テーマ</p>
70  </div>
71</div>
72<div style="float:left;width:250px;margin-right:0px;">
73  <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
74  <div style="width:140px;margin:0 auto">
75  <p style="margin-top:8px">明るい色のマテリアル テーマ</p>
76  </div>
77</div>
78<br style="clear:left"/>
79</div>
80
81<p>詳細については、<a href="{@docRoot}training/material/theme.html">マテリアル テーマの使用</a>をご覧ください。
82</p>
83
84
85<h3>リストとカード</h3>
86
87<p>Android はマテリアル デザインのスタイルとアニメーションを含むカードとリストを表示する、次のような新しい 2 つのウィジェットを提供しています。
88</p>
89
90<!-- two columns -->
91<div style="width:700px;margin-top:25px;margin-bottom:20px">
92<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
93  <img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
94  <p>新しい <code>RecyclerView</code> ウィジェットは <code>ListView</code>
95 に比べてさらに柔軟に機能を追加できるようになっており、さまざまなレイアウト タイプをサポートしてパフォーマンスを向上させます。</p>
96</div>
97<div style="float:left;width:250px;margin-right:0px;">
98  <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
99  <p>新しい <code>CardView</code> ウィジェットではカードの外観や操作性が統一され、カード内の重要な情報を表示できるようになりました。
100</p>
101</div>
102<br style="clear:left"/>
103</div>
104
105<p>詳細については、<a href="{@docRoot}training/material/lists-cards.html">リストとカードの作成</a>をご覧ください。
106</p>
107
108
109<h3>シャドウの表示</h3>
110
111<p>Android のビューに、X と Y のプロパティに加えて Z プロパティが追加されました。
112この新しいプロパティはビューのエレベーションを表し、次の要素を指定します。</p>
113
114<ul>
115<li>シャドウのサイズ: ビューの Z 値が高いほどシャドウのサイズが大きくなります。</li>
116<li>描画順序: ビューの Z 値が高いほど他のビューの前面に表示されます。</li>
117</ul>
118
119<div style="width:290px;margin-left:35px;float:right">
120  <div class="framed-nexus5-port-span-5">
121  <video class="play-on-hover" autoplay>
122    <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
123    <source src="{@docRoot}design/videos/ContactsAnim.webm"/>
124    <source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
125  </video>
126  </div>
127  <div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
128    <em>端末の画像をクリックすると動画を再生できます</em>
129  </div>
130</div>
131
132<p>詳細については、<a href="{@docRoot}training/material/shadows-clipping.html">シャドウとクリッピング ビューの定義</a>をご覧ください。
133</p>
134
135
136<h3>アニメーション</h3>
137
138<p>新しいアニメーション API を使って、UI コントロールのタッチ フィードバック、ビューの状態変化、アクティビティ間の遷移時のカスタム アニメーションを作成できます。
139</p>
140
141<p>この API で次のようなことができます。</p>
142
143<ul>
144<li style="margin-bottom:15px">
145<strong>タッチ フィードバック</strong> アニメーションでビューのタップ イベントに応答する。
146</li>
147<li style="margin-bottom:15px">
148<strong>円形状の出現</strong>アニメーションを使ってビューを表示したり、非表示にしたりする。
149</li>
150<li style="margin-bottom:15px">
151カスタムの<strong>アクティビティ遷移</strong>アニメーションを使ってアクティビティを切り替える。
152</li>
153<li style="margin-bottom:15px">
154<strong>曲線モーション</strong>を使ってより自然なアニメーションを作成する。
155</li>
156<li style="margin-bottom:15px">
157<strong>ビューの状態変化</strong>アニメーションを使って 1 つ以上のビュー プロパティを変化させるアニメーションを作成する。
158</li>
159<li style="margin-bottom:15px">
160ビューの状態を変化させるアニメーションを<strong>状態リスト ドローアブル</strong>で表示します。
161</li>
162</ul>
163
164<p>タッチ フィードバック アニメーションはボタンなどの複数の標準ビューに組み込まれています。新しい API を使うと、これらのアニメーションをカスタマイズして、カスタム ビューに追加できます。
165</p>
166
167<p>詳細については、<a href="{@docRoot}training/material/animations.html">カスタム アニメーションの定義</a>をご覧ください。
168</p>
169
170
171<h3>ドローアブル</h3>
172
173<p>次の新しいドローアブル機能を使用してマテリアル デザイン アプリを実装できます。</p>
174
175<ul>
176<li><strong>ベクター型ドローアブル</strong>は定義を失わずにスケールできるので、単色のアプリ アイコンに最適です。
177</li>
178<li><strong>ドローアブルによる着色</strong>を使ってビットマップをアルファ マスクとして定義し、実行時にそのビットマップに色付けできます。
179</li>
180<li><strong>色の抽出</strong>を使ってビットマップ画像から代表色を自動的に抽出できます。
181</li>
182</ul>
183
184<p>詳細については、<a href="{@docRoot}training/material/drawables.html">ドローアブルの使用</a>をご覧ください。
185</p>
186