charlesbot/android-design

Android Design

Google が Material 3 Expressive で Android アプリをデザインする方法を、実際の決定と Compose コードに翻訳したものです。Expressive は独立したデザイン言語ではなく、Material 3 に Google が「拡張パック」と呼ぶオプトイン API、コンポーネント、デザイン戦術を追加したものです。ここに記載されているガイドライン、リサーチ、API 名は m3.material.io、Android のデザインガイド (developer.android.com/design/ui)、Wear OS デザインガイド、Google I/O および Android Developers の講演、そして androidx のソースから来ています。

一貫した考え方: 重点を意図的に配置することで、画面はデザインされたように感じられる。 画面の目的をランク付けし、サイズ、色のコントラスト、シェイプ、タイポグラフィ、コンテインメント、モーションを最上位の目標に最も多く、次の目標には少なく、残りにはほとんど使わないようにします。標準の Material コードはすべての要素に均等な重みを与えるため、テンプレートのように見えてしまいます。

(Google) とマークされた引用とルールは Google のガイダンスに基づきます。(default) とマークされたルールはこのスキルの初期設定です。画面の方向性が別の理由を示さない限り、これらに従ってください。

サーフェス。 このスキルは、スマートフォン、タブレット、デスクトップ、Wear OS のアプリ画面を対象とします。Wear OS 画面の場合は、最初に references/wear-os.md を読んでください。このファイルと異なる場合は、そちらが優先されます。スキャフォールディングと移行には wear-compose-m3 スキルを使用します。Wear タイル、ウォッチフェイス、ホーム画面ウィジェットはこのスキルの範囲外です。Wear ウィジェットとタイルには wear-widgets スキルを、ホーム画面ウィジェットには Glance スキルを使用してください。

ビジュアルツール

実際の Compose コードの実装またはレビューには、compose-preview CLI と compose-preview および compose-ui-builder スキルが必要です。compose-preview を読み、それに従ってください。compose-preview がツールの選択、レンダリング、トラブルシューティングを担当します。UI Builder のデザイン作成リクエストの場合は、compose-ui-builder に従ってください。このスキルはデザインの決定と画面チェックを担当します。依存関係が利用できない場合は、その旨を報告し、ツールをインストールしたり別のレンダラーに置き換えたりするのではなく、ユーザーをこのリポジトリの README のセットアップセクションに誘導してください。

探索または実装

リクエストが新しいアプリ、新しい画面、再デザインのデザインに関係する場合（ポリッシュ、ビジュアルの方向性、Material 3 Expressive を要求している、またはこのスキルを指定している場合）、「ビルド」と書かれていても、まず提案から始めてください。android-design-explore スキルに従い、その提案をプレビューアーアプリに表示し、ユーザーが方向性を承認してから Compose を書き始めてください。ユーザーが「提案をスキップ」、「とにかくコード化」と言った場合、または承認済みの提案がすでに存在する場合は、提案をスキップしてください。承認済みの提案がある場合は、そのスキルの「承認して移植」の手順に従って移植してください。export_kotlin から始まります。

デザインについて問わない単純なビルドは、以下の決定と画面チェックを適用して、直接コードに進みます。

既存のデザイン内での変更（修正、微調整、レビュー、承認済み画面の新しい状態）は、以下に示すデザイン決定と画面チェックを使用して、独自の承認とブランチルールの下で実際のプロジェクトに直接進みます。

0. UI を書く前に

コードの前に、以下の質問にそれぞれ 1、2 文で回答してください。このステップをスキップすると、平凡な画面になってしまいます。

