First CHTools無料Webツール

FIRST CH TOOLS / デザイン / 81 WEB STYLE PROMPT

サイトのスタイル実測→AI向けブランドガイド

自分のサイトのHTMLとCSSを貼り付けると、実際に表示される色（用途別）・文字サイズの段階・行間・和文フォント・余白・角丸を測り、Claude Code や Cursor に渡せるブランドガイド（指示文）を1本にまとめます。出力するのは数値と構造だけで、ページの本文・画像・コピーは含めません。URLを取りに行くことはなく、処理はすべてこのブラウザの中で行います。

貼り付けた内容はこのブラウザの中で測るだけで、送信も保存もしません。スクリプト・画像・外部CSS・Webフォントは読み込まずに測ります。

How to Use

  1. ページのソースを貼る自分のサイトをブラウザで開き、「ページのソースを表示」の中身を全部コピーして貼り付けます。HTMLファイルを選んでも構いません。JavaScript で画面を組み立てるサイトは、開発者ツールの Elements で <html> を右クリックし「Copy outerHTML」でコピーしたものを貼ると、表示後の状態で測れます。
  2. 測る「測ってブランドガイドを作る」を押すと、色・文字サイズ・余白・角丸の結果と指示文が出ます。<link> で読み込んでいるCSSは取りに行かないので、そのCSSの中身を「外部CSSの中身」に貼ると結果に反映されます。
  3. 指示文を使う「指示文をコピー」か「保存」で取り出し、Claude Code・Cursor などのAIに渡します。値を直したいところは、渡す前にテキストのまま書き換えられます。

About This Tool

AIに画面を作らせると、サイトで使っていない青や、本文より少し大きいだけの文字サイズ、値の揃わない余白が入りがちです。既存の配色や文字の決まりを最初に渡しておけば、出来上がりがサイトの他のページと揃います。本ツールは、自分のサイトのブランドガイドをAI向けに書き出すためのものです。貼り付けたHTMLを画面に出さずにブラウザの中で表示し、各要素に実際に当たっている値（getComputedStyle）を測って、①用途別の色（背景・本文・見出し・補足の文字・メインカラー・リンク・面・枠線とコントラスト比）、②文字サイズの段階（px・rem・太さ・行間・使われている要素、スマホ幅での大きさ）、③書体（和文フォントの指定の有無、Google Fonts の書体と太さ、本文と見出しの行間・字間、palt・word-break: keep-all などの和文の組み方）、④余白（4px・8px の倍数になっているか、セクションの上下の余白、gap）、⑤角丸と影、⑥ボタン・入力欄・リンクの見た目、⑦本文の最大幅・ブレークポイント・ページの構成をまとめます。

指示文に入れるのは数値・色コード・書体名・要素名だけで、ページの本文・見出しの文言・画像・クラス名は入れません。CSS で :root に定義済みのCSS変数があれば、名前と値をそのまま載せます。色は近いもの（RGBの距離12以内）をまとめ、文字の色は文字数、面の色は面積で重みを付けて用途を決めます。文字サイズの段階は本文の大きさを base とし、上を lg・xl…、下を sm・xs… と名付けます。測るときはスクリプト・画像・外部CSS・Webフォントを読み込まず（通信を禁止した枠の中で表示します）、書体は読み込まれた字形ではなく指定の値を読みます。

URLを入れて取得する機能はありません。貼り付けたHTMLとCSSはこのブラウザの中で測るだけで、送信も保存もしません。一度に貼り付けられるのは合計3MB・測る要素は6,000個までです。測った色の読みやすさを確かめるならコントラスト比チェッカー、文字サイズを画面幅に合わせて伸縮させるならCSS clamp() フルイドタイポグラフィ計算機、px と rem の対応表を作るならPX ⇄ REM / EM 単位変換が使えます。

Other Tools