メインコンテンツへスキップ

Material 3 Color Generator（LogicUI）の使い方手順書

🌈はじめに

このページでは LogicUI が提供している Material 3 Color Generator の使い方を、アプリ開発の現場でそのまま利用できる形で整理する。 Material You の 動的カラーシステム を採用したテーマ設計を効率化でき、Android アプリのデザイン仕様書にそのまま転記できるレベルの精度でパレットを得られる。

🎨 基本概要

なぜ Material 3 Color Generator を使うのか

Material 3 では「ベースカラーからトーンマップを自動生成する」仕組みが採用されており、色の一貫性・アクセシビリティ（コントラスト基準）を機械的に担保できる。 ただし、Google 公式のツール「Material Theme Builder」は高機能だが UI が複雑。 LogicUI の Color Generator は、ベースカラーと、コントラスト設定を選ぶだけで即パレットが確認できる軽量ツールで、仕様書作成向き。

🧭 使い方（手順）

1️⃣ ベースカラーを入力する

画面上部の Primary Color の入力欄に、以下いずれかの形式で色を入力する。

  • HEX（例：#6200EE）
  • RGB（例：98, 0, 238）
  • カラーピッカーから選択

補足

Material 3 では、Primary から Secondary・Tertiary・Neutral 系のトーンまで自動生成される。必ずしも Secondary を自分で決める必要はない。

2️⃣ コントラスト設定を選択する

右側のパネルで下記の設定が選べる。

● Tone Contrast（コントラスト強度）

  • Standard
  • Medium
  • High
  • Ultra High

「High」「Ultra High」は、視認性を優先したい UI（一覧、フォーム、設定画面など）に使いやすい。

3️⃣ 自動生成されたトーンマップを確認する

生成結果では Material 3 の 全トーン（0–100） が以下のグループに分かれて表示される。

  • Primary / On Primary
  • Primary Container / On Primary Container
  • Secondary
  • Tertiary
  • Error
  • Neutral / Neutral Variant

さらに、それぞれのカラーチップに対応する HEX 値が表示される。

ここで確認すべき点

  • コントラストが十分あるか
  • Primary / Secondary の役割分担が UI と合っているか
  • 暗い色・明るい色のバランスがブランドイメージと一致しているか

Primary があまり暗い色だと暗色テーマで視認性が落ちやすい。トーン 40–60 の範囲に収まる色を選ぶと安定しやすい。

4️⃣ Light / Dark のパレットを切り替える

結果パネルの上部にある Light / Dark の切り替えボタンで、 アプリに適用されるライトテーマとダークテーマのパレットを確認する。

Light

  • Primary = Tone 40 前後
  • On Primary = Tone 100（白）

Dark

  • Primary = Tone 80 前後
  • On Primary = Tone 20（黒）

Material 3 の自動生成では、Light/Dark で適切に反転された色が出るため、テーマ自作よりはるかに安全。

5️⃣ 必要なカラーセットを仕様書へ取り込む

アプリ開発の仕様書で最も使うのは以下の項目。

  • primary
  • onPrimary
  • primaryContainer
  • onPrimaryContainer
  • secondary
  • tertiary
  • error
  • background
  • surface

仕様書に転記する際は、HEX 値をそのまま記述すれば良い。

VS Code などで Markdown 化して管理する場合、色チップ（SVG）を埋め込んでおくと視認性が上がる。

6️⃣ アプリ（Compose）のテーマに反映する

色定義は MaterialTheme の lightColorScheme() / darkColorScheme() に渡す。

例：

primary = Color(0xFF6750A4)
onPrimary = Color(0xFFFFFFFF)
primaryContainer = Color(0xFFEADDFF)
…

自分でトーン値を計算する必要はない。Material 3 の元色と違う HEX を混ぜると、一貫性が崩れやすいので避ける。

📘 まとめ

LogicUI の Material 3 Color Generator は以下の点で優れている：

  • ベースカラーから一瞬で Material 3 トーンマップを生成
  • Light/Dark の両テーマを即時確認
  • コントラスト調整が分かりやすい
  • 仕様書に転記しやすい（HEX のまま使える）

Material 3 の配色は「ブランドカラー1つ決めれば全て整う」思想のため、アプリごとにベースカラーを変えても設計コストをほとんど増やさずに済む。 このツールを使うだけで UI の品質が安定し、アクセシビリティも自然に担保される。

上に戻る