本記事では、こんな疑問にお答えします。
本記事の内容
web上の色を調べるChrome拡張ツール「ColorPick Eyedropper」の導入
実際にColorPickで色を調べる方法
色調で参考になるサイト6選
この記事の要点
Chrome拡張ツール「ColorPick」で、色調を自由に取りこむ方法を解説
色調の参考サイト一覧をつくって、読者さんが他ページ・画像の色を取りいれるまでをサポート
今回は、とても簡単・効率的にサイトの色を決めるツール「ColorPick Eyedropper」を解説しています。
他のサイトをみていて「この色いいな、取りいれたいな」と思いながらも、具体的なカラーコードが分からず断念、といった経験はないでしょうか？
GoogleChrome拡張ツール：ColorPickの導入
「ColorPick」は、Googleが提供するブラウザ「Chrome」の機能を拡張するツールになります。
これを使えば、とても簡単に他のwebページの背景や、そこで使われている文字・画像の色を調べることが可能です。
なお、EdgeやFirefoxなど、Chrome以外のブラウザでも使うことができるので、。
早速、導入手順を説明していきますね。
拡張ツールColorPick Eyedropperを導入する
ColorPickの導入自体は簡単です。
１．「ColorPick Eyedropper」でサイト検索をする。
サイト検索でも出てくるものの、リンクを貼っておくと「ColorPick Eyedropper」になります。
こちらのページに移ったら、以下の「Chromeに追加」をクリックして、拡張ツールに加えます。
２．メニューバー（ブラウザ上部）の「拡張機能」からColorPickを選んで、バーに固定する
拡張ツールが追加されたら、ブラウザ右上のにある「拡張機能（アメーバっぽいアイコン）」をクリックします。
すると、以下のような画面が出てくるので、ピンのマークをクリックして、メニューバーに固定します。
３．アイコンから「拡張機能をクリックしたとき」を選択して、ブラウザを再起動する。
次に、アイコンをクリックして、以下の「拡張機能をクリックしたとき」を選び、使える状態にしておきます。
そしてブラウザを再起動すると、準備はOKです。
ColorPickを使ってwebページや画像の色を調べる
次は、実際にColorPickを使って、webページや画像の色を調べてみましょう。
ColorPickでwebページや画像の色を調べる方法
ColorPickで、webページや画像の色を調べる方法は「マウスを動かす」、これだけです。
ColorPickアイコンをクリックして、調べたい場所にカーソルをあてる
先ほど固定したアイコンをクリックすると、マウスカーソルにあわせて、カラーコードの情報が出てきます。
調べたい場所にマウスを動かすと、ピクセル単位で何色なのかがわかります。
画像のカラーコードもカーソルをあてるだけでOK
画像にアイコンをあてると、その画像で使われている色もわかります。
こんな感じで、ColorPickさえ導入しておけば、サイトの隅々まで簡単に色がわかります。
以前紹介したWhatFontだと、画像のフォントまでは調べられませんでしたが。
ColorPickがあれば、色に関しては他サイトを完璧に模写することができますね。
カラーリングで参考になるサイト
ColorPickの使いかたを説明した後は、色を決めるうえで、参考になるサイトを紹介します。
カテゴリーは以下の通りです。
- 色の選びかたの解説サイト サイトでの色の組みあわせかたを解説している
- 色調が参考になるまとめサイト カラーリングがうまいサイトをまとめている
色の選びかたを押さえるサイト
「配色の見本帳」さん
配色の見本帳｜キーカラーで選ぶ配色パターン
トップページの色を選ぶと、それをキーカラーにした配色が表示されます。とても情報量が豊富で、色調に関する用語がたくさん出てきますが、その都度、説明がくわえられているので、初心者さんでも参考できます。
「M-HAND Inc.（株式会社エムハンド）」さん
WEBデザインで押さえるべき配色（ベース、メイン、アクセント）の基本「3つのカラー」
主役の色と脇を固める色について、「１．ベース」、「２．メイン」、「３．アクセント」とわけて、分かりやすく解説されています。また、赤・青・黄色といった各色のもつ効果にも言及されているので、何色を使うかといった点から参考にできます。
「サルワカ」さん
配色パターン見本40選：ベストな色の組み合わせを探せるツール
初心者さんの頃、お世話になった方も多いはずなブログです。色調に関しても、40の見本を提示しつつ、「万人受けする配色」や「親近感を感じさせる配色」など、配色ごとに丁寧な解説がなされていて、とても役に立ちます。
色調で参考になるまとめサイト
「SANKOU!」さん
スライド･カルーセル
「Webデザイン制作の参考になる国内のステキなサイト集」というキャッチコピーのサイトさんです。リンク先は、スライドしてふわっと表示されるサイトのまとめになるものの、こだわっているぶん、色合いも非常に参考になります。
「イケサイ」さん
多色・カラフル系のサイト WEBデザインのリンク集
こちらのコピーも「ウェブデザイナーのWEBデザインデータベース」とあり、充実のコンテンツをもつサイトさんです。ここでは、色を多く使っているサイトさんのリンク集を掲載しています。挑戦もよし、色選びの参考にもよしっ、ですね。
「オルトベースグリーン」さん
【30選】グリーン・緑色を使ったホームページ・Webデザインをまとめてみた
最後は、緑色をベースにしたデザインをとりまとめているサイトさんです。こちらの場合は、紹介サイトごとに簡単なデザイン解説がくわえられているので、色の選びかたという点でも参考になります。もちろん、緑以外もありますよ。
まとめ：ColorPickでwebページや画像の色をうまく取りいれよう
以上、GoogleChromeの拡張ツール「ColorPick Eyedropper」を使って、他のwebページや画像の色を調べる方法を解説してきました。
また、参考サイトさんも案内しているため、気に入った色をとても効率的に取りこめるはず。
カラーリングは、サイトのイメージを決める重要な要素といわれていますので。。
なお、途中でチラッと紹介した「WhatFont」の説明はこちらになります。
他サイトのフォントを調べる拡張ツール「WhatFont」
-
【簡単】ブログのフォントを上手に変える方法【心地よさ】
続きを見る
