賢い色の使用

正しい配色の探索

優れた配色を選ぶためのツールやプロセスが存在します。優れたデザイナーがこれらの決定を支援する代わりにはなりませんが、スタートを切る助けにはなります。

ベースカラー

最初のステップはベースカラーを選ぶことです。この色はウェブサイトやその主題を表します。緑を飲料マウンテンデューと、青を空や海と結びつけるように、サイトを表す適切なベースカラーを選ぶことは良い出発点です。ベースカラーを選ぶ方法はたくさんあります。いくつかのアイデアを挙げます。

• コンテンツのテーマと自然に結びつく色。例えば、製品やアイデアと関連付けられている既存の色、あるいは伝えたい感情を象徴する色など。
• 対象物に関連付けられたイメージから生まれる色。特定のアイテムや製品に関するウェブサイトを作成する場合、そのアイテムに物理的に存在する色を選択してください。
• 既存のカラーパレットや画像を多数閲覧できるウェブサイトを閲覧し、インスピレーションを見つけましょう。

いくつかの便利なブラウザー拡張機能が、ベースカラーの選択に役立ちます。例えば、ColorZilla ブラウザー拡張機能は、任意のウェブページから色を選択するためのスポイトツールを提供します。また、ページの一部の領域の色を平均化する機能も備えています。

「平均色」の抽出が有用なのは、一見単色のブロックに見えるものが、実際には複数の関連色で構成されている場合があるためです。例えば、海や空の写真から青色を抽出する場合などが該当します。写真から単一の青色ピクセルを選択すると、場違いに見える色になる可能性があります。

パレットの肉付け

ベースカラーを決めたら、次にそのベースカラーと組み合わせて使う適切な色のパレットを作成します。ベースカラーに色彩理論を適用し、適切な追加色を出力するためのツールがいくつか利用可能です。無料の Adobe Color CC オンラインカラーホイールなどのオンラインツールは、使いやすいカラーパレットを選ぶのに役立ちます。

これらのツールの多くは、パレットにフィルターを適用することも可能です。これにより、様々な形態の色覚異常を持つ方々がどのように色を認識するかを確認できます。この重要性についての簡単な説明は色とアクセシビリティをご覧ください。

パレットを設計する際には、おそらく白（またはほぼ白）、黒（またはほぼ黒）、そして 1 つ以上のグレーの濃淡といった中核となる中間色で補完する必要があるでしょう。

色彩理論のリソース

色彩理論の完全な解説は本記事の範囲を超えますが、色彩理論に関する記事は数多く存在します。特に有用だと思われるリソースは以下の通りです。

色の科学（カーンアカデミーとピクサー の共同制作、英語）

オンライン講座で、色とは何か、どのように知覚されるか、アイデアを表現するための色の活用法といった概念を紹介します。ピクサーのアーティストとデザイナーが講師を務めます。

Color theory - Wikipedia（英語）

ウィキペディアの Color theory の項目は、技術的な観点からすばらしい情報を提供しています。おそらくあなたの色選びの過程には役立たないかもしれませんが、それでも有益な情報で満ちています。

色とアクセシビリティ

コンテンツがアクセシビリティを確保されていることを確認してください。色には、アクセシビリティの問題を引き起こす可能性をはらんでいます。色を不適切・不注意に使用すると、ウェブサイトやアプリをターゲットユーザーの一部が適切に利用できなくなり、トラフィックの損失、ビジネスの機会損失、さらには広報上の問題や訴訟に至る可能性さえあります。したがって、色の使用には細心の注意を払うことが重要です。

色と輝度を理解し、常に色覚異常や前庭障害を考慮することが重要です。色覚異常にはいくつかの種類があり、最も一般的なのは赤緑色覚異常です。これは赤と緑の色を区別できない状態です。他にも、特定の色を見分けられないものから、全く色が見えないものまで様々です。特定の色の組み合わせやアニメーションが、光感受性のあるユーザーに発作を引き起こす可能性もあります。