1. 目標をランク付けする。 この画面の最も重要なタスクは何ですか？ 2 番目、3 番目に重要なタスクは何ですか？（Google: 「各ページの主要タスクを 1 つに絞る」）
2. 方向性を選択する。 画面の感情的な特徴、それを定義するコンテンツまたはインタラクション、そしてタイポグラフィ、イメージ、色、シェイプを結びつける 1 つのビジュアルアイデアを指定してください。各回答は決定（「高い数字で上部 3 分の 1 を埋める合計セット」）を指定する必要があり、形容詞（「モダンでクリーン」）ではありません。アイデアが、ほとんどの同タイプのアプリがすでにどのように見えるかを説明している場合、それはまだアイデアではありません。
3. ヒーローモーメントを決定する。 この画面は、プロダクトの 1 つまたは 2 つのヒーローモーメント（最も感情的または最も中心的なインタラクション）の 1 つですか？ はいの場合、いくつかの戦術をそこでどのように組み合わせるかを計画してください。いいえの場合、落ち着いた状態を保ってください（Google）。
4. 色のソースを選択する。 ダイナミック（壁紙）、ブランド（生成されたスキーム）、またはコンテンツベース（画面上の画像から）。セクション 4 を参照してください。
5. ランクに従って重点を割り当てる。 主要な目標に最も重点を置き、通常はサイズが最初です。二次的な目標には少数の戦術、三次的な目標にはコンテインメントとタイポグラフィを使用します（Google）。コンテンツがプロダクトそのものである場合、主要なアクションが紛れもないままである限り、コンテンツが画面を支配できます。
6. 以前の Material の記憶からではなく、セクション 9 の表からコンポーネントを選択する。
7. 適応に関する質問に答える。 レンダリングする各サイズクラス（コンパクト、ミディアムまたはエクスパンデッド、ラージまたはエクストララージ）について、余分なスペースが明らかにするものを指定してください。2 番目のペイン、拡張されたレール、より詳細な情報。 references/layout.md の 5 つの質問を、「何を明らかにすべきか？」から始めて使用してください。ナビゲーションは一貫性を保ちます。大きなレイアウトにレールがある場合、コンパクトなレイアウトには同じ宛先のナビゲーションバーがあります。メディアプレーヤーのようなコントロールベースの画面の場合、コントロールはリフローし、コンテンツが明らかになります。大きなレイアウトが単に電話のコンテンツを広げただけの場合、それは答えになっていません。「余分なスペースは、単に同じものを大きくすることを意味するわけではありません。」（Google）

次に、画面を作成し（セクション 8）、ビルドし、レンダリング結果に対して 画面チェック を実行します。

1. テーマ設定

Expressive には androidx.compose.material3:material3 1.5.0-alpha 以降が必要です。安定版の 1.4.0 にはこれらの API のほとんどがありません。記憶に頼らず、Maven メタデータ で最新の 1.5.x バージョンを確認してください。アルファ版の API はリリース間でまだ変更される可能性があります。現在のアルファ版には compileSdk 37 と Android Gradle Plugin 9.1 以降も必要です。

@Composable
fun AppTheme(dark: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val context = LocalContext.current
    val colorScheme = when {
        Build.VERSION.SDK_INT >= 31 -> if (dark) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        dark -> darkColorScheme()
        else -> expressiveLightColorScheme()
    }
    MaterialExpressiveTheme(
        colorScheme = colorScheme,
        motionScheme = MotionScheme.expressive(),
        typography = AppTypography, // Google Sans Flex ボイスとオプションのブランドフェイス、セクション 5 を参照
        content = content,
    )
}

• expressiveDarkColorScheme はありません。darkColorScheme() または生成されたダークスキームを使用してください。
• MaterialShapes、toShape()、LoadingIndicator、ContainedLoadingIndicator にはまだ @OptIn(ExperimentalMaterial3ExpressiveApi::class) が必要です。ここにある他のすべては、1.5.0 アルファ版では実験的ではありません。
• 完全なセットアップ、シードスキーム、カスタムタイプスケール、シェイプのモーフィング、モーションスペック、スペーシング、バージョンノートについては、テーマの設定や変更時に references/theming.md を読んでください。

2. 強調と階層

強調とは、人々が主要なアクションを見つける方法です。より大きなキーアクションと意図的な階層により、エラーが減少し、主要な UI 要素が見つけやすくなります（Google）。

