カラーホイール

カラーホイールを使用することで、どんなプロジェクトにも魅力的で一貫したカラーパレットを簡単かつ効果的に作成することができます。以下がその方法です。

ステップ1: ベースカラーを選ぶ。

カラーピッカーを使って、ホイール上のベースカラーを選択します。この色はカラーパレットの基礎となり、デザインのトーンとムードを設定し、追加色の選択に影響を与えます。

ステップ2：配色を選ぶ。

配色を選択します。配色によって視覚的なインパクトが異なります。

• 補色は、正反対の色を使うことでコントラストを最大化します。
• トライアドは、色を三角形に配置することで、鮮やかでありながらバランスの取れた外観を作り出します。
• 類似色は、隣り合う色が調和した効果を生み出します。
• 分割補色は、基本色とその補色として隣接する2色を使用して、高コントラストで緊張感の少ない外観を生み出します。
• スクエアは、ホイールの周りに等間隔に配置された4つの色で多様性を高めます。
• 単色は、ベースカラーに基づいて明度（色調）と暗さ（シェード）の力を利用し、微妙な移り変わりと際立ったコントラストを生み出します。

ステップ3: デザインに適用する。

あなたのプロジェクトに最適なカラーパレットを見つけたら、それをデザインに適用して、望ましい視覚的インパクトを実現しましょう。

色彩理論は、デザイナーが完璧な配色を作り出し、深みのある紫やゴールドで洗練された印象を与えたり、柔らかな青や緑で落ち着いた印象を与えたりするための枠組みを提供します。コントラストの強い組み合わせで注目を集めるにせよ、調和のとれた雰囲気を作るにせよ、色彩理論を理解することは非常に重要です。ここでは、いくつかの重要な概念の概要を説明します。

原色(赤黄青)とは

RYBカラーモデルの原色は赤、黄、青です。この3色はカラーホイールの基本であり、さまざまな比率で混ぜることで他のすべての色を作り出すことができます。

二次色とは

二次色はカラーホイール上で原色と原色の間に位置する色で、2つの原色を混ぜ合わせることで形成されます。例えば、赤と青を混ぜると紫になり、赤と黄を混ぜると橙になります。緑がどのように生成されるかを覚えるには、隣接する原色、すなわち黄色と青色を見れば答えがわかります。

三次色とは

カラーホイールの残りを埋めるのは、三次色(中間色)です。三次色は、原色と二次色を混ぜたときに得られる色です。たとえば、赤と橙を混ぜると赤橙になり、2色の間の隙間を埋めます。スクロール可能なカラーホイールでは、環上の位置によって、必要な赤橙の個別の色合いを調整できます。青緑、青紫、赤橙、赤紫、黄橙、黄緑を混ぜて、独自の三次色を作成することもできます。このように細かく色を選択できることは、プロダクトデザイナーが探している色合いやアクセントカラーを見つけるのに役立ちます。

7つの配色とは?

配色とは、視覚的なバランスを実現するための戦略的な色の組み合わせです。これらの配色は色彩理論の原則を活用して美学的に優れたデザインを生み出します。一般的には、以下の7つのタイプの配色があります。

補色

補色とは、高いコントラストを作り出す、カラーホイールの正反対の色同士の組み合わせです。ある色を選び、カラーホイールを180度移動すると、補色が見つかります。赤と緑のように一部の補色配色はよく知られ人気があります。このような配色は、デザインに暖色と寒色の両方がほしい場合に効果的です。

分割補色

分割補色とは、ベースカラーとその両側の補色(三次色)を組み合わせた色の組み合わせです。これにより3色のパレットができ、より繊細なカラーパレットを作ることができます。

単色

単色はおそらく最も理解するのが簡単です。単に原色の明るいバージョンと暗いバージョンだからです。単色配色では、複数の対照的な色の使い方に関する意思決定の複雑さがないため、デザイナーはシンプルな方法で効果的に色を使用できます。単色パレットを作るには、原色から明るいバージョンと暗いバージョンを同じ量だけ選びます。

類似色

類似色とは、カラーホイールで隣接する3色のグループです。類似色は柔らかく自然なカラーパレットを作り出します。結局のところ自然に多く含まれる色相は密接に関連しています。木の葉一枚一枚の色や、海を見たときの水の色の微妙な違いについて考えてみてください。類似色配色は、非常に調和が取れていて、さまざまな要素を1つのデザインにまとめ上げるのに役立ちます。

トライアド

