🎨
デザインシステムの作成に役立つ色の考え方
Color based on Elements
色構成は、要素で考え、以下の4つの要素で分ければ良いと考えます。
- Text
- Icon
- Border
- Background
イメージとしては、以下のような感じです。
Color based on Usage
色のバリエーションは、用途で考え、以下の10パターンを用意すれば良いと考えます。
- Main
- Sub
- Critical
- Warning
- Success
- Disabled
- On(OnFill)
- Link
- Focused
- Primary
例えば、以下のように使い分けます。
- 文章で使う色は「Main」
- 補足文章で使う色は「Sub」
- エラーに使う色は「Critical」
- 注意に使う色は「Warning」
- 処理完了に使う色は「Success」
- 無効な要素に使う色は「Disabled」
- 塗りつぶしの上に使う色は「On」
- リンクに使う色は「Link」
- フォーカスされた時の色は「Focused」
- アクセントに使う色は「Primary」
Create Color Scheme
以上を元に、カラースキーマは、要素×用途で作成します。
Text Color
| スキーマ名 | 色の例 | 使用例 |
|---|---|---|
| text-main | 黒 | 見出し、文章、入力値 |
| text-sub | グレー | 説明、備考、プレースホルダー |
| text-critical | 赤 | エラーメッセージ、削除の文字など |
| text-warning | 黄色 | 注意メッセージの文字 |
| text-success | 緑 | 完了メッセージの文字 |
| text-disabled | グレー | 無効となっている文字 |
| text-on | 白 | 塗り潰しの上の文字 |
| text-link | 青 | リンク |
| text-primary | 紫 | 目立たせたい文字、ブランドカラー |
Icon Color
| スキーマ名 | 色の例 | 使用例 |
|---|---|---|
| icon-main | 黒 | 基本的なアイコンボタン |
| icon-sub | グレー | 特に目立つ必要のないアイコンボタン(Likeボタンなど) |
| icon-critical | 赤 | エラーメッセージ、削除のアイコン |
| icon-warning | 黄色 | 注意メッセージのアイコン |
| icon-success | 緑 | 完了メッセージのアイコン |
| icon-disabled | グレー | 無効となっているアイコンボタン |
| icon-on | 白 | 塗り潰しの上のアイコン |
| icon-primary | 紫 | 目立たせたいアイコン、ブランドカラー |
Border Color
| スキーマ名 | 色の例 | 使用例 |
|---|---|---|
| border-main | 黒 | 基本的な線 |
| border-sub | グレー | コンテンツを区切る線 |
| border-critical | 赤 | エラーメッセージ、削除の外枠 |
| border-warning | 黄色 | 注意メッセージの外枠 |
| border-success | 緑 | 完了メッセージの外枠 |
| border-disabled | グレー | 無効となっている要素の外枠 |
| border-on | 白 | 塗り潰しの上の線 |
| border-focused | オレンジ | フォーカスされた入力欄の外枠 |
| border-primary | 紫 | 目立たせたい線、ブランドカラー |
Background Color
| スキーマ名 | 色の例 | 使用例 |
|---|---|---|
| background-main | 黒 | 塗りつぶしのボタンの背景(基本色) |
| background-sub | グレー | 塗りつぶしのボタンの背景(特に目立つ必要のない) |
| background-critical | 赤 | 塗りつぶしのボタンの背景(エラー、削除) |
| background-warning | 黄色 | 塗りつぶしのボタンの背景(注意) |
| background-success | 緑 | 塗りつぶしのボタンの背景(完了) |
| background-disabled | グレー | 塗りつぶしのボタンの背景(無効) |
| background-primary | 紫 | 塗りつぶしのボタンの背景(特に目立たせたい) |
| background-main-container | 白 | 基本的な背景 |
| background-sub-container | 薄いグレー | 他の部分と微妙に変えたい背景 |
| background-critical-container | 薄い赤 | エラーメッセージ、削除の背景 |
| background-warning-container | 薄い黄色 | 注意メッセージの背景 |
| background-success-container | 薄い緑 | 完了メッセージの背景 |
| background-disabled-container | 薄いグレー | 無効となっている要素の背景 |
| background-primary-container | 薄い紫 | 外枠のボタンの背景 |
まとめ
この記事は、「デザインシステムを作る時の参考になれば...」「この考え方を共有したい...」と思いまとめてみました。
ただ、この色の分け方にはもちろんデメリットもあります。
- 同じ色を使う部分もあるから、これだけ用意するのは面倒
- HoverやActive時の色などが定義されていない (→自分はそれはOpacityやShadowなどで調整すれば良いと考えています)
ですが、この色の分け方の真骨頂はメリットにあります。
- どこにどの色を当てるかわかりやすい
- ダークモードにも対応しやすい
- 様々なデザインに応用しやすい
また、全てこれ通りでなく、「CriticalをErrorという名前に変更」したり、「Primaryだけでなく、Secondary、Tertiaryを追加」したりするのも良いと思います。
【余談】
この考え方に思い至ったのは、デザインと開発で色を固定したいと思ったからです。
さらに言えば、「デザインツールの色設定」と「Webの色設定」と「アプリの色設定」をなるべく同じにしたかったわけです。
また、自分の中でダークモードを実装できるかどうかも必要要件でした。
当初は、Flutterの「Material Design 3」の考え方がとても素晴らしくそれを基準にしようと思ったのですが、自分が必要だと思った色が足りないと感じました。
なので、今回紹介した色構成に一旦落ち着きました。
色の設定については、「デザインはFigmaのローカルスタイルを用意」、「WebはTailwindCSSを使った定数を用意」、「アプリはFlutterのThemeExtensionで色のカスタム設定を用意」することで実現できます。(それぞれやり方に工夫が必要ですが)
別の良い方法があれば、また更新したいと思います。
Discussion