BLOG

【無料】Colorpick Eyedropperの使い方【Google chrome拡張機能】

困ってる人
●ブログで記事を書くのは慣れてきたけど、いい感じの色でサイトをデザインしたいなあ。

●有名ブロガーさんが使っているサイトカラーを知りたいなあ。

●この背景色、ロゴの色を調べたいなあ。

 

今回はこんなお悩みに答えていきます。

 

こんな方におすすめ

  • WEB上で使われているカラーコードを知りたい方
  • ブログ初心者
  • 無料で使える便利なGoogle chrome拡張機能を知りたい方

 

本記事の信頼性

当サイトでもColorpick Eyedropperを使用しています。画像を使って初心者でもわかるように丁寧に解説できます。

 

他の方のブログを覗いて勉強していると、この色いいなあ、真似したいなあそう思う方もいると思います。

 

Google chrome拡張機能を使えば、そんな悩みも簡単に解決することができます

 

今回はColorpick Eyedropperの導入方法と使い方について画像を使って丁寧に解説します。

 

本記事を読めば、WEB上でお気に入りの色を調査することができ自サイトでも気に入ったカラーを使用することができます

 

それでは早速始めていきます。

 

Colorpick Eyedropper(カラーピック アイドロッパー)とは何?

Colorpick EyedropperとはWEBサイト上のカラーコードを調査することができるGoogle chromeの無料ツールです。

 

このツールを使えば、他サイトで使用されているカラーがわかるので、気に入ったサイトのカラーを簡単に使用することができます。

 

僕自身勉強がてら他サイトを見ているときに気に入った色がありました。しかしなんとなく近い色になるように自分で色を調整し時間がかかっていました。

 

この機能を使えば、そんな無駄なことはする必要がなく簡単に色を調べることができるということです。

 

Google chromeは無料でありながらとても便利な拡張機能が本当にたくさんあります

 

Google様々ですね。

 

それでは具体的な導入方法について紹介します。

 

Colorpick Eyedropperの導入方法

それでは早速紹介していきます。

 

簡単に下記手順で紹介します。

Colorpick Eyedropper導入手順

  • ①Colorpick Eyedropperをダウンロード(追加)する
  • ②拡張機能を画面表示する

 

①Colorpick Eyedropperをダウンロード(追加)する

まず初めにGoogle chromeを開いて『Colorpick Eyedropper』のページへアクセスします。

 

※Google chromeからアクセスできているか注意しましょう。

 

こちらのボタンからColorpick Eyedropperへ移れます。

 

Colorpick Eyedropperへアクセスする

 

 

サイトへ移ると下記画面になるので、chrome(クローム)に追加をクリックします。

 

クリックすると『Colorpick Eyedropperを追加しますか』と聞かれるので、拡張機能を追加をクリックします。

 

拡張機能が追加されれば、下記画面の表示になります。

 

これでColorpick Eyedropperのダウンロード、追加は完了です。

 

②拡張機能を画面表示する

続いてGoogle chrome画面右上にあるアイコンをクリックします。

 

 

クリックすると以下の画面が表示されます。

 

Colorpick Eyedropperの隣のピンのアイコンが青色になるようにクリックします。

 

以上で画面右上にColorpick Eyedropperのアイコンが表示されました。

 

 

これでColorpick Eyedropperの導入は完了です。

 

Colorpick Eyedropperの使い方を解説【画像あり】

続いてColorpick Eyedropperの使い方について解説します。

 

下記3つに分けて解説します。

①調査したいサイトへ移りカラーコードを確認する
②カラーコードをコピーして使用する
③Colorpick Eyedropperを終了する方法

 

①調査したいサイトへ移りカラーコードを確認する

まずは調査したいサイトへ移りましょう。

 

今回は神ブロガーのマナブさんのサイトを例に見てみます。

 

 

サイトへ移りました。

例えば一番左の記事内で使われている色をチェックするとします。

 

その際、先ほど導入したColorpick Eyedropperのアイコンをクリックします。

 

この状態でWEB上のカラーコードを超簡単に調べることができます。

 

下記画面のようにカーソルが表示されるので、調査したい部分にカーソルを合わせます。

 

カーソルを合わせると画面右にカラーコードの調査結果が表示されました。

 

今回は余白部分にカーソルを合わせたので、カラーコードは#FFFFFFが表示されました。

 

②カラーコードをコピーして使用する

また色がある箇所でカラーコードをコピーする場合も同じ手順です。

 

最初に調査したい部分にカーソルを合わせます。

 

 

コピーしたいカラーコードが見つかれば、画面をクリックします。

 

以下画面のような表示になり簡単にカラーコードがコピーできます。

 

 

後は自分のサイトで使用したい箇所にコピーしたカラーコードが適用すれば、同じ色を使うことができます。

 

記事のコピーは良くないですが、色を真似ることは特に問題ないので、この方法でお気に入りのカラーコードを調査して使用しましょう。

 

③Colorpick Eyedropperを終了する方法について

終了する際はもう一度画面右上のアイコンをクリックします。

 

クリックするとカラーコードの横に✖が表示されるので、この部分をクリックすれば、Colorpick Eyedropperを終了できます。

 

 

以上簡単な使い方の解説でした。

 

超簡単なので1分もかからないと思います。

 

まとめ:Colorpick Eyedropperを使ってサイトカラーをデザインしよう

今回はColorpick Eyedropperの導入方法・使い方について紹介しました。

 

Colorpick Eyedropperを使えば超簡単に色の調査ができるので、気になった色があった場合は使用してください。

 

また本記事のようにGoogle chromeはかなり便利に使える拡張機能がたくさんあります。

 

Google chrome(グーグルクローム)の便利な拡張機能について『MozBar』について他記事でも紹介しているので、気になった方は参考にして下さい。

 

関連記事
【無料】MozBarの導入方法、使い方について徹底解説【競合サイト分析ツール】

続きを見る

 

本記事を最後まで読んで頂きありがとうございました。

 

それでは本日はこの辺りで!

 

-BLOG

© 2021 Tetsu blog