メニュー
このは屋
スモールビジネス特化の学び舎
スモールビジネス特化の学び舎。スモールビジネスオーナーに向けて、ネットから集客する方法、オンラインで商売する方法、労働集約型から知識集約型へ移行する方法、安定した継続的な収入源を確保する方法…etc。悔いの無い生涯を謳歌する為の、鼻歌まじりの商売と生涯を、ワンストップで、トータルにサポートしている。

ウェブ制作必須ツールのChrome拡張ColorZillaを紹介

このは屋
このは屋
スモールビジネス特化の学び舎 このは屋です。
  • ネット上で何気なくサイトやLPを閲覧していた時、
  • 競合サイトを見ていた時、

に、サイト内の配色や設置された画像の配色を参考にしたい事、ありませんか?

そんな気になったサイトの配色を、一瞬で調べられる方法があります。

それは、Chrome拡張「ColorZilla」を使用する方法です。

目次

ColorZillaで出来ること

ColorZillaでは、配色のカラーコードを解析できます。

カラーコードとは、

「#ff0011」

といったシャープから始まり、アルファベットと数字の羅列で出来た色を示すコードです。

このカラーコードを使い、画像編集ツールでダイレクトに色の指定が出来るので、大変便利なんですね。

ColorZillaの使い方

導入方法は、通常のChrome拡張と同様でとても簡単です。

Chromeウェブストアから、拡張機能を導入するだけです。「Chromeに追加」ボタンをクリックし、後は画面に従っていくのみです。

あわせて読みたい
ColorZilla - Chrome ウェブストア 高度なスポイトツール、カラーピッカー、グラデーション生成ツールなどの多彩で魅力的な機能

導入が正常に完了すると、メニューバー(画面右上)にスポイトのアイコンが表示されます。

  • スポイトアイコンをクリック
  • 一番上に「Pick Color From Page」をクリック
  • その状態で配色箇所をクリック

すると、画面上のカラーコードがコピーすることができます。

実際にカーソルを動かしてみると、位置によって色が変化するのが確認できますよね。

これで、カラーコードを抜き取ることができます。

カラーコードがわかったら、、、

ColorZillaを使用して、カラーコードを調べると、すでにパソコン上にコピーされた状態になります。

あとは、画像編集ツールのカラーコードを設定できる箇所に、コピペするだけです。

改めて、手順を並べると、

  • スポイトアイコンをクリック
  • 一番上の「Pick Color From Page」をクリック
  • サイト内の解析したい配色の箇所をクリック
  • 画像編集ツールのカラーコードを設定できる箇所にコピペ

といった作業手順です。

これで、お好みのカラーコードを元に、

  • 画像編集
  • 動画編集
  • 資料編集

が可能なんです。

私はよく、Canvaで画像編集をする際に使用しています。

Canvaは以下のようなツールです。

あわせて読みたい
デザイン初心者でも簡単!無料画像編集ツール「Canva」の使い方 デザイン初心者でも簡単!無料画像編集ツール「Canva」の使い方

カラーコードを自分の判断で扱うのは難しい

カラーコードについては、まとめられたウェブサイトがあります。

しかし、色を組み合わせるのは難しいです。

なので、実際にウェブ上に公開されているものから、参考にした方が、そこまでズレた配色にはならないです。

デザインの配色であれば参考にしたとしても、問題ないです。

編集後記

今回は、Chrome拡張「ColorZilla」についてご紹介しました。

これで参考にしたいサイトの配色も参考にすることができますね。

ぜひ、活用してみてください。

また、配色について解説された書籍も出ています。

以下のような書籍も、ぜひ参考にしてみてください。

ハッシュタグ

#このは屋 #スモールビジネス特化の学び舎 #鼻歌まじりの商売
目次