Font & Color Checkerは、画像から色を抽出したり、Webサイトで使用されている書体やCSS情報を調べたりできる無料ツールです。
一般的なツールでは「色だけ」「フォントだけ」のように機能が分かれていることが多いですが、Font & Color Checkerでは画像の配色確認とサイトの書体調査を1つのページで行えます。
さらに、
- ブラウザの拡張機能は不要
- 会員登録不要
- 画像は外部へ送信されない
- インストール不要
という特徴があり、デザイナーやWeb制作者だけでなく、ブログを書いている方やSNS画像を作る方にもおすすめです。
この記事では、それぞれの機能の使い方を画像付きでわかりやすく紹介します。
Font & Color Checkerでできること
Font & Color Checkerには、大きく分けて2つの機能があります。
① 画像から色を抽出
画像を読み込むだけで、
- HEXカラーコード
- RGB
- HSL
を確認できます。
また、画像全体から主要な配色を自動で抽出できるため、
- Webデザイン
- バナー制作
- SNS画像制作
などにも便利です。
さらに、画像上をマウスで動かすと8倍の虫眼鏡（ルーペ）が表示されるため、細かい部分の色まで正確に確認できます。
② Webサイトから書体を調べる
もう一つの特徴が、Webサイトで使用されている書体を調べられる機能です。
専用のブックマークレットを利用すると、ページ内の文字にカーソルを合わせるだけで、
- フォント名
- フォントサイズ
- 太さ
- 行間
- 字間
- 文字色
- 背景色
を確認できます。
CSSを直接取得する仕組みなので、実際にブラウザが表示している情報をそのまま確認できます。
ブックマークレットについて解説した記事は下記になります
👇メープルの初めてのパソコン（私の技術ブログ）のヘッダーの情報を見てみました
画像から色を抽出する方法
STEP1 画像を読み込む
「画像から」タブを開きます。
画像は次の3つの方法で読み込めます。
- ドラッグ＆ドロップ
- クリックして画像を選択
- キーボードの ⌘ + V（Windowsでは Ctrl + V）で貼り付け
スクリーンショットをコピーしたあと、そのまま貼り付けられるので非常に便利です。
STEP2 調べたい場所にカーソルを合わせる
画像上でマウスを動かすと、8倍に拡大されたルーペが表示されます。
細かい部分でも正確に色を確認できるため、
- アイコン
- ボタン
- 文字色
- グラデーション
なども簡単に調べられます。
STEP3 クリックしてカラーコードを取得
調べたい場所をクリックすると、その色が確定します。
取得できる情報は次のとおりです。
- HEX
- RGB
- HSL
それぞれワンクリックでコピーできます。
デザイン制作やCSSを書く際にもそのまま利用できます。
STEP4 画像全体の配色を確認する
画像を読み込むと、主要な色も自動で抽出されます。
画像全体の雰囲気を確認したい場合や、配色を参考にしたい場合に便利です。
抽出された色をクリックするとコピーできます。
Webサイトの書体を調べる方法
Font & Color Checkerでは、ブックマークレットを利用してWebサイトのCSS情報を取得します。
最初に一度だけ設定すれば、その後はワンクリックで利用できます。
STEP1 「書体を採る」をブックマークバーへ追加する
「サイトから」タブを開くと、「書体を採る」というボタンが表示されます。
このボタンをブラウザのブックマークバーへドラッグしてください。
ドラッグできない場合は、表示されているコードをコピーし、新しいブックマークのURL欄へ貼り付けても利用できます。
STEP2 調べたいサイトを開く
フォントを調べたいWebサイトを開きます。
STEP3 ブックマークレットを実行する
先ほど登録した「書体を採る」をクリックします。
すると、調査モードが開始されます。
STEP4 文字にカーソルを合わせる
調べたい文字へカーソルを合わせると、
- フォント名
- サイズ
- 太さ
- 行間
- 字間
- 文字色
- 背景色
がリアルタイムで表示されます。
STEP5 クリックして情報を固定する
気になる文字をクリックすると情報が固定されます。
コピーしながら他の情報を確認できるので、Web制作にも便利です。
STEP6 Escキーで終了
調査が終わったらEscキーを押してください。
スマートフォンでは画面右上の「×」ボタンから終了できます。
スマートフォンで利用する方法
スマートフォンでもブックマークレットは利用できます。
ただし、パソコンのようにドラッグできないため、少しだけ設定方法が異なります。
手順は次のとおりです。
- 「コードをコピー」（下の画像）のボタンをタップ（コードがコピーされる）
- Font & Color Checkerのページをブックマークに追加
- ブックマーク一覧
- Font & Color Checkerのところを長押し→編集
- ブックマークのURLを手順１でコピーしたコードに置き換える
- 保存する
- 調べたいページに移動
- ブックマークしたFont & Color Checkerのページをタップ
そうすると現在表示中のWebページ上で書体取得機能を実行できます。
iPhoneのSafari、Androidブラウザともに利用可能です。
なぜブックマークレットを使うの？
「なぜ普通のボタンではなく、ブックマークレットを使うの？」と疑問に思う方もいるかもしれません。
理由は、ブラウザのCORS（Cross-Origin Resource Sharing）という仕組みにあります。
通常、Webページから別のWebサイトのHTMLやCSSを勝手に読み取ることはできません。
しかし、ブックマークレットは現在開いているページ上で直接JavaScriptを実行するため、そのページのCSS情報を取得できます。
つまり、ブラウザの仕組みに沿った安全な方法で書体情報を取得しているということです。
拡張機能をインストールする必要もなく、ブラウザだけで利用できるのも特徴です。
なぜ画像からフォント名は判定できないの？
「画像からもフォント名を調べられたら便利なのに」と思う方も多いでしょう。
しかし、これは技術的に非常に難しい処理です。
スクリーンショットや写真には、「フォント名」という情報は保存されていません。
残っているのは文字の形だけです。
画像からフォント名を判定するには、
- 文字を認識する（OCR）
- 無数のフォントデータと比較する
- AIで候補を推測する
という高度な処理が必要になります。
そのため、WhatTheFontのようなサービスでも「似ているフォント候補」を表示する形式になっています。
また、多くのサービスでは画像をサーバーへ送信して解析を行います。
一方、Font & Color Checkerでは画像はブラウザ内だけで処理しており、外部サーバーへアップロードされることはありません。
プライバシーを重視した設計のため、画像からフォント名を推測する機能はあえて搭載していません。
他のツールとの違い
Font & Color Checkerは、既存のツールの良い部分を組み合わせたような使い方ができます。
| 機能 | Font & Color Checker | 一般的なツール |
|---|---|---|
| 画像から色を抽出 | 〇 | 〇 |
| Webサイトの書体取得 | 〇 | 一部のみ |
| 拡張機能不要 | 〇 | ×が多い |
| 画像を外部送信しない | 〇 | サービスによる |
| 1つのページで利用可能 | 〇 | 別々のツールが多い |
特に、色の抽出と書体調査を1つのページで完結できる点は、このツールならではの特徴です。
よくある質問
画像は外部に送信されますか？
いいえ。
画像はブラウザ内だけで処理され、外部サーバーへ送信されることはありません。
利用料金はかかりますか？
無料で利用できます。
スマートフォンでも使えますか？
はい。
画像から色を抽出する機能はそのまま利用できます。
書体取得機能も、ブックマークレットを設定すれば利用可能です。
対応ブラウザを教えてください
Chrome、Edge、Safariなど、主要なモダンブラウザで利用できます。
まとめ
Font & Color Checkerは、画像から色を抽出する機能と、Webサイトから書体を調べる機能を1つにまとめた無料ツールです。
特に、実際のCSS情報を直接取得する書体調査機能は、Web制作やデザインの参考資料を作る際にも役立ちます。
また、画像はブラウザ内で処理されるため、外部へアップロードすることなく安心して利用できます。
デザインの参考にしたいサイトのフォントを調べたいときや、画像からカラーコードを取得したいときは、ぜひ活用してみてください！
関連記事
ブックマークレットとは👇
裏側話が気になる方は👇
