配色のルール ― もう色選びで迷わない

配色には「型」がある

色相環の使い方、色のイメージを学んできました。でも、いざ実際のデザインで色を決めようとすると「結局どう組み合わせればいいの？」と悩む方が多いはずです。

安心してください。配色には「型」があります。型に当てはめるだけで、プロのような配色が作れます。

配色で大事なのは「センス」ではなく「ルールを知っているかどうか」です。

基本の配色ルール：70-25-5の法則

配色で最も重要なのは色の面積比です。

この比率を守るだけで、配色は自然にまとまります。逆に、3色が同じ面積だと「どこが大事かわからない」デザインになります。

ベース 70%

メイン 25%

5%

70-25-5の法則 ― 配色の面積比が整うだけでデザインはまとまる

配色の作り方 ― 5つのステップ

Step 1: メインカラーを決める

まずブランドや目的に合ったメインカラーを1色選びます。前の記事で学んだ「色のイメージ」を参考に、ターゲットに合った色を選びましょう。

Step 2: ベースカラーを決める

多くの場合、白か明るいグレーが無難です。メインカラーに近い色のごく薄いバージョン（明度を上げ、彩度を下げたもの）を使うと、統一感が出ます。

Step 3: アクセントカラーを決める

色相環を使って、メインカラーの補色か分裂補色から選ぶと、効果的なアクセントになります。

Step 4: トーンを揃える

選んだ色のトーン（明度と彩度の組み合わせ）を揃えましょう。ビビッドな青とパステルのピンクを組み合わせると、ちぐはぐな印象になります。

Step 5: 実際に配置して確認する

頭の中で考えるだけでなく、実際にデザインに配置して確認します。画面上で見ると印象が変わることはよくあります。

すぐ使える配色パターン

モノクロ配色

類似色配色

補色配色

無彩色 + 1色

4つの配色パターン例 ― まずは「無彩色 + 1色」から試すのがおすすめ

配色ツールを活用しよう

プロもゼロから配色を考えるわけではありません。配色ツールを使えば、色相環のルールに基づいた組み合わせを簡単に見つけられます。

• Adobe Color：色相環ベースで配色を作れる。写真からの抽出も可能。
• Coolors：スペースキーを押すだけでランダムに配色を生成。気に入った色はロックできる。
• 参考サイトのカラーを抽出：ブラウザの開発者ツールや拡張機能で、気になるサイトの色コードを調べることもできます。

配色例: 企業サイト風

配色例: ナチュラル系

配色例: ポップ系

70-25-5の法則を適用した配色例 ― 面積比を守ると自然にまとまる

まとめ

配色は70-25-5の比率を守り、色相環のルールで色を選ぶ。この「型」を覚えれば、もう色選びで迷うことはありません。

次は「色の対比と視認性」について学びます。色が読みやすさにどう影響するのか、アクセシビリティの観点からも重要なテーマです。