
この記事では上記のような疑問を解決します。
本記事の内容
- 使用されている色を調べる方法が分かる。
- Windows、Macそれぞれに適したツールが分かる。
この記事を書いている私は、業界歴10年ほどのシステムエンジニアのサラリーマンブロガーです。本記事では、Webサイトで使われている色の調べ方をご紹介します。
ブログのデザインを検討中の方に特におすすめです。ぜひご覧ください。
サイトで使われている色を調べる方法【おすすめツールを紹介します】
色を調べるにはいろいろな方法がありますが、今回は下記を紹介します。
- 方法①:Chromeの「拡張」機能を利用した方法(Win、Mac共通)
- 方法②:PhotoScape Xを利用した方法(Win、Mac共通)
- 方法③:SnapCrabを利用した方法(Winのみ)
- 方法④:Windowsのペイントを利用した方法(Winのみ)
方法①:Chromeの「拡張」機能を利用した方法(Win、Mac共通)
1つ目の方法として、「拡張機能」を利用した方法の紹介です。
まずは、下記のこちらのURLからダウンロードして、Chromeに機能を追加します。
下記のような画面になるので「Chromeに追加」をクリック。
次は「拡張機能を追加」をクリック。
そうすると、URLの右側に「ColorPick Eyedropper」が追加されます。
使い方
追加された「ColorPick Eyedropper」のアイコンをクリックします。
すると、下記のような状態になります。
次に、調べたい色の箇所にカーソルをあてます。すると色の情報が表示されます。
調べたい色の箇所でクリックすると、カラーコードをコピーできるようにもなります。
方法②:PhotoScape Xを利用した方法(Win、Mac共通)
※ツールのインストールについては、こちらの記事を参照ください。[orilink url="https://ttman.work/picture-margin/"]
まずは、調べたい対象となるWebページや、写真を開き、スクリーンショットを撮ります。([Alt + Print Screen]を押すことでスクリーンショットを撮ることができます。)
そして「PhotoScape X」を起動します。起動ができたら[Ctrl + V]で貼り付けをします。
下記のようにPhotoScape Xに貼り付けができました。
次に、[道具 ー ペイント]を選択します。
「カラー」箇所をクリック。
下記のように「スポイト」マーク箇所をクリックします。
調べたい箇所をクリックします。
再度、「カラー」箇所をクリックします。
カラーコードの確認ができます。「コピー#」をクリックすることで、カラーコードのコピーも可能です。
方法③:SnapCrabを利用した方法(Winのみ)
まずはインストールからですが、手順については別記事を参照ください。[orilink url="https://ttman.work/snapcrab/"]
インストール完了後は、「SnapCrab」の「カーソル位置の色を取得」を利用します。
色を調べたい箇所にカーソルを移動すると、カラーコードが表示されます。(※残念ながら、コードの値をコピーすることはできないです。)
方法④:Windowsのペイントを利用した方法(Winのみ)
次に、Windowsのペイントを利用した方法を紹介します。
方法②と同じように、スクリーンショットを撮ります。([Alt + Print Screen]でOK)
次に、ペイントソフトを開きます。
[スタートメニュー - Windowsアクセサリ - ペイント]を実行します。
下記のようにペイントが起動します。この状態で貼り付けを行います。([Ctrl + V]でOKです。)
すると、下記のようにスクリーンショットを撮った内容がペイントに貼り付けされます。この状態で「スポイト」アイコンをクリックします。
スポイトの形をしたカーソルを、調べたい色の箇所にあててクリックします。
調べたい色の箇所をクリックした後は、「色の編集」をクリックすることで、色の情報を表示することができます。
注意点
https://www.peko-step.com/tool/tfcolor.html
=====
今回は以上です。
お役に立てれば幸いです。