【保存版】サイトの配色に役立つツールやサイト18選

WordPress のカスタマイズは順調ですか？　目指していたサイトに近づいていっていますか？　この記事ではサイトの印象を決める配色について、役立つツールなどを紹介します。
まず、そもそも論として、配色は非常に重要です。サイトのレイアウトに関しては、ワンカラムか 2 カラムか、もしくは 3 カラムか。サイドバーの配置は右か左か両サイドか。実際あまり選択肢はありません。最近は横にスクロールできるサイトなんかも増えてきていますが、基本的にビジネスで集客やセールスに使おうと思うなら縦スクロールで十分です。もちろん、どんなレイアウトを選ぶかは非常に重要ですが、レイアウトではあまりオリジナリティは出せないということです。
じゃあどこでオリジナリティを出すかというと、、、“配色”というわけです。写真や画像、イラストも超重要なんですが、正直ここは素人ではどうしようもない部分があります。ですが、配色は別です。スキルやテクニックは必要ありません。センスすら必要ありません。なぜなら、パクれるからです。
例えば、こちらの配色ツール。
▶ ウェブ配色ツール Ver2.0
基本の色を指定すれば、サイト全体の配色サンプルを教えてくれます。
また、オシャレなウェブサイトのサンプルを大量に集めたリンクサイトもたくさんあります。このようなサイトを見て、気に入った配色があればマネすればOKです。配色に関して役立つサイトがいくつもありますので、以下に紹介しておきます。

配色に役立つサイト・ツール集

配色

レイアウトにそって配色を決めてくれるサイト
▶ ウェブ配色ツール Ver2.0
色の組み合わせを提示してくれるサイト
▶ https://kuler.adobe.com
こちらも色の組み合わせを教えてくれるサイト
▶ http://colourco.de/
フラットデザイン向きの配色を提案してくれるサイト
▶ http://hue360.herokuapp.com/
色についての基礎がまとめてあるサイト
▶ http://iro-color.com
Webで使える色辞典
▶ http://www.colordic.org

WEBデザインサンプル集

▶ http://webdesignsample.net
▶ http://www.ysig.jp
▶ http://bm.s5-style.com
▶ http://lp-web.com
▶ http://e-32.net
▶ http://www.landingpage-link.jp
▶ http://onepagelove.com
▶ http://muuuuu.org
▶ http://land-book.com

ブラウザ上の色をチェックする方法

GoogleChromeプラグイン
▶ カラーピッカー
Firefoxプラグイン
▶ Rainbow Color Tools

おまけ

各種雑誌の配色を確認できるサイト
▶ http://colorchart.jp

素人がやってしまいがちなダメな配色

ぼくはセールスコピーライターなので、デザインをするときに重視することが文章中心の視点です。つまり、いかに文章・コピーに注目してもらうか？　読んでほしい部分を読んでもらうにはどうしたらいいか？　どうやって重要な言葉を目立たせるか？　訪問者に迷わず商品購入までいってもらうにはどうしたら分かりやすいか？　などの点がデザインの基準になります。
実際集客やセールスをするためには、商品・サービスの良さや必要性、メリットなどを “言葉を通して” しっかり伝えないといけません。商品自体のデザイン性を売りにしているのでない限り、誰もデザインが決め手になって買ったりはしません。
もし、中学生対象の塾を探している親が「このサイトのデザインおしゃれだからここにしよう」なんて言い出したら、その親の判断基準を疑いますよね？　他の商品・サービスにも、ほとんどこの原則が当てはまります。ですので集客やセールスを目的としたサイトをつくるなら、コンテンツ（＝中身、そのサイトが何を言っているか？）が重要になってくるのです。

サイトのデザインは信頼性に影響する

ちなみに、逆はありえます。逆というのは、「このサイトのデザインは素人っぽいからやめとこう」という判断です。
サイトのデザインが購買決定などの直接的な動機になることはまぁ考えにくいのですが、逆はありえるというわけですね。デザインは信頼性や印象に関わってきますので、ビジネスの内容に合わせて相応のデザインが必要になります。この点も業種によってどうすればいいかは変わってきます。例えば弁護士のホームページなら、信頼感のある落ち着いた色である方がいいですよね。

正直、引き立て役が大事

話を元に戻します。配色の重要性は今更語るまでもないと思いますが、重要なのは、どうやったら大事な部分、見てもらいたい部分を目立たせることができるかという点です。素人がやってしまいがちなのは、この大事な部分が多すぎるとうことです。至る所が主張しすぎています。たくさんの色を使って目が痛くなるような目立たせ方をしています。
配色だけじゃなく、写真やイラストを使うときもやってしまいがちです。色んな写真やイラストが主張しすぎて、どれが大事なのかが分からないのです。
もしかしたら、これらはデザインの問題ではなく、企画やコンセプトの問題かもしれません。重要な部分を絞りきれていないのです。なんでもかんでも伝えようとして、色々サイト内に盛り込みすぎてしまっているのです。しかしユーザーからは、ごちゃごちゃしすぎて何が大事なのか分からなくなります。それで結局何も伝わらないのです。
集客するなら集客に目的を絞る。販売するなら商品を絞る。このような構成が効果的です。大事な部分を目立たせるためのデザイン。そのために大事な部分を絞るという視点。大事な部分でも捨てるという戦略。本筋からそれる部分は潔く削るという作業が必要になってきます。
こういった点を踏まえて配色・デザインを考えていってください。