みなさん、こんにちは。
あなたの探していたアイデアが見つかる
アイデア図鑑「Aiz」です！
このサイトを見ているということは
「上手くデザインがまとまらん…」
そんな不安を抱えている人だと思います。
現在はグラフィックデザイナーとして
活動している私ですが、
始めからデザインのセンスがあった…
訳ではないんです。。。
私は高校時代、
建築デザインを専攻してました。
CADという図面制作ソフトを使用して
自分で設計したオリジナル図面を
PCで描いて提出するという課題の時、
自分は何を血迷っていたのか
用紙の色を「緑」、
住宅部分を「紫」で塗って提出。
↓こんなイメージです。。。
さすがに、建築の先生にも
「お前は色の勉強した方がいい…」と言われるほど
ヒドい配色をしてしまっていました。
そこからデザインを勉強していきましたが
デザインにはルールがあることを知り
今ではデザイナーにまで成長できたんです！
今回は、そのルールの1つでもある
「3色ルール」についてご紹介します。
色決めの裏ワザも教えますので、
ぜひ最後まで読んで、そして実践して、
自分を進化させてください！
キレイに見えないのは「色の使い過ぎ」が原因？！
デザインがなかなか
上手くまとまらない原因。
それは統一感がないからです。
その原因の1つとして、
「色を使い過ぎている」ことにあります。
写真を例にあげてみましょう！
左の街並みの写真は、いろいろな物が写りすぎて
ゴチャゴチャして見えるので、
何を言いたいのか、よく分からないですよね。
これが「色を使い過ぎている」状態。
それに比べ、右の花の写真は、
「白い」花と、「白い」水面で
全体の色が統一されていてキレイです。
これが「色を抑えた」状態になります。
どうでしょうか？
せっかくのキレイな色味でも、入れ込みすぎると
逆に伝わりづらくなってしまうんですよね…
これを解決するのが、
今回紹介する「3色ルール」です！
これだけで変わる「3色ルール」
「3色ルール」というのは、
使用する色味を
3色以内に絞ることをいいます。
いまいちピンと来ないと思うので
王道の3パターンを紹介します！
【3色ルールの配色パターン】 ・ 1色 ＋ モノクロ ・ 2色 ＋ モノクロ ・ 3色 ＋ モノクロ
「無彩色」である「黒・白・グレー」
黒・白・グレー以外の「有彩色」の
比率を変えて組み立てていきます。
ここで勘のいい人は
「無彩色のモノクロは色数に含めないの？」
と疑問になったと思います。
モノクロは色味を持たないので、
どのデザインにも溶け込んでくれます。
ですので、カウントしても、しなくても
どちらでもOKなんです。
モノクロ、超便利ですよね！
1色＋モノクロ
シンプルな内容のデザインには
「1色＋モノクロ」構成がオススメです。
背景全体に有彩色(今回は黄)を塗って
文字をモノクロで入れるのがやりやすいです！
2色＋モノクロ
少しアピールポイントを増やしたい時は
「2色＋モノクロ」がオススメ。
このパターンが1番使いやすい印象です！
基本的には「1色＋モノクロ」構成に
ポイントとなる部分に「＋1色」強調を
加えてあげる考え方になります。
3色＋モノクロ
2色構成よりも、
さらに1色加えたパターンが
「3色＋モノクロ」構成になります。
色数が多くなってしまうので、
3パターンの中では上級者向け。
基本的には、
「1色＋モノクロ」or「2色＋モノクロ」
で十分作れますので意識してみてください！
配色決める裏ワザを紹介！
写真やモノから色を取る。
でも、そもそも
「色の決め方が分かんないんだよね…」
そういう人も多いかと思います。
そこで自分が愛用している
配色の裏ワザを1つお伝えします！
それは、
「背景の写真やモノから、色を取る」です！
実は、このデザインも
背景のマカロンの写真から
緑・赤・ベージュを取っています。
背景と同じ色味を取っているので
当然、統一感が生まれてまとまりますよね！
Adobe Colorで色味を決める。
色味が少ない写真やモノの場合は
2色目、3色目をどれにしようか
困ると思います。。。
そこで、登場するのが
「Adobe Color」です。
こちら無料で使えるのでオススメです！
使い方は、まず5つある色の真ん中に
今決まっているメインカラーを入力します。
Enterを押すと、、、
左のメニュー(類似色やトライアドなど)の
項目にしたがって、メインカラーに合う色を
自動で選んでくれます！
他にも、「探索」メニューでは
色を検索することができますので、
ぜひ使ってみてくださいね！
色を取り出してみよう！
実際に、写真やモノから
色を取り出す方法を解説します。
Photoshopでの色の取り出しは、
「スポイトツール」で可能です。
クリックして取り出した後、
四角形が2枚重なったアイコンを選択して
カラーピッカーからコードを取得できます！
Canvaでの色の取り出しは
手動ではできませんが、
Canva側が自動でやってくれます。
写真1枚につき、5色までですが、
自動で取得してくれます！有能です！
有彩色のみについて解説しましたが、
無彩色のコツは下の記事にて解説してます。
超重要ですので、ぜひ一緒にご覧ください！
今回はデザインを上手くまとめる
配色の方法について解説していきました。
写真から抽出する方法は、
いちいち「どの色を使おう？」とか
手を止めて考える時間が減るので、
時短にも繋がる手法です。
ぜひ今、あなたが取り組んでいる
デザインや資料作成にも
活かしていってください！
今後も様々なアイデアを
デザインと共に紹介していきますので
お楽しみにしていてくださいね！
デザインの無料アドバイス、やってます。
ここまで詳しく解説してきましたが、
実践するのはあなた自身。
時には、つまずいたり、
分からなくなる事もありますよね。
でも、デザイン詳しい人なんて
周りにいないし、どうしたら…
そんなあなたに吉報です！
現在、自分は「公式LINE」を運営し、
このたび、LINEの友達登録者限定で、
デザインの無料相談を開始しました！
現役デザイナーに直接相談できるチャンス！
ぜひ、活用してみてくださいね↓
コメント