Androidは長年マテリアルデザインに取り組んできましたが、Material Youによって大きく前進しました。 壁紙に基づいた詳細なカスタマイズいくつかのアイコンを変更したり、ダーク テーマに切り替えたりするだけでなく、アクセシビリティと一貫したデザインを維持しながら、システム全体が選択した色にインテリジェントに適応するようになります。
この新しいデザイン哲学は、 Androidの12 Android 13で拡張され、 ダイナミックな色彩、滑らかな動き、改良されたウィジェットその結果、より人間的で感情的な視覚体験が実現すると同時に、視覚的なアイデンティティを管理する必要のあるデザイナー、開発者、ブランドの作業も尊重されます。
Material You または Material Design 3 とは何ですか?
マテリアル・ユー、別名 マテリアルデザイン3これは、GoogleのUX/UIインターフェースデザインシステムの最新の進化形です。単なるビジュアルスタイルではなく、 ガイド、コンポーネント、アルゴリズム 携帯電話、タブレット、時計、その他の Android デバイス上で一貫したインターフェースを構築できます。
以前のバージョンのマテリアルデザインとは異なり、Material Youは 個人的な表現とユーザーへの適応そのアイデアは、同じ携帯電話を持つ 2 人のユーザーがまったく異なるインターフェースを使用できる一方で、どちらも使用可能でアクセスしやすく、Android エコシステムと一致しているというものです。
美学的には、この反復はアプローチを選択する よりミニマルでソフトより少ない強烈な影、より少ないタイポグラフィスタイル、より丸みを帯びた形状、そしてよりすっきりとした見た目。これらすべてが、単一のソースカラーからパレット全体を生成できる、より洗練されたカラーシステムと組み合わされています。
興味深いのは、Material Youが Googleのピクセルダイナミックカラーロジックとデザインガイドラインは、次のような多くのカスタマイズレイヤーに拡張されています。 1 つの UI、OxygenOS、ColorOS、OriginOS または MIUIGoogle からの特別なサポートにより、Android 12 以降を実行しているほとんどのデバイスで一貫したエクスペリエンスが確保されます。
感情、個性、そしてパラダイムシフト
Material You は、デジタルデザインを私たちがどのように理解しているかという考察からも生まれています。Google は、インターフェースは機能だけでなく、… ユーザーの気持ち、感情したがって、「Material You」という言葉遊びは、デバイスが何百万人もの人の同一のクローンではなく、あなたと同じくらいユニークであるべきだという意味です。
長年にわたり、iOSとAndroidはどちらも、 実際のUIカスタマイズ背景の変更、ウィジェットの追加、ランチャーのインストール以外に選択肢は限られていました。Android 12とMaterial Youによって、Googleは共通のエコシステムに焦点を当てながらも、ユーザー一人ひとりに合わせたインターフェースを提供することで、かつてのスローガン「同じではなく、共に」の精神を部分的に取り戻しています。
この哲学は、より 閉鎖的で高度に管理されたエコシステム 視覚的な体験はユーザー間でほとんど変わりません。一方、Googleでは、アプリが様々なブランドやモデルで同じように機能するという点を損なうことなく、外観をより細かくカスタマイズできます。
Material Youの主な新機能
Material You は、完全なエクスペリエンスを構築するために絡み合う複数のイノベーションを導入しています。 深いカスタマイズ、ダイナミックな色彩、適応性、そして意味のある動きこれらすべては、メーカー、デザイナー、開発者が同様に使用できる強力な技術システムによってサポートされています。
詳細なインターフェースのカスタマイズ
最も大きな変更点の一つは、ユーザーがシステムの外観をより細かく調整できるようになったことです。Androidは 色、表面、ボタン、コントロールを並べ替える 壁紙から生成されたパレットまたは手動で選択した色と一致するようにします。
このカスタマイズは、ステータスバー、通知、メニュー、クイックパネル、設定、Google独自のアプリ、そして徐々にMaterial Design 3を統合したサードパーティのアプリにまで広がります。その目的は、ユーザーが エンドツーエンドで一貫した視覚体験システムとアプリケーション間で突然色が変わることはありません。
画面とフォームファクターへの適応性
マテリアルYouはまた、 さまざまな画面形式へのインターフェースの適応性従来の携帯電話、タブレット、スマートウォッチ、折りたたみ式デバイスなど、あらゆるデバイスに対応しています。色、タイポグラフィ、間隔といったロジックは、あらゆる状況で快適に使用できるインターフェースを実現するために、同じ方法で調整されています。
折りたたみ式スマートフォンの場合、Googleは次のような点について具体的なガイドラインを定めている。 要素の到達可能性、中央のヒンジ、そして最も複雑なレイアウトたとえば、開いた画面の上部 25% はアクセスしにくいと考えられるため、主要なアクションをそこに配置しないことが推奨されます。また、重要な情報はヒンジの真上に配置しないでください。
動きと触覚フィードバック
マテリアル・ユーの動きは単なる見せかけではありません。Android 12では、 弾性伸張による過度な変位ユーザーがリストの末尾を超えてスクロールしようとすると、典型的な旧式のバウンス輝度を表示する代わりに、表面がスムーズに伸びます。
さらに、タップ時の波紋アニメーションが再設計され、 より繊細で滑らかな触覚フィードバックGoogle は、カスタマイズ レイヤーに関係なくアプリが予測どおりに動作するように、メーカーに対し、これらの動作をできる限り標準に近づけることを推奨しています。
ダイナミックな色彩：Material Youの核心
この新しいステージの鍵となる要素は ダイナミックカラーシステム（社内ではモネと呼ばれている）Android 12以降では、システムはあなたの顔から支配的な色を抽出できるようになりました。 壁紙 または定義済みの基本色を選択し、システムおよび互換性のあるアプリに適用される完全なパレットを自動的に生成します。
このシステムは、色空間と色彩を組み合わせた、かなり洗練された技術的アプローチを採用しています。 CAM16、トーンパレットと色の役割目標は、ユーザーが多少複雑な壁紙を選択した場合でも、明るいモードと暗いモードの両方で、優れた読みやすさ、十分なコントラスト、洗練された美観を維持することです。
Material Youにおけるパレット生成の仕組み
El 作成プロセス ダイナミック カラーの使用は、いくつかの明確に定義されたステップにまとめることができますが、その背後には多くのカラー数学が存在します。
- シードカラーの抽出 壁紙、アプリのコンテンツ、またはユーザーやブランドが選択した固定色に基づいて表示されます。
- CAM16空間における変換と分析 色調、彩度、その他の知覚パラメータを取得します。
- 5つのキートーンパレットの生成 ソースカラーからアクセント 1、アクセント 2、アクセント 3、ニュートラル 1、ニュートラル 2 を選択し、彩度と色調を調整します。
- パレットごとに13色を作成、さまざまなレベルの輝度（0、10、50、100、200、300…最大1000）で、合計65のダイナミックカラーが生成されます。
- これらのトーンをUIカラーロールにマッピングするプライマリ、セカンダリ、サーフェス、背景、テキスト、コンテナーなど。
5つのパレットにはそれぞれ特定の動作があります。例えば、 アクセント1は通常、ブランドまたはユーザーのテーマのメインカラーです。、accent2、accent3 は補完的なアクセントとして機能し、neutral1/neutral2 は背景、表面、目立たない要素用に予約されています。
Android 13のテーマスタイル
Android 13ではシステムがさらに進化し、以下から選択できるようになりました。 6つの異なるテーマスタイルこれによって、元の色がどのように解釈されて最終的なパレットが生成されるかが決まります。
- トーナルスポット: は、中程度のバイブレーションとバランスのとれたアクセント処理を備えた、Material You のデフォルトのテーマです。
- 活気に満ちた: より鮮やかなパレットを選択しながら、色間の遷移をスムーズにすると、より目を引くインターフェースに最適です。
- 表現力豊かな: 高い色彩強度で、より予想外かつユニークなアクセントカラーの組み合わせを生成します。
- スプラッシュ: 彩度を最小限に抑え、ほぼ単色で非常にソフトな効果を実現します。
- RAINBOW: カラフルなアクセントとニュートラルな表面を組み合わせて、より控えめな結果を実現します。背景からの抽出ではなく、静的なスキームに推奨されます。
- フルーツサラダ: 2 トーンカラーを組み合わせて表現力を高めます。動的な背景よりも固定パレットに適しています。
システムは、 設定.セキュア.THEME_CUSTOMIZATION_OVERLAY_PACKAGES ソースカラー（例："746BC1"）と、オプションでテーマスタイル（例："EXPRESSIVE"）を指定します。これにより、Androidはアプリで使用する65色のカラーバリエーションを自動的に生成します。
基本色はどこから来るのですか?
マテリアルを取得するには、主に3つの方法を検討します。 元の色 これはアルゴリズムの出発点となります。
- ユーザーの壁紙からこれは最も一般的なケースです。システムは色量子化を用いて画像を分析し、複数の候補を抽出し、最小彩度基準（例えば、CAM16値≥5）を満たす候補を1つ選択することで、結果があまり鈍くならないようにします。
- アプリやウェブサイトのコンテンツからアプリケーション自体が、インターフェースのメインカラーをそのコンテンツから派生させることを決定できるため、鮮やかな美観を維持しながら製品と調和させることができます。
- 手動で選択した色からブランドまたはユーザーが特定の色を選択すると、システムは背景に依存することなく、その色からパレット全体を構築します。
いずれの場合も、目標は単一の入力色が 完全でアクセスしやすく、一貫性のある配色読みにくくなったり、視覚的な統一感が損なわれるような組み合わせは避けてください。
ブランド、デザイナー、開発者向けのコントロール
デジタル製品のデザインに携わる人にとって、このダイナミックなシステムがブランドデザインを「上書き」するのかどうかは当然の疑問です。結局のところ、デザインシステムを微調整するのに何時間も費やしても、結局は後になって Androidはユーザーの壁紙に基づいて色を変更します.
答えは、Material Youが合理的なバランスを提供しているということです。デザイナーや開発者として ダイナミックカラーをどの程度まで採用するかを決定できるため、コントロールを失うことはありません。このシステムは、各製品のアイデンティティを上書きするのではなく、柔軟性を考慮して設計されています。
カスタムテーマとブランドスキーム
マテリアルデザイン3には、 カスタムまたはブランドスキームこれらの色はユーザーの壁紙からではなく、アプリケーション自体によって定義された色から取得されます。 マテリアルテーマビルダー Figma では、ブランドカラー（プライマリー、セカンダリー、ターシャリー、ニュートラル）を入力し、システムが M3 に沿った完全なスキームを生成できます。
これらのカスタムテーマは、 必要な色付きトークン アプリで次の操作を実行できるようにします。
- 見た目は、Material You エコシステムの他の部分と一貫している必要があります。
- ライトモードとダークモードの両方で適切なアクセシビリティを維持します。
- 必要に応じて、将来的に動的なシステムカラーと組み合わせることが容易になります。
あなたもできます ブランドカラーとダイナミックカラーを組み合わせるコア スキームはユーザーのカスタマイズの一部を継承しますが、拡張された色のセット (非常に特殊なセマンティック状態やブランド アクセントなど) は静的のままになります。
デザイントークンと色の役割
マテリアルYouは、以下の使用を強く推奨しています。 デザイントークンつまり、16進コードのような直接的な値を置き換える意味のある名前です。「#6200EE」を単独で使用するのではなく、トークンが使用されます。 色プライマリ, オンサーフェス, プライマリコンテナ, etc.
これらのトークンは、 ダイナミックな音色パレット (system_accent1_600、system_neutral1_10など) トークンを生成することで、アプリはコード全体を書き換えることなく外観を更新できます。Design KitとFigmaプラグインはこれらのトークンを生成し、デザインファイル内のスタイルにマッピングすることで、開発環境への移行をよりスムーズにします。
視覚的な階層とアクセシビリティ
UIに色の役割を適用する際には、 重要性の階層最も彩度の高い色は行動喚起や優先要素のために予約し、中間色や柔らかい色は背景や二次コンテンツのために予約します。
マテリアルユーは、あなたが提供した色に基づいて、システムがバリエーションを生成することを保証します。 テキストとアイコンの適切なコントラストライトモードとダークモードの両方で使用できます。ただし、特に原色と競合する可能性のある非常に鮮やかな二次色や三次色を使用する場合は、実際の状況で組み合わせをテストすることをお勧めします。
Androidエコシステムのダイナミックカラー
当初、ダイナミックカラーシステムはAOSPの一部ではなかったため、Pixelスマートフォン専用になるかどうか疑問視されていました。しかし、時が経つにつれ、Googleは Android 12 および 13 にパレット抽出および生成ロジックを統合OEM が一貫して導入できるようにパッチとドキュメントを提供します。
のようなブランド Samsung、OnePlus、Oppo、Vivo、realme、Xiaomi 同社はすでに Android 12+ ベースのレイヤーで動的なカラーのサポートを発表しており、Gmail などのアプリは異なるデバイスで同じパレットを尊重しながら外観を調整できるようになります。
メーカー（OEM）の要件
を提供するには Material Youとの連携Android パートナーは次の要件を満たす必要があります。
- を使用する AOSPと同じ色抽出ロジック 壁紙本来の色を再現します。
- その色を拡大して 65色のAPI 公式（アクセントパレットとニュートラルパレット、それぞれ 13 色）。
- これらのパレットを 独自のアプリと同様のシステムUIサードパーティの開発者が一貫した動作を行えるようにします。
- 体験を提供するために テーマと壁紙セレクター ユーザーは背景や基本色に基づいて色の組み合わせを表示および選択できます。
さらに、デバイスが背景色の抽出をサポートしていない場合（技術的な制限または設計上の決定により）、代替オプションを選択できます。 静的パレット、デフォルトのマテリアルタイプダイナミックな部分が失われても、一定の視覚的な一貫性が維持されます。
壁紙、テーマピッカー、静的パレット
標準的なダイナミックカラーフローは 壁紙またはテーマセレクターユーザーが背景を変更したり、色のセットを選択したりすると、システムは次の処理を実行します。
- 主な背景色を計算します (または選択された基本色を読み取ります)。
- 彩度やその他のルールに基づいて色をフィルタリングし、有効な色を選択します。
- 5 つのトーンパレットを生成し、65 色の API を入力します。
- システム UI を更新し、アプリが使用できるようにそれらの色を公開します。
固定の基本色については、メーカーは さまざまな色と説明的な名前が付いたスタブAPK （例えば、青、赤、黄、緑）は、セレクターに定義済みのオプションとして表示されます。各エントリには、システムがトーンパレットの開始点として使用するプライマリ値とセカンダリ値が含まれています。
デザイナー向けツール: マテリアルテーマビルダーとデザインキット
Googleは、デザイン界におけるMaterial Youの導入を促進するために、主にFigmaを中心としたいくつかの専用ツールを作成しました。最も重要なのは マテリアルテーマビルダープラグインこれにより、色の数学的な計算に悩まされることなく、動的でブランド化されたカラー スキームを生成できます。
とともに このツール あなたはできる：
- ロードする 参照トピック または最初から作成することもできます。
- キーカラーを定義する (プライマリ、セカンダリ、ターシャリ、ニュートラル) を選択し、UI 全体にどのように広がるかを確認します。
- 生成されたスキームを適用する マテリアルデザインキットのコンポーネント Figma ファイルに含まれています。
- スキームを拡張する 追加のカスタムカラー (Custom0、Custom1…) 特定のブランド化またはセマンティックのニーズに合わせて選択します。
プラグインはカラートークンとして機能するFigmaスタイルを自動的に生成し、これらは モデルへのリンクこのように、テーマを変更する (たとえば、ニュートラルなものからブランド化されたものへ) には、実質的にボタンを押して新しいスタイルのセットを割り当てるだけです。
モバイルを超えて：ウィジェット、アイコン、ランチャー
Material You の影響はシステム アプリだけに留まりません。 Android 12のウィジェット サイズ、丸い角、色などの新しい API を尊重するように更新されており、開発者はこれらの機能を活用するために独自のウィジェットを更新することをお勧めします。
一方、ランチャーやアイコンパックのコミュニティも注目しています。ダイナミックアイコンパックには、 壁紙やシステムのアクセントに応じて色が変わります。ライトモードとダークモードの両方に対応しています。動作させるには、対応するランチャー（ノヴァランチャー、Lawnchair、Hyperion、Niagara、Smart Launcher など) をインストールし、背景やテーマを変更した後、アイコン パックを再度適用してパレットを再生成します。
Material Youは、デザイナー、ブランド、開発者を置き去りにすることなく、色と形がユーザーごとにインテリジェントに適応するプラットフォームへとAndroidを変革しました。 ダイナミックな色彩、トーンパレット、デザイントークン高度にパーソナライズされながらも、一貫性があり、アクセスしやすく、技術的に予測可能なインターフェースを実現することは可能です。Pixel、Samsung、Xiaomiのどれをお使いでも、Androidエコシステムを利用する何百万人ものユーザーが期待する機能と外観を備えつつ、スマートフォンがあなたの個性を反映することが望ましいのです。 より多くのユーザーがトピックについて学習できるように情報を共有します。