トライアド配色は、3つの等しく対照的な色を与えます。ポイントはカラーホイールの周りに均等に配置され、正三角形を形成します。トライアド配色でデザインする場合は、原色を1色選び、他の2色をアクセントとして使うのが最適です。3色の配色は通常、より大胆で遊び心のある印象を与えます。

テトラード(二重補色)

GoogleとMicrosoftに共通する点は何でしょうか? 彼らはどちらもロゴにテトラード配色を使用しています。テトラードとは、4つの色が矩形を形成するカラーホイールから選ばれる手法です。これには2組の補色が含まれ、活気あるエネルギッシュな配色を作り出します。テトラード配色は時々「二重補色」配色とも呼ばれます。

スクエア

スクエア配色は、テトラード配色と同様に4色を使用しますが、これらの色はカラーホイール上で均等に配置され、四角形を形成します。これにより、テトラード配色よりもバランスの取れた外観が生まれます。スクエア配色もテトラード配色と同様に、1つの主要な色を選んで他の色をアクセントとして使用するのがおすすめです。

暖色と寒色

カラーホイールは暖色と寒色を区別します。暖色は赤、橙、黄など、激しさを表現します。紫、青、緑などの寒色は落ち着きとリラックスを感じさせます。瞑想アプリのCalmが青を基調としていることにお気付きですか? これは平安の感覚を想起させるために意図的に選ばれています。

カラーモデルは、数値を使用して色の表現を支援するシステムです。このページでは次の4つのカラーモデルが使用されています。

1. 赤、緑、青(RGB)
2. シアン、マゼンタ、イエロー、キー(CMYK)
3. 色相、彩度、輝度(HSL)
4. 16進コード

