お絵かき図鑑
お絵かき図鑑

配色デザインのポイントは?比率や白抜きのコツを知って見やすいデザインに。

更新日:2020.03.14
デザインの配色のポイントアイキャッチ

デザインの色合いを考えているのだけれど、様々な色の組み合わせからどの色を選べば良いのかが分からない…。綺麗で見やすいデザインにするための、色の決め方や法則はあるのだろうか?
そこで今回は、配色のポイントについてTwitterでまとめていらっしゃった、カトウヒカルさんの解説から、美しい配色の比率や白抜きの色の置き方を見てみましょう!

※この記事で紹介している内容はご本人の許可を得て掲載しています。

業界最大手のお絵かき学習サイト!今なら無料お試し実施中

充実の講師・講座数!様々なプロのテクニックをものにして描ける自分になろう!
自宅で好きな時間に自分のペースで学習できるので空いた時間に学べる!
まずは7日間の無料お試しで体験しよう!

詳細はこちら >

業界最大手のお絵かき学習サイト!今なら無料お試し実施中

充実の講師・講座数!様々なプロのテクニックをものにして描ける自分になろう!
自宅で好きな時間に自分のペースで学習できるので空いた時間に学べる!
まずは7日間の無料お試しで体験しよう!

詳細はこちら >

配色デザインのポイント

配色の比率について

美しい配色の比率

配色を行う時には3色を使って、それぞれの割合を70%25%5%にすると、美しい配色になるという基本があります。

ベースカラーは背景色などのベースとなる色、メインカラーは文字色などのメインとなる色、アクセントカラーはアクセントとなる色としています。

白抜きの色の選び方

白抜きでメインとベースの色を選ぶ

カトウヒカルさんが個人的にやっている配色方法とのことです。
まず、白抜き文字が置ける色を探しましょう。

青系なら、解説のように白抜き文字が見やすくなる青色を選び、ベースカラーかメインカラーに設定します。

白抜きでアクセントの色を選ぶ

ベースカラーとメインカラーが決まったので、後はアクセントカラーを選びます。

パターン①では、「ベース:青、メイン:白、アクセント:黄」の配色にしており、パターン②では、「ベース:白、メイン:青、アクセント:黄」の配色にしています。

今回は、青の反対色(補色系の色)の、黄色をアクセントカラーに選んでいます。この方法では、白に近い「黄色」が活躍するとのことです。

白抜きのバナーの作例

白抜きのバナーの作例

この配色で実際にバナーを作ると、解説の2種類のパターンのデザインになります。
どちらもベース・メイン・アクセントの配色バランスが整っており、見やすく内容も分かりやすいバナーになっています。

ポップでかわいい女の子イラストメイキング講座

人気イラストレーターちょん*先生のイラストメイキング講座!
7日間の無料お試しで体験できます!!

詳細はこちら >

ポップでかわいい女の子イラストメイキング講座

人気イラストレーターちょん*先生のイラストメイキング講座!
7日間の無料お試しで体験できます!!

詳細はこちら >

まとめ

美しい配色の比率や、白抜きで色を選ぶ際の方法のご紹介でした。配色方法が分からずにお困りの方や、綺麗で見やすいデザインを作りたいと思っていらっしゃる方は、カトウヒカルさんの解説を参考にしてみてください。


最後に、カトウヒカルさんのプロフィールをご紹介します。
カトウヒカルさんはWebデザイナーをしていらっしゃいます。サイトでは、『Webデザイン1on1レッスンチャンネル』を公開していらっしゃり、Webサイト制作の技術や知識を動画で学ぶことができます。
Twitterでは、デザインのレビューやノウハウといったお役立ち情報をご投稿していらっしゃいますので、ぜひご覧ください!
Webデザイン1on1レッスンチャンネル
カトウヒカルさんのTwitterはこちら

お絵描きのスタートはここから!超・初心者向けのイラスト入門講座!

なぞり描きお手本つき!
線の引き方練習から、最終目標のバストアップ(胸から上)の絵の描き方まで、分かりやすく解説♪
今なら無料お試し実施中!!

詳細はこちら >

光から描くキャライラスト講座

「光や影の色を鮮やかに表現したい!」
鮮やかな印象のイラストを描くためのテクニックを学ぼう!
今なら無料お試し実施中!!

詳細はこちら >

逆光イラストの描き方をプロが徹底解説!

逆光に焦点を当ててハイライトの付け方や影の付け方をプロが解説!
重ねムラブラシを使いこなして塗りの上達を目指そう!
今なら無料お試し実施中です。

詳細はこちら >

魅力的な男性ボディの描き方を学んでみよう!

男性の身体を魅力的に描く・塗るコツを解説!
今なら無料お試し実施中!!

詳細はこちら >
記事の先頭に
もどる
記事の先頭にもどる
22 620 174

×

Oekakizukan header 400x104