困った時はお手軽に配色。「HUE360」を使って見よう！

　こんにちは。ライターの伊藤と申します。突然ですが皆さんはWebサイトを作るぞ！となった時に配色に困ったことはありませんか？
　そんな時に頼れるのが今回紹介させて頂く「HUE360」というサイト。一つ色を選ぶとそれにあった色を選別してくれる便利なサイトです。今回はWebの配色についておさらいしつつ「HUE360」の使い方を紹介させて頂きます。

https://hue360.herokuapp.com/　「HUE360」へのリンク

1　Webの配色をおさらい

まずは配色の基本3色の比率を身に付けましょう！

Webにおける基本の配色の比率は上記の表の通りになっています。
それぞれの解説は以下の通りです。

1ベースカラー
　主に背景色などに使われるカラーです。面積の比率が最も大きいため派手な色よりも白色などの落ち着いた色等で、サイトに可読性等を持たせてあげましょう。

2メインカラー
　サイトの印象を決める最も重要なカラーです。企業のコーポレートカラー（その企業の代表的な色）や商品のイメージに近い色等がよく使われます。

3アクセントカラー
　最も比率が少ないためそのサイトで特に注目させたい箇所に使ったりします。例えるならサイトに設置されるボタンの箇所などはよくこの色が使われます。また、色を決める際にはメインカラーとは反対の色を使うとより目立ちます。

以上になります。一概に全てが説明通りというわけではないですが概ね上記の通りです。

実際にどんな風に使われているか？

　最もわかりやすいのは外食チェーン店などでしょうか。清潔感のある白をベースカラーにロゴ等の色で使われるコーポーレートカラーをメインカラーにしているサイトが多い印象です。アクセントカラーもボタンや注目の商品等によく使われています。
　またゲームソフトのサイト等も落ち着いた印象に加えよりゲームのスクリーン画面を引き立てるために比較的にベースカラーが黒であることが多いです。ジャンルで表すとガンシューティングゲームなどターゲットとする年齢層が比較的高いジャンルなどです。

2　いざ実践！「HUE360」を使ってみましょう！

　お待たせしました。それでは早速使っていきましょう！

　まずは右の輪っかからメインカラーに当たる色を選びましょう。色が区分けされているので選びたい色をクリックします。

　すると選んだ色の箇所に小さな三角系が表示され、右の輪っかが選んだ色と相性のいい色のみ表示してくれるようになります。これでメインカラーは決定できました。左下に選んだ色のついたバーがでますがこれは後で解説します。

　次はアクセントカラーを決めましょう。先ほどと同じ様に右の輪っかから好きな色をクリックするだけです。すると選んだ色が再び左下のバーに追加されます。これでアクセントカラーも決定です。

　ベースカラーを決めましょう。Shiftキーを押しながらベースカラーにしたい色をクリックします。すると・・・。

　このようにサイト全体の背景色が変わります。

　最後に左下のカラーバーの「Print User Color」をクリックします。(Try Paintingの方ではありません。)すると小さウインドウが開きそこに今まで選んだ色が、
bgColor=ベースカラー
baseColor=メインカラー
subColor=アクセントカラー
としてカラーコードが表示されます。後はそれらをコピペして使うだけです。
　注意点としてbaseColor=メインカラーである点があります。
baseColor=ベースカラーではないので気をつけましょう。(当サイトがWebサイトのカラー専門のサイトではないことが、おそらくの原因かと思われます。)

終わりに

今回紹介した以外にもこのサイトの活用法はまだまだあります。今回は使用しなかった左側のメニューを使うと明度などにもこだわれたりするので気になる方は是非一度サイトを訪れてみてください。
また「HUE360」はWebサイトの配色以外にも様々な使い方があるので色々応用してみるのも良いかもしれませんね。