Design

【ColorZillaの使い方】サイトデザインに便利な色取得ツール

サイトをデザインするときに、他のサイトを参考にすることってありませんか?

「ヘッダーの色使いがキレイだな」とか、「この背景の色を使いたいな」などなど。

そんな時に便利なのがプロの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色見本 原色大辞典 」がおすすめです。

https://www.colordic.org/

「 色を探す 」→「 色のコードを入力 」→ 「 下に出てきた色 」をクリック。

「 配色パターン 」をクリック。

ブルーをキーカラーにした配色パターンがズラリと出てきます。

Keisuke

サイトのベースカラー、サブカラー、アクセントカラーを決めるときにも参考になると思います。

【ColorZillaの使い方】サイトデザインに便利な色取得ツール:まとめ

以上、ColorZilla についてでした。

Keisuke

ブログのアイキャッチ画像やバナー作成なんかにもとても重宝しています!

少しでもお役に立てば嬉しいです。

最後まで読んでいただきありがとうございました。

ABOUT ME
Keisuke
Keisuke
スペイン滞在3年目。一般企業を退職→バレンシアへ留学→マドリードで就職。WordPressとWebデザインを勉強&仕事受注中。学んだことを当ブログで発信しています。たまにスペインのことも。 訪問国は欧州20ヶ国50都市。