赤、緑、青(RGB）

赤、緑、青(RGB）カラーモデルは、画面上に表示されるあらゆるデザインの基礎です。このカラーモデルのルーツは、人間の色の知覚と、私たちの目が光とどのように相互作用するかに基づいています。この「加法混色」では、色を混ぜることで、私たちが毎日画面で見ている色の配列を生み出すことができます。

シアン、マゼンタ、イエロー、キー(CMYK）

一方、CMYKモデルは、あらゆる印刷デザインの基礎です。この「減法混色」は光の波長を吸収し、現実世界の色素により明確に一致しています。

• シアン(C): シアンは、青がかった緑色です。シアンインクを表面に塗ると赤い光を吸収し、人間の目には青緑に見えるようになります。
• マゼンタ(M): マゼンタは紫がかった赤色です。緑の光を吸収し、赤みがかった紫の色相になります。
• イエロー(Y): イエローは青い光を吸収し、印刷すると黄色がかった色になります。
• キー(K)またはブラック: CMYKの「K」は「キー」を意味し、黒い要素を指します。黒インクは、画像やテキストの深みとコントラストを強調するのに使用されます。さらに、黒インクを使用することで、色を混ぜることで黒を作ろうとしたときに発生する色の濁りを防げます。

色相、彩度、輝度

色相はカラーホイールで見られる色を表します。これを360度の円のスペクトルと考えてください。この円を回ると、異なる色相に出会います。

• 色相: 色相の定義は複雑ですが、その核心では、カラーホイールに見える色を指しています。カラーホイールは360度の円であり、円を巡るとさまざまな色相が見つかります。
• 彩度: 色相の鮮やかさや強度を示す彩度は、その豊かさと純度を反映します。カラーホイールの外側には彩度が飽和している色相があります。円の中心に向かうと色相の強度が下がります。強度を下げるには、色相に黒と白（灰色）を混ぜます。
• 輝度: 輝度は、色にどのくらい黒または白を混ぜるかを決定します。白を多く混ぜるとパステルカラーになり、黒を多く混ぜると深く暗いパレットになります。

16進コード

16進コードまたはhexコードは、赤、緑、青をどのように混合するかをコンピューターに伝え、画面上にピクセルの色を生成します。

ディスプレイ上の各ピクセルは、赤、緑、青の光を生成する3つの色成分でできています。サブピクセルとも呼ばれるこれらの色素は非常に小さいため、ピクセルは人間の目には単一の色として見えます。

赤、緑、青の光を異なる割合で混ぜ合わせることで、各ピクセルは最大で1600万色を表示できます。これは人間の目が認識できる範囲を超えています。

各ピクセルは、256段階の赤、緑、青の値を混ぜ合わせて、1600万色の色を生成できます(256 × 256 × 256 を計算すると、1600万を超えます）。コンピュータはこれらの値を各ピクセルにバイナリコードという1と0からなる言語で送信します。例えば、赤の値が200の場合、バイナリコードでは11001000と表されます。バイナリコードは人間にとって理解しにくいため、読みやすい代替として16進数システムが使われています。

16進コードの仕組み

16進数コードには、赤、緑、青それぞれに対応する2桁の値が3つ含まれています。例えば、#F234A2は以下のように構成されています。

• 赤: F2
• 緑: 34
• 青: A2

英字はどうなっているのでしょうか。通常の10進数とは異なり、16進数は基数16を使用します。これは0から9までの数字に加えて、10から15を表すためにAからFまでの英字を使用します。

16進コードとRGBの変換方法

16進コードとHSL値は、RGB色モデルを表現する方法が異なるだけなので相互に変換することが可能です。16進コードのRGB値への変換は、手作業で頻繁にやることではありませんが、すばやく簡単に計算する方法があります。3つの値それぞれについて、

• 最初の数字(または英字)に16をかける
• 2番目の数字(または英字)を足す

#E234A2の場合、最初の値はE2です。これは226という数を表します(14 * 16 + 2)。この数字が赤色のRGB値になります。そして、#E234A2のRGB値は次のようになります。

• 赤: 226
• 緑: 49
• 青: 152

(16進コードまたはRGB値をHSL値に変換することもできますが、計算がもう少し複雑になります)

デジタルデザインのカラープロファイル: sRGBとP3

さまざまなデバイス、モニター、ブラウザ、アプリケーションが、色のレンダリングに多様なテクノロジーを使用しており、その結果、デバイス間で視覚的な不一致が発生することがあります。デジタルプラットフォーム向けにデザインする際は、カラープロファイルの検討が決定的に重要です。カラープロファイルが、特定の画面に基づいて、色を定義・レンダリングするための一貫した基準を確立するからです。

デジタルデザインにおけるカラープロファイル(sRGBやP3など)は、デバイス間で一貫した色の再現を保証します。sRGBは数十年にわたりコンテンツクリエイターやウェブデザイナーにとってのウェブの標準であり、ほとんどの消費者向けデバイスで視覚的な一貫性を確保します。Display P3、通称P3は、色のスペクトラムをより鮮やかにレンダリングでき、sRGBより49%多くの識別可能な色を表現できます。しかし、sRGB向けに設計されたスマートフォンやノートPCなどのデバイスでP3を使用すると、拡張色範囲をレンダリングするために高い処理能力が必要になるため、消費電力が過剰に大きくなる可能性があります。iOSや高精細/Retina画面などのプラットフォーム向けにデザインする際は、Display P3が最善の選択肢になりますが、必ずしもすべてのアプリケーションやソフトウェアがその広い色域を処理するように完全に最適化されているとは限りません。

FigmaでP3カラープロファイルがどのようにサポートされているかについては、こちらをご覧ください。

WCAGとカラーアクセシビリティ

1999年、World Wide Web Consortium (W3C)によってWeb Content Accessibility Guidelines (WCAG)の第1版が発行されました。この技術文書は、すべてのユーザーがウェブコンテンツにアクセスできるようにすることを目的としています。このW3Cの勧告は、ウェブアクセシビリティのグローバルスタンダードと見なされ、ウェブ開発やデジタルデザインのコミュニティ内で大きな影響力を持っています。同組織は、技術の進歩や新たなアクセシビリティのニーズを反映するために継続的に更新を行っています。

現在の文書であるWCAG 2.1は、認知障害やモバイルデバイスの使用など、より広範な障害に対応することでウェブアクセシビリティのガイドラインを拡張しており、より包括的なウェブ体験を提供しています。ガイドラインでカバーされている重要な側面の1つは、視覚アクセシビリティであり、特に色彩設計におけるコントラストの重要性です。適切なコントラストにより、テキストやインタラクティブな要素が背景色から際立ちます。それは色覚異常や低視力などの視覚障害を持つユーザーにとって重要です。

WCAGの推奨では、すべてのユーザーが情報にアクセスできるよう、テキストやテキストの画像の最小コントラスト比率を指定しています。例えば、通常のテキストには最低4.5:1のコントラスト比率が推奨されています。大きなテキストでは、少なくとも3:1の比率が必要です。

現在、WCAG 3.0が策定中であり、さらに包括的なものになることが期待されています。色彩のコントラストに関するより細かいガイドラインが導入されることが予想されています。

WCAG 2.1の詳細