今日の新潟はヒンヤリとした雨が時々落ちてくるような天気です。

朝晩はなかなか暖房が手放せない、そんな春が続いていますね。

今日はホームページを制作する上で非常に大切な、”色使い”に役立つアイテムをご紹介しようと思います。

まず一つ目。

Adobe Color CC です。これは無料で使えて、配色パターンを自動的に構成することができるサイトです。Adobe IDを取得（無料）して、ログインして使用すれば作成した配色パターンを保存することもできますので、とても便利に使うことができます。

一般的に「色の三属性」と呼ばれる、色相・明度・彩度を自由自在に設定することができます。

画面中央に5色が表示されますが、ここに表示される色も「カラールール」を設定することにより変更することができます。上の写真は「類似色」の設定。左の写真は「補色」の設定です。補色とはベースになる色に対して、正反対の色のことです。一般的には画面の中でインパクトを与えたい時などに使用します。

左の写真で赤枠で囲った部分の△をクリックすることにより、その箇所をベースカラーに設定することができます。

例えば一番左からベースカラー・メインカラー・アクセントカラー・文字色カラー・リンクカラーとし、それぞれの色合いを調整してあげることもできます。

そして画面の一番下の部分にはHEXカラーコードも表示されますので、そのコードをコピーしてWixエディター上で貼り付けることも可能ですね。

続いて二つ目です。

こちらも無料で利用できるサイトなのですが、Web Design Color Tester です。

先程のAdobe Color CCで配色パターンを作成しても、実際にホームページの画面に当てはめてみないとわからない部分もあります。そんな時にこのWeb Design Testerを使用すると便利です。

サイトを開いた段階ではこんな感じです。ここで画面上部、赤枠で囲んだ部分にAdobe Color CCで作成した各色のカラーコードを貼り付けていきます。

するとこうなります。これなら分かりやすいですよね！！ある程度作りこんでから色が合わずに修正するという手間を回避できます。

最後に三つ目。

WebブラウザのGoogle Chrome。その拡張機能の一つ、「Eye Dropper」です。

これはChromeに機能を追加することにより、Chromeで閲覧しているホームページに使用されているそれぞれの色のカラーコードを確認することができるというものです。

試しにAdobeのホームページを開いてみました。

メニューバーにスポイトのようなアイコンが表示されていますが（赤丸の部分）これがEye Dropperです。起動して、画面下部の青い帯の部分をクリックしてみます。すると画面右下に対象の色とカラーコードが表示されていますね。

もしどこかのホームページを見ていて気に入った色があれば、Eye Dropperでカラーコードを確認してしまえば、あなたのホームページに活かすこともできますね。

本日は”色使い”に関するアイテムのご紹介でした。

#Wix