ワードプレスで新しくテンプレート(テーマ)をインストールしたら、見出しやメニューバーの配色に悩みませんか?

WEBデザイナーではないので色の使い方が分からないし、センスも無い。

そんな時は、即効で「プロが作った作品」を参考にしてます。

配色で迷ったら参考にしてるサイト

サイトのメインとなる色を決める

これからサイトを作るなら、テーマにあわせてメインとなる色を探していきますが、扱う商品や情報によって決めてます。

たとえば「健康」をテーマにするなら「緑」か「オレンジ」を選びますが、「緑」「オレンジ」といってもたくさん色があるわけです。

そんなときに役立サイトが「原色大辞典」というサイトです。
www.colordic.org
このサイトでには「原色」だけでなく、「和食」「パステルカラー」「モノトーン」があって、グラデーション風に並んでるのでイメージしやすいです。

実際に使う時は、たとえばダークオレンジを選ぶなら「darkorange #ff8c00」の部分をクリックすると見本が出てきます。

ちなみに、#ff8c00 ←これは「カラーコード」といって、ネットで使う「色の番号」のようなものです。

メインカラーもアクセントカラー同時に選べる

メインカラー・アクセントとなるカラーの色を、一度に選べる便利で簡単なサイトがあります。

[ HUE / 360 ] The Color Scheme Application

たとえば、健康サプリの紹介サイトでメインカラーを「オレンジ」とするなら、オレンジをクリックすると、

候補となる色だけが残ります

ここに出てくる色を使ってメインとアクセントとなる色を選べば、スッキリとキレイにまとまります。

雑誌からプロの配色を参考にする

有名なサイトを見ても参考になりますが、雑誌の表紙の配色も見ておくことをおすすめします。

Color of Book – 雑誌の色からhtml,cssで利用できるカラーチャートの紹介

どうです?
雑誌に使われてる「配色」がバッチリわかって、しかも「カラーコード」も一緒に出てきます。

アマゾンにある雑誌ならOKです。検索窓に「雑誌名」を入れれば候補が出てくるので、そこから選ぶと詳細が出ます。

プロの配色ですから、すごく参考になるはず。
私は結構ここのサイトから色のヒントをもらってます。

サイトの基本となる色から選んでいく

サイトのベースとなる色は背景に使う色なので基本は「白」か「薄いグレー」を使ってます。

ベース(背景)となる色が決まったらサイトのテーマによってメインカラーを決めます。

たとえば、

飲食系なら「赤」「オレンジ」
健康食品なら「緑」「オレンジ」
エステ・美容院なら「ピンク」「ブラウン」「ゴールド」
歯医者、整骨院なら「ブルー系」
これが職業別の代表的なメインとなるカラーです。

間違っても、背景となる色に「ビビッドカラー」とか使ってはダメですよ。
目が痛くて見えませんので。

まとめ

配色に迷ったらプロが作った参考サイトの配色を試してみる。
雑誌の表紙などの配色も参考になる。

色の配色の割合は、

  • ベースカラー 約70%
  • メインカラー 約25%
  • アクセントカラー 約5%

アクセントカラーは「キャンペーン」とか「目立たせて誘導」するときも使います。

とにかく、たくさんの色は使わないほうが、全体的にまとまります。