デザイン決めの時に注意したい8個のポイントとオススメの無料カラーツール19選

どのようなデザインにおいても、基本である配色は非常に重要な要素です。しかし、感覚的に思える作業なだけに苦手だと感じている方も多いのではないでしょうか。

多くの方がつまづく配色ですが、理論をもとにすればスムーズかつ的確に色を選定することができます。配色のポイントを知り、あとはツールを使うなどして選びましょう。

そこで今回は、デザインの配色で悩む方に向け、9個のポイントと、オススメのカラーツールをご紹介します。いつも配色が上手くできない、と感じている方の参考になれば幸いです。
　　

配色決めで注意したいポイント

1. 初めから色を選択しない

デザイン作業の初めからすぐに色を選んだり、使ったりしてみたくなりませんか。こうすると、つい色選びや色の調整に時間を費やしてしまい、ほかの作業になかなか進めなくなります。

そこで、まずはレイアウトから取りかかりましょう。どこにどんな要素が必要かをしっかり決め、そのあと色決めに取りかかることで、作業時間を節約することができます。
　　
色にはそれぞれ心理的効果があり、人々の心理・行動に大きな影響を与えています。
色の意味を無視すると意図していないイメージが伝わってしまうことになりますので、その色がどのような印象を与えるかを把握して選びましょう。

一例として、各色には以下のようなイメージがあります。

赤：情熱、興奮、活発
青：信頼、清潔、寂しさ
橙：にぎやか、家庭的、ビタミン
黄：明るい、楽しい、軽い
緑：おだやか、生命力、環境
紫：エキゾチック、神秘、下品
桃：アイドル、ヒロイン、可愛らしさ
白：純粋、刷新、平和
黒：クール、上質、重力

2. 配色の比率を守る

http://www.m-hand.co.jp/design/4002/

配色を考える時には、役割別に3つの色を選択し、比率を守ることで美しい配色が作れます。
厳密に計算する必要はありませんが、ベースカラー：サブカラー：アクセントカラー＝70%：25%：5%が比率の目安です。
　　

3. カラーホイールを使って色合わせをする

http://iro-color.com/colorchart/color-wheel.html

数色を選ぶ際に上手く組み合わせができない、というときはカラーホイールを活用しましょう。
配色のルールに沿って組み合わせれば、上手く色を選ぶことができます。
一例として、配色のルールには以下のようなものがあります。

コンプリメンタリー配色
カラーホイールの反対側、補色を組み合わせた配色

スプリット・コンプリメンタリー配色
カラーホイール上のある色と、その補色の両隣の2色を用いる配色

トライアド配色
カラーホイールで等しい距離にある3つの色を組み合わせた配色

アナロガス配色
カラーホイールで隣同士の色を組み合わせた配色

4. 真っ黒、グレーの使い方に注意する

様々なデザインにおいて用いられることが多い黒・グレーですが、使い方には注意したい部分もあります。

例えば、Webデザインで一見「真っ黒（#000000）」に見える色でも、カラーコードを見てみると「見た目が黒に見える色）」だったりします。これは、コントラストが高過ぎて見づらかったりチカチカして見える、インパクトがありすぎる、などの理由があるからです。

また、彩度がないと親しみにくい印象を与えてしまうこともあります。幅広いシーンで重宝する色なだけに、注意して使いたいところです。
　　

5. 自分のアイデアだけに頼らない

https://dribbble.com/

自分で考えるだけでは、どうしてもアイデアが浮かばないこともあります。そんな時は、Dribbble、Behanceといったコミュニティーサイトを見てみましょう。たくさんのデザイナーの洗練された作品から、良いインスピレーションが得られることがあります。
　　

6. 時には身の回りのものからインスピレーションを得る

http://www.ashinari.com/2016/12/13-394592.php?category=2

デザインのインスピレーションは身近なものから得られることもあり、特に、森、川、海などの自然からは魅力的な配色アイデアが生まれることがあります。
　　

7. 色選びは感覚に頼りすぎない

http://hue360.herokuapp.com/

感覚だけで色を選んでしまうと、時間がかかったり、適切な色選びができないこともあります。色選びで行き詰まった時には、配色ツールを活用してみましょう。