Sun*、企業に蓄積するデザインを自動で資産化する「DesignSync.AI」ソリューションを提供開始
Sun*
株式会社Sun Asterisk（本社：東京都千代田区、代表取締役：小林泰平、以下「Sun*」）は、既存Webサイトを解析してデザインシステム（※1）を自動生成するAIソリューション「DesignSync.AI（デザインシンク・エーアイ）」の提供を開始したことをお知らせします。
[画像1:
https://prcdn.freetls.fastly.net/release_image/37787/128/37787-128-a8a085b5a3804b6ae416903586b98ab0-2564x1250.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
「DesignSync.AI」は、既存WebサイトのURLを入力するだけで、AIがサイト全体を自動巡回し、デザイン構造の解析・抽出・レポート出力までを行う新たなソリューションです。従来は手作業に頼っていた既存Webサイトの調査・解析工数を大幅に削減します。可視化した現状デザイン構造をもとにSun*デザイナーが伴走することで、仕様のブラックボックス化やデザインルールの形骸化などの企業のデジタル領域におけるデザインの資産化を支援します。
「DesignSync.AI」は、既存のコードやプロダクトから上流資産を再生成する「Regen*」（※2）とともに、「既存資産から開発の上流アセットを生み出すSun*のプロダクト群」の一つです。デザインを起点に仕様書、QAテスト、開発タスクを自動生成する「MoMorph」（※3）などと組み合わせることで、プロダクトの意図や目的を一元化した情報基盤（Single Source of Truth）を構築し、AI駆動開発へと連続的につなげます。
Sun*は今後も、企業のデザインシステム構築と持続的な事業成長の支援を通じて、デザインシステムが整備されていない状態から、継続的に活用・運用できる環境への転換に貢献してまいります。
■「Sun* AI-Ready SDLC」の上流から、デザイン起点のAI駆動開発を支援
「Sun* AI-Ready SDLC」（※4）は、従来の開発サイクルにAIと自動化を融合させ、要件定義から見積もり、設計、実装、運用、評価の各フェーズにAIを組み込む、Sun*独自の次世代開発アプローチです。
「DesignSync.AI」は最上流を担うソリューションとして、デザインと開発の工程をAI駆動でシームレスにつなぐ役割を担います。
[画像2:
https://prcdn.freetls.fastly.net/release_image/37787/128/37787-128-385b38497ffaaf95dcf8ff54cec88641-1982x1000.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
さらに、Sun*独自のAI駆動開発支援ツールである「MoMorph」と連携し、デザインシステムの整備から運用までを一貫して支援することで、デザイン起点での高速かつ高品質なAI駆動開発を実現します。
[画像3:
https://prcdn.freetls.fastly.net/release_image/37787/128/37787-128-5b2da31f63b245ca96e6760d4072494a-1280x720.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
■開発の背景
企業にとってWebサイトは、公開後も改修や更新を重ねながら運用することで蓄積する重要なデザインの資産です。しかし、運用が長期化し、改修を繰り返すなかで、デザインドキュメントと実際のソースコードが乖離し、ブランドの一貫した世界観が崩れてしまうという課題が多く発生しています。また、改修やリニューアルのたびに、現状の画面やHTMLを一つひとつ確認してサイトの構造を把握し直す必要があり、現行サイトの調査・解析に全体工数の半分以上を要するなど、中長期的な改修コストが高騰する要因にもなっています。さらに、日本市場においては、デザインを再利用可能な資産として整備・活用する考え方や、デザインシステムを構築する取り組みが十分に浸透しきっていません。
Sun*はこうした課題を解決するため、デザイン資産をAIによって自動で資産化し、一貫した世界観で品質の高いサイト改修・運用を可能にする「DesignSync.AI」の提供に至りました。
■「DesignSync.AI」とは
「DesignSync.AI」は、URLを入力するだけで既存Webサイトを解析し、デザインを再利用可能な資産として可視化・構造化するソリューションです。「Existing Web to Design System」という、既存のWeb資産をデザイン開発の基盤として活用する考え方に基づき、以下5つのステップで、再開発コストの削減やデザインシステム導入時の障壁低減、AIによるデザイン生成の基盤構築を支援します。
[画像4:
https://prcdn.freetls.fastly.net/release_image/37787/128/37787-128-e8ae851e2c5f7d45d77c1d6a19714cda-1280x720.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
1.URL入力
解析したいサイトのURLを1つ入力するだけで、サイト全体を自動で読み込みます。HTMLやスクリーンショットなど、実際に表示される画面の状態まで取得します。
2.構造解析・ページ探索
サイトマップや内部リンクから発見したページをカテゴリ別に一覧表示し、解析対象を選択します。
3.AIによるデザインシステム抽出
レンダリング後のHTMLをAIが解析し、カラー・タイポグラフィ・コンポーネント・レイアウト・モーション・アクセシビリティという6つの要素を、構造化JSON（検索エンジンがプログラム上で直接理解しやすいように標準化したデータ形式 ）として抽出。複数ページの情報を、1つのデザインシステムとして統合します。
[画像5:
https://prcdn.freetls.fastly.net/release_image/37787/128/37787-128-3693e5bd31a359833946744fcc6566bb-2698x496.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
4.結果プレビュー・確認
そのまま「見て・使える」形で抽出結果を表示します。結果画面では、デザインシステムを項目横断で確認できます。
5.Figma/コード連携
抽出データをユニークIDで保管します。独自開発中のFigma Plugin連携により、解析結果をFigma上にデザインシステムとして自動構築することを将来的に目指しています。
■「DesignSync.AI」が提供する3つの価値
「DesignSync.AI」は、これまで多くの時間と労力を要していた既存サイトの調査・解析プロセスを自動化することで、企業に以下3つの価値を提供します。
１.現行サイトの調査・解析工数を削減
「DesignSync.AI」の導入により、サイトの調査・解析にかかる工数を、URLの入力からわずか数分程度に短縮し、従来比で最大90%削減します（従来の手作業によるデザイン棚卸し・文書化工数との比較（当社試算）。効果はサイトの規模・構成により異なります）。
さらに、デザインシステムとして再利用可能な形に整備することで、サイト全体のデザインの一貫性を保ちながら、効率的に開発を進められます。
[画像6:
https://prcdn.freetls.fastly.net/release_image/37787/128/37787-128-52bb41223b93545201197274b771991d-960x540.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
２.デザイン品質の再現性を向上
AIがサイト内のデザイン要素を一貫した基準で抽出することで、担当者による品質のばらつきや抜け漏れを抑えます。これにより、属人化しやすいデザインシステム化のプロセスを標準化し、デザイン品質を安定して再現・展開できます。
３.デザイナーが本質的な業務に集中できる環境を提供
デザインルールの確認や整理にかかる工数を削減することで、体験設計など、デザイナーがよりクリエイティビティを発揮すべき業務に集中できる環境を目指します。
※1 デザインシステム
ブランドやコミュニケーションの価値観定義を指針化したデザインプリンシプル、情報アーキテクチャとインタラクションデザインに基づいたコンポーネント定義、アクセシビリティを含んだ規範となるデザインガイドラインといった、デザインアセットの集合体
※2 「Regen*（リジェン）」については、以下のページをご覧ください。
https://sun-asterisk.com/service/development/regen/
※3 「MoMorph（モモーフ）」については、以下のページをご覧ください。
https://app.sun-asterisk.com/momorph/
※4 「Sun* AI-Ready SDLC（Software Development Life Cycle：ソフトウェア開発ライフサイクル）」については、以下のページをご覧ください。
https://app.sun-asterisk.com/sun-ai-ready-sdlc/
■本サービスに関するお問い合わせ先
https://sun-asterisk.com/service/development/design-sync-ai
■Sun*について
会社名：株式会社Sun Asterisk（英語表記：Sun* Inc.）
所在地：東京都千代田区大手町1-6-1 大手町ビルB1F
代表者：代表取締役 小林 泰平
創立年：2013年
事業内容：デジタル・クリエイティブスタジオ事業
URL：
https://sun-asterisk.com/
公式X：
https://x.com/Sun_Asteriskプレスリリース提供：PR TIMES
記事提供：PRTimes
