電通デジタルがAIとの対話でWebサイトのUIを組み上げる「HOZO」開発、運用を開始

電通デジタルは、AIとの対話でWebサイトのUI(ユーザーインターフェース)を設計・実装する手法「HOZO(ホゾ)」を確立し、6月3日から運用を開始したと発表した。自然言語の指示でAIがコードを生成する開発スタイル「バイブコーディング」を基盤に、企業に固有のルールやパーツをまとめたデザインシステムに準拠する。UIコンポーネントの生成からページ構築、クラウドデザインツールとの双方向変換までを一貫して実行する。

ナビゲーション・カード・テーブル・CTA(行動喚起)など数十種類のUIパターンを自動抽出・分類し、色・書体・余白を体系化した。汎用的なAIツールでは困難なデザインシステムへの厳密な準拠を実現し、ページごとのUIのばらつきを解消する。生成したUIは、HTMLやJavaScriptライブラリのReactなど複数のコード形式や、デザインツールで編集可能な形式で出力する。デザイナーはデザインツール上で、エンジニアはコード上で品質レビューできる。

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