色相を使った配色とは?色相環を根拠にした配色の考え方を解説

基本の理解

まずは色相そのものの意味を押さえたうえで、色相を使った配色とは何を指すのか、その全体像に進みましょう。

そもそも色相とは何か

色相とは、赤・橙・黄・緑・青・紫といった「色みの種類」のことです。ひとことで言えば「何色か」を表す性質で、色を説明する3つの属性(色相・明度・彩度)のうちのひとつにあたります。

なぜ色相だけを切り出して考えるかというと、色の印象を左右する要素が実は3つに分かれているからです。日常的なたとえで整理すると、次のようになります。

属性	ひとことで	たとえるなら
色相(しきそう)	何色か	虹のどのあたりの色か(赤・黄・青など)
明度(めいど)	明るいか暗いか	ペンキに白を混ぜて明るくするか、黒を混ぜて暗くするか
彩度(さいど)	鮮やかかくすんでいるか	原色のようにパキッと派手か、グレーがかって落ち着いているか

たとえば同じ「赤」の色相でも、明度・彩度を変えると次のように見た目が大きく変わります。

どれも色相は「赤」のまま、明度・彩度だけが違う

このように、3つを一度に考えると混乱しやすいため、まず「何色を組み合わせるか」という色相の話だけに絞るのが、配色を考える最初のステップになります。明度・彩度については、明るい色・暗い色の印象の違いとは?、鮮やかな色・くすんだ色の印象の違いとは?で詳しく解説しています。

色相を円に並べた「色相環」

この色相を、赤から紫まで変化の順番通りに円形に並べた図を色相環と呼びます。

「虹は端から端までまっすぐなのに、なぜ円にするの?」と思うかもしれません。実は、赤と紫の間には「赤紫」という色があります。赤紫は虹(光の帯)には現れない色ですが、赤にも紫にも近い色なので、赤→橙→黄→緑→青→紫→赤紫→赤と、時計のように一周ぐるりとつなげられるのです。円にすることで、色同士がどれくらい近いか・離れているかを「角度」で一目で確認できるようになります。

12色相環のイメージ。12時の赤から時計回りに橙・黄・緑・青・紫と並び、赤紫を経て赤に戻る

この「色相環上での距離」が、以降の話の土台になります。

色相を使った配色とは何か

色相を使った配色とは、色相環上での色同士の位置関係(隣り合っているか、正反対にあるかなど)を根拠にして、組み合わせる色を選ぶ配色の考え方のことです。個別の手法というより、いくつかの配色パターンをまとめた「カテゴリ」のようなものだとイメージすると分かりやすいでしょう。

代表的な型として、色相環で隣り合う色を組み合わせる類似色配色と、色相環で正反対の色を組み合わせる補色配色の2つがあります。前者は色みが近いため統一感が出やすく、後者は色みが最も離れているため強いメリハリが出ます。具体的な色の組み合わせと使われる場面は、次の通りです。

この2つは、色相を使った配色という考え方の中の、代表的な具体例にあたります。

なぜ色相を使った配色という視点が必要なのか

「なんとなく合いそうな色」で選んでしまうと、経験や感覚に左右されて再現性がありません。色相環上の関係というロジックに落とし込むことで、感覚に頼らず配色を考えられるようになります。

大切なのは、デザインの目的によって選ぶべき型が変わるという点です。統一感・落ち着きを出したい場合は色相環で隣り合う色を選ぶ類似色配色が、メリハリ・目立たせたい場合は色相環で正反対の色を選ぶ補色配色が向いています。色相の関係だけでなく、明度(明るさ)・彩度(鮮やかさ)を使った配色もあわせて調整することで、より完成度の高い配色に仕上がります。

実践のポイント

色相を使った配色を考えるときの注意点と、よくある疑問をまとめます。

注意点・よくある間違い

• 色相環上の関係だけに頼り、明度・彩度の調整を忘れると、理屈通りに色相を選んでいても、実際には見づらい配色になることがあります(具体例は下記)。
• 型に当てはめることに気を取られ、そもそも何を伝えたいのか(デザインの目的)を見失ってしまうことがあります。型は目的を実現する手段であり、目的そのものではないことを意識しましょう。

「正しく補色を選んだのに見づらい」というのは、たとえば次のような状態です。鮮やかな赤の背景に鮮やかな緑の文字を載せると、色相の組み合わせとしては正しい補色でも、境目がチカチカして文字が読めなくなります。これを「ハレーション」と呼びます。

左:鮮やかな赤 × 鮮やかな緑(補色同士)/右:同じ赤の背景に白い文字

だからこそ、色相を決めたあとに、文字の明るさ(明度)を大きく変えたり、片方の鮮やかさ(彩度)を抑えたりする調整が必要になります。ハレーションの防ぎ方は補色配色とは?で詳しく解説しています。

よくある質問

• Q. 類似色配色と補色配色以外にも型はある?
  A. あります。代表的なのが「トライアド配色」で、色相環の上に正三角形を描くように、バランスよく離れた3色を選ぶ方法です。上の12色相環なら、12時の赤・4時の黄・8時の青のような組み合わせで、にぎやかで元気な印象になります(おもちゃや子ども向けのデザインなどでよく見かける配色です)。ただし3色とも主張が強いため、面積に差をつけたり彩度を抑えたりする調整が欠かせません。まずは基本となる類似色配色・補色配色の2つを押さえれば、多くの場面に対応できます。
  トライアド配色の例:赤・黄・青
• Q. どの型を選べばいいか迷ったときは?
  A. まず「統一感を出したいのか」「目立たせたいのか」というデザインの目的をはっきりさせましょう。目的が決まれば、選ぶべき型はおのずと絞られます。

まとめ

色相とは「何色か」を表す色の性質で、それを順番通りに円形に並べた図が色相環です。色相を使った配色とは、その色相環上の位置関係を根拠に色を選ぶ考え方で、統一感を出す類似色配色、メリハリを出す補色配色などがその代表例です。デザインの目的によって、選ぶべき型を使い分けることが大切です。

色相の関係だけでなく、明度・彩度もあわせて調整することで、理屈だけでなく見た目にも完成度の高い配色に仕上げられます。