こんにちは、読むだけでデザインを学べる！デザイン研究所です！
デザイン特化メディアでは国内最大級のTwitterとインスタグラムを運営しています。
初心者脱出のための配色知識を解説していきます！それが無彩色＋2色を使いこなすこと。無彩色＋1色は初心者におすすめの配色ですがそれだけだとパターンが限られます。
もう一色増やすことによってかなり幅が広がる。この記事では３つのパターンと３つの割合について覚えやすい形で解説しています！
無彩色+2色は3×3で pic.twitter.com/fS23UwruJs
— デザイン研究所 (デザ研) (@designkenkyujo) November 26, 2020
配色デザインのまとめ記事を作りました。こちらの記事も含まれています。ぜひご覧ください！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。デザインを作る上で色について迷うこと多いですよね。。。今回の記[…]
初心者デザイナーを脱するコツは2色の配色！
こちらが今回のデザインサンプルです。
無彩色＋2色で作っています。
白黒グレイからなる無彩色に二色で配色したデザインの紹介です。この配色はかなり作りやすい！
なぜおすすめできるかといいますと、2色という少ない色数なので難易度が高くないこと。
そして2色あるのでそれぞれを色んな割合で使えるバリエーションもあります。その意味で作りやすさが二重丸とさせていただきました！
過去投稿181では無彩色+一色で簡単シンプルな配色を紹介しましたが、これが二色になるだけでパターンの選択肢がかなり増えるわけですね。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化メディアでは国内最大級のTwitterとインスタグラムを運営しています。今日のテーマ：無彩色＋１色悩まれる人の多い配色についてかなりオススメの配[…]
今回のデザインサンプルでは無彩色+赤と青の二色を使用しました。この赤と青は対照色の関係でかなりメリハリのある配色になってます。(メルカリなどこの配色ですね)
対照色の他にも類似色や補色など2色あることで作れます。またそれら配色とは別に割合でパターンを生むことも2色なら可能です。
メインのカラーを1色とサブカラーで1色のような関係や、メイン1色でアクセントとしてもう1色など。
このように2色は配色の知識が必要になるためにステップアップとなるのです。(2色の配色については次章で詳しく解説)
このように2色あれば配色と割合の違いでかなり多くのパターンを生めますね！
つまりこの無彩色+2色は、3色以上の配色より色数が少ないことにより簡単に作ることができ、無彩色+1色より配色のパターンが断然多いのです。
その意味で作りやすさ◎なわけです！ということでぜひ無彩色+2色で作ってみてください。
無彩色＋2色の配色は作りやすさが◎！
2つの色を使いこなして初心者を脱出しましょう。
シンプルでおしゃれな2色の配色デザインのコツを解説します。
この章では無彩色＋2色の配色のコツをお伝えしていきます！それが3つのパターンと3つの割合で考える方法です。
2色の配色は主にこの3つのパターンが考えられます。
- 対照色
- 類似色
- 補色
です！これら2色の配色はこれら3つのパターンをまず考えることになるかと思います。
これらの配色を考える際に、色の組み合わせを覚えておかなければいけませんが難しいですよね？笑
なので配色のWEBツールを使います！palettonというサービスです。無料で使えてすぐにこれら3つのパターンを導いてくれます！
使い方はこちらのブログ記事に詳しく書いてますのでぜひ読んでみてください！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
次に割合です。主に3つの割合しか考えられません！
- 5：５
- 7：3 ( あるいは６：４)
- 9：1 (あるいは8：２)
先ほど決めたパターンをこれらの割合で配色するということです。
ここからはそれぞれ3つのパターンを紹介していきます！
５：５、つまり１：１の配色はこのような対比構造でよく使われます！
このデザインサンプルではフォトショとイラレの対比のために配色も1:1となっています！
対比構造のデザインはこちらの記事で詳しく解説しています。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化メディアでは国内最大級のTwitterとインスタグラムを運営しています。今日のテーマ：2分割のデザイン2つの要素を対比させた、○○×○○や○○v[…]
7：3 ( あるいは６：４)の配色はメインの色が一色あってサブの色がもう1色あるイメージです。
このサンプルではメインの色がベージュ、サブカラーが紺色となっています。
サブカラーはメインカラーを補う役割を果たします。このサンプルの場合は紺色をサブとすることでグッと引き締まった印象となっています！
9：1 (あるいは8：２)の配色はメインカラーとアクセントカラーの関係です。
このデザインサンプルではメインが赤色、アクセントカラーで黄色を使っています！黄色がある位置というのはクリックという行動催促の部分です。
このアクセントがあることによって見る人を次のアクションに導いています！
無彩色＋2色は３パターン×３つの割合で覚えよう！
全てをバラバラに覚えると大変ですが、このように覚えることですっきりしますね。
もっと無彩色＋2色のポイントを使ったデザインが見たい方！
この記事で解説した無彩色＋2色のデザインをもっと見たい方は、、、
デザイン研究所が運営する学べるギャラリーサイト「managary」へどうぞ！
初心者デザイナーを脱する配色のコツ。2色で作るおしゃれなデザイン！まとめ
いかがでしたでしょうか？無彩色＋2色の配色を解説していきました。無彩色＋1色が初心者におすすめだとしたら、この無彩色＋2色は初心者脱出したい方におすすめです！
＋1色より難易度が少し上がりますが、それ以上に＋1色より多くのパターンが考えられます！
色は迷われる方が多いですが、今回の記事が参考になれば嬉しいです。
ちなみに多くの色についてのデザイン参考書も読んだことがありますが、
今回の記事のようなデザインの色について書籍で学びたいのなら「配色デザイン良質見本帳」がおすすめです！(なぜならこの本は実例＋解説付きだからです)
他の配色デザインの本はただカラーのパターンが載ってるだけのものが多く、実例のデザインや解説がないのです！
こちらの記事はWEBデザインまとめ記事にも含まれています！WEBで使える32種類のテクニックをまとめました！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 WEBデザインには色々なテクニックが散りばめられて[…]
・無彩色＋2色は3パターン×3つの割合で覚えよう
この投稿をInstagramで見る