mobile-design-android

このスキルの対象は、Material 3 Expressive を採用した Android 16 以降です。古い Android バージョンを対象とするアプリでは、標準の Material 3 ガイドラインを使用してください。これらのパターンは、一般的な AI の知識で十分に網羅されています。

このスキルでは、プラットフォーム向けに本当に設計されたと感じられる Android インターフェースの作成方法を案内します。AI が生成するモバイル UI にありがちな、ありきたりな「Material テンプレート」の見た目を避けましょう。あらゆるデザイン上の判断から、Material 3 Expressive と、プロ向けアプリを素人っぽいアプリから区別する原則への理解が伝わるようにしてください。

ユーザーは、画面、フロー、コンポーネント、またはアプリ全体のインターフェースなど、Android UI の要件を提示します。目的、対象ユーザー、技術的な制約について、補足情報が含まれることもあります。

デザインを考える

UI を生成する前に、明確なデザインの方向性を定めてください。

• 目的：この画面では何を実現しますか？ユーザーがこの画面にたどり着いたとき、どのような感情を抱いていますか？
• 個性：方向性を選びます。鮮やかでエネルギッシュ、穏やかで集中できる、温かく親しみやすい、大胆でエディトリアル、ミニマルで精密、遊び心があり弾むような、あるいはインダストリアルで実用的なスタイルなどです。M3 Expressive では、以前の Material よりも個性を表現する手段が格段に増えています。それらを活用してください。
• 主役となる瞬間：各画面で、複合的な表現力を発揮する価値のある要素を 1～2 個特定します。形状の変化、スプリングアニメーション、強調されたタイポグラフィ、豊かな色彩を同時に組み合わせます。それ以外の要素は控えめにします。
• 差別化：Material Components のカタログデモではなく、きちんとデザインされたアプリだと感じさせる要素は何ですか？ユーザーの記憶に残る操作を 1 つ挙げるなら、どれですか？

重要：M3 Expressive は「すべてに弾みを加える」ことではありません。形状の多様性、豊かな色彩、タイポグラフィの強調、戦略的なコンテインメント、流動的なスプリングモーション、コンポーネントの柔軟性という 6 つのデザイン手法を組み合わせた、研究に裏打ちされたシステムです。目指すのは、自然で物理的な感覚です。たとえば、棚から本を引き抜くと隣の本が少しずれる感覚や、通知を弾き飛ばしたときに心地よい振動が伝わる感覚です。プロ向けアプリは、こうした手法を主役となる瞬間に選択的に取り入れます。素人っぽいアプリは、どこにでも一律に取り入れてしまいます。

M3 Expressive デザインガイドライン

次の点に注目してください。

• モーション — トゥイーンではなくスプリング：すべてのアニメーションで、tween(durationMillis)ではなくスプリング物理を使用します。スプリングは、現在の速度から目標を変更することで中断をシームレスに処理します。MaterialTheme.motionSchemeトークンを使用し、スプリング値をハードコードしないでください。カテゴリは2つあります。位置、サイズ、回転、形状には空間仕様（弾みがあり、減衰率は約0.6）を使用します。色と不透明度にはエフェクト仕様（臨界減衰、減衰率 = 1.0）を使用します。色や不透明度に空間スプリングを適用しないでください。アルファ値が100％を超えて弾むと、見た目が不自然になります。
• モーションの速度：要素のサイズに合った速度トークンを選びます。小さなコンポーネント（スイッチ、ボタン）にはfastSpatialSpecを使用します。画面の一部を占める要素（シート、ドロワー）にはdefaultSpatialSpecを使用します。全画面の遷移にはslowSpatialSpecを使用します。トグルに遅いスプリングを使うと、動作がもたつきます。ページ遷移に速いスプリングを使うと、せわしなく感じられます。
• 形状 — 緊張感を取り入れる：M3 Expressiveでは、基本的な四角形に加えて、Pill、Diamond、Cookie9Sided、SoftBurst、Clover4Leaf、Heartなど、35種類の形状が追加されています。重要なのは、意図的なコントラストです。鋭く角ばった形状と、柔らかく丸みのある形状を組み合わせます。チップにはピル形状、FABには角丸の正方形、モーダルには大きめの角丸を使用します。どこも同じ形状だと、テンプレートのようなアプリになります。状態遷移には、単純なクロスフェードではなく、形状のモーフィング（RoundedPolygonインスタンス間のMorphクラス）を使用します。
• 色 — 48種類のロールをすべて使う：拡張されたColorSchemeには、48種類の名前付きロールがあります。これらを活用してください。主要なアクションにはプライマリを、階層を補助する要素にはセカンダリとターシャリを、ライトテーマとダークテーマで同じ見た目にする必要がある要素には12種類の固定アクセントカラーを使用します。5段階のサーフェスコンテナレベル（surfaceContainerLowestからsurfaceContainerHighestまで）は、不透明度に基づくエレベーションに代わるものです。階層的な奥行きを表現するために使用してください。すべてを白地にプライマリの色で表示すると、要素の認識を4倍速くするシステムを活かせません。
• タイポグラフィ — 強調表現を含む30種類のスタイル：タイプスケールは30種類に倍増しました。新たに追加された15種類の*Emphasizedバリアント（ウェイトが高い）は、見出し、CTA、重要な情報など、「編集的な見せ場」のために用意されています。全体でbodyMediumを使うと、レイアウトが平坦になります。ヒーローコンテンツにはheadlineLargeEmphasizedを、補足テキストにはbodyLargeを組み合わせます。強調スタイルと通常スタイルのコントラストが、視覚的なリズムを生み出します。
• 新しいコンポーネント — 非推奨のパターンを置き換える：SegmentedButton → ButtonGroup（オーバーフローに対応した連結ボタン）。BottomAppBar → Docked/Floating Toolbar（FABを統合）。積み重ねた小さなFAB → FloatingActionButtonMenu（ToggleFloatingActionButtonで展開）。また、プライマリとセカンダリのアクションにはSplitButtonLayoutを、円形スピナーの代わりに形状をモーフィングするポリゴンを使ったLoadingIndicatorを使用します。
• FAB：デフォルトの形状は、円形ではなく角丸の正方形になりました。新しいサイズ設定も利用できます。FABはアプリの個性を表す要素です。形状とアニメーションをカスタマイズしましょう。
• ナビゲーション：Navigation Bar/Railのアクティブインジケーターはピル形状です。アクティブラベルにはonSurfaceではなく、secondaryカラーを使用します。プログレスインジケーターでは、波形の形状オプションとトラックの高さの設定に対応しています。
• ダイナミックカラー：Android 12以降では、dynamicLightColorScheme／dynamicDarkColorSchemeを使って、壁紙から抽出されたMaterial Youのパレットを尊重します。古いデバイス向けに、ブランドに調和した静的なフォールバックを用意してください。Material Color Utilitiesを使って、ブランドのアクセントカラーをユーザーのダイナミックパレットと調和させます。
• エッジツーエッジと予測型戻る操作：Android 16ではエッジツーエッジが必須です。コンテンツがシステムバーの下まで描画されるため、WindowInsetsを適切に処理する必要があります。予測型戻るジェスチャーでは、ユーザーがスワイプすると遷移先のプレビューが表示されます。アプリ内の遷移はこのシステムアニメーションと調和させ、競合させないでください。
• アダプティブレイアウト：ウィンドウサイズクラスを使用します。コンパクト（<600dp）ではボトムナビゲーションと単一ペイン、中間（600–840dp）ではナビゲーションレールと一覧／詳細、拡張（≥840dp）では常設ドロワーと複数ペインを使用します。モーションは画面サイズに合わせて調整します。スマートフォンではより速く、きびきびと、タブレットではやや遅く、ゆったりとさせます。

