【やらなきゃ損】Amazonギフトチャージでサクッと1,000円ゲット >>

ブログやサイトの配色を決める際に役立つサイト19選【保存版】

 

ブログやサイトの配色ってなかなか決められないですよね。
(絶賛悩み中)

 

今日は配色を決める際におススメしたいサイトをまとめてみました。

 

ブログやサイトの配色を決める際の参考にして頂けると幸いです。

 

スポンサーリンク

配色を選ぶ前に

いざ配色を決める際に、自分の好きな色を中心に選ぶ方が多いと思います。

 

もちろんそれでも良いのですが、色が持つイメージや見易さなどを理解して、より効果的な配色を選べるともっと良いですよね。

 

という訳で、配色を決める前に読んでおきたいサイトや最低限知っておきたい知識もいくつかご紹介したいと思います。

 

配色を決める前に見ておきたいサイト

色とは?色の意味・イメージ・心理効果まとめ。|Handy Web Design

・・・色のイメージや心理的効果について書かれています。

 

ノンデザイナーのための配色理論|Tsukasa obara(Slide Share)

・・・配色理論という考え方でみた色の選び方について分かりやすく書かれています。

 

購買意欲を高める色彩心理学|LeadPlus

・・・色彩心理学という観点で、色の持つイメージや購買意欲を高めるポイントなどが書かれています。

最低限知っておきたい色の知識

上記で紹介したサイトにも書かれている事ですが、配色を決定する前に知っておきたい知識をまとめてみます。

 

「70:25:5の法則」

一般的に最もバランスが良いとされている配色のバランスです。

基本的に3色で構成し、各数値は以下の割合を表しています。

・70%:ベースカラー(背景色)、白やグレーなどの目立たない色が好まれる
・25%:メインカラー、サイトの印象を与える中心となる色
・5%:サブカラー、メインカラーを引き立たせたり、全体を引締める効果もある

この法則に合わせて、3色ないしは4色でサイトを構成できるとバランスの良いサイトになります。

 

「色が持つ効果」

各色が人に与える印象です。

:最も注意を引く色。購買意欲が高まる。
:爽やかさな印象を与える。ユーザーの意識にも残りやすい。
:「活発さ」や「軽快さ」といった印象を与える。注意を促す役割もある。
:安心を与え、信頼性が重視されるサイトで好まれる。集中力を増す効果もある。
:エレガントなイメージを与える。上品さを演出したいサイトに好まれる。
:女性らしさを与える。サブカラーとして利用すると「お洒落さ」を演出できる。
:購買意欲や食欲を高める。食品系のサイトで好まれる。
白:「清潔さ」や「純粋さ」を象徴し、広い空間を演出する。
:「高級感」や「重さ」を演出する。暗いイメージも与える。
:控えめな印象を与え、ユーザーに親近感を感じさせる。
:まじめで固い印象を与える。

食品系を中心に扱うサイトではオレンジ、高級感を演出したいサイトではなど自分がサイトを通して与えたい印象色を選ぶとより効果的なサイトになると思います。

 

「混色系と顕色系」

色を数値で選ぶ方法は大きく分けて2通りあります。

混色系:RGB値等で指定できる色。人が扱うものとしては適していない。
顕色系:マンセルやPCCSで指定できる色。人の知覚に近く、色の組み合わせを想像しやすい。

マンセルやPCCS等聞きなれないと思いますが、RGBで指定した色は彩度が高く、人の知覚に合わないという点だけ抑えれば大丈夫です。

 

スポンサーリンク

配色を決める際に参考になるサイト

それでは、配色を決める時におススメしたいサイトをご紹介します。

 

他のサイトや画像のカラーコードを調べる方法8選
普段他の方のブログやサイトを拝見しているときに、 「この色いいな~」 って思うことありますよね。 カラーコードは1,600万通り以上もあるので原色大辞典などでそれっぽい色を見つけても、全く同じ色である可能性は極めて...

 

好き?嫌い?でおススメの配色を教えてくれるサイト

1.palettable

 

サイトへ飛ぶと、ランダムで色が表示され、その色が好みであれば2色目の提案、嫌いであれば別の色の提案をしてくれます。

提案される色は配色の組み合わせが良いものからされるので、最大5つまで選ぶことで好きな色かつ、バランスの良い配色を選ぶことができます。

 

らっかー
らっかー

一番最初の色は自分でカラーコードを指定することもできるよ。

 

『Palettable』を利用する >>

 

好きな色から配色パターンを提供してくれるサイト

2.color scheme designer

 

画面左にある丸いパレットから色を一つ選ぶと、その色にあった配色を右側に表示してくれます。

また、右上のメニューから「Random」⇒「Randomize Palette」を選ぶとランダムに配色を提案してくれます。

 

メニューの「Color space」から「Web Colors」を選択すると、より人が見るのに適した色合いを表示してくれるのでおススメです。

 

『Color Scheme Designer 3』を利用する >>

 


 

3.配色の見本帳

好きな色を画面から選択すると、その色に合う配色展開を提案してくれます。

マンガ配色検索というメニューもあり、文字通りマンガの表紙に使われている配色を教えてくれるユニークな機能です。

 

『配色の見本帳』を利用する >>

 


 

4.ウェブ配色ツール

右上の2つのパレットから色を選ぶことで、おススメの配色を提案してくれます。

左のサイト画面がそのまま、配色の利用イメージになっており、実際の使用感がとても想像しやすいです。

 

