初心者におすすめの同系色を使った配色デザインをプロが解説します!

似たもの同士は喧嘩が起きない

こんにちは、読むだけでデザインを学べる!デザイン研究所です!

フォローするだけでデザインを学べるTwitterアカウント
毎日デザインのポイントを解説するインスタアカウントを運営しております。

こちらのブログはインスタ投稿をより深く解説した記事になります!

今日のテーマ:同系色

同系色は初心者にとっても簡単に取り掛かれる配色です。+1色の同系色を加えるだけでデザインの幅が広がります。ではなぜ同系色でデザインの幅は広がるのか?

そんなことも含めて同系色を使ったデザインについて解説しています!

 

配色デザインのまとめ記事を作りました。こちらの記事も含まれています。ぜひご覧ください!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。デザインを作る上で色について迷うこと多いですよね。。。今回の記[…]

簡単な配色である同系色は初心者デザイナーにもおすすめ!

簡単な配色である同系色は初心者デザイナーにもおすすめ!

こちらが今回のデザインサンプルです。

同系色を使うことで簡単にまとまっています。

似たもの同士が集まると喧嘩が起きないようにデザインも似た色(同系色)を使うことで簡単にまとまります!

似たもの同士の同色系

今回のデザインサンプルでは3分割されていますが、上と下は青、真ん中は紺と同系色になってます。

配色で迷う人も多いですが同系色を使うことでかなり簡単にまとまります。

3分割されているデザイン全てが青だった場合、メリハリがありません。

それを真ん中だけ紺にすることでメリハリありつつ、まとまりもあるデザインを実現しています!

 

アクセントカラーとして黄色を使用したデザイン

また今回はアクセントカラーとして黄色を使用しています。

このように同系色+アクセントカラーを使うことでさらにメリハリあるデザインになりました!

アクセントカラーを使う際はあくまでも全体の中の数%〜10%の比率で使うとアクセントとなります。

 

ポイントとしては配色も説明できるかどうかです!今回は学び系のデザインに良く使われる青をメインに使っています。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

今回のデザインサンプルはかなりWEBサイトで見ることも多い分割のレイアウトになります。

なおこの三分割にしているデザインは過去投稿027「3枚の写真で3分割、斜めで区切ってみる」で解説しています!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]

 

簡単にまとめるなら同系色を使ってみよう

単調になりやすいのでアクセントカラーを少し加えるのもおすすめでした!

 

デザ研
次の章ではなぜ同系色を追加すべきか詳しく解説していきます!

なぜ同系色を加えた配色デザインにするべきなのか?

同色系を追加するべき理由とは?

同系色を追加すべき理由の1つは前述したまとまる=統一感ということでした。

統一感で言えば同系色を追加せずに1色でも良さそうですが、、、

同系色を増やすと圧倒的にデザインの幅が広がります!

 

 

例えば今回のデザイン。

同系色を増やすと圧倒的にデザインの幅が広がる

白文字の場合、紺色は見やすいですが、水色は少し見えにくいです。

このように+1色の同系色があれば、文字色によって背景色を選択可能です!

 

背景が黒っぽい場合は水色の文字色の方が読みやすい

またこのような背景が黒っぽい場合が逆に水色の文字色の方が読みやすいです。

つまり+1色の同系色があれば、背景によって文字色を選択可能です!

このように、、、

+同系色があることで統一感保ちつつ選択の幅が広がる

そんなことが可能なわけですね!

 

もっと同系色のポイントを使ったデザインが見たい方!

この記事で解説した同系色のデザインをもっと見たい方は、、、

デザイン研究所が運営する学べるギャラリーサイト「managary」へどうぞ!

もっと同系色のポイントを使ったデザインが見たい方!

 

デザ研
クリックすると同系色を使ったデザイン”だけ”が表示されます!

初心者におすすめの同系色を使った配色デザインをプロが解説します!まとめ

いかがでしたでしょうか?なんとなく同系色を選んでいた人も今回の記事でしっかり理由を持って配色できるかと思います。

また配色も簡単な方ですので同系色の配色は初心者の方にもおすすめです!

同系色を使った際には、背景や文字色によって都度見やすい方を選んであげると良いですね。

 

ちなみに多くの色についてのデザイン参考書も読んだことがありますが、

今回の記事のようなデザインの色について書籍で学びたいのなら「配色デザイン良質見本帳」がおすすめです!(なぜならこの本は実例+解説付きだからです)

他の配色デザインの本はただカラーのパターンが載ってるだけのものが多く、実例のデザインや解説がないのです!

 

こちらの記事は落ち着いたデザインまとめ記事にも含まれています!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 今回の記事では落ち着いたデザインにするテクニックを[…]

 

こちらの記事はシンプルなデザインまとめ記事にも含まれています!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 今回の記事ではシンプルなデザインを作るテクニックを[…]

 

こちらの記事ではチラシデザインまとめの記事にも含まれています!ぜひご覧ください。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 チラシデザインは実は結構難しいデザインです。笑[…]

・簡単にまとめられる同系色を使ってみよう
・同系色を使う理由は統一感を保ちつつ選択の幅が広がるため

 

 

この投稿をInstagramで見る

 

デザイン研究所(デザ研)ほぼ毎日投稿(@designkenkyujo)がシェアした投稿


全国対応で短期で習得するグラフィックのデザインレッスンをやっております、詳しくはこちらをどうぞ。

広告
>インスタでデザインを学ぶ

インスタでデザインを学ぶ

デザインの見る目を養うインスタアカウントを運営中!初心者から脱するデザインのポイントを解説しています。だいたい毎日更新です!

CTR IMG