電通數位開發新方法「HOZO」，透過自然語言指令設計與實作網站UI

株式會社電通數位（總公司：東京都港區，代表取締役社長執行役員：瀧本恒，以下簡稱電通數位）確立了一種名為「HOZO（ホゾ）」的方法，該方法透過與AI的自然語言對話，設計並實作符合設計系統※1的網站UI，並於即日起開始運用。

近年來，在網站製作領域，隨著生成式AI的演進與普及，一種僅透過自然語言指令即可產生程式碼的開發風格「Vibe Coding（バイブコーディング）」※2備受關注。

另一方面，在營運大規模網站的企業現場，多年營運下來，因多個部門與製作公司參與而導致的UI不一致性逐漸累積，成為一項課題。即使制定了設計系統，要將其反映到所有現有頁面仍需耗費大量工時，設計師與工程師必須手動逐頁處理。

電通數位融合了其在網站建構與營運支援方面的專業知識，以及以「∞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評估與改善提案等整個網站製作流程。以Vibe Coding為基礎，支援客戶同時提升數位體驗品質與業務效率。

日本國內的電通集團正推動其獨特的AI策略「AI For Growth」，透過結合「人類智慧」與「AI智慧」，為客戶與社會的成長做出貢獻。

關於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/

電通數位是日本國內最大規模的綜合數位服務公司。以「觸動人心、創造價值、改變世界樣貌」為宗旨，透過整合運用貼近生活者的創造力與科技，實現各種轉型。作為客戶事業成長的合作夥伴，透過共同創造新價值，致力於實現經濟與社會的「變革與成長」。