Android 9/10対応UI/UX設計ガイド：Material Designの基本と実践テクニック

Googleは2019年9月に最新OS「Android 10」をリリースしました。現時点では一部の最新ハイエンド端末にのみ搭載されていますが、今後、各メーカーが比較的新しいモデルへ順次展開していくことが予想されています。

Android 10では、システム全体に適用されるダークモードをはじめ、数々の便利な新機能が追加されました。一方で、UI自体の大きな刷新はほとんど行われませんでした。GoogleはMaterial Design（マテリアルデザイン）が極めて高い完成度を持つため、これを引き続き採用しています。そのため、本ガイドで紹介する内容は、OreoやPieなど以前のAndroidバージョンにもそのまま応用可能です。

Material Designに準拠したUI要素の正しい設計方法を習得しておくと、Android端末で快適に動作するアプリ開発から、Samsung Theme Storeなどのテーマストアへのカスタムテーマ登録まで、幅広い場面で役立ちます。

Appualsには、本トピックに関連する以下の記事もありますので、あわせて参考にしてください。

• Androidアプリにダークテーマを実装する方法
• Visual Studio 2017でAndroidアプリ開発を始める方法
• AOSP（Android Open Source Project）からカスタムROMをビルドする方法｜パート2
• AndroidシステムUIを手動でテーマ化する方法（※一部の手順はAndroid 9 / 10では古くなっている可能性がありますが、全体として有用な情報です）

Material Designの概要

Material Designは、いくつかの重要な要素を軸に構成されています。具体的には、カラーパレット、レスポンシブなグリッドレイアウト、そしてテーマ制作を行う場合にはAndroidシステムUIへの理解が挙げられます。

アプリ開発を行う場合は、上記に加えてAndroidの実行時権限（ランタイムパーミッション）や権限リクエストの仕組みも把握しておく必要があります。特に、ユーザーのストレージフォルダやカメラなどへアクセスするアプリでは重要なポイントです。

Android公式デベロッパーページでは、Android 10におけるプライバシーおよび権限周りの変更点について、開発者が知っておくべき詳細が解説されています。ただし、本記事では実際のアプリ開発よりも、主にテーマ制作に焦点を当てて進めていきます。

カラーパレット

Material Designのカラーパレットにおいて、Googleは「2色＋バリエーション」の体系を推奨しています。

たとえば上の画像のように、プライマリカラーを紫、セカンダリカラーをシアンに設定します。そして、UIのその他の要素にはそれぞれのシェード（濃淡）バリエーションを使用することで、デザイン全体に統一感と調和が生まれます。

Material Design公式のカラーツールは、カラーバリエーションを組み立てる際に非常に便利なツールです。また、ClayのようなプロフェッショナルなUI/UXデザイン企業や、高評価のWebデザイン会社の事例集からインスピレーションを得るのも良い方法です。

レスポンシブグリッドレイアウト

レスポンシブグリッドレイアウトを理解するとは、すなわちピクセル密度と画面の自動適応の仕組みを理解することにほかなりません。一般的なAndroidスマートフォンのDPIは、おおよそ300〜480DPIの範囲に収まります。

この前提を踏まえると、300DPIの画面では通常、最大4列までの表示が可能です。

一方、600DPIの画面では最大8列まで表示できます。

各列の間には「ガター（gutter）」と呼ばれる余白領域があり、列同士を視覚的に分離する役割を担います。たとえば幅360dpのモバイル画面では、各ガターは約16dpに設定されるのが標準的です。

スクリーンDPIの理解

システムUIであれアプリのUIであれ、UIを設計する際には、画面サイズごとのピクセル密度の違いを必ず考慮しなければなりません。以下は、代表的な画面解像度とピクセル密度の一覧表です。

経験則として、特定の1機種向けではなく「汎用的」なテーマやアプリを作成する場合は、最も低い密度から設計を始めるのが得策です。1xから着手すれば、単純にピクセル単位で測定するだけでよく、その値がすべてのDP（密度非依存ピクセル）でそのまま使えます。

逆に3.5xから設計を始めると、他の密度へ対応させるためにすべての値を3.5で割る計算が必要になり、複数のDP値を算出する手間が大きな負担となってしまいます。

Android 10のUI/UXデザインに役立つ追加Tips

ラジオボタン、ボタン、チェックボックスなどのテーマコンポーネントにカスタムカラーを適用したい場合、drawableで各状態（チェック済み・クリック済みなど）を表現するのは避けましょう。drawableを使用すると、Android 9およびAndroid 10で大幅に強化されたネイティブのMaterial Design効果（リップルエフェクトなど）が失われてしまうからです。

Material Designで作業する際、Googleはすぐに活用できる豊富な機能を用意しています。これらを上手に取り入れることで、UI/UXがシステムにより自然に溶け込みます。

以下は、組み込みのMaterial Design要素を持つコンポーネントをテーマ化するための属性キーワードの例です。これらを使えば、アプリやUI/UXはネイティブのシステム挙動とUI状態をそのまま享受できます。

【ボタンにカスタムカラーを適用】

android:backgroundTint="@color/red"

-----

【ラジオボタンにカスタムカラーを適用】

android:buttonTint="@color/red"

-----

【画像＆アイコン】

android:drawableTint="@color/red"

-----

【プログレスバーにカスタムカラーを適用】

android:progressTint="@color/red"

CardViewのようにコンポーネントの下にシンプルな影を表示したい場合は、elevationプロパティを指定するだけで実現できます。

android:elevation="1dp"

また、<include>タグによるレイアウトのマージやparentプロパティの活用は、XMLファイルの制御性と保守性を高めるうえで非常に有効です。

<LinearLayout>

<include layout="@layout/light_expanded_card" />

<include layout="@layout/light_collapsed_card" />

<include layout="@layout/color_indicator_strip" />

</LinearLayout>

さらに、レイアウト変更時にアニメーションを付与すると、UXを大きく向上させられます。ほぼすべてのViewGroupがこの属性に対応しており、ビュー階層に変化が生じるたびに自動的にアニメーションが再生されます。少し工夫を凝らせば、独自のカスタムトランジション効果を設計することも可能です。

android:animateLayoutChanges="true"