13 620 130 new

絵の描き方やペンタブ情報などをお届け

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

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

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

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

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

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

詳細はこちら >

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

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

詳細はこちら >

配色デザインのポイント

配色の比率について

美しい配色の比率

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

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

白抜きの色の選び方

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

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

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

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

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

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

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

白抜きのバナーの作例

白抜きのバナーの作例

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

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

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

詳細はこちら >

クリスタでチャレンジ!厚塗り風イラスト講座

厚塗りのエッセンスを取り入れた「厚塗り風」イラストの製作工程を実演を交えて解説します。
厚塗りイラストに興味がある方、情報量の多い絵を描きたい方にオススメ!

詳細はこちら >

まとめ

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


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

髪の描き方講座

ショート〜ロング、テール系、三つ編みなど髪型別の描き方や、
きれいな髪の線画を描くコツを学ぼう!
今なら無料お試し実施中!!

詳細はこちら >

カラーのキャラクターイラストを完成させてみよう!

アタリ〜ラフ〜線画〜色塗り〜仕上げの手順とポイントを、初心者にもわかりやすく実演します♪
今なら無料お試し実施中!!

詳細はこちら >

立体感のある頭を描こう!

正しく頭の立体構造を理解して、アタリの取り方を知ることで
平面的な顔を卒業しましょう!
\ 7日間の無料お試し実施中 /

詳細はこちら >

意外と知らない!ラフの描き方講座

「ラフの時は良い絵に見えたのに、線画にしたら微妙……」 そんなふうに思ったことはありませんか? この講座では、そんなよくある問題を解決します!
7日間の無料お試しで体験できます!

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

×