デザインシステムのカラーランプ作成練習 - 1. 事前準備
株式会社グッドパッチに所属するUIデザイナーのkiyoeshiです。Webサービスのデザインシステムで利用するカラー設計について勉強しています。学んだことをもとに、ゼロからカラーランプ（カラーパレット）を作る方法を自分なりに考えて、その流れをまとめました。
今回はその１記事目の「事前準備編」です。カラーランプの作成前に、必要な配色のための要件の整理を行います。
はじめに、カラーランプは通常「ジェネレーター」で生成した色をもとに作ることが多いですが、今回はあえてジェネレーターを使わない方法で考えています。
ジェネレーターを利用すると効率的にランプを作成できて便利です。ですが、私はアレンジを加えたいときにどう調整すれば良いか分からず、納得のいく色が作れませんでした。そこで、自分で一から色を作ることで理解を深められればと思い、練習のためにこの方法で取り組むことにしました。遠回りな方法論かもしれませんが、読んでいただいた方に一つでも役に立つ内容があれば幸いです。
要素の洗い出し
UIは、パズルのピースのように使用する要素が定型化しているので、カラーランプを作成する前に必要な要素を大まかに洗い出しておくと効率的です。デジタル庁 デザインシステムや、Chakra UIのコンポーネントなど、公開されているデザインシステムやUIコンポーネントライブラリをお手本すると考えやすいです。
・ロゴ
・文字
・背景
・ボタン
・罫線
・アイコン
・イラスト …etc
そして、これらの要素に用いる色を「セマンティックカラー」と「アクセントカラー」の２つに分類し、色を使う目的や要件を整理します。整理することで、カラーランプのステップや色相の数を決める手がかりが得られます。
セマンティックカラー
セマンティックカラーは、「情報や文脈を明確に伝える」ために色を使用するグループです。たとえば、ブランドロゴ、文字、背景、ボタン、罫線といった要素を表すための色を事前に定義します。これによって、色そのものが意味を伝える役割を果たし、ユーザーが情報や文脈を直感的に理解しやすくなります。
この要件を満たすには、「要素同士のコントラスト比に考慮した明暗の組み合わせを持つカラーランプ」を作ります。ユーザーに意図を正確に伝えるために、セマンティックカラーが周囲の色によって視認性が損なわれないよう、コントラストに配慮した配色を行います。
また、セマンティックカラーは「重要度, ステータス, カテゴリ」といったバリエーションを持つことがあります。その場合は各バリエーションに対応する色を合わせて用意します。これはいろいろな呼び方があると思いますが、ここでは次のように定義します。
重要度は、「Primary, Secondary, Tertiary」など、１つの要素が伝えたい情報によって「重要度」が変わるときに、その階層をユーザーへ視覚的に示します。
たとえば、アクションボタンには次のような分類が考えられます。 [新規登録] や [決定] など、ページの主目的となるアクションボタンはPrimary、新規登録に対する [ログイン] や [キャンセル] など、相対的に見てPrimaryの次に重要なアクションボタンはSecondary、[詳細を見る] [トップに戻る] など、補足的な役割のアクションボタンはTertiaryとして分類します。このように同じボタンでも情報の重要度によって階層を設けることで、ユーザーが迷わず目的の操作をスムーズに行うことができます。
ステータスは、「Hover, Active, Focused」など、１つの要素がユーザーのアクションによって状態変化するときに、その変化をユーザーへ視覚的に示します。
たとえば、アクションボタンを実行するためには、カーソルやキーボード操作でボタンに触れて、クリックする、という一連の操作が必要です。そのとき、ボタンに触れたことやクリックしたことをユーザーに視覚的にフィードバックすることで、直感的に画面を操作しやすくなります。
カテゴリは、「Error, Warning, Success, Infomation」など、１つの要素で伝えたい情報の「目的」が状況によって変化するときに、それをユーザーへ視覚的に示します。
たとえば、ユーザーが何かアクションを実行した後、その結果を伝えるときに、成功なら緑、注意が必要な場合は黄色、エラーなら赤といった具合に、目的に応じて色を使い分けます。このように、サービス全体で統一された色を使うことで、その色が特定の意味を持つ共通のルールになり、ユーザーが直感的に情報を理解しやすくなります。
アクセントカラー
アクセントカラーは、「特定の要素に注意を引く」ために色を使用するグループです。たとえば、イラストやアイコンなど、特定の要素を色や形で強調したい場面で使います。
この要件を満たすには、「色相と明度のバリエーションを持つ」カラーランプを作ります。アクセントカラーには特定の意味や目的を設けず、適宜必要な色を選んで組み合わせます。配色時は、セマンティックカラーで予約された意味に誤解を与えないよう考慮することで、ユーザビリティを損なわずに自由度の高い表現が行えるようになります。
アクセシビリティ方針
カラーランプの明るい色から暗い色までのステップは、「コントラスト比の達成基準」によって指定できる値の幅が決まるため、基準を設けておきます。
コントラスト比の達成基準は、WCAG 2.1/2.2（JIS X 8341-3:2016）で定められています。ガイドラインには３段階の等級レベル「A, AA, AAA」が設定されており、カラーコントラストの基準は AA 以上から求められます。どのレベルに準拠するかは、各サービスのアクセシビリティ方針をもとに検討が必要です。
事前に方針の用意がない場合も、日本では民間事業者は「合理的配慮の提供」が義務付けられています。対象者から要望があった場合、事業に負担にならない範囲で合理的な配慮をすることが求められます。
総務省が作成した『みんなの公共サイト運用ガイドライン』では、AA に適合させることが推奨され、他国の法律やポリシーでも AA を推奨していることから、特に理由がない限りはこれにならうのが良いと思います。
コントラスト比の概要は、デジタル庁のデザインシステムに記載されている「コントラスト要件」に分かりやすく記載されていて参考になります。
WCAG 2の課題
WCAG 2が提供するコントラスト比の計算方法は、数値上の色では実際の視認性を正確に評価できない課題があることが分かっています。そのため、見た目はコントラストを確保できているように見えても基準に達していなかったり、逆に基準に達しているのに、見た目ではコントラストが確保できていないように見えたりすることがあります。
これは、人の視覚には色の明るさや彩度の差によってコントラストを異なって知覚する特性があり、現在の計算式はこれに対応していないことが原因です。（よく話題に上がる「オレンジ色が使いにくい問題」もこの特性によって起こります）
この課題を事前に理解しておくことで、配色時にコントラスト比と見た目の差を感じたとき、ガイドラインに準拠した色に調整するか、見た目を重視した色に調整するかといった検討が行いやすくなります。
また、現在開発が進められているWCAG 3ではこれに対応するために、人の知覚にもとづいた計算方法を提供することを目的とした新しい評価基準『APCA』が検討されています。
2024年9月時点では、APCAの暫定版ガイドラインが公開されています。このガイドラインでは、文字と背景色のコントラスト比について、使用用途やフォントサイズ、ウェイトに応じた推奨レベルがWCAGよりも細かく設定されています。
以下の記事に、APCAの概要とWCAG 3ブロンズレベルのガイドラインが日本語でまとめられていて参考になります。
この内容は今後更新される可能性がありますが、実際にWCAGとAPCAを比較すると、APCAはWCAGよりも見た目に沿って評価されているように感じました。そのため、現状でも配色の微調整時に、見た目のコントラストを高めるための参考値として役に立つと思います。
使用ツール
カラーランプは、最終的なアウトプット先に合わせてFigmaで作成します。ただし、有彩色の配色はOKLCHカラースペースを利用したいため、ブラウザツール『Huetone』を利用します。
OKLCHカラースペースは、人間の視覚に基づいて、明度（Lightness）、彩度（Chroma）、色相（Hue）を調整できる色空間です。色の違いを人間の目が感じる通りに再現できるように設計されているため、視覚的に自然で一貫性のあるカラーランプを作成しやすいです。以下の記事にOKLCHの利用例が掲載されており参考になりました。
FigmaのプラグインでもOKLCHを扱うことはできますが、『Huetone』はOKLCHで作成した色の組み合わせを、WCAGとAPCAの両方のコントラスト基準で評価してくれるため、アクセシビリティに考慮した配色を検討しやすいです。また、作成した色はJSON書き出し、Tokens Studio経由でFigmaにもインポートできます。
以上が、カラーランプ作成に向けた事前準備の内容でした。カラー選定は、数千万色から数色を絞り込む大変な作業です。そのため、あらかじめ用途や選択する色の範囲を定めて焦点を絞っておくことで、スムーズにカラーランプの設計が進められると考えています。この方針をもとに、次回からはカラーランプを作成していきます。事前準備編、最後まで読んでいただきありがとうございました！
次の記事はこちら