- ネット上で何気なくサイトやLPを閲覧していた時、
- 競合サイトを見ていた時、
に、サイト内の配色や設置された画像の配色を参考にしたい事、ありませんか？
そんな気になったサイトの配色を、一瞬で調べられる方法があります。
それは、Chrome拡張「ColorZilla」を使用する方法です。
ColorZillaで出来ること
ColorZillaでは、配色のカラーコードを解析できます。
カラーコードとは、
「#ff0011」
といったシャープから始まり、アルファベットと数字の羅列で出来た色を示すコードです。
このカラーコードを使い、画像編集ツールでダイレクトに色の指定が出来るので、大変便利なんですね。
ColorZillaの使い方
導入方法は、通常のChrome拡張と同様でとても簡単です。
Chromeウェブストアから、拡張機能を導入するだけです。「Chromeに追加」ボタンをクリックし、後は画面に従っていくのみです。
導入が正常に完了すると、メニューバー（画面右上）にスポイトのアイコンが表示されます。
- スポイトアイコンをクリック
- 一番上に「Pick Color From Page」をクリック
- その状態で配色箇所をクリック
すると、画面上のカラーコードがコピーすることができます。
実際にカーソルを動かしてみると、位置によって色が変化するのが確認できますよね。
これで、カラーコードを抜き取ることができます。
カラーコードがわかったら、、、
ColorZillaを使用して、カラーコードを調べると、すでにパソコン上にコピーされた状態になります。
あとは、画像編集ツールのカラーコードを設定できる箇所に、コピペするだけです。
改めて、手順を並べると、
- スポイトアイコンをクリック
- 一番上の「Pick Color From Page」をクリック
- サイト内の解析したい配色の箇所をクリック
- 画像編集ツールのカラーコードを設定できる箇所にコピペ
といった作業手順です。
これで、お好みのカラーコードを元に、
- 画像編集
- 動画編集
- 資料編集
が可能なんです。
私はよく、Canvaで画像編集をする際に使用しています。
Canvaは以下のようなツールです。
カラーコードを自分の判断で扱うのは難しい
カラーコードについては、まとめられたウェブサイトがあります。
しかし、色を組み合わせるのは難しいです。
なので、実際にウェブ上に公開されているものから、参考にした方が、そこまでズレた配色にはならないです。
デザインの配色であれば参考にしたとしても、問題ないです。
編集後記
今回は、Chrome拡張「ColorZilla」についてご紹介しました。
これで参考にしたいサイトの配色も参考にすることができますね。
ぜひ、活用してみてください。
また、配色について解説された書籍も出ています。
以下のような書籍も、ぜひ参考にしてみてください。
