CSS
ページからスタイルを収集
URL を入力します。Milten が利用可能なスタイルシートを読み取り、繰り返し使われる色、フォント、サイズ、余白、角丸、影、カスタムプロパティをまとめます。
サイトの色・フォント・余白
ページの色・フォント・余白を一つのレポートにまとめます。値の重複や見た目の違いを見つけ、デザインの統一に役立てます。
スキャナーの仕組み
CSSソースから値の頻度サマリーへ
頻度
繰り返される値をグループ化
レポートは同一の色、フォント、サイズ、スペーシング、border-radius、box-shadow、CSS変数がどのくらいの頻度で現れるかを数えます。値が繰り返されるほど、システムトークンらしく見えます。
概要
集中と広がりを表示
サマリーは、値が一貫して繰り返される場所と、インターフェースに色、サイズ、フォント、シャドウの広いばらつきが蓄積された場所をすばやく把握するのに役立ちます。
読み取り中
最初に何をレビューするかの判断を支援
繰り返される色、文字サイズ、余白を、コンポーネントでの役割と合わせて比較してください。近い値でも意図的な違いの場合があります。CSSの集計はトークンの計画に役立ちますが、完成したデザインシステムを生成したり、意味に基づく名前を付けたりするものではありません。
レポートの内容
7種類のデザイン値
カラー
繰り返される色
スキャナーは色の値とその使用回数を表示するので、システムカラーと偶発的なローカルシェードを区別できます。
値使用回数
フォント
フォントとテキストサイズ
レポートには検出されたfont-familyの値、その出現頻度、繰り返されるfont-sizeの値が含まれます。
font-familyfont-size
余白 / サイズ
サイズ、margin、padding、width、height
サマリーは頻繁に使われるサイズと余白の値を強調します。ここでのばらつきが大きい場合は、通常グリッドの一貫性が弱いことを示します。
pxrem
角丸 / シャドウ
角丸とシャドウ
個別のグループは、繰り返されるborder-radiusとbox-shadowの値を示します。1つの値が他よりも頻繁に出現するケースも含まれます。
角丸シャドウ
CSS変数
検出されたカスタムプロパティ
スキャナーはCSSカスタムプロパティとその使用回数を表示するので、どの変数がすでにトークンのように機能しているかを確認できます。
--var使用回数
FAQ
CSSトークンスキャナーに関するよくある質問
どの値がレポートに含まれるか、頻度サマリーの読み方についての短い回答。
CSSトークンスキャナーはCSS変数のエクスポートとどう違いますか？
より広い範囲を見ます。カスタムプロパティに加えて、レポートは繰り返される色、フォント、font-sizeの値、サイズ、余白、border-radius、box-shadowを表示します。すべての値で使用頻度が重要です。
リポジトリへのアクセスなしでサイトを分析できますか？
はい。最初のパスは公開ページとリンクされたスタイルに対して実行できます。CSSの一部が認証の背後にあるか、ページで読み込まれない場合、サマリーには含まれません。
レポートはトークンの競合を表示しますか？
レポートは繰り返し使われる値とその分布を示します。意味上の競合を判断したり、トークン名を提案したりはしません。整理方法はチームで決めてください。
トークンがすでに存在する場合でもスキャナーは役立ちますか？
はい。レポートは検出されたCSS変数とその使用頻度、さらに近くにまだ存在する繰り返しの生の値（色、サイズ、余白、シャドウ）を示します。
空の値やまれな値はどう読めばよいですか？
使用頻度の低い値でも、重要な状態やコンポーネントに使われている場合があります。統合や削除の前に使用箇所を確認してください。頻度は調査の優先順位に役立ちますが、どの値を同じトークンにまとめるかを決めるものではありません。
関連サービス