何色を使えばいいの?カラーと配色の基本についてわかりやすく図解します【3色だけでデザインは完成】

デザインの基礎
  • プレゼン資料を作る際に何色を使えばいいか迷う
  • チラシや広告を作る際の配色に迷う
  • SNSに投稿する画像の配色に迷う

このように何かをデザインする際、配色に迷うことがあると思います。

そういった際のカラーと配色の基本について解説します。

このブログもカラーと配色の基本を守る前は統一感のないデザインでした。
 
大見出し1
 
「自分の好きな色を使いたいんだけど設定するとイマイチ…」という方は、この記事を読むと改善点が見えてくると思います。

カラーと配色の基本

それでは配色の基本について図を使ってわかりやすく解説していきます。

配色の重要性

配色は情報をわかりやすく伝えるための重要な要素です。

配色の良い例と悪い例

大見出し1
 
良い例の配色の方がまとまりがあって、資料を読む気になりませんか?

悪い例はバラバラな印象を与えてしまい、読んでるうちに疲れてしまいそうです。

配色を考慮するだけで受け手の印象も変わってきますよね。

配色の選び方

配色を決める際は好きな色を基準に選ぶのではなく、ルールに沿って色を使うことが大事です。

  • 3色以内におさえる
  • 色の割合を意識する
  • 配色見本を使う

配色の割合

大見出し1
 
この比率で配色すると、バランスの取れた美しい配色になるとされています。

ベースカラーは基本的に無彩色(白やグレー)が好ましいです。

他のどんな色ともぶつかりにくいからです。

配色見本

大見出し1
 
自分で好きな色を3色選ぶのではなく、必ず配色見本を参考にしましょう。

色の明るさ、鮮やかさ、色相がきちんと計算されているので調和した配色を提案してくれます。

では使いやすい配色見本のサイトをいくつか紹介しますね。

その①『coolors』


(引用:https://coolors.co/5c6f68-8aa39b-95d9c3-a4f9c8-a7fff6)

『coolors』はスペースキーを押すたびに5色のカラーパレットがランダムで表示されます。

もし5色のうち気に入った1色があれば、その色だけをロックして別の4色のパターンを表示することが出来ます。
大見出し1

ひたすらスペースキーを押し続ければいいので楽ですね。

その②palettable


(引用:https://www.palettable.io)

出てきた色を「スキ:like」か「キライ:Dislike」で判断していくと自分好みの配色が完成します。

5色の組み合わせまで選べます。

直観で操作できるの使いやすいサイトです。

配色ツールその③pigment


(引用:https://pigment.shapefactory.co)

2色の組み合わせから選べます。
左側で明るさも調整できますね。

コントラストのある配色にしたい場合に向いてます。

配色ツールその④canva


(引用:https://www.canva.com/ja_jp/learn/100-color-combinations)

こちらはツールというより100個の配色パターンが載ってるページです。

夏っぽい、都会っぽい雰囲気、などイメージで色を選べます。

配色技法

さきほど紹介した配色サイトでの配色を使えば問題ないですが、パターンとして構築された配色技法を3つ解説しますね。

①ドミナントカラー配色<同色系でまとめる初心者向け>

大見出し1
 
ドミナントカラー配色とはひとつの色相だけで配色することです。

例えばうすい緑色、濃い緑色、鮮やかな緑色で構成することです。

緑色しか使わないので失敗することがまずありませんね。

②ドミナントトーン配色<同じトーンで揃えた多色配色>

大見出し1
 
ドミナントトーンとは明るさや鮮やかさを揃えた色で構成することです。

例えばくすんだ緑、くすんだピンク、くすんだ黄色で構成すれば違和感なくなじみます。

カテゴリーで色分けしたい場合などに役立ちますね。

③トーンオントーン配色<明度に差をつけてメリハリを>

大見出し1
 
トーンオントーン配色とは明るさに大きく差をつけた色同士で配色することです。

例えば明るい緑に対して暗い緑を使うことです。

ドミナントカラーの一種ですが、まとまりをだしつつメリハリをだすことができますね。

引き締めたい時にこのトーンオントーン配色を使えば、黒を使った時ほど強いインパクトにならないので便利です。

配色する際の注意点

トーンを意識する

大見出し1
 
トーンとは色の明るさと彩度のことです。

悪い例のようによく似たトーンの色同士を近づけないようにしましょう。

明るさや彩度が似てると濁った感じがしてしまうのと、コントラストが弱くなってしまいます。

まっ黒を使わない

大見出し1
 
なるべく黒(カラーコード#000000)は使わないことをおすすめします。

真っ黒だとどうしてもインパクトが強すぎてしまうんですよね。

なので黒を使いたい場合は黒に近い色が優しくていいと思います。

まとめ

以上配色の基本について解説でした。

  • 3色以内におさえる
  • 色の割合を意識する
  • 配色見本を使う
この3つをおさえていれば大きく失敗することはないです。

ちなみに配色についてもっと勉強したい、という方にピッタリな本を最後に紹介しておきます。
 

デザインを学ぶすべての人に贈るカラーと配色の基本BOOK

 
他の本に比べて初心者向けに書かれてるので、実践しやすいテクニックが多いです。

自分の好きな色だけを選んでいたことは失敗だったんだと気づかせてくれました。

では今回の配色の基本をいかして、この記事で紹介してるデザインツールを使ってデザインしてみましょう。

デザインを始めるんだけど何を使えばいい?基本の素材サイトを5つまとめました【これさえあれば無料でおしゃれなデザインが可能】

今回はここまでです。