Web Extension Lab

【StylePeek】DevTools不要 — フォント・色・余白をワンクリックで検査

2026年4月20日

StylePeekは、DevToolsを開かずに任意のWebサイトでフォント・色・余白を検査できるChrome拡張です。要素をクリックするだけでスタイルがサイドパネルに即座に表示されます。ブラウジング中も常時表示。Chrome Web Storeで公開中です。

課題

Webサイト上の要素のフォントや色、余白を確認するには、通常DevToolsを開いてElementsパネルで計算済みスタイルを探す必要があります。動作しますが、数クリック必要で、デバッグ向けのUIは素早いデザイン確認には最適ではありません。

参考サイトを確認するWebデザイナー、実装を検証するフロントエンド開発者、一貫性を監査するデザインシステムチームにとって、より速いワークフローが求められます。

使い方

1. StylePeekアイコンをクリックしてサイドパネルを開く 2.「検査開始」をクリックし、ページ上の要素を選択
2. タイポグラフィ・色・余白がサイドパネルに即座に表示
3. 任意の値をワンクリックでコピー

タイポグラフィタブ — フォントファミリー・サイズ・ウェイト・行の高さ・字間を一覧表示

カラータブ — テキスト・背景・ボーダーの色をhex/RGB/HSLとプレビュースウォッチで表示

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

主な機能

• 常時表示サイドパネル — ブラウジング中も開いたまま、タブやページをまたいで動作
• ワンクリック検査 — 要素をクリックするだけでスタイルを即座に表示
• タイポグラフィ詳細 — フォントファミリー・サイズ・ウェイト・行の高さ・字間・テキスト変換
• 色の抽出 — テキスト・背景・ボーダーの色をhex、RGB、HSLで表示
• ボックスモデル表示 — マージンとパディングを視覚的に確認
• ワンクリックコピー — 検査した値を即座にコピー
• DOM汚染ゼロ — 検査対象のページに要素を一切注入しない

無料版 vs Pro

無料版はタイポグラフィ・色・余白の検査とワンクリックコピーに対応。ProではTailwind CSSクラス、CSSカスタムプロパティ、JSONデザイントークンへのエクスポート、画像からの色抽出、ページ全体のデザイン分析が利用できます。

Pro: ページ全体分析 — 使用フォント・カラーパレット・スペーシングパターンを一覧表示