【ブログデザインのお役立ち】とっても簡単！WEBサイトの色（カラーコード）を調べる方法 2選！

モモ

すごく好みなコーポレートサイトがあって、その配色をブログに取り入れたいなと思うんだけど、サイトのカラーコードってどうやって調べたらいいのかな？

エミリ

やってみたことがあるけれど、自力で色を近づけるって難しいよね。

モモ

そうなの。なんか違う、、、ってなる。

エミリ

今回は、WEBサイトの色を知りたい！という人のために、カラーコードをとっても簡単に調べられるツールを2つ紹介するね。

モモ

わー、2つも！

エミリ

うん。ブラウザ「Google Chrome」を使っている人向けと、そうじゃないよという人向けの2種類だよ。

モモ

嬉しいな。簡単ていうのも魅力的♪

この記事を読めば、できること

まず最初に、カラーコードとは？

ブログデザインを始めると、よく見かけるようになる

エミリ

Webページ上で色を指定するときに使うコードだよ。

Chrome拡張機能 「Color Picker for Chrome」で色を調べる

色の調べ方1つ目は、ブラウザ「Google Chrome」ユーザー向け。紹介するのは、カーソルを合わせるだけでカラーコードがわかる

Color Picker for Chrome 導入方法　＊画像準備中

「ColorPick Eyedropper」の導入は、たった2ステップで完了。設定なども特に必要ないのでとっても簡単です。

ブラウザ「Google Chrome」で Color Picker for Chrome にアクセスし、「Chromeに追加」をクリック

「Chromeのカラーピッカーを追加しますか？」というウィンドウが現れるので、「拡張機能を追加」をクリック

エミリ

導入は完了。追加した後は、よく使う拡張機能としてお気に入りに固定しておくと便利だから、その方法も説明するね。

Chromeの右上にある [パズルピース（拡張機能）] アイコン をクリックすると、インストール済みの拡張機能が一覧で表示される

Color Picker for Chromeの右側にある [ピン] アイコン をクリックすると、アドレスバーの右側にアイコンが固定される

Color Picker for Chrome の使い方　＊画像準備中

カラーコードを知りたい！と思ったサイトにアクセス

サイトを開いたまま「Color Picker for Chrome」アイコンをクリックすると、ポップアップ画面が表示される

『PICK COLOR』ボタンを押すとカラーピックモードになり、カーソルが十字に変わる

知りたい色のところに十字カーソルを合わせると、黄色のカラーコードが #ffcc00 だとわかる

エミリ

びっくりするほど簡単だよ！

3. コードの横にある『コピーマーク』をクリックするとカラーコードをコピーできる
4. ×印をクリックするとカラーピックモードが終了する

1度導入してしまえば、気になった時に、いつでもすぐにカラーコードを調べられるのでオススメです！

ツール「iromiru」を使って調べる

2つ目は、「Google Chrome」ユーザーじゃないよという人向けに。紹介するのは、手元の画像や画像URLから、カラーコードを集められるツール、

余談ですが、ローマ字には、よく読まずになんだかオシャレ！と思わせてしまう力があるなと、サイト名を「iromiru? 」「イロミル」「 ！なるほど色見るね〜」と頭の中で3度変換して感じました。

日本語をローマ字にするアイデア、いつかどこかで使ってみたいと思った次第。

iromiru の使い方

話を元に戻して。ここからは iromiru の使い方をご紹介。何度か試してみたのですが、画像URLだと読み込みに失敗するので、画像の使用がオススメです。

色を知りたい！と思ったサイトのスクリーンショットを撮る

撮ったスクリーンショットを iromiru にドラッグ&ドロップする

画像が表示され、下に画像内に使われている色すべてが抽出される

知りたい色の一部をクリック（画像or下に抽出されたカラー、どちらをクリックしてもOK）すると、右側にカラーコードが表示される

どちらの方法も簡単にカラーコードを調べることができるので、「このサイトの配色気になる！」「この背景色ブログに取り入れたい！」etcと思った時に、使ってもらえたらなと思います。

おわりに

「フォトショップを持っていない人はどうやってカラーコードを調べるのかな？」と思ったことが、この記事のスタートになりました。

今までは、自分の体験だけを記事にしていたのですが、ブログを書きながら自分の中から湧いてきた疑問を解くという視点で記事を書けたことは、新しい発見だったなと。

もしかしたら、1歩外の世界へ飛び出ることができたのかもしれません。

疑問を解消するためにいろいろ調べ、新しいことを知るのは楽しかったので、また謎が出てきたらブログに書き落としてみたいな、と思います。

エミリ

ロジカル・クリエイター

Contact

主な生息地は、おうち。暮らしの中で良いなと思ったことを、女性目線でじっくり調べてお届けします。