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