電通デジタル、自然言語による指示でウェブサイトのUIを設計・実装する新手法「HOZO」を開発
Key facts
- 電通デジタル、自然言語による指示でウェブサイトのUIを設計・実装する新手法「HOZO」を開発
- 株式会社電通デジタルは、AIとの自然言語対話により、企業のデザインシステムに準拠したウェブサイトのUIを設計・実装する新手法「HOZO」を開発し、本日より運用を開始した。この手法は、既存サイトからのUIパターン抽出、コードとクラウドデザインツールの双方向変換、既存コンテンツを維持したデザインシステムの置き換えを特徴とし、UIのばらつき解消と業務効率化を目指す。
- Source: PR Times
- Date: 2026年6月3日
Direct answer
株式会社電通デジタルは、AIとの自然言語対話により、企業のデザインシステムに準拠したウェブサイトのUIを設計・実装する新手法「HOZO」を開発し、本日より運用を開始した。この手法は、既存サイトからのUIパターン抽出、コードとクラウドデザインツールの双方向変換、既存コンテンツを維持したデザインシステムの置き換えを特徴とし、UIのばらつき解消と業務効率化を目指す。
- Citation
- 電通デジタル、自然言語による指示でウェブサイトのUIを設計・実装する新手法「HOZO」を開発 (2026年6月3日), PR Times
- Source
- PR Times
- Date
- 2026年6月3日
株式会社電通デジタルは、AIとの自然言語対話により、企業のデザインシステムに準拠したウェブサイトのUIを設計・実装する新手法「HOZO」を開発し、本日より運用を開始した。この手法は、既存サイトからのUIパターン抽出、コードとクラウドデザインツールの双方向変換、既存コンテンツを維持したデザインシステムの置き換えを特徴とし、UIのばらつき解消と業務効率化を目指す。
📋 記事の処理履歴
- 📰 発表: 2026年6月3日 20:01
- 🔍 収集: 2026年6月3日 11:20
- 🤖 AI分析完了: 2026年6月7日 01:25（収集から86時間4分後）
株式会社電通デジタル（本社：東京都港区 代表取締役社長執行役員：瀧本 恒 以下、電通デジタル）は、AIとの自然言語対話によりデザインシステム※1に準拠したウェブサイトのUIを設計・実装する手法「HOZO（ホゾ）」を確立し、本日より運用を開始します。
近年ウェブサイトの制作において、生成AIの進化・普及により、自然言語での指示だけでコードを生成する「バイブコーディング」※2と呼ばれる開発スタイルが注目を集めています。
一方、大規模なウェブサイトを運営する企業の現場では、長年にわたる運用の中で、複数の部門や制作会社が関与することによるUIのばらつきが蓄積し課題となっています。デザインシステムを策定していても、既存の全ページにそれを反映させるには膨大な工数が必要であり、デザイナーやエンジニアが1ページずつ手作業で対応しなければなりません。
電通デジタルは、ウェブサイト構築・運用支援の知見と、「∞AI®（ムゲンエーアイ）」※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評価・改善提案など、ウェブサイト制作プロセス全体への拡張を目指します。バイブコーディングを基点に、クライアントのデジタル体験の品質向上と業務効率化の両立を支援してまいります。
国内電通グループは“人間の知（=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®」について https://www.dentsudigital.co.jp/services/data-ai/mugen-ai
＜電通デジタルについて＞https://www.dentsudigital.co.jp/
電通デジタルは、国内最大規模の総合デジタルファームです。「人の心を動かし、価値を創造し、世界のあり方を変える。」をパーパスに、生活者に寄り添うクリエイティビティとテクノロジーを統合的に活用することで、あらゆるトランスフォーメーションを実現しています。クライアントの事業成長パートナーとして、共に新たな価値を創造することで、経済そして社会の「変革と成長」を目指しています。
近年ウェブサイトの制作において、生成AIの進化・普及により、自然言語での指示だけでコードを生成する「バイブコーディング」※2と呼ばれる開発スタイルが注目を集めています。
一方、大規模なウェブサイトを運営する企業の現場では、長年にわたる運用の中で、複数の部門や制作会社が関与することによるUIのばらつきが蓄積し課題となっています。デザインシステムを策定していても、既存の全ページにそれを反映させるには膨大な工数が必要であり、デザイナーやエンジニアが1ページずつ手作業で対応しなければなりません。
電通デジタルは、ウェブサイト構築・運用支援の知見と、「∞AI®（ムゲンエーアイ）」※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評価・改善提案など、ウェブサイト制作プロセス全体への拡張を目指します。バイブコーディングを基点に、クライアントのデジタル体験の品質向上と業務効率化の両立を支援してまいります。
国内電通グループは“人間の知（=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®」について https://www.dentsudigital.co.jp/services/data-ai/mugen-ai
＜電通デジタルについて＞https://www.dentsudigital.co.jp/
電通デジタルは、国内最大規模の総合デジタルファームです。「人の心を動かし、価値を創造し、世界のあり方を変える。」をパーパスに、生活者に寄り添うクリエイティビティとテクノロジーを統合的に活用することで、あらゆるトランスフォーメーションを実現しています。クライアントの事業成長パートナーとして、共に新たな価値を創造することで、経済そして社会の「変革と成長」を目指しています。
よくある質問
「HOZO」とは何ですか？
電通デジタルが開発した、AIとの自然言語対話により企業のデザインシステムに準拠したウェブサイトのUIを設計・実装する新手法です。
「HOZO」の主な特徴は？
①企業のデザインシステムに準拠したUI生成、②コードとクラウドデザインツールの双方向変換、③既存サイトからの逆算アプローチの3点です。
「バイブコーディング」とは何ですか？
AIとの自然言語での対話を通じてソフトウェアのコードを生成する開発スタイルの総称です。
「HOZO」はいつから運用開始されますか？
本日（プレスリリース日）より運用を開始します。
「HOZO」の開発目的は？
大規模ウェブサイトにおけるUIのばらつきを解消し、デザインシステムに準拠したUI開発を効率化することです。