デザインの色合いを考えているのだけれど、様々な色の組み合わせからどの色を選べば良いのかが分からない…。綺麗で見やすいデザインにするための、色の決め方や法則はあるのだろうか？
そこで今回は、配色のポイントについてTwitterでまとめていらっしゃった、カトウヒカルさんの解説から、美しい配色の比率や白抜きの色の置き方を見てみましょう！
※この記事で紹介している内容はご本人の許可を得て掲載しています。
配色デザインのポイント
配色の比率について
配色を行う時には3色を使って、それぞれの割合を70%・25%・5%にすると、美しい配色になるという基本があります。
ベースカラーは背景色などのベースとなる色、メインカラーは文字色などのメインとなる色、アクセントカラーはアクセントとなる色としています。
白抜きの色の選び方
カトウヒカルさんが個人的にやっている配色方法とのことです。
まず、白抜き文字が置ける色を探しましょう。
青系なら、解説のように白抜き文字が見やすくなる青色を選び、ベースカラーかメインカラーに設定します。
ベースカラーとメインカラーが決まったので、後はアクセントカラーを選びます。
パターン①では、「ベース:青、メイン:白、アクセント:黄」の配色にしており、パターン②では、「ベース:白、メイン:青、アクセント:黄」の配色にしています。
今回は、青の反対色(補色系の色)の、黄色をアクセントカラーに選んでいます。この方法では、白に近い「黄色」が活躍するとのことです。
白抜きのバナーの作例
この配色で実際にバナーを作ると、解説の2種類のパターンのデザインになります。
どちらもベース・メイン・アクセントの配色バランスが整っており、見やすく内容も分かりやすいバナーになっています。
まとめ
美しい配色の比率や、白抜きで色を選ぶ際の方法のご紹介でした。配色方法が分からずにお困りの方や、綺麗で見やすいデザインを作りたいと思っていらっしゃる方は、カトウヒカルさんの解説を参考にしてみてください。
最後に、カトウヒカルさんのプロフィールをご紹介します。
カトウヒカルさんはWebデザイナーをしていらっしゃいます。サイトでは、『Webデザイン1on1レッスンチャンネル』を公開していらっしゃり、Webサイト制作の技術や知識を動画で学ぶことができます。
Twitterでは、デザインのレビューやノウハウといったお役立ち情報をご投稿していらっしゃいますので、ぜひご覧ください！
Webデザイン1on1レッスンチャンネル
カトウヒカルさんのTwitterはこちら