• サイズは最も強力なレバーであり、相対的です。 「最も重要なアクションまたはメインのコールトゥアクション（CTA）は、最も大きな要素であるべきです」（Google）。より大きなキーアクションはエラーが少なく、ユーザー満足度が高くなるため、プライマリはその周りのアクションをリードし、それらのサイズに関係なくリードします。コンテンツはそれと競合しません。サマリーカードやリスト行は物理的に大きくすることができます。最も強い塗りつぶしを持つコンポーネントのデフォルトサイズ（小ボタン、FAB の場合は Google の「ほとんどの状況で推奨されるミディアム FAB」）から始め、ピアをリードするのに必要な範囲だけ大きくします。画面ごとに 1 つの焦点、すべてが大きいと何も目立ちません。グループ化されたアクションはデフォルトで 1 つのサイズを共有し（「標準グループ内のすべてのボタンは同じサイズであるべき」）、プライマリは塗りつぶしまたはシェイプを通じてリードします。Google のグループルールは「最も大きく、最も幅が広い、または最も視覚的に目立つ」です。エクストララージは、コントロールが画面のコンテンツであるプレーヤーやブリージングセッションなどのコントロール主導のヒーローに属します。ラベルが下限を設定します。Google は「ラベルテキストを切り詰めたり折り返したりしない」と述べており、コンテナは「ラベルテキストよりも狭くすべきではありません」。ラベルが選択したサイズのコンテナ（電話幅のカード、ペイン）に収まらない場合は、1〜3 語に短縮するか、ボタンに余裕を持たせるか、1 つ小さいサイズにします（Google: サイズは「異なるブレークポイント間で」変更でき、強調は「サイズ、色、またはシェイプによって」行われます）。
• 配置: 手と目がすでにある場所にキーアクションを配置します。Google のメール調査: [送信] を小さなトップバーのアイコンからキーボードのすぐ上のより大きなボタン (secondary 内) に移動すると、人々は 4 倍速く見つけられるようになりました。Aura のホーム画面では、エクストララージの [スタート] ボタンを低い位置、垂直フローの最後に配置します。インタラクションとコンテンツが必要とするスペースから位置を選択します（デフォルト）。
• 主要なアクションは最も強い塗りつぶしを取得します（Google: プライマリロールは重要なコールトゥアクションに使用され、塗りつぶしボタンは控えめに）。セカンダリアクションはトナルまたはスタンダードです。お気に入りのようなトグルは、塗りつぶしアイコンまたはトナルコンテナで状態を示し、メインコントロールと競合する 2 番目の強い塗りつぶしは使用しません。
• ロール間のコントラスト、どこでも同じロールではありません: メインアクションには primary、サポートコントロールには secondary または secondaryContainer、ステータスやアクセントには tertiary。すべてに primary と primaryContainer を使用すると、画面が平坦になります。
• コンテインメント: 関連アイテムをコンテナにグループ化し、最も重要なコンテンツに「十分なスペースと最も明るいサーフェス」を与えます。
• サマリーはタスクをサポートし、それより上位にはなりません。 主要な目標がリストに対するアクション（習慣のチェック、メッセージへの返信）である場合、次のアクション可能なアイテムが画面上で最も魅力的なものであり続ける必要があります。統計カードは大胆にできますが、アクション可能な行には明確なコンテナを与え、完了したアイテムは後退させます（より落ち着いた色、強い塗りつぶしなし）、状態ごとにグループ化し、インターリーブしないでください（セクション 8）。選択ハイライトはユーザーが選択したものに対して行われ、完了したものに対して行われるわけではありません。
• 作業順序: 最初に階層（サイズ、色、スペーシング、配置、コンテインメント）を構築し、次に成功や進捗を祝うためにユニークな強調（シェイプ、スケール、モーフ）を追加します。

Google の実例: Aura 呼吸アプリ

各画面は目標ランクに従って重点を割り当てています。これを推論テンプレートとして使用してください。

