StylePeek - デザインスタイルインスペクター

DevToolsを開かずに、任意のWebサイトでフォント・色・余白を即座に検査。

StylePeekはスピード重視のデザインインスペクターです。サイドパネルを開き、要素をクリックするだけでスタイルが即座に表示されます。ページリロードなし、DOM汚染なし。

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

サイドパネルはブラウジング中も開いたまま。ページやタブをまたいで再度開き直す必要はありません。

無料機能:
- フォントファミリー・サイズ・ウェイト・行間を検査
- 色を抽出（hex、RGB、HSL）＋プレビュースウォッチ付き
- マージンとパディングをボックスモデルで視覚的に計測
- 検査した値をワンクリックコピー
- あらゆるWebサイトで動作

Pro機能:
- Tailwind CSSクラスとしてエクスポート
- CSSカスタムプロパティまたはJSONデザイントークンとしてエクスポート
- 画像から色を抽出
- ページ全体のデザイン分析とスタイル概要

プライバシー:
- すべての検査はブラウザ内でローカルに実行。データは一切サーバーに送信されません
- DOMへの注入なし。検査したページは完全にクリーンなまま
- 無料機能にアカウント不要

ホスト権限について:
StylePeekはクリックした要素のCSSスタイルを読み取るためにWebページへのアクセスが必要です。これはサイドパネルがタブをまたいで動作するために必要です。ページの内容が収集・保存・送信されることはありません。

参考サイトを確認するWebデザイナー、レイアウトをデバッグするフロントエンド開発者、一貫性を監査するデザインシステムチームに最適です。