ウェブサイト制作の現状と「HOZO」の必要性
近年、生成AIの進化により、自然言語の指示のみでコードを生成する「バイブコーディング」が注目されています。しかし、大規模なウェブサイトを運用する企業では、長年の運用や複数部門・制作会社の関与によってUIのばらつきが課題となっていました。デザインシステムを策定しても、既存の全ページに適用するには膨大な工数が必要となり、デザイナーやエンジニアが手作業で対応せざるを得ない状況です。
電通デジタルは、ウェブサイト構築・運用支援の豊富な知見と、同社のAIソリューション「∞AI®」をはじめとする実績を融合し、この課題を解決する新手法「HOZO」を開発しました。「HOZO」は、「デザイン、瞬組み。」というタグラインのもと、日本の伝統的な木組み技術である“ほぞ組み”の思想を取り入れ、AIとの対話だけで企業ごとのデザインを組み上げる、新たなUI開発体験の実現を目指しています。
「HOZO」が提供する主な価値
①企業のデザインシステムに準拠したUI生成
「HOZO」は、既存ウェブサイトのURLやクラウドデザインツール上のデータから、ナビゲーション、カード、テーブル、CTAなど数十種類のUIパターンを自動で抽出し、分類します。そして、色、書体、余白といったデザイントークンを体系化することで、AIが企業固有のデザインシステムに厳密に準拠したUIコンポーネントを生成します。これにより、ページごとのUIのばらつきを解消し、汎用的なAIツールでは困難だったデザインシステムへの厳密な準拠を実現します。
②コードとクラウドデザインツールの双方向変換
生成されたUIは、HTMLやReactなどのコード形式に加え、クラウドデザインツール上で編集可能な形式でも出力できます。さらに、コードとクラウドデザインツールの双方向変換に対応している点が特長です。これにより、デザイナーはクラウドデザインツール上で、エンジニアはコード上で、それぞれの専門領域において品質レビューを行うことが可能となり、AIに任せきりにせず、人間の判断を組み込んだ開発ワークフローを実現します。
③既存サイトからの逆算アプローチ
この手法は、既存のウェブサイトを基点とした逆算型のアプローチを採用しています。既存ページのコンテンツはそのまま維持しつつ、デザインシステムのみを置き換えることが可能です。また、デザインシステムのパーツを変更した場合、過去に生成されたUIにも自動で反映されるため、継続的な運用・改善にも柔軟に対応します。デザインシステムに詳しくない担当者でも、自然言語による指示だけでデザインシステムに則ったUI検証を行うことができます。
今後の展望と電通グループのAI戦略
電通デジタルは今後、「HOZO」の適用領域を、既存サイトのデザインシステム運用・統一にとどまらず、新規ページの企画・設計段階や、AIによるUI評価・改善提案など、ウェブサイト制作プロセス全体へと拡張していくことを目指しています。バイブコーディングを基点に、クライアントのデジタル体験の品質向上と業務効率化の両立を支援していく方針です。
国内電通グループは、「AI For Growth」という独自のAI戦略を推進しています。これは、“人間の知”と“AIの知”を掛け合わせることで、顧客や社会の成長に貢献していくことを目的としています。
AI For Growthに関する詳細は、以下のウェブページで確認できます。
https://www.dentsu.co.jp/labo/ai_for_growth/
用語解説
-
デザインシステム: デザインのルールやパーツを体系的にまとめ、開発を効率化する仕組みです。
-
バイブコーディング（Vibe Coding）: AIとの自然言語での対話を通じてソフトウェアのコードを生成する開発スタイルの総称です。
電通デジタルは「人の心を動かし、価値を創造し、世界のあり方を変える。」をパーパスに掲げ、生活者に寄り添うクリエイティビティとテクノロジーを統合的に活用し、クライアントの事業成長パートナーとして、経済そして社会の「変革と成長」を目指しています。
「∞AI®」については、以下のウェブページで詳細を確認できます。
https://www.dentsudigital.co.jp/services/data-ai/mugen-ai
電通デジタルについては、以下のウェブページをご覧ください。
https://www.dentsudigital.co.jp/
