サイトの配色に困った時に使える 「配色の見本帳」がおすすめ

WordPressでサイトを作成していると、毎回迷ってしまうのが色の配色です。

例えば、

サイトの基本カラーは何色にしようか、

グローバルメニューの色は何色にしようか、

見出し(h2,h3,h4)は何色にしようか、

などなど配色に困ることがあります。

難しいカスタマイズはわからないけれども、せめて色でオリジナリティを出したい。。。自分に配色のセンスがあれば良いけれども。。。と、私のように悩んでいる方も多いのではないでしょうか。

私は自慢ではありませんが、色のセンスは全くないです。洋服であっても色の組み合わせが「すごいね」と悪い意味で言われるタイプです。

とはいえ、サイトの見栄えが悪いのは嫌なのです。

そこで最低限自分のオリジナリティを出した配色にしながらも、センスは普通と言ってもらえる配色について、私が利用しているサイトを紹介します。

スポンサーリンク

「配色の見本帳」がとても便利

私が使っているのは「配色の見本帳」です。

自分がこの色を使いたい!という基本カラーを1つ見つければ、あとは自動的に適切な配色を考えてくれるサイトだと思い、使わせていただいています。

例えば、Xeory BaseというWordPressの無料テーマを使った場合で説明します。

サイトの基本の色を1色決める

私はXeory Baseをテーマとして使い、基本の色はオレンジを使っているサイトがあります。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-18-11-12-01

このブログでは、基本の色の設定をオレンジにするだけでなく、グローバルメニューも同じオレンジ(#F37D3D)に合わせています。

このサイトの基本の色は、#F37D3Dと決めたのです。

このオレンジ(#F37D3D)とうまく調和する色で、サイドバーのカスタマイズや見出しのカスタマイズの色を決めたいと思いました。

WordPressの他のテーマを使う場合には、テーマにもともとある色ではなく、自分の好きな色を基本カラーにすることもあります。

例えば私が使っているPrincipleやSTINGERではサイトに使うカラーをほとんどカスタマイズで変更しました。

「配色の見本帳」を使う

次に「配色の見本帳」を開きます。

→「配色の見本帳」公式サイトへ

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-25-10-35-35

サイトを開くと、「色検索配色探し」というリンクが現れます。

ここをクリックします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-25-10-35-44

画面の上に色のコードを入れられる場所があるので、ここに自分が決めた基本カラーのコードを入力します。私の場合は「#F37D3D」です。

すると自分が入力した基本カラーにあった配色の例がたくさん出てくるのです。

例えばこの下の画像ようなイメージです。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-25-10-36-19

この画像に載っているよりもたくさんの配色パターンが出てくるので、この中から気に入った配色を選び、自分のサイトの色に利用することができます。

これで私のように色のセンスのない素人でも、まとまりのある配色でサイトを作ることができるのです。

サイトの色の配色に迷ったら、是非参考にしてみてください。

今日はサイトの配色に困った時に便利な「色の見本帳」を紹介しました。