アクセシビリティは妥協できません

• 通常のテキストはコントラスト比 4.5:1、大きなテキストは 3:1 を確保します。セマンティックロールの組み合わせで徹底してください。
• Remove animations を尊重します。ANIMATOR_DURATION_SCALE が 0 の場合は、snap() またはシンプルなフェードに切り替え、Expressive スキームから Standard に切り替えます。
• Android 14 の UiModeManager.getContrast() に対応し、ハイコントラストテーマを実現します。
• 視覚的な形状変化の有無にかかわらず、タッチターゲットは最低 48×48dp にします。
• すべてのスプリングアニメーションを中断可能にします。これはスプリングシステムがもたらす、アクセシビリティの中核的な利点です。

絶対に避けること（Android における「AI スロップ」の兆候）

• 割り込み可能なモーションに tween(300) やハードコードした tween を使うこと。これは最大のアンチパターンです。スプリングは滑らかに目標を変更できますが、tween は唐突に切り替わります。
• 色や不透明度に空間スプリング（弾む動き）を使うこと。アルファ値が 100% を超えたり、色が目標を通り越して点滅したりすると、すぐに気づかれます。
• トグルスイッチに slowSpatialSpec を使ったり、全画面遷移に fastSpatialSpec を使ったりすること。要素のサイズに合わせて速度を調整してください。
• すべての要素に一律の角丸長方形を使うこと。35 種類のシェイプがある最大の利点は、多様性とコントラストです。
• primary カラーだけを使い、secondary、tertiary、および12種類すべての固定アクセントロールを無視すること。
• どこでも bodyMedium を使う平坦なタイポグラフィ。強調バリアントを使わないと、Expressive ならではのエディトリアルな品質が失われます。
• Expressive API が利用可能か確認せずに、安定版の 1.4.0 を使うこと。新しいコンポーネントには alpha トラックが必要です。
• 固定方向のレイアウト。Android 16 では ≥600dp で方向の制限が無視されるため、アダプティブレイアウトが必須です。
• 円形 FAB。M3 Expressive のデフォルトは角丸の正方形です。
• 置き換えが用意されているにもかかわらず、旧式の SegmentedButton や BottomAppBar を使うこと。
• すべてのリストで同じカードレイアウトを使うこと。コンテンツの種類ごとに、囲み方、シェイプ、強調の度合いを変えてください。
• MaterialTheme.motionScheme を無視して、スプリングのパラメーターをインラインでハードコードすること。

プロフェッショナルなアプリとテンプレートを分けるもの

プロフェッショナルな M3 Expressive アプリでは、見せ場となる場面で複数の手法を組み合わせます。たとえば詳細画面への遷移で、Morph によるシェイプの変化、エフェクトスプリングによる色の変化、空間スプリングによる要素の拡大縮小を同時に実行し、見出しを headlineLargeEmphasized で表示します。重要な場面でこうした表現を重ね、その他の場面では控えめに使うことが、設計されたアプリとデフォルトのアプリを分けます。

プロフェッショナルな仕上がりを示す要素には、ブランドの個性に合わせて調整した独自の MotionScheme、基本的な長方形にとどまらない MaterialShapes の戦略的な活用、視覚的な階層全体にわたる48ロールのカラーシステムの導入、非推奨コンポーネントに代わる ButtonGroup と FloatingActionButtonMenu、そして単純な表示切り替えではなく状態遷移に応じたシェイプの変化があります。

最も効果の高い導入順は、まずモーションスキーム（最小の労力で最大の変化）、次にシェイプの多様化、続いてカラーの拡張、最後に新しいコンポーネントです。スプリングトークン、シェイプの変化、強調されたテキストスタイルは、どれも表現を引き出すための手段です。重要なのは、どの手段をいつ使うかを見極めることです。