前回書いたトーン（色調）を利用した配色で、爆速でデザインセンスを上げる（後編）のおまけを最後に書いて、色に関する記事を終わります。
配色のルール
色の組み合わせを考えるには、色の3属性を知って、爆速でデザインセンスを上げる（前編）に書いた色相環、カラーサークルを使って色の組み合わせを考えていきますが、メインで使う色数はまず3色くらいに絞ります。色数を増やしすぎるとまとまりが難しくなるためです。
メイン、アクセント、ベースのカラーを決める
その3色とは、メイン、アクセント、ベースカラーの3色のことになります。
メインカラー
デザインの中心になる色です。
メインカラーはロゴやH1（優先度が一番高い見出し）などに使用されることが多いため、明度の低い色が比較的扱いやすいかもしれません。もし、明度が高い色を使いたい時は、ベースカラーに明度の低い色を持ってきてコントラスト比を高めた方がよいです。（視認性を高めた方が効果が高いためです）
アクセントカラー
まさに文字通りですが、ポイントで画面にアクセントをつけたいときに使用したい、メインやベースと馴染みつつもメリハリをつけたい箇所に使用するものです。
ポイントとして使いたいため（例としてはボタン色や注意喚起のアイコン色、特に目立たせたい箇所や重要度の高いと思われる「ごく一部」に使用します）、メインやベースカラーより色合いが強いものを使用することが多いです。使用面積が広すぎるとメインカラーより悪目立ちしてしまうこともあるので注意しましょう。
ベースカラー
ベースカラーは画面の中で最も大きい面積を占める色になります。例で言うと背景や、間をもたせたい余白などに使用するため、メインやアクセントカラーと色馴染みが良い、かつ主張をしすぎない色を選択します。できるだけメインやアクセントカラーが際立つような配色を心がけます。
役に立つ配色サイト
理屈は分かったとしても、結局どの色が馴染みやすいのか理屈でわかりにくいところもあるかと思います。そういう時に便利な自動的に相性の良い色を選んでくれる無料オンラインツールをご紹介します。こういったツールは直感的に参考になるため、いくつか見てみることで、自然と理解が出来てくる部分があるかと思います。
- Adobe Color
- 直感的につかえて、写真やイラストなどから読み取ったカラーパレットを作成でき、PhotoshopやIllustratorなどの各種Adobe CCツールの配色の連携も可能なため、一元管理もしやすいです。
- 最近追加されたアクセシビリティツール（背景色と文字色のコントラスト比（視認性））が便利なのでオススメ！
- Nippon Colors
- 日本の伝統色から相性のよい組み合わせで直感的に選択できるサイト。印刷用のCMYKとWebで使い回せるWebカラーが確認できます。
- Happy Hues
- すでに選択されているパレットを選ぶだけで、サイト上で使う色合いを瞬時に変更し、相性を理解することができます。色選びで困ったときに、アイディアの参考にできます。
コメント