浮石數位形象官網

企業形象官網設計與部署

嘉風興業有限公司為台中霧峰的工業通風降溫設備廠商，產品涵蓋負壓與正壓排風扇、變頻水冷扇、渦流式強力送風機、環保空調與降溫水濂牆，主要服務工廠、溫室與畜牧場。原官網建置於通用 CMS 平台，資訊架構分散、行動裝置體驗不佳，產品規格也缺乏一致的呈現方式。本次將整站重製為純靜態網站，不依賴前端框架與後端服務，產出可直接部署的 HTML。 ▍資料驅動的建置流程 先解析原站頁面，僅萃取產品型號、規格表、圖片與聯絡資訊等事實資料，整理為結構化 JSON 資料源，再以自行撰寫的 Python 建置腳本產生全站 70 個頁面：首頁、關於嘉風、產品資訊、工程實績、聯絡我們五個主要頁面，加上 64 個產品詳情頁。內容涵蓋 64 項產品、11 個產品分類與 23 張工程實績照。行銷文案全數重新撰寫，未沿用原站內容。日後產品增修只需更新資料源並重新執行建置，維護成本極低。 ▍設計與介面 以「工業精密」與「企業信賴」為視覺方向，建立以 CSS 變數為基礎的設計系統，主色採工業藍搭配 teal 點綴，色彩對比逐項比對 WCAG AA 標準。互動以 5KB 原生 JavaScript 實作，零第三方依賴，包含黏性導覽列、行動版選單、捲動揭示、產品分類即時篩選（支援分類網址深連結）、產品圖庫縮圖切換，以及支援鍵盤操作與焦點鎖定的圖片燈箱。全站響應式，手機至桌機一致。 ▍效能與 SEO 建立自動化圖片處理流程：原圖統一校正方向並壓縮至最長邊 1600px，另產 480px 卡片縮圖與 406 張 WebP 副本，以 picture 標籤提供並保留原圖回退。首頁主視覺預先載入，所有圖片於建置階段讀取實際尺寸寫入寬高屬性，避免版面位移。每頁配置獨立的標題、描述、canonical 與 Open Graph 標籤，嵌入 Manufacturer 與 WebSite 結構化資料，並產出收錄 69 個網址的 sitemap。 ▍負責範圍 資訊架構規劃、視覺設計、前端開發、建置腳本撰寫、圖片與 SEO 優化、全站文案撰寫、網站部署，以及後續的內容更新與長期維護。