Design Style Picker

閲覧中サイトのフォント・カラー(HEX/RGB)・ボタンサイズをワンクリックで一覧表示・コピーできるデザイナー向けツール。

フォント・カラー(HEX/RGB)・ボタンの寸法を、閲覧中のサイトからワンクリックで抽出＆コピー。DevToolsを開かずに、デザインの参考情報が一瞬で手に入るデザイナー向けツールです。 「このサイトのフォント、何を使ってる？」「この色のカラーコードは？」「ボタンの余白や角丸はどれくらい？」 ——そんな“ちょっと確認したい”を、アイコンのワンクリックで解決します。 Design Style Picker は、閲覧中のWebページで実際に使われているデザイン情報を抽出し、一覧表示・ワンクリックコピーできる拡張機能です。DevToolsを開いてCSSを追いかける手間がいりません。 ■ 抽出できる情報 ・フォント … font-family 単位でまとめ、使用サイズ・太さ・字体・出現回数を表示 ・カラー … 文字色・背景・枠線・SVG図形の色を収集。HEX / RGB を重複なく、使用頻度順にスウォッチ付きで表示 ・ボタン … サイズ(幅×高さ)・余白・角丸・フォント・背景/文字色・枠線を、スタイルごとにまとめて表示 ■ 使い方はかんたん 1. 調べたいサイトを開く 2. ツールバーのアイコンをクリック（自動でスキャン） 3. 「フォント / カラー / ボタン」タブを切り替え 4. 値をクリックしてコピー。タブごとの「一覧をコピー」にも対応 ■ こんな方におすすめ ・他サイトのデザインを参考にしたいWebデザイナー ・実装中に色やサイズをすばやく確認したいフロントエンドエンジニア ・カラーパレットやタイポグラフィを手早く棚卸ししたい方 ■ プライバシーに配慮 ・必要な権限は「現在のタブ(activeTab)」と「スクリプト実行(scripting)」のみ。全サイトへの常時アクセス権は求めません。 ・アイコンをクリックした瞬間だけ、その場でページを解析します。 ・取得した情報はポップアップ内に表示するだけで、外部送信も保存も一切行いません（完全ローカル動作）。 ■ ご利用上の注意 ・chrome:// などのブラウザ内部ページ、拡張機能ストア、ローカルファイル表示では動作しません。 ・クロスオリジンのiframe内や一部のShadow DOM内の要素は取得できないことがあります。 ・フォントのプレビューは、お使いの端末に該当フォントが無い場合、近い代替フォントで表示されます（フォント名は正確に表示されます）。