配色が苦手な人でも、ツールに頼らずどの色が合うのかを見つけ出すヒント。

配色が苦手な人でも、ツールに頼らずどの色が合うのかを見つけ出すヒント。

「配色」という言葉を聞いただけで(∩゚д゚)アーアー キコエナーイとなるぐらい、配色が苦手な人は多いと思います。このブログでも色に関する記事は人気なことが多いので、多くの人が気になるところなんだろうなーと感じています。

実際自分自身についても、配色が得意というよりは、単純に色そのものが好き・配色する作業が好き、という感じです。なので分からない点もまだまだ沢山ありますが、Webデザインで配色をする中でどういうことをしてきたか、考えているかというのをまとめてみました。世の中には配色を助けるツールやWebサービスが沢山ありますが、苦手な人はあれこれツールを使わないほうが実力が付くと思いますので、ツールをすすめたりすることはこの記事ではしていません。では、どうぞー!

1.自分の好きな色を見つけよう

自分の好きな色を見つけよう

上達するにはそのものに対して興味を持つことがまず第一です。興味のないもの、苦手なものはそれだけで敬遠しがちですよね。かといって、いきなり色の知識をバリバリ勉強するのも疲れます。なのでまずは自分自身の好きな色はどれか見つけてみましょう。好きな色が見つかったら、その色のどういうところが好きかを考えてみましょう。色と向き合うことで、自分なりの考えを持つことができ色への興味がわきます。

2.色相環の12色に対する印象を書きだしてみる

色相環の12色に対する印象を書きだしてみる

好きな色を見つけたら、今度はそれぞれの色に対して感じる印象を書きだしてみましょう(頭で考えるだけでも良いと思います)。単語で良いので「明るい」とか「温かい」「落ち着く」など、思うことを書いてみましょう。本などを見ると、この色はこういう印象を与えますと書いていますが自分の感覚を高めるためにも、自分なりの考えを出したほうが良いと思います。

色については「12色の色が与える印象について。配色に困った時のいろいろ。」に詳しく書いています。

3.彩度と明度にこだわってみる

彩度と明度にこだわってみる

同じ色でも彩度と明度を変えるだけで、色のバリエーションが増えます。色を実際に選ぶ時は、彩度や明度を調整してみてもっと合う色がないか探してみましょう。彩度を低くすると落ち着いた印象になったり、明度を高くすると軽く見えるといった色のもつ印象も変わってきます。

4.メインカラー・サブカラー・アクセントカラーを決める

メインカラー・サブカラー・アクセントカラーを決める

配色に迷わないようにするには、どの色を使うのか最初に決めると後の作業が楽です。中心となるメインカラー、メインカラーの補助になるサブカラー、全体の中でピンポイントで使うアクセントカラーを最初に考えてみましょう。ベースカラー・メインカラー・アクセントカラーといった言い方もあります。Webデザインでは背景をメインカラー、テーマカラーをサブカラーとして考えるケースが多いようです。

5.色の面積にこだわってみる

テーマカラーはファーストビューで見せる

同じ色でも使う面積によって全然印象が違います。大きく使うということは、それだけその色の印象が際立って強くなってしまうのでバランスに注意しましょう。テーマカラーを前面に押し出したい時には、逆に意識して沢山使うのも良いと思います。

6.テーマカラーはファーストビューで見せる

テーマカラーはファーストビューで見せる

Webデザインだと最初に見える部分には紙面とちがって限りがあります。なのでテーマカラーがある時は、ファーストビューで目立つ見える部分にその色を使うと分かりやすいです。逆にファストビューでその色がないと、見る人は他の色が先に印象付いてしまうかもしれません。

7.色は基本的に使い過ぎない

色は基本的に使い過ぎない

配色が苦手な人は、あれこれ試しているうちに色んな色を使っていて統一感が出なくなることがあります。それだけ複数の色を使うのは最初は難しいので、まずは必要最低限な色にしぼるようにしましょう。例えば、そのサイトの中で緑は絶対に外せないとしたら、緑にする部分だけを決めて、その状態で他に色が必要かを考えていくと、順序立てて配色ができるので無駄な色を選ばずに済みます。ひとつの画面の中に3色以上の目立った色があると、統一感が取りにくく、元気なイメージが強く出やすいです。

8.目立たせる方法を色だけに頼らない

目立たせる方法を色だけに頼らない

例えば見出しを目立たせたい、キャッチコピーを目立たせたいという時に、黄色や赤といった目立つ色を使うこともあると思いますが、落ち着いたイメージで作りたい場合は派手な色は合わないこともあります。その場合は、色はあくまでそのイメージに合わせて、周りの余白を大きめにとったり、配色に影響しにくい白を使うと雰囲気を壊さずに済みます。色は見た目の印象を大きく左右させるものなので、イメージとはなれた色は使わないようにしましょう。

9.どの色を使えば良いかわからない時は、目的を一度ふりかえってみる

どの色を使えば良いかわからない時は、目的を一度ふりかえってみる

青でも良いし、緑でも良さそう、でも赤でも良さそう、結局どの色でも良さげ…というのが配色が苦手な人のパターンだと思いますが、そういう時は漠然と色を選んでいる場合が多いので、目的をもう一度振り返ってみましょう。作っているサイトはどういう印象を与えたいのか、テーマカラーはあるのかなど、逆にこの色はNGなど、色々な目的や要望があると思います。色選びに迷いやすい人は、最初の段階で使う色を限定していくと迷うことも少なくなります。

10.完璧は目指さず、より良い配色を目指す

完璧は目指さず、より良い配色を目指す

配色をしていて思うのが、「もっと良い配色があるんじゃ…」という懸念です。ただ、見る人によって色の印象は微妙に違っていて千差万別です。すべての人にとって最適な配色を提供する、というのは完璧を追い続けるようなものなのであきらめましょう。完璧を求めず、あくまで目的に沿ったより良いものを目指す気持ちでするほうが良いと思います。BestよりBetterの考えですね。

おわりに

色に苦手意識があると、うまくできなくて、やる気が起きない…という負のスパイラルになりがちです。まずは色に興味を持って、どの色がどういう印象になるのかを知ってみるのが良いと思います。慣れてきたら、この色とこの色を組み合わせたらどういう感じになるかな、など試してみてください。自分の中にアイデアや考えがないと、配色する時も判断ができないです。配色はセンスだけでは成り立たないので、数をこなしてやれば必ず上達できます。

というわけで、自分と同じく配色もっと上達したい!という方のヒントになればと思って書いてみました。それではー!!

関連記事を読む

配色が苦手な人でも、ツールに頼らずどの色が合うのかを見つけ出すヒント。

シェア・feed登録もどーぞ!

オンラインでWebの勉強ができるTech Academy

独学で勉強すると細かい部分が分からなかったり、一体何を覚えたらいいのか迷ったりませんか? Tech Academyなら、オンラインスクールだから場所を選ばずWebやプログラミングの勉強ができます。【無料の動画説明会】を一度ご覧ください!

TechAcademy [テックアカデミー]