ブログやWebサイトに使う色って1色は自分で決められても、それに合う他の色って決めづらくないですか?
ブログで使う色の組み合わせは、読者へ良い第一印象を与えるためには重要な要素です。
Webサイトの色に必要以上のこだわりはなくても問題はありません。
ただし、読者に「好き」「なんか良い」と感じてもらえた方が、リピーターを獲得するには役立ちます。
そんなサイトやブログの印象付けにひと役買うのが、色の組み合わせです。
また運営者であるあなたにとっても、自分に合う色を選ぶことはブログを継続するために大切な1つです。
自分のサイトに愛着を持つためには、やはり運営者のあなたが好きな色を選んだ方が、自分のカラーも出しやすくなります。
そんなサイトの雰囲気、大切に育てていくモチベーションになる色選びですが、組み合わせで何色か選ぼうとすると、意外に大変です。
今回は、ブログやサイトで使いたい1色を選べば、その色に合う候補を自動で表示してくれる「HUE360」というサイトをご紹介します。
奇抜な色の組み合わせはできませんが、補色などの色の基本原則から、調和性がある色選びをするのにとても役に立つのでオススメです。
ブログやホームページには何色が必要?
ブログやホームページを作る時、少なくとも2〜3色は使う色を考えておく必要があります。
普段サイトを読んでいる時は、よく行くサイトに何色使われているか、記憶にあまりないかもしれません。
でも実際には大切な部分は色が変わっていたり、リンクのボタンは目立つ色になっている場合が多いです。
Webサイトの記事を読み慣れている人は、自分の関心がない部分については、すっ飛ばして読む癖がついているので、色にまで意識が向いている読者は少ないです。
ただ、読みながらどこをクリックしたら必要な情報が得られるか、危険ではないか、どこを読めば良いのかをその都度判断しながらサイトを見ています。
なので、ブログやホームページに使う色は、人の記憶には残らなくても、自分のサイトの中で普段使う色とは別に、目立つような色を用意する必要があります。
「HUE360」は色をクリックするだけで、合う色の候補を自動表示
人生の中で自分の好きな色や憧れを持つ色、なんか良いなと感じる1色はあると思います。
でも、その1色にぴったりの色を2つも3つも選ぶのって、とても大変ですよね。
色の知識があれば、ある程度の配色選びというのはできるようになります。
しかしウェブサイト制作のプロたデザイナーでもない限り、色をパッと見ただけで合う色を選べる人は少ないでしょう。
そんな時にオススメなのが、「HUE360」です。
HUE360というサイトは、1色を選ぶと自動でその色に合う色を表示してくれるサイトです。
HUE360のオススメポイント
HUE360は専門知識がなくても使えて、カラーコードを一覧表示してくれるので、コピペでブログの設定をすることも簡単です。
ただし、『HUE360』はPCやタブレットなど少し大きめの画面で見れる端末で使うのがオススメです。
スマホはPCと同じ画面が表示されてしまい、使いづらくなってしまいます。
HUE360で12色まで選べて、カラーコードを一覧表示可能
HUE360は12色まで選択した後に、カラーコードを一覧取得することができるので、一気に色の設定を済ませたい時はとても便利です。

△カラーコードを一覧で表示できる
他の配色パターンのサイトやツールは、あらかじめ作られた配色パターンから選ぶので、自分で配色を作っている感じがしないんですよね。
しかも、4〜5色程度しか組み合わされていないものが多いです。
メインカラー1色決まっていればさらに使いやすい!
ブログやホームページなどの色は、どんなに少なくても「キーカラー(メインカラー)と「サブカラー」が必要です。
多くの人はメインで使いたい色はイメージできても、
「サブカラーって何色にしたらいいの?」
と思いませんか?
HUE360は、あらかじめ決めているメインカラーから自分で選ぶことができるので、好きな色を基本にして合う色を選ぶことができるんです。
またHue360はメインのカラーを選ぶと、自動的にその色に合いそうな候補以外は画面から消えます。
なので色を選んでもまだ表示されている色は、選んでも違和感がない可能性が高いんです!
Hue360がすごいのは、この組み合わせって本当にいいのかなぁ…?という疑問を持つことなく、表示されている中から感性で選ぶことができるので、サクサク選ぶことができます。

△キーカラーを選ぶと自動的に合いそうな色を絞ってくれる
候補色の数を自分で調節できる
サイトの下の「Circle Controller」のHue Stepという部分を選択すると、「10、20、30…」と数字を調節することで、選べる色を増やしたり減らしたりできます。
例えばhue stepが10の状態では、限られた色から候補を選ぶことができます。

△「hue step」が10の状態
そのため色々な候補があると迷って決められない人は、hue stepを小さい値にして選ぶことができます。
HUE Stepを10にした場合は、赤系、黄色系、みどり系などの主要の色から選ぶことになります。
逆に微妙な色味の違いも考えて配色を選びたい場合は、「hue step」を100など大きな値にします。

△「hue step」が100の状態
個人的なオススメは、hue step20か30です。
あまり多すぎない候補で、赤系、青系、みどり系、黄色系などそれぞれの色味の選択肢も多く、気に入ってます。

△hue stepが20

△hue step 30
Hue360なら背景色も自由に設定可能!
もちろん、背景色が白だけではなく、薄いグレー、濃いグレー、黒などから選ぶこともできます!

△背景色も自由自在
黒やグレーなどの背景が変えられると、ブログのデザインだけではなく、アイキャッチ画像の文字入れやバナーなど幅広い素材にも使えますよね。
白地とグレー地では、見える色味の印象も違いますよね。
濃い色味の背景では、白い背景よりも色は明るく、鮮やかに見えるので、画面を通して見ると、チカチカして見えることがあります。
そんな見え方のイメージもつきやすいので、文字入れをする時には、とても参考になります。
背景の変え方は、画面の左にある「Brightness」と書かれた白から黒までの色を、キーボードのShiftキーを押しながらクリックで選択します。
白や黒以外を背景色にしたい場合には、背景色にしたい色をキーボードのShiftボタンを押しながらクリックしてください。
Hue360でもっと楽に色選びしよう!
ブログやホームページの配色を決めるのに使える便利サイト、「Hue360」についてご紹介しました。
サイト全体の色や記事で使う色味は、あらかじめ決めておいた方が、読者への印象づけにも役にたちます。
もちろん途中で変えても支障はありませんが、できれば本格的にアクセスが増える前には確定しておいた方が、読者への第一印象、サイトの雰囲気作りに役立ちます。
もし色選びに迷っている場合は、Hue360で選んだ色味の印象などを参考にしてみてくださいね!