既存サイトから、
デザインシステムを数分で。
URLを入力するだけ。実測ベースのデザイントークン・コンポーネント・アクセシビリティ診断を自動生成し、リニューアルの土台になる資産として持ち帰れます。
リニューアルの最初の壁は
「現状がわからない」こと
デザインシステムの構築やリニューアルの起点は、既存サイトの現状把握。その棚卸しには、こんな課題がつきまといます。
デザイン資産が残っていない
当時の定義書もFigmaデータも存在せず、何を基準にリニューアルすればよいか分からない。
棚卸しに数週間かかる
現状のカラーやスタイルを人手で1ページずつ洗い出す作業に、着手前から時間を取られてしまう。
判断が属人的になる
どの色が正式なブランドカラーか、どのスタイルが実際に使われているか、担当者の記憶や勘に頼りがち。
目視の書き起こしから、実測の抽出へ
従来のやり方では、デザイナーが既存サイトを目視で読み取り、値を一つずつ書き起こして整理します。確かな仕事でも、精度と網羅性は人と時間に依存し、「なぜこの値なのか」という根拠は残りにくいものでした。DesignSyncAIはレンダリング実測値と配信CSSの実データから直接抽出し、実測値には「観測」バッジ、AIが補完した値には「推定」バッジを付与。すべての値が根拠（evidence）まで辿れるため、その後の設計判断に説得力を持たせられます。
getComputedStyleによるレンダリング実測、および配信CSSの実データから直接取得した値。出現ページ数などの根拠付き。
観測データが不足する箇所をAIが補完した値。トークンの一貫性を保ちながら、未観測のコンポーネントも生成。
3つの特徴
実測にもとづく正確さ、コンポーネントの網羅性、そのまま使える出力形式。DesignSyncAIの3つの強みをご紹介します。
実測ファーストの抽出
レンダリング実測（getComputedStyle）と配信CSSの実データを解析。CSS変数名・ブレークポイント・ホバー状態まで取得します。抽出したトークンには常に観測/推定の根拠が付きます。
コンポーネントを網羅
観測されたコンポーネントに加え、未観測の基本コンポーネントも抽出済みトークンから生成補完します。Button / Badge / Table など計20種超をカバー。
持ち帰れる資産
Color / Typography / Layout & Spacing / Shadow — 抽出した全トークンを、tokens.json（W3C DTCG）/ tailwind.config.js / tokens.css / DESIGN.md としてワンクリックでダウンロード。Figmaプラグイン連携は開発中です。
仕組み
URLを入れてからデザインシステムとして持ち帰るまで。4つのステップでご紹介します。
URL入力 & 構造解析
URLを1つ入力するだけで、サイト全体をクロール&レンダリング。発見したページをカテゴリ別に提示し、解析対象を選べます。
デザインシステム抽出（AI）
レンダー済みHTMLをAIが解析し、Colors / Typography / Components を構造化データとして抽出。複数ページの結果を1つのデザインシステムに統合します。
結果プレビュー・確認
抽出結果は、そのまま“見て・使える”形に。結果画面でカラーからコンポーネントまで項目横断で確認できます。
Figma / コード連携
抽出データはユニークIDで保管し、shadcn/ui ベースのコードとして展開。開発中のFigma連携で、解析結果がFigma上にデザインシステムとして自動構築される未来を目指します。
例: コーポレートサイト1件の解析で
8ページを解析し、数分でここまでを自動生成しました。
※ 上記はsun-asterisk.com解析によるデモ実測値です。実際の結果はサイトの規模・構成により異なります。
従来の棚卸しとの違い
同じ棚卸しを人手で行った場合と比べて、どこが変わるかをまとめました。
| 項目 | 従来の手作業棚卸し | DesignSyncAI |
|---|---|---|
| 所要時間 | 数週間 | 数分 |
| 判断基準 | 属人的（記憶・勘） | 実測データベース |
| 根拠の記録 | 残らない | evidence付きで保存 |
| コンポーネント抽出 | 手作業で洗い出し | 自動検出 + 生成補完 |
| アクセシビリティ診断 | 個別に目視確認 | WCAGコントラスト実測 |
よくあるご質問
導入をご検討の際によくいただくご質問をまとめました。
対象サイトの条件はありますか?
一般に公開されているURLであれば解析できます。SPAなどJavaScriptによるレンダリングにも対応しています。
解析にはどのくらい時間がかかりますか?
対象ページ数によりますが、数分程度で完了します（例: コーポレートサイト8ページの解析で数分）。
抽出結果の精度はどの程度ですか?
実測できた値には「観測」、AIが補完した値には「推定」バッジが付き、明確に区別されます。観測データにはevidence（根拠）が付与されます。
ログインが必要なページも解析できますか?
現状は非対応です。一般に公開されているページのみを解析対象としています。
出力形式には何がありますか?
tokens.json（W3C DTCG形式）/ tailwind.config.js / tokens.css / DESIGN.md をダウンロードできます。
Figmaとの連携予定はありますか?
Figmaプラグインとしての連携機能を開発中です。