電通デジタル、自然言語による指示でウェブサイトのUIを設計・実装する新手法「HOZO」を開発
株式会社電通デジタル
コード・クラウドデザインツール間の双方向変換で、デザインと実装の分断を解消
株式会社電通デジタル（本社：東京都港区 代表取締役社長執行役員：瀧本 恒 以下、電通デジタル）は、AIとの自然言語対話によりデザインシステム※1に準拠したウェブサイトのUIを設計・実装する手法「HOZO（ホゾ）」を確立し、本日より運用を開始します。
[画像1:
https://prcdn.freetls.fastly.net/release_image/121065/266/121065-266-afdf49fce75bad048e58c45ae559144c-1387x463.png?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
近年ウェブサイトの制作において、生成AIの進化・普及により、自然言語での指示だけでコードを生成する「バイブコーディング」※2と呼ばれる開発スタイルが注目を集めています。
一方、大規模なウェブサイトを運営する企業の現場では、長年にわたる運用の中で、複数の部門や制作会社が関与することによるUIのばらつきが蓄積し課題となっています。デザインシステムを策定していても、既存の全ページにそれを反映させるには膨大な工数が必要であり、デザイナーやエンジニアが1ページずつ手作業で対応しなければなりません。
電通デジタルは、ウェブサイト構築・運用支援の知見と、「∞AI(R)（ムゲンエーアイ）」※3をはじめとする多くの AIソリューションの実績を融合し、新手法「HOZO」を開発しました。AIとの対話を通じて、企業のデザインシステムに準拠したUIコンポーネントの生成からページ構築、さらにクラウドデザインツールとの双方向変換までを一貫して実行します。
「HOZO」は「デザイン、瞬組み。」というタグラインのもと、日本の伝統的な木組み技術“ほぞ組み”の思想に倣い、AIとの対話だけで企業ごとのデザインを組み上げる新たなUI開発体験の実現を目指します。
■「HOZO」のポイント
１.企業のデザインシステムに準拠したUI生成
既存ウェブサイトのURLやクラウドデザインツール上のデータからナビゲーション・カード・テーブル・CTAなど数十種類のUIパターンを自動抽出・分類し、色・書体・余白などのデザイントークンを体系化します。これにより、AIが企業固有のデザインシステムに準拠したUIコンポーネントを生成することが可能となります。汎用的なAIツールでは実現が困難だったデザインシステムへの厳密な準拠を実現し、ページごとのUIのばらつきを解消します。
２.コードとクラウドデザインツールの双方向変換
生成されたUIは、HTML・Reactなどのコード形式に加え、クラウドデザインツール上で編集可能な形式でも出力することができます。さらに、コードとクラウドデザインツールの双方向変換に対応しています。これにより、デザイナーはクラウドデザインツール上で、エンジニアはコード上で、それぞれの専門領域において品質レビューを行うことが可能となり、AIに任せきりにしない、人間の判断を組み込んだ開発ワークフローを実現します。
３.既存サイトからの逆算アプローチ
本手法は既存のウェブサイトを基点とする逆算型のアプローチを採用しています。既存ページのコンテンツはそのまま維持しながら、デザインシステムだけを置き換えることが可能です。また、デザインシステムのパーツを変更した場合、過去に生成されたUIにも自動で反映されるため、継続的な運用・改善にも対応します。デザインシステムに詳しくない担当者でも、自然言語による指示だけでデザインシステムに則ったUI検証を行うことができます。
今後も電通デジタルは、本開発手法の適用領域を既存サイトにおけるデザインシステムの運用・統一にとどまらず、新規ページの企画・設計段階や、AIによるUI評価・改善提案など、ウェブサイト制作プロセス全体への拡張を目指します。バイブコーディングを基点に、クライアントのデジタル体験の品質向上と業務効率化の両立を支援してまいります。
[画像2:
https://prcdn.freetls.fastly.net/release_image/121065/266/121065-266-95ceb828a497a944b16f4a3f9fb595a7-372x311.jpg?width=536&quality=85%2C75&format=jpeg&auto=webp&fit=bounds&bg-color=fff ]
国内電通グループは“人間の知（=Intelligence）”と“AIの知”の掛け合わせによって、顧客や社会の成長に貢献していく独自のAI戦略「AI For Growth」を推進しています。
AI For Growthについては、以下ウェブページをご確認ください。
https://www.dentsu.co.jp/labo/ai_for_growth/
※1：デザインシステムとは、デザインのルールやパーツを体系的にまとめ、開発を効率化する仕組みのことです。
※2：バイブコーディング（Vibe Coding）とは、AIとの自然言語での対話を通じてソフトウェアのコードを生成する開発スタイルの総称です。
※3：「∞AI(R)」について
https://www.dentsudigital.co.jp/services/data-ai/mugen-ai
＜電通デジタルについて＞
https://www.dentsudigital.co.jp/
電通デジタルは、国内最大規模の総合デジタルファームです。「人の心を動かし、価値を創造し、世界のあり方を変える。」をパーパスに、生活者に寄り添うクリエイティビティとテクノロジーを統合的に活用することで、あらゆるトランスフォーメーションを実現しています。クライアントの事業成長パートナーとして、共に新たな価値を創造することで、経済そして社会の「変革と成長」を目指しています。
プレスリリース提供：PR TIMES
記事提供：PRTimes
