非デザイナーでもできる！配色の基本ルール
- UI/UX
- 配色ルール
- 非デザイナー
目次
1. はじめに
1.1 記事について
資料やバナーを作るとき、「なんとなく色のバランスが悪い」「整って見えない」と感じたことはありませんか？ 実は“センス”ではなく、配色のルールを知らないだけでそう見えてしまうことが多いです。 今回は、非デザイナーでもすぐに実践できる「配色の基本」を3つのポイントで紹介します。
1.2 記事の対象
この記事は、非デザイナーに向けた配色の基本について紹介しています。
1.3 記事
この記事を読み終えるまでに、約10分です。
2.色を整理する
まず意識したいのは、色の役割を整理することです。配色を失敗する原因でよくありがちなのは、色を使いすぎている、色と機能がチグハグである、といった理由が挙げられます。
基本は以下の観点や機能を意識してメインカラー・サブカラー・アクセントカラーの３つに整理すると、全体のまとまりが良くなります。
1.1 メインカラー（ベースカラー）
画面の中で１番多く占める色です。
一般的には文字の視認性を意識して、白や黒、薄いグレーなどの無彩色を使用することが多いですが、世界観を優先しブランドカラーやコーポレートカラーを全面に使用することもあります。
1.2 サブカラー
画面の中で２番目に多く使用する色です。 一般的にはブランドカラーやコーポレートカラーを使用し、画面の世界観を印象付ける役割があります。
主に見出しや、要素の背景色、アイコンなどに使用することで、視線を引きやすくすることができます。
メインカラーにブランドカラーやコーポレートカラーを使用した場合は、同系色の彩度や明度の異なる色を使用することが多いです。
1.3 アクセントカラー
画面の中で、目立たせたい色です。 目立つことが重要なため、他の色とのコントラスト比を高くしたり、サブカラーの逆の色である補色を使用することが一般的です。 WEBであればCVボタンなどに使用すると良いです。
3.トーンを揃える
次に意識したいポイントは、色のトーンを揃えることです。 色のトーンとは明るさ（明度）、鮮やかさ（彩度）に分解できますが、これらがバラバラだと統一感がなく、クオリティが低い印象になります。
色のトーンは以下のグループに分類され、サブカラーのトーンに合わせて全体の配色を決めていきましょう。
なお、昨今のデザイントレンドとしては、少しくすみを加えたブライトトーンや、ソフトトーンの配色が主流となっています。
画像参考：https://sikiken.co.jp/products/60650.html
4.コントラストを意識する
最後に色選びで重要になるポイントが可読性です。 背景と文字の明度差が小さいと、どんなにまとまっていても読みにくくなります。 白背景に淡いグレー文字などは避け、はっきりとしたコントラストをつけましょう。
特にWEBの場合はアクセシビリティの観点でも、明度差をチェックできる「Colorable」などのツールを使うと便利です。
5.ツールやカラーパレットを参考にする
ここまでの説明で、何となく配色のポイントについて理解いただけたかと思いますが、結局どの色を選んで良いかわからない、という方が多いと思います。
そんな時は自分の使いたい色を１つ決めた後、以下のツールなどを参考にして、他の色を決めていくと良いと思います。
まとめ
配色は感覚ではなく、役割とトーンとコントラストの整理で決まります。 まずは色使いを整理し、比率と明度を意識してみてください。 それだけで、資料もバナーもよいクオリティの高いものになりますので、今後の制作物に活かしてみてください。
著者：T.O
弊社では、ECサイトのリプレース案件から、Shopifyカスタムアプリ開発、保守案件に至るまで、EC中心にプロジェクトの質にこだわり、お客様に笑顔になってもらえるよう日々邁進しております。
皆様からのお問い合わせ・ご相談をお待ちしております。
