「HOZO」の主なポイント
1. 企業のデザインシステムに準拠したUI生成
「HOZO」は、既存ウェブサイトのURLやクラウドデザインツール上のデータから、ナビゲーション、カード、テーブル、CTA（Call To Action）など数十種類のUIパターンを自動で抽出し、分類します。そして、色、書体、余白といったデザイントークンを体系化することで、AIが企業固有のデザインシステムに厳密に準拠したUIコンポーネントを生成することを可能にします。これにより、ページごとのUIのばらつきを解消し、統一されたデザインを実現します。
2. コードとクラウドデザインツールの双方向変換
生成されたUIは、HTMLやReactなどのコード形式だけでなく、クラウドデザインツール上で編集可能な形式でも出力できます。さらに、コードとクラウドデザインツールの間で双方向変換が可能です。これにより、デザイナーはクラウドデザインツールで、エンジニアはコードで、それぞれの専門領域において品質レビューを行うことができ、AIによる自動生成だけでなく、人間の判断を組み込んだ開発ワークフローが実現します。
3. 既存サイトからの逆算アプローチ
「HOZO」は既存のウェブサイトを基点とする逆算型のアプローチを採用しています。既存ページのコンテンツはそのまま維持しながら、デザインシステムだけを置き換えることが可能です。また、デザインシステムのパーツが変更された場合でも、過去に生成されたUIに自動で反映されるため、継続的な運用や改善にも対応します。デザインシステムに詳しくない担当者でも、自然言語による指示だけでデザインシステムに則ったUI検証を行うことができます。
今後の展望と電通グループのAI戦略
電通デジタルは今後、「HOZO」の適用領域を、既存サイトにおけるデザインシステムの運用・統一にとどまらず、新規ページの企画・設計段階や、AIによるUI評価・改善提案など、ウェブサイト制作プロセス全体へと拡張していくことを目指しています。バイブコーディングを基点に、クライアントのデジタル体験の品質向上と業務効率化の両立を支援していく方針です。
国内電通グループは、人間の知とAIの知を組み合わせることで、顧客や社会の成長に貢献する独自のAI戦略「AI For Growth」を推進しています。
「AI For Growth」に関する詳細情報は、以下のウェブページで確認できます。
AI For Growthについて
※1：バイブコーディング（Vibe Coding）とは、AIとの自然言語での対話を通じてソフトウェアのコードを生成する開発スタイルの総称です。
※2：デザインシステムとは、デザインのルールやパーツを体系的にまとめ、開発を効率化する仕組みのことです。
※3：「∞AI®」に関する詳細情報はこちらで確認できます。
「∞AI®」について
電通デジタルに関する情報は以下のウェブサイトで確認できます。
電通デジタルについて
