進め方
Color Systemは、プロダクトのパレットを新規に作る、または作り直すためのスキルです。ブランドスケール、ニュートラル、セマンティックなステータスカラー、拡張的な用途を分けて扱います。成果は見栄えのよいスウォッチの寄せ集めではなく、各色にロールがあり、隣接するサーフェスとの間で使える関係が定まっている状態です。
このソースは、トーナルスケールとコントラストチェックを組み合わせ、色だけで情報を伝えることを戒めています。また、ダークモードのマッピングを早い段階で求めています。生成されたパレットは、実際のテキスト、コンポーネント、状態の組み合わせを確認するまでは、デザイン案にすぎません。
想定される成果物
- ブランドとニュートラルのトーナルスケール
- セマンティックな前景、背景、ボーダー、アイコンのロール
- コントラストと用途のマトリクス
ブリーフからレビューまで
- 01パレットのレイヤーを定義する
ブランドの方向性から出発し、プロダクトが実際に使うニュートラルとステータスのロールを導き出します。
- 02実際の組み合わせをマッピングする
色を名前のないスウォッチのままにせず、テキスト、サーフェス、ボーダー、状態に割り当てます。
- 03アクセシビリティを確認する
意図した組み合わせをテストし、ステータスを確実に伝える必要がある箇所には色以外のシグナルを加えます。