淇豪廣告：從 3D 城市到招牌模擬，讓客戶在製作前先看見自己的招牌

招牌還沒做出來之前，客戶多半只能看著平面設計稿，想像它裝上建築、亮起燈之後的樣子。成立於 1984 年、擁有 40+ 年實務經驗的淇豪廣告（CHYIHAUR），專注戶外招牌、指標系統與室內廣告；這次官網改版要回答的，正是「能不能在製作前，就先看見成品？」

磨人 Polish™ 以一座用 Three.js 打造的 3D 城市作為官網入口，搭配四棟示範建築的 3D 招牌展示間與實景照片模擬，並把網站做成繁中、英、日、馬來四語。案例文章兼顧搜尋引擎與 AI 搜尋；後台則導入 AI 協作流程，內容調整與社群素材都要經過人確認才上線。

1. 3D 城市首頁貼圖記憶體，從約 681MB 壓到約 30MB
2. 上傳 SVG 標誌或店面照片，即時預覽招牌成品
3. 四語系官網，後台 AI 提案、人確認才寫入

一、從一本招牌型錄，到一座可以逛的 3D 城市

招牌是立在城市裡的東西，只把完工照片排成型錄，很難讓人感受到它和建築、街道之間的關係。磨人 Polish™ 因此把官網首頁做成一座 3D 城市：高樓、摩天輪與街區之間立著六個熱點，分別通往專人諮詢、精選案例、關於我們、服務方案、招牌展示間與 ESG 倡議，讓訪客用逛街的方式認識淇豪。

城市越豐富，瀏覽器的負擔就越重。我們把 8 張 4K 城市貼圖降為 2K，GPU 貼圖記憶體從約 681MB 降到約 170MB；再改用 KTX2 壓縮貼圖，進一步降到約 30MB，Draco 模型解碼器也改為自架。材質在載入畫面背後先行預編譯，城市就緒後介面才淡入；遇到無法使用 WebGL 的裝置，則改顯示靜態封面與主要連結。

二、從「想像招牌裝上去的樣子」，到先在畫面上看見成品

招牌展示間提供四棟示範建築的 3D 模擬。訪客可以從範本挑選，或上傳自己的 SVG 標誌檔，招牌會即時套用到建築立面；再選擇正發光、背發光、正背發光、烤漆立體字或廣告燈箱，調整顏色、包邊與亮度，以及位置、旋轉、大小與厚度。按下「展示」後控制項全部隱藏、場景自動環繞，適合直接拿來和客戶討論。

3D 模型再精緻，客戶最在意的還是「裝在我的店面會是什麼樣子」。照片模擬讓訪客上傳店面照片，直接拖曳招牌對位，先看到完成後的樣子再決定。首次進入展示間會出現七步驟的使用說明；色彩選擇器、滑桿與上傳視窗也補上鍵盤與讀屏軟體可用的操作，不必依賴滑鼠。

三、從中文官網，到搜尋引擎與 AI 都讀得懂的四語案例庫

官網支援繁體中文、英文、日文與馬來文，網址以 /en、/ja、/ms 區分，並輸出 hreflang 標示各語系版本的對應關係。多語系最容易出錯的，是介面文字同時被程式拿來判斷，例如展示間的材質選項；我們把顯示文字與識別值拆開，只翻譯看得到的部分，3D 場景的比對邏輯不會因為切換語系而失效。

每篇案例除了本文，還有手風琴式的常見問題區塊，收合時答案仍保留在頁面中，並同步輸出 FAQPage、Article 與 BreadcrumbList 結構化資料；網站另提供 sitemap、robots 與給 AI 讀取的 llms.txt。3D 畫面對爬蟲是隱形的，首頁與展示間因此補上可爬取的文字說明，已下架的案例則正確回應 404。

四、從人工逐篇上稿，到 AI 提案、人確認才寫入

四語內容要長期維護，逐篇手動修改很容易漏改或改錯。磨人 Polish™ 在後台導入 AI 協作流程：管理者在文章上選取文字、留下調整需求，AI 產出修改提案，確認時逐字標出改了哪些字，由人按下確認才寫入正式網站。每篇案例也能產出 IG 4:5 輪播圖與貼文文案的社群懶人包，可直接輸出 1080×1350 圖檔。

追蹤流量同樣以訪客意願為先。網站自建 Cookie 同意橫幅並串接 Google Consent Mode v2，訪客做出選擇前，統計與行銷類別預設關閉，可選擇全部接受、自訂或僅必要。後台介面也逐一量測色彩對比，把 125 處低於 WCAG AA 的文字、徽章與按鈕修正到達標，讓每天操作的人看得清楚。

網頁連結：https://chyihaur.net