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

この記事はこんな人にオススメ

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

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

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

Chrome拡張機能 「ColorPick Eyedropper」で色を調べる

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

ColorPick Eyedropper 導入方法

この導入が面倒くさいと諦めてしまうことがあるのかもしれないけれど、「ColorPick Eyedropper」は、たった3ステップで完了。設定も必要ないのでとっても簡単！

1. ブラウザ「Google Chrome」で ColorPick Eyedropper にアクセスし、「Chromeに追加」をクリック

2. 「ColorPick Eyedropperを追加しますか？」というウィンドウが現れるので、「拡張機能を追加」をクリック

3. ヘッダーメニューに「ColorPick Eyedropper」のアイコンが登場したら導入完了

ColorPick Eyedropper の使い方

1. まず、カラーコードが知りたいサイトにアクセス。サイトを開いたまま「ColorPick Eyedropper」アイコンをクリックするとカラーピックモードになり、カーソルが十字に変わる

2. 知りたい色のところに十字カーソルを合わせるだけで、黄色のカラーコードが #ffcc00 だとわかる。びっくりするほど簡単！

3. 合わせたカーソルをクリックするとカラーコードをコピーできる
4. ×印をクリックするとカラーピックモードが終了する

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

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

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

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

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

iromiru の使い方

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

1. 色が知りたいサイトのスクリーンショットを撮る

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

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

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

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

おわりに

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

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

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

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

文章： yoko（ @_yoko51_）