サイトをデザインするときに、他のサイトを参考にすることってありませんか？
「ヘッダーの色使いがキレイだな」とか、「この背景の色を使いたいな」などなど。
そんな時に便利なのがプロのWebデザイナーさんも使用している色取得ツール「 ColorZilla 」です。
本記事では 「 ColorZilla 」の使い方から配色パターンを調べる方法まで画像を使ってわかりやすくご紹介します。
ぜひ最後まで読んでいただければと思います。
【ColorZillaの使い方】サイトデザインに便利な色取得ツール
ColorZilla とは
Google Chrome の拡張機能のひとつで、Webページの色をワンクリックで簡単に取得できるツールです。
なので、専門知識やソフトを扱う技術などは全く必要ありません。
また、インストール不要で Google Chrome に追加するだけですぐに利用することができます。
Google Chrome に ColorZilla を追加する方法
以下のページから追加できます。
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp
「 Chrome に追加 」をクリック。
以下の画面が出れば完了です。
ColorZilla の使い方
ColorZilla が追加できたら、さっそく使ってみましょう。
ブラウザの右上にあるスポイトマークのアイコンから、「 Pick Color From Page 」をクリック。
すると、カーソルが出てくるのでページ上で取得したい色をクリックしてみましょう。
試しに Google のブルーを取得してみます。
取得した色は自動的にクリップボードにコピーされます。
取得した色を確認したい時は、「 Color Picker 」をクリック。
過去に取得した色を確認できます。
選択した色を使う時は、下にあるコードをコピーしましょう。
これで ColorZilla での色の取得は完了です。とっても簡単ですね！
続いて、取得した色を使って配色パターンを調べてみましょう。
【WEB色見本 原色大辞典】で配色パターンを調べる
配色パターンを調べるのは「 WEB色見本 原色大辞典 」がおすすめです。
「 色を探す 」→「 色のコードを入力 」→ 「 下に出てきた色 」をクリック。
「 配色パターン 」をクリック。
ブルーをキーカラーにした配色パターンがズラリと出てきます。
サイトのベースカラー、サブカラー、アクセントカラーを決めるときにも参考になると思います。
【ColorZillaの使い方】サイトデザインに便利な色取得ツール：まとめ
以上、ColorZilla についてでした。
- ColorZilla はサイト上の色をワンクリックで簡単に取得できるツール
- Google Chrome の拡張機能のためインストール不要で使用できる
- 他サイトの色味チェックをするのに便利
ブログのアイキャッチ画像やバナー作成なんかにもとても重宝しています！
少しでもお役に立てば嬉しいです。
最後まで読んでいただきありがとうございました。
