Web Extension Lab

Webサイトのフォント・色・余白を調べる5つの方法

2026年4月22日

美しくデザインされたWebサイトを見て、見出しに使われているフォント、ボタンの青色の正確なカラーコード、セクション間のパディングを知りたいと思ったことはありませんか。答えはページのCSSに埋まっていますが、それをどう取り出すかは使うツール次第です。ここでは5つのアプローチを、速度・機能の深さ・使いやすさの観点で比較します。

なぜデザインスタイルの検査が重要なのか

デザイナーは日常的にライブサイトを参照します。競合のレイアウト確認、ブランドの一貫性監査、既存のデザインシステムに合わせた値の取得など。開発者はスペーシングのずれをデバッグし、実装がデザイン仕様と一致しているかを検証します。いずれの場合も、タイポグラフィ・色・余白を素早く正確に確認したいという共通のニーズがあります。

問題は、ほとんどの方法が開発者向けに作られており、「値を知りたいだけ」の人には過剰だということです。このギャップを埋めるため、DevToolsのフルパワーからシンプルな専用拡張まで、さまざまなツールが生まれています。

1. Chrome DevTools（標準搭載）

要素を右クリックして「検証」を選ぶと、Elementsパネルが開き、適用されているすべてのCSSプロパティが表示されます。

メリット:

• すべてのChromiumブラウザに標準搭載 — 追加インストール不要
• 継承スタイルや算出値を含む、すべてのCSSプロパティを表示
• ライブでスタイルを編集して結果を即座に確認できる
• あらゆるフレームワークとレンダリング方式に対応

デメリット:

• 要素ごとに数十のプロパティが表示され、デザインチェックに不要な情報が多い
• 継承ルールやオーバーライドされた宣言、詳細度チェーンがノイズになる
• ボックスモデルの値は「Computed」タブへの切り替えが必要
• 個別の値（16進カラーやフォント名）のワンクリックコピーができない

おすすめ: CSSのフルデバッグが必要な開発者向け。

2. WhatFont + ColorZilla（専用ツール併用）

古典的なアプローチ：フォント用とカラー用に別々の拡張をインストールします。

WhatFontはホバーでフォントファミリー・サイズ・ウェイト・行間をツールチップ表示。ColorZillaはスポイトツールでページ上の任意のピクセルからカラーを取得し、hex・RGB・HSL形式でコピーできます。

メリット:

• WhatFontは数百万ユーザーを持つ最も人気のフォント識別ツール
• ColorZillaのスポイトは高精度で複数のカラー形式に対応
• どちらも軽量かつ無料

デメリット:

• 2つの別々の拡張を2つの別々のタスクに使用 — 統合ビューなし
• どちらもスペーシング（マージンとパディング）は表示しない
• エクスポート機能なし — 値を1つずつコピーする必要がある

おすすめ: 単一のプロパティをたまに確認するだけの場合。

3. CSS Peeper（デザイナー向けオーバーレイ）

CSS Peeperは、デザイナー向けのDevTools代替ツールとして作られました。拡張アイコンをクリックし、要素にホバーすると、タイポグラフィ・色・余白がカード形式のポップアップで表示されます。

メリット:

• デザイナーフレンドリーなUI — コードのノイズなし
• フォント・色・基本的な余白を1つのオーバーレイで表示
• ページの全カラーパレットと画像アセットを抽出
• 50万人以上のユーザー — 実績あり

デメリット:

• オーバーレイがページ上に表示されるため、検査中の要素が隠れることがある
• 別の要素にホバーすると前のオーバーレイが閉じる
• 常時表示パネルなし — クリックするとコンテキストが失われる

おすすめ: DevToolsなしで素早く視覚的チェックをしたいデザイナー。

4. Hoverify（マルチツールスイート）

Hoverifyは、CSSインスペクター・カラーピッカー・フォント検出・スクリーンショット・アセットダウンロードを1つの拡張にまとめたツールです。

メリット:

• オールインワンで拡張の数を削減
• スクリーンショットツールやアクセシビリティチェッカーを内蔵
• ホバーベースの検査で多数の要素を素早くスキャン可能

デメリット:

• 多機能ゆえに、個々の機能が専用ツールより粗い場合がある
• 有料ツール — 無料版に制限あり
• ページにUI要素を注入するため、レイアウトに干渉する可能性がある

おすすめ: 検査・スクリーンショット・アクセシビリティを1つの拡張でカバーしたい人。

5. StylePeek（常時表示サイドパネル）

StylePeekは異なるアプローチを取ります。ブラウザのサイドパネルを開き、ブラウジング中も常に表示されたままにします。要素をクリックするだけで、タイポグラフィ・色・余白がページを邪魔しない形で一覧表示されます。

サイドパネルでフォントファミリー・サイズ・ウェイト・行間を一目で確認

マージンとパディングをボックスモデルで視覚的に表示

メリット:

• サイドパネルはタブ移動やページ遷移でも開いたまま — 再度開く必要なし
• DOM注入ゼロ — 検査対象のページは完全にクリーンなまま
• 任意の値（フォント名、16進カラー、余白）をワンクリックコピー
• Pro版ではTailwind CSSクラス、CSSカスタムプロパティ、JSONデザイントークンとしてエクスポート
• すべてローカル処理 — データはサーバーに一切送信されない

デメリット:

• ブラウザ拡張のインストールが必要（Chrome、Edge等のChromiumブラウザ）
• Pro機能（Tailwindエクスポート、デザイントークン、画像色抽出）はライセンスが必要

おすすめ: 複数ページにわたって多数の要素を検査し、邪魔にならない常時表示パネルが欲しいデザイナーと開発者。

一覧比較

どのツールを選ぶべきか

最適な選択は、検査の頻度と取得した値の使い道で決まります:

• フォントや色をたまに確認するだけ？ WhatFontやColorZillaで数秒で完了します。
• DevToolsなしで素早くデザインを確認？ CSS Peeperがすっきりした概要を提供します。
• スクリーンショットやアクセシビリティチェックも必要？ Hoverifyがすべてをまとめています。
• 複数ページで多くの要素を検査？ StylePeekのような常時表示サイドパネルなら、開く→閉じる→再度開くの繰り返しを避けられます。
• CSSのフルデバッグ？ DevToolsが依然として最も強力です。

万人に最適な唯一のツールはありません。大切なのはタスクにツールを合わせること — フォントサイズを確認するたびにDevToolsを開く必要はないのです。