画面	ランク	強調
ホーム	プライマリ: セッションを開始	柔らかいサーフェス上の暗い primary のエクストララージ「呼吸を開始」ボタン、画面下部。設定は secondary のリストアイテムとしてグループ化。デイリーメッセージは柔らかいコンテナに、最も少ない強調。
セッション	ヒーローモーメント	画面を埋める花の形 (MaterialShapes.Flower と Sunny) が、各呼吸に合わせてスプリングモーションで拡大縮小。吸うときは鮮やかな黄色。巨大なカウントダウン数字と小さなラベル。一時停止/停止は下部に小さく。ナビゲーションバーは非表示。
レポート	セカンダリ	「認知負荷を減らす」ための戦術を減らす: 均一な花の形の指標、強調された数字、ミディアム（XL ではない）の完了ボタン。
進捗	ターシャリ	控えめ: 主要データは primary、完了日は小さなセカンダリシェイプ、数字は「スキャンに十分な大きさだが、支配的ではない」。

v1 から v2 への教訓: 同様のサイズで一貫性のない色のグループ化されていない設定は注目を競い合っていました。それらを 1 つのエクストララージボタンの上にグループ化することで、「散らかったものから落ち着いたものへ」変わりました。

3. ヒーローモーメントと抑制

「ヒーローモーメントは、複数の表現戦術を使用して、予測可能または均一に適用されたデザインアイデアから脱却します。」

• ヒーローモーメントは、プロダクトの主要なインタラクションにタイポグラフィ、シェイプ、色、モーション、フレキシブルコンポーネントを重ね合わせます: 電話ダイヤラ、メディアプレーヤー、完了した目標、呼吸セッション。自問してください: 感情的にインパクトがありますか？ そしてそれは主要なインタラクションですか？
• プロダクトごとに 1 つか 2 つ。 それらは「短く、楽しく、驚くべき、予想外」です。それ以上だと圧倒されます。
• セカンダリ画面では、より少ない戦術を使用します。すべての戦術をどこでも組み合わせないでください。
• ヒーローモーメントでは、1 つのカスタム要素が動きます: テキストは安定させ、シェイプはアニメーションさせます（Google）。組み込みのコンポーネントモーフ（押されたときに形が変わるボタンなど）はカウントしません。
• コンテンツがプロダクトである場合、コンテンツがヒーローです。 プレーヤー、ギャラリー、旅行では、アルバムアートや写真にスケールを与え、その色で画面を設定します。ライブラリシェイプマスク、フルブリード、画像に重ねられたタイトルはオプションであり、必須ではありません。その周りのコンポジションがアイデアを伝えている場合、通常の角丸クロップも同様に強力です。
• 使い慣れたパターンを維持します。 Expressive はパターンをスタイルしますが、置き換えません。Google のテストでは、散在するアルバムアートとして再構築されたプレイリストは「モダンでエキサイティングに見えた」が、人々はそれをプレイリストとして認識せず、メールアクションからテキストラベルを削除するとユーザビリティが損なわれました。コンテキストも重要です。メディアプレーヤーに適したものが銀行アプリに適しているとは限りません。
• 「明確さの欠如を補う感情の量はありません。」Expressive はすでに機能している画面をシャープにしますが、混乱した画面を救うことはありません。

4. 色

• ジェネレーターがパレットを作成し、あなたがロールを割り当てます。 Material のカラーユーティリティは、1 つのソースカラーをアクセント、サーフェス、ライト、ダークのロールに変換します（Google）。生成されたパレットをそのまま受け入れ、どの要素がどのロールを取得するかにデザインの労力を費やしてください。
  • ダイナミック（壁紙）は Google の推奨であり、パーソナライゼーションを提供します。M3 Expressive アップデートにより、ダイナミックカラーはソースでより豊かになりました（「すべての色相で彩度が向上」）。アプリはそれを自動的に取得します。アプリは電話の他の部分と色相を共有するため、そのアイデンティティは階層、シェイプ、タイポグラフィから生まれます。
  • ブランド はアプリに独自のアイデンティティを与えます。Material Theme Builder を使用したブランドカラーから生成されたスキーム、またはデフォルトのパレットスタイルでの実行時の MaterialKolor を使用します（テーマ設定のリファレンス）。より「表現力豊かに」見せるためにパレットスタイルを上げないでください。MaterialKolor の PaletteStyle.Expressive は M3 Expressive とは無関係な色相シフトスキームバリアントであり、パレットをブランドの色相から遠ざけます。
  • コンテンツベース は、含まれる領域に色を付けます。

…

（翻訳のため省略）