アクセシビリティの観点では、高い色コントラストが望ましい場合が多いですが、アニメーション、特に高速なアニメーションでは、アニメーション要素の色コントラストを低減することで発作リスクを軽減できます。アニメーションを実装する場合は、@media で prefers-reduced-motion クエリー特性を使用し、この設定を選択したユーザー向けにアニメーションを抑制してください。

つまり、背景と前景コンテンツの間に十分な色のコントラストを確保し、可読性を確保してください。また、情報を伝える手段として色のみを使用することは絶対に避けてください。例えば、操作の成功を関連する UI 要素の緑色の枠線で示し、失敗を赤色の枠線で示す場合、赤緑色覚異常のユーザーはサイトを適切に利用できません。代わりに、テキストと色の指標を併用して、そうしたユーザーも包含するようにしてください。例えば、緑色のチェックマークと赤色の×印の方が適切です。

パレットデザインの例

この例では、火星を舞台にしたゲームのウェブサイトに適したカラーパレットを作成します。火星の写真の Google 検索を実行すると、複数のカラー写真が表示されます。

カラーピッカーツールを使用して、ベースカラーの色見本を選択します。この例では、さびたオレンジがかった赤色である #D79C7A を選択しました。パレットの他の色は Paletton を使用して決定できます。 Paletton を開くと、次のように表示されます。

カラーピッカーツールを使用して、ベースカラーの色見本を選択します。この例では、さびたオレンジがかった赤色である #D79C7A を選択しました。パレットの他の色は Paletton を使用して決定できます。Paletton を開くと、次のように表示されます：

火星の写真から選んだ色を基にした単色パレットが表示されます。関連する色が必要な場合、これらは良い選択肢となるでしょう。ベースカラーと対比して際立つアクセントカラーを見つけるには、パレットタイプを選択するメニューの下にある「補色を追加」トグルをクリックします。デフォルトは「単色」でした。Paletton が適切なアクセントカラーを計算します。右下のアクセントカラーをクリックすると、この色が #508D7C であることがわかります。

提案された色がニーズに合わない場合、配色を変更できます。例えば、提案された青緑色が合わない場合は、Triad 配色アイコンを選択すると、次のように表示されます。

右上の灰色がかった青をクリックしてください。この色は #556E8D です。見出しやタブのハイライト、サイト上のその他のインジケーターなど、目立たせたい箇所のアクセントカラーとして使用できます。

ベースカラーとアクセントカラーが用意できました。また、両方の補色となる数色も用意されており、グラデーションの作成や、リンクのホバー状態など、フォーカスを示すアクセントカラーとして使用できます。これらの色は、複数の形式でエクスポートして使用できます。

また、中立的な色を選ぶべきです。テキストがくっきり読みやすく十分なコントラストを確保しつつ、目に負担をかけない色を見つけましょう。コントラストが低すぎると、背景に文字が溶け込んで読めなくなります。一方、コントラストが高すぎると、サイトが派手で不快に感じられる可能性があります。

色、背景、コントラスト、印刷

印刷されたとき、そのサイトはユーザーが画面上で見るものとは大きく異なる場合があります。 ページを印刷する際、ユーザーは白黒印刷のみを選択する可能性があります。ほとんどのブラウザーは、デフォルトで文書を印刷する際に背景色や画像を削除します。

通常はテキストそのものが最も重要ですが、背景色や画像が慎重に選択されている場合や、コンテンツの有用性にとって不可欠な場合は、CSS の print-color-adjust プロパティを使用して、ブラウザーにコンテンツの外観を調整しないよう指示できます。

print-color-adjust: economy のデフォルト値は、文書が描画される出力機器の種類に応じて、ブラウザーがコンテンツの可読性や印刷コストの最適化を図るために必要と判断する外観変更を許可することを示します。

print-color-adjust: exact を設定すると、ブラウザーに対して、この設定を適用した要素が、色や画像をそのままの状態で最適に機能するよう特別に設計されていることを伝えることができます。 この設定を有効にすると、ブラウザーはこの値が適用された要素の外観を改変せず、CSS で指定された通りに描画します。

関連情報

• CSS 色モジュール
• CSS を使った HTML の要素への色の適用
• CSS 色値
• 相対色の使用
• 色と輝度を理解する
• WCAG 1.4.1: 色のコントラスト
• Paletton