前回のページではデザインの基礎について学びました。
今回はデザインの中でも重要な項目である「配色」についてしっかりと学んでいきましょう。

配色の基礎

配色とはデザインにおいて非常に大切です。
色によって人の心は影響を受け、感情を動かされることもあります。

配色とは、色の組み合わせのことであり、色は単体ではなく組み合わせることでさらにイメージを膨らませることが可能です。

まずは、調和の取れた配色の基礎について解説します。

色相環から考える配色

色相環とは、色を環状に配置したものです。
色を体系化して考える時によく用いられます。

上記のように暖色・寒色・中間色が存在し、この色相環を用いることで簡単に配色を決めることが可能です。

補色色相配色

色相環において、180度向かい合わせにある色のことを「補色」と呼びます。
この補色を組み合わせた、はっきりとしたコントラストの配色を補色色相配色と呼びます。
アクセントにしたいカラーを選ぶ時にも参考にできます。

類似色相配色

色相環の中で隣り合わせの3色を組み合わせた配色を類似色相配色と呼びます。
比較的まとまりの良い色の組み合わせのため、失敗が少なく、誰にでも受け入れられやすい配色です。

3色配色

色相環の中で正三角形に結んだ3色の配色のことを3色配色と言います。
インパクトがありながらもまとまりのある配色になるため、あらゆるデザインにおいて活用できます。

分裂補色配色

補色の関係にある色の片側の色の隣あわせにある色を組み合わせた配色を分裂補色配色と言います。
全体的に調和を取りやすいため、この配色もあらゆる場面で多用されます。

4色配色

色相環を4等分した位置の色で組み合わせた配色を4色配色と言います。
補色の関係である色の組み合わせなので、全体の組み合わせは鮮やかで賑やかな感じになります。

---

配色の基礎を色相環を用いて解説しました。
この基礎知識は必ず役立つ内容ですので、しっかりと頭に入れておきましょう。

以上のような色相環を使った配色の基礎知識を少し用いるだけでも、
会議やプレゼンで使う資料、ウェブデザインが質の高いものに仕上がります。

イメージに合わせた配色

配色の基礎が学べたところで、次はイメージに合わせた配色の例を考えてみましょう。
これができるようになったら、イメージに合わせた資料やウェブページを作ることができるようになります。

女性らしいイメージ

例えば女性らしさを表現したい場合には、明るいピンクやベージュなどの色を中心に使用すると可愛らしさや柔らかさが表現できます。
これらはペールトーンといい、色味の浅い、白に少しだけ色を足したような明るい色のことを指します。

ここにアクセントとなるオレンジやビビットピンクなどはっきりとした色を足すことでメリハリのある女性らしいイメージが表現できます。

子供らしいイメージ

子供らしいイメージを配色で表現したい場合には、ビビットなカラー（原色）を使用するようにします。
ビビットなカラーは元気なイメージを持たせることができるので、子供らしさを表現できますが、彩度が高すぎると目がチカチカしてしまうため、彩度は下げるように心がけましょう。

たくさんの色を少しずつ使用したり、背景の色は単色でシンプルにすることでまとめやすくなります。

赤ちゃんのような小さな子供をイメージさせる場合にはパステルカラーを使用するようにするといいでしょう。

男性らしいイメージ

男性らしいイメージを表現したい場合には、黒や白のモノトーン配色を中心とすると落ち着いた感じをアップさせることができます。

さらに、配色は3色程度にすることで、まとまりのある、すっきりとしたかっこよさが表現できます。
白やブルーを使うのも男性の爽やかさが表現できておすすめです。

ナチュラルなイメージ

自然やエコなど、ナチュラルなイメージを表現したい場合には、鮮やかさを抑えた色で、類似色を多く使用するようにします。

真っ白ではなくベージュを、真っ黒ではなく濃い茶色を使用することでよりナチュラル感を増すことができます。
自然の中にある木や葉っぱなどの色をイメージして配色するのがおすすめです。

グリーンやイエロー系などの爽やかな色を差し色として使用するとまとまりが出るでしょう。

和のイメージ

和のイメージを表現するためには、和服、日本庭園や寺院、伝統芸能のイメージを思い出して、その中から数種類の色を選ぶようにすると良いでしょう。

同系色のグラデーションを取り入れると、着物の色使いなどのイメージにも重なり、話のイメージを表現することができます。
また、濃い色を入れて引き締めることもポイントです。

おしゃれな配色にするポイント

さて、ここまで配色の基本について解説してきましたが、
初心者の方や初めての場合、なかなかすぐにいい配色を考え出すのは難しいかもしれません。

そこで使えるのが、配色ツールです。

インターネット上でもフリーのタイプがたくさん紹介されていますので、
始めのうちはツールを活用して配色を決めるのも、簡単で間違いなくおすすめです。

配色比率を考えよう！

配色は色の組み合わせを考えるだけではなく、そのそれぞれの比率まで考えることが大切です。

例えば、3色で配色する場合、

• ベースカラー　70%
• メインカラー　25%
• アクセントカラー　5%　

この比率を考えて配色してみましょう。

ベースカラーとは、背景などのベースになる色、メインカラーは文字色など、アクセントカラーは所々に散りばめる色を指します。

この比率を意識すると、見た目にも美しい配色に仕上がるはずです。

白抜きを活用しよう！

文字を入れてデザインをする際など、ついつい文字を黒にしてしまいがちですが、
文字を白にしておしゃれに見やすくするというテクニックもあることを忘れてはいけません。

この文字を白で際立たせる方法を「白抜き」といいますが、その際には背景になるベースカラーをよく考える必要があります。

白抜きをする場合には、白と区別のつきやすい濃いめのカラーを選ぶ必要があります。
これが、白っぽいベースカラーだと、文字が読みづらくなってしまうため注意しましょう。

---

以上で配色の解説は終了となります。
配色の基礎について、理解は深まりましたか？

次のページからは、レイアウトや文字のデザインについて解説していきます。