色の組み合わせが合っていない気がするけれど、どうしたら良いか分からない...スライド資料を作っている際に、色の組み合わせをに悩んでしまいやたら時間がかかってしまった、という経験は誰にでもあるのではないでしょうか。今回の記事では、デザイナーではないけれどもスライド資料などを実務上デザインする必要があるノンデザイナーの方に向けて、色で悩まないための配色のテクニックをご紹介します。いつ配色を考えるか前回の記事でもご紹介した通り、スライド資料など相手に情報を伝えるためのデザインでは基本的に使う色は4色です。この4色の内、ベースカラーの2色（背景色と文字色）は、基本的には白黒を選択するため配色を考える必要がありません。またメインカラーに関しては「まず最初に考える色＝他の色との相性を考える必要がない」ため色の組み合わせで悩むということはありません。配色に関して一番難しいのがアクセントカラーであり、これはメインカラーとの相性を考えなくてはならないため、悩んでしまうポイントでもあります。今回ご紹介する「配色のコツ」は、まさにこのアクセントカラーの配色に関して使えるテクニックと基礎知識です。色の基本色相 / 彩度 / 明度色を考えるにあたって最低限度抑えておきたい基礎知識が、色相、彩度、明度です。色相：色の違い彩度：鮮やかさの違い明度：明るさの違い上記が簡単な色相、彩度、明度の定義です。ノンデザイナーであれば、基本的にはこの程度の認識で問題ありません。ただ以下の2点はぜひ抑えておいて欲しいポイントです。色相環：違う色相を円状に配置したもの色相環の各色相は特性に合わせて意図を持って配置されています。そのため配色を考える際にとても便利なツールとなります。彩度/明度：基本的には同じ彩度明度を持った色の組み合わせが相性が良い彩度と明度が同じ色は馴染みやすく、異なる色は配色の難易度が高くなります。トーン(色調）トーン(色調)は彩度と明度が近い色を組み合わせた概念で、その色の集まりが持つ調子（「淡い色合い」や「ポップな色合い」など）です。違う色を組み合わせる場合、このトーンを合わせる＝明度と彩度が近いけれど色相が違う色を選択すると統一感が生まれやすくなります。極端な話をすると、ノンデザイナーであれば明度彩度ではなくこのトーン(色調)だけを意識すれば十分に美しくまとまったものを作ることができます。例えばスライド資料をつくる場合、色を選択するカラーパレットの横軸は同じトーンの色が並んでいます。カラーパレットから違う色を選ぶ場合はなるべくこの横軸はずらさないように色を選択するだけでも、見やすい資料になる可能性が大きくなるので、意識するようにしてみましょう。配色のコツ色相とトーンの4象限から組み合わせを検討するここからは具体的な配色のコツについて解説していきます。まずご紹介したいのが色相と色調(トーン)の4象限です。縦軸に色相、横軸に色調(トーン)を持ってきてそれぞれ「変える」「変えない」の2軸の組み合わせで表現したのがこの4象限です。色の組み合わせはメインカラーの次の色、つまりアクセントカラーを検討する際に初めて考えることになります。この4象限ではそのメインカラーとのあり得る組み合わせを表現しています。①メインカラーと「違う色相」で「同じ色調(トーン)」を選択する②メインカラーと「同じ色相」で「違う色調(トーン)」を選択する③メインカラーと「違う色相」で「違う色調(トーン)」を選択する基本的にメインカラーとの色の組み合わせを考える際は、上記の3つのパターンのいずれかから選択すると間違いがありません。次からは具体的になんの色の時にどのパターンを使うとよいのかを解説します。アクセントカラーのコツアクセントカラーを選ぶ際は基本的には、①のパターン「違う色相」「同じ色調(トーン)」を選ぶことをオススメします。特に目立たせたい時に使うのがアクセントカラーであるため、明らかに違うことが一目で分かりやすい方が望ましいからです。そして違う色相を選ぶ際には、悩みたくなければ「対照色相」と呼ばれる色を選択すると間違いがありません。対照色相とは色相環のある色から見て、正反対の位置にある色(補色)から少しずらした色のことを指します。正反対の色である補色も色の相性は悪くないのですが、対比が強すぎてしまい少しギラついたデザインになってしまいがちです。対照色相は補色からはずれた色であり、その分対比が弱まっているため、自然な違いが生まれやすく何も考えずに選んでもまとまりが出やすくなります。そのためノンデザイナーであり、デザインに時間をかけられない場合はとりあえず対照色相をアクセントカラーに選ぶのが無難です。5色目のコツ5色目が必要な時にはまず、メインカラーと色相は変えずにトーンを変えた色の組み合わせを検討するのが基本となります。色数が増えれば増えるほど、ごちゃごちゃとした見た目になりやすく配色の難易度が上がってしまいます。そうは言ってもここは5色目を使いたい、そういう場面もあると思います。そういった際には、メインカラーと同じ色でトーンだけ変えた色を使えば、ごちゃごちゃした見た目にならずに色だけを増やすことができます。ただ、色の違いが曖昧にはなってしまうので、もう少し色の違いを明確にしたい場合は「類似色相」と呼ばれる色を選ぶようにしてみましょう。類似色相は色相環のある色と隣合う色のことを指します。色相環は近ければ近いほど似た色が並ぶように配置してあるため、隣の色を選べばその色と近い、けれども違う色を選ぶことになります。色は基本的には近い色の方が調和しやすいため、この類似色相を選ぶことで、ごちゃごちゃせずにまとまったデザインにまとめやすくなります。その他配色のコツここまでアクセントカラーと5色目の配色のコツに関して解説してきました。この記事の最後にその他の色にまつわるコツを3点ほどご紹介します。彩度は適度にまず一つ目のコツは「鮮やか過ぎる色は使わない」です。鮮やか過ぎる色=彩度が高すぎる色は、目に優しくない色であり特にスクリーンに映した時にチカチカとした印象になってしまいます。そのためはっきりとした色を使いたいシーンでも、彩度を少し落として少しくすませた色を使うと間違いがありません。色に長けたデザイナーであればこうした色を上手に使うことも可能ですが、かなり難しいのでノンデザイナーであればこうした色を使うことを避けることをオススメします。文字背景のコントラスト2つ目のコツは「文字に背景色を使う場合はコントラスト比に気をつける」です。コントラスト比とは明度の違いです。文字に背景色を使う場合このコントラスト比が低い、つまり明度にあまり違いがないと読みづらくなってしまいます。(視認性が悪くなる）見やすさの基準はこの比率が4.5以上になることですが、普段の資料作成などでここまで厳密にやる必要はありません。読みにくくないかを少し意識的にチェックするようにするだけで十分なので、ぜひ普段の作業の中に取り入れるようにしてみてください。どうしても厳密にコントラス比をチェックしたい場合は以下のようなツールでコントラスト比を調べることができるので試してみてください。%3Cdiv%20class%3D%22iframely-embed%22%3E%3Cdiv%20class%3D%22iframely-responsive%22%20style%3D%22padding-bottom%3A%2052.5%25%3B%20padding-top%3A%20120px%3B%22%3E%3Ca%20href%3D%22https%3A%2F%2Fcolorbase.app%2Ftools%2Fcontrast-checker%22%20data-iframely-url%3D%22%2F%2Fiframely.net%2FslKZTmr%22%3E%3C%2Fa%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3Cscript%20async%20src%3D%22%2F%2Fiframely.net%2Fembed.js%22%3E%3C%2Fscript%3E真っ黒はNG最後のコツは「真っ黒は使わない」です。これは1点目の彩度の高い色は使わないと共通するのですが、真っ黒もとても彩度が高い色になります。そのため、文字色であっても真っ黒を避けて少し彩度を落とした黒を使うことをオススメします。カラーパレットで言えば左から二番目の黒を選ぶようにすると間違いがありません。まとめ今回は配色のコツに関してご紹介しました。色はノンデザイナーが特に頭を抱えやすいデザイン要素ですが、今回ご紹介したコツを使えばそこまで悩まずにサッと色を選ぶことができるようになるはずです。ぜひ資料作成などビジネスシーンで活かしてみてください。