n2p blog
キャンペーンやSNSの
“ためになる”情報を
執筆しています。
センスがものを言う・・だけじゃない ロジカルな配色と助っ人ツールたち
更新日:2023.07.11 (公開日:2015/09/14)
色って、そのデザインの第一印象を決定する重要なファクターですよね。まさにセンスの問題だ！わたしもそう思っていました。でも、実はそれだけじゃないんです。今回は配色の仕方について書いていきます。
はじめまして。 今年の夏からN2Pでデザイナーの研修をさせていただくことになったタシマと言います。Photoshop初心者なので、先輩に教えていただきながら少しずつ色んなことを覚えていこうと思います。ソフトの操作方法や実用的な技術はもちろん、デザインのノウハウや基本的な知識を、このブログに書いていくので、皆様どうぞお付き合い下さい。
■この記事を読むと
•色の決め方ツーステップ
•配色を助けてくれる参考サイト がわかります！
■今回の課題
配色について教えてもらったことを自分なりにまとめてみよう！
ステップ１ 好みのやり方で一色目を決める
まずは最初の一色を決めます。それにあたって、 A自分の感覚で決めちゃう。 B既存のものを参考にする。 という二つの方法があるんです。
A自分の感覚で決めちゃう。
Aには２通りあって、A-1が『勘やフィーリングで決めちゃえ』ってやつです。なんだか響きがクリエイティブ。ふたつめが、A-2『素材となる写真やイラストがあればその中から一色選ぶ』。そうすると納まりがよくなります。 とにかく、デザインや題材のテーマに合わせて自分の好きな色を一色決めます。ここで決めた色を軸にほかのカラーを決めていくのですが、ここで注意したいのが、人間どうしても「自分の好きな色に偏りがちになってしまう」ということ。いくつもデザインを作っていくと、なんか全部似たような配色だなあ、、、そんな気がしたら注意してください。ちなみにわたしは黒や白、あとは深緑が好きなので、後でフォルダを見たらお葬式や森林みたいな色がテーマのデザインばっかり！なんてことにならないように気をつけます。
B既存のものを参考にする。
最初の一色がどうしても決まらない、素材写真もないし、テーマも具体化するには難しいなあ、、そんなとき。適当に決めちゃえ！なんて投げちゃうと、そのあとが辛いです。自分で選べなかったら、誰かの技を盗んじゃいましょう。何でもいいんです。どこかの国の国旗とか、何かのパッケージとか、道路標識とか、、デザインそのものをまるごと真似しちゃうのではなくて、色使いを真似してね。既存のデザインの配色って、実は与える印象や、色同士の相性を考えて作られていて、とっても参考になるんですよ。あとは、カラーパネルなるものを使ってみてもいいですね。 そこで、配色アイデアのヒントになるサイトを、少し抜粋して紹介したいとおもいます。 まず一つ目は、COLOURLOVERS。このサイトは、たくさんの人の配色アイデアをシーン別に紹介してくれています。今どんな色やデザインが人気なのかも知れるSNS要素も持ったツールです。もうひとつがADOBE COLOR CC。こちらはPHOTOSHOPを手がけたアドビさんのサイトです。アカウントでログインすれば自分の使いたいカラーテーマが保存できるのが便利。
参考 COLOURLOVERS ADOBE COLOR CC
ステップ２ 一色目から少しずつ範囲を広げていこう
ここからは、テーマカラーから少しずつ周りの色を決定していくだけ。少しずつ派生させてるように決めていきます。 ここで出てくるのが、Photoshopの機能です。まず、メイン画面からイメージ→色調補正→色相•彩度を選んでください。準備は出来ましたか？
モノクロマティックカラースキーム
明度−変える 彩度−変える 色相−変えない まず、明度、彩度、色相の三本のカラーバーのうち、明度と彩度のバーに注目。色相を変えずに明度と彩度を変えながら色を決定していく方法を、モノクロマティックカラースキームって言うんだそうです。色相で選択されているのが、この記事のステップ１で選んだメインカラーってわけです。
アナログカラースキーム
明度−変えない 彩度−変えない 色相−変える 対して、明度と彩度の値を変えず、色相だけ変える方法を、アナログカラースキームと呼びます。色相を変えちゃうから、調整の仕方によってはメインカラーと全然違う色に見えますが、実は組み合わせると違和感のないカラーが出来てるんです。 ここで注意！明度、彩度、色相を全部一気に調整してしまうと、全然無関係の色ができちゃって、色調補正を使うメリットは生かせないので注意してくださいね。
ちなみに。色相環をみてメインカラーの逆の色（１８０度反対）である補色を敢えて用いてメリハリを付けるやり方というのもあります。これを、コンプリメンタリーカラースキームと言います。
ここでも裏ワザ。上で紹介した通り、色を決めるには様々な方法がありますが、それでもイマイチしっくりこない…そんなとき。なんとテーマカラーに合わせて相性の良い色を表示してくれるツールがあるのです。ここでは二つ紹介したいと思います。
一つ目が、ウェブ配色ツール。特に、このツールはメインカラーに合った色をチョイスして、実際にウェブページのモデルに合わせてプレビューしてくれる機能があるので、実際に提案された配色を採用したらどうなるのか、イメージがわきやすいです。
もう一つのツールがPALETTON。このツールも主となるカラーに合った色を表示して、それを実際にページにしたらどうなるかを見せてくれます。PALETTONのすごいところは、作りたいイメージがポジティブ（明るめ）かネガティブ（暗め）か、白寄りか、黒寄りかの４パターンで違った配色を提案してくれるところ。
行き詰まったら、彼らに助けを求めてみるのも手です。
