メニュー
このは屋
スモールビジネス特化の学び舎
スモールビジネス特化の学び舎。商売と生活と文化を結び付ける生涯学習カルチャーセンター。初心者のスモールビジネスオーナーに向けて、パソコン教室、各種ワークショップ等、カルチャーセンターを運営。ネットから集客する方法、オンラインで商売する方法、労働集約型から知識集約型へ移行する方法、サブスクリプションで収益を安定させる方法…etc。鼻歌まじりの商売と生涯を、ワンストップで、トータルにサポートしている。

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

このは屋
このは屋
スモールビジネス特化の学び舎 このは屋です。

競合サイトを見ていた際に、サイト内の配色や設置された画像の配色が気に入ったことがないですか?

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

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

目次

【広告】このは屋の「おすすめ」

参考にしてみてください♪
このは屋
このは屋

ColorZillaで出来ること

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

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

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

ColorZillaの使い方

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

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

あわせて読みたい
ColorZilla Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies

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

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

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

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

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

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

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

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

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

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

といった作業手順です。

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

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

が可能なんです。

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

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

あわせて読みたい
デザイン初心者でもカンタン!無料画像編集ツール「Canva」の使い方 サイト、ブログ記事、セミナー資料、ウェブ広告...etc。 こういったウェブ制作に画像を利用する機会が多くなりました。 特にウェブ広告は画像によって反応を確認し、微...

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

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

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

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

パクることはもちろんNGです。

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

編集後記

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

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

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

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

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

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる