概要
どうも、@daiki1003です！
Flutter 3.22 がリリースされて、はや数ヶ月。
今回は、そんなFlutter 3.22でひっそりと（？）アップデートされた ColorScheme について、
特に Material 3 との関係性に着目して解説していきたいと思います。
・「ColorSchemeって何だっけ？」
・「Material 3のカラーシステムって複雑でよくわからない…」
そんな風に思っている方はぜひ最後まで読んでみてください。
当たり前ですがFlutterはMaterialテーマに最適な形でコーディングされています。
理解することで、きっとFlutterアプリのカラーデザインがもっと楽しく、そして楽になるはずです！
それでは、行ってみましょー！
全体感
基本理念
そもそも、なぜデザインシステムが必要なのでしょうか。
適当に決めてしまえば良いのでは？
そんな風に思う方も中にはいらっしゃるのではないでしょうか。
そこまでは思わずとも、なぜこんなものが必要なのでしょうか。
僕が考える一番の理由は、 「ユーザーが使いやすいアプリを、いかに効率良く作るか」に尽きると思います。
使いやすい、と言う言葉はUX観点の言葉ですが多くの意味を含んでいます。
例えば、あいうえお こんなのって明らかに見にくいじゃないですか。
じゃぁ、そうならないように気をつけながら全てのコンポーネントを個別スタイリングしますか？
めんどくさすぎますね。そして保守性も良くない。
そこで登場するのがデザインシステムです。
そして、Flutterでその中枢を担うのが ColorSchemeクラスです。
個人的には、このクラスの役割は iOS で言うところの delegate に似ていると思っています。
「 ElevatedButton は primary と言う色を塗り、その上に載せるコンポーネントは onPrimary と言う色で着色する様に実装しておきますね。あとはこれらの色を指定してください。」とこう言うわけです。
4.5:1
4.5対1。
何の数字かわかりますか？
わかる方はこのセクションは飛ばしてしまってOKです。
これは、「背景色と上に載せる色のコントラスト比がこの数値以上であれば視認性が良いですよ」と言う値になります。
例えば、あいうえおは以下のような比率になります。
4.5:1を大きく下回りとても視認性が悪いと言うことになります。
次に、あいうえおは以下の様な比率になります。
こちらは高スコアですね。
計算はこちらのサイトで行っております。
実際に指定する際は、この比率を守る様にしてくださいね。
参考：Accessibility designing – Material Design 3
それでは、本題にいきましょー！
最重要人物
Primary, Secondary, Tertiary
アプリを特徴付ける色合いに用いられます。
それぞれは異なった色合いを持ち、 おおよそ以下の様な役割があります。
Primary: アプリのメインカラー。ブランドイメージを表現し、最も頻繁に使用する色。
Secondary: Primaryを補完するアクセントカラー。Primaryとのコントラストで視覚的なメリハリをつける。
Tertiary: PrimaryやSecondaryとは異なるニュアンスを持つカラー。UI要素のバリエーションを増やしたり、特定の要素を強調したりする際に使用する。
Error
Errorカラーは、ユーザーにエラー状態を明確に伝えるための色です。
例えば、入力フォームでエラーが発生した場合、Error カラーを使用してエラーメッセージの背景色やテキストの色を変更することで、ユーザーはエラーに気づきやすくなります。また、エラーを示すアイコンの色をErrorカラーにすることで、視覚的な注意を促すことができます。
Surface
Surfaceカラーは、マテリアルデザインにおけるUIの「面」となる要素の背景色として使用されます。
例えば、カードやシート、ダイアログなどの背景色は、 Surface をベースに決定されます。
また、 AppBar の背景色もSurfaceカラーを使用することで、UI全体に統一感を持たせることができます。
Outline
Outlineカラーは、ボタンの枠線やテキストフィールドの輪郭の様な、要素の輪郭を表現するための色です。
その名の通り、OutlinedButton や TextField などの外枠を表示するために使います。
装飾
装飾系の言葉は、これ単体では存在せず、必ず上記の様な登場人物の接尾辞として登場します。
Container
新登場？： Yes
例： primaryContainer, surfaceContainer…
Container カラーは、塗りの色に使われます。
付属している色に対して、塗りのコンポーネント(ElevatedButton など)を乗せる時に利用します。
テキストやアイコンに使ってはいけません。
Lowest, Low, High, Highest
新登場？： Yes
例： surfaceContainerLowest, surfaceContainerLow, surfaceContainer, surfaceContainerHigh, surfaceContainerHighest
surfaceContainer だけ派生系があります。
多くの場合、Lowest は背景色に近く、 Highestは反対色になります。
背景色に近い ＝ コントラスト比が低い = Lowです。
on
新登場？： No
例： onPrimary, onSurface, onErrorContainer…
何らかの色の接頭辞として付きます。
そして、その色に載せるコンポーネントを表示するために適切な色を提供します。
例えば、 onPrimary は Primary の上に載せるコンポーネントの色です。
Fixed
新登場？： Yes
例： primaryFixed, secondaryFixed …
light モードにおいて、 Fixed よりより強調された色調を提供します。
light/dark どちらも変わらず同じ色な所も注意です。
Bright/Fixed
新登場？： Yes
例： surfaceDim, surfaceBright
surface のみ、この対応関係が存在します。
light モードでは、 surface/surfaceBright は同色を提供し、dark モードでは surface/surfaceDim は同色を提供します。
例えば、 surface を使うと dark モードで配色が暗すぎる場合に surfaceBright を使って落ち着かせたりすると言った事が可能になります。
Dim
新登場？： Yes
例： primaryFixedDim, secondaryFixedDim, tertiearyFiedDim
Variant
新登場？： No
例： outlineVariant, onSurfaceVariant
Variant の名の通り、基本となる色 ( outline など)と同様の箇所に利用するが、少しだけ色調を変更したい時に利用します。
例えば、有効な状態の外枠は outline で定義し、無効状態のときは outlineVariatnt で定義する、と言った事が可能になります。
参考
https://m3.material.io/styles/color/roles
最後に
いかがでしたか？
一度で覚える必要はないとは思いますが、割と単語の意味を考えたりすると分かりやすかったかもしれませんね。
誰かのお役に立てば。Twitterフォローお願いします
「次回以降も記事を読んでみたい！」
「この辺分からなかったから質問したい！」
そんな時は、是非Twitter (@daiki1003)やInstagram (@ashdik_flutter)のフォローお願いします♪Twitterコミュニティ参加お願いします
Twitterコミュニティ「Flutter lovers」を開設しました！
参加お待ちしております😁☕️ Buy me a coffee
また、記事がとても役に立ったと思う人は
コーヒーを奢っていただけると非常に嬉しいです！
コメント