電通デジタル、自然言語による指示でWebサイトのUIを設計・実装する「HOZO」を開発

　株式会社電通デジタルは3日、AIとの自然言語対話によりデザインシステムに準拠したWebサイトのUIを設計・実装する手法「HOZO（ホゾ）」の運用を開始すると発表した。

　電通デジタルは開発の背景として、近年Webサイトの制作において、生成AIの進化・普及により、自然言語での指示だけでコードを生成する「バイブコーディング」と呼ばれる開発スタイルが注目を集めていると説明する。

　一方、大規模なWebサイトを運営する企業の現場では、長年にわたる運用の中で、複数の部門や制作会社が関与したことでUIのばらつきが蓄積し、デザインシステムを策定していても、既存の全ページにそれを反映させるには膨大な工数が必要で、デザイナーやエンジニアが1ページずつ手作業で対応しなければならないという課題があるという。

　電通デジタルは、Webサイト構築・運用支援の知見と、「∞AI（ムゲンエーアイ）」をはじめとする多くのAIソリューションの実績を融合させ、HOZOを開発した。AIとの対話を通じて、企業のデザインシステムに準拠したUIコンポーネントの生成からページ構築、さらにクラウドデザインツールとの双方向変換までを一貫して実行する。

　HOZOは、既存WebサイトのURLやクラウドデザインツール上のデータからナビゲーション・カード・テーブル・CTAなど数十種類のUIパターンを自動抽出・分類し、色・書体・余白などのデザイントークンを体系化する。これにより、AIが企業固有のデザインシステムに準拠したUIコンポーネントを生成することが可能となる。汎用的なAIツールでは困難だった、デザインシステムへの厳密な準拠を実現し、ページごとのUIのばらつきを解消する。

　生成されたUIは、HTML・Reactなどのコード形式に加え、クラウドデザインツール上で編集可能な形式でも出力できる。さらに、コードとクラウドデザインツールの双方向変換に対応している。これにより、デザイナーはクラウドデザインツール上で、エンジニアはコード上で、それぞれの専門領域において品質レビューを行うことが可能となり、AIに任せきりにせず、人間の判断を組み込んだ開発ワークフローを実現する。

　既存のWebサイトを基点とする逆算型のアプローチを採用しており、既存ページのコンテンツはそのまま維持しながら、デザインシステムだけを置き換えられる。また、デザインシステムのパーツを変更した場合、過去に生成されたUIにも自動で反映されるため、継続的な運用・改善にも対応する。デザインシステムに詳しくない担当者でも、自然言語による指示だけでデザインシステムに即したUI検証を行える。

　電通デジタルは、開発手法の適用領域を既存サイトにおけるデザインシステムの運用・統一にとどまらず、新規ページの企画・設計段階や、AIによるUI評価・改善提案など、Webサイト制作プロセス全体への拡張を目指す。バイブコーディングを基点に、クライアントのデジタル体験の品質向上と業務効率化の両立を支援していくとしている。