『ウェブ配色ツール』を利用する >>

 


 

5.material design palette

好きな色を2つ選ぶことで、その2色を含むおすすめな配色を提案してくれます。

マテリアルデザインはGoogleが推奨するデザイン手法なので、可能であれば取り入れていきたいですね。

 

『material design palette』を利用する >>

 


 

6.ColorHexa

検索窓にカラーコードや色名を入力することで、おススメの配色を提案してくれます。

色盲の方の見え方も教えてくれるので、ユニバーサルデザインに配慮したサイトを作成する際にはとても役立ちますね。

 

『ColorHexa』を利用する >>

目を引くサイトで使われている配色を紹介しているサイト

実際のサイトから利用している配色を教えてくれるので、非常にイメージしやすいサイトです。

 

7.あざやかな配色テクニックが印象に残る美しいWebサイト事例・カラーコードつき | Tips Blog

約10のサイトで使われている配色の近似値が紹介されています。

サイトタイトル通り、鮮やかな配色が多い印象を受けました。

 

『Tips Blog』を利用する

 


 

8.photoshopvip

こちらも目を引くサイトの配色を紹介してくれています。

100を超えるサイトが紹介されているので、きっとイメージに合うサイトが見つかります。

 

『photoshopvip』を利用する >>

 


 

9.design shack

主に海外のサイトの配色が示されています。

自分で好きな色を入れて、その色が入っているサイトという検索も可能です。

 

『design shack』を利用する >>

 

実際のページに色を当てはめながら配色を決められるサイト

10.color tool

右側のパレットから色を選ぶと、それぞれメインカラー、サブカラーとして左側のサンプルに当てはめてくれます。

文字の色も変えてみることができ、ここでしっかり配色を考えれば「イメージと違う」ということはまず起きないと思います。

 

ちなみに、Google推奨のマテリアルデザインです。

 

Color Toolを利用する >>

 

いくつかのパレットから配色を選べるサイト

11.flat ui colors 2

世界各国のデザイナーが考えた配色パレットを見る事ができます。

比較的人にあった色が選べます。

 

flat ui colors 2を利用する >>

 

イメージから配色を選べるサイト

12.カラー配色で迷わない!シーン別配色見本32パターン | style

「カジュアルで親しみやすいイメージ」などサイトに期待するイメージから配色を決めることができます。

 

『Style』を利用する >>

 


 

13.tag index

 

こちらもイメージから配色を決めることができます。それぞれの色をサイトのどの部分で利用すると良いかまで提案してくれるので、細かな配色で迷いません。

 

『tag index』を利用する >>

 


 

14.cool colors

イメージから配色を決められるだけでなく、右側のプレビューでかなりイメージを具体化させることができます。

配色も素敵でイチオシのサイトです。

 

『cool colors』を利用する >>

 

ユーザーの投稿から配色を選べるサイト

15.color hunt

ユーザーが投稿した配色の一覧を見る事ができるサイトです。SNSでいう「いいね」のような数も分かるのでユーザーに人気な配色を選ぶことができます。

非常にシンプルなサイトで、操作も分かりやすいです。

 

『color hunt』を利用する >>

 


 

ランダムで配色を決定してくれるサイト

16.coolors

こちらのサイトでは、デフォルトで組み合わせの良い5色の配色が表示されており、スペースキーを押すことでランダムに表示してくれます

気に入った色があれば、その色をクリックすることで色を固定することが出来、他の4色のみ入れ替えてくれます。

また、iOS版のアプリもあります。

Coolors

Coolors
開発元:Coolors srl
posted withアプリーチ

 

『coolors』を利用する >>

 


 

好きな色に合う配色だけを提供してくれるサイト

17.hue360

こちらのサイトでは、右側のパレットで好きな色を選ぶと、それに合う色だけが残る仕組みになっています。

 

リセットしたい場合は、左下に表示されている × を押せばOKです。

 

『hue360』を利用する >>

 

本や雑誌の表紙から配色を調べるツール

18.color of books

本や雑誌のタイトルを入力すると、Amazonから検索して、その書籍の表紙の配色を教えてくれます。

こちらも他にはないユニークなサイトですね。

※私が試した際は、なかなか検索がうまくいきませんでした。履歴から書籍を選ぶ分には問題なかったです。

 

『color of books』を利用する >>

 

和風の色を提供してくれるサイト

19.nippon colors

日本の伝統色を表示してくれるサイトです。左側のパレットから色を選ぶと、構成するRGB値などが表示されます。

サイト自体のデザインも美しいのでぜひ一度見て頂きたいです。

 

『nippon colors』を利用する >>

 


 

以上、ブログやサイトの配色を選ぶ際におススメのサイトをご紹介しました。

 

サイトの配色はブログの雰囲気や与える印象を変える重要な要素なので、自分が納得できる配色を決められると良いですね。

 

おすすめな配色の決め方は以下の通りです。

おすすめの決め方
  1. 配色を決める前にみておきたいサイト」や「最低限知っておきたい知識」を見て配色への理解を深める
  2. photoshopvip」や「palettable」等を参考に使いたい色を決める
  3. hue360」などで、使いたい色に合う配色を見つける
  4. color tool」や「cool colors」で実際に配色を当てはめながら、イメージに近づける

 

綺麗な配色で、鮮やかなブログライフを送りましょう。

 

最後まで読んで頂き、ありがとうございました。

トップへ戻る
タイトルとURLをコピーしました