身為一個超級不喜歡學校的異端份子，今年卻接下「學校官網改版」這件事。說起來也挺不可思議。
確定成案、第一次製前會議，賈校長對我說：
「既然你不喜歡學校體制，不如用你的方式試試看，把這些枯燥的資訊，轉譯成大家都能看得懂的語言。」
這句話給了我很大的自由度。
設計過程中，多數稿件一次過關；只有偶爾用詞太前衛，我自己收斂一下（笑）。
對我來說，這次是在公版網站限制與創意語言轉譯之間找平衡。
光華高工官網第一階段上線
我們趕在開學前完成第一階段上線。今年 8 月，同步發生三件事：
- 賈校長榮退並轉任董事長
- 傅校長接棒新任校長，持續推動校務
- 全新官網正式啟用
技術堆疊採用 WordPress + Elementor。
考量官網以公告資訊為核心，我們在製作成本與後續維護效率間做了取捨。
光華高工官網：www.khvs.tc.edu.tw/
招生專區：www.khvs.tc.edu.tw/admissions/
我們在這個專案做了什麼
- 行政用語轉譯：將艱澀的公文語言改寫為一般人能秒懂的說法。
- 學習挑戰地圖：把三年課程結構整理為清楚的敘事路徑，從高一打基礎到高三整合實戰。
- AI協作編修：善用AI將零散資料系統化；對AI也讀不懂的內容，先人工閱讀撰寫後再交由AI潤飾。
- 維運友善：以可視化編輯降低後台人力門檻，讓單位公告能快速上稿。
視覺系統與 AI 生成素材｜使用原則與流程
視覺策略先從「大量照片，還是插畫／3D 角色？」開始評估。
考量肖像權與性別／外貌爭議風險，以及長期維運的一致性，插畫／3D 角色更能控風險、也比較好擴充。
- 風險控管：避免未授權臉孔，降低合規與授權成本。
- 一致性與擴充：制服、配色、品牌元素可規格化，科別延伸不走樣。
- 成本與時程：不增加拍攝檔期與授權費，在既有預算內加速輸出。
- 可讀性：用圖解支援課程與流程，提升掃讀效率。
因此我們採用生成式 AI ＋ 人工修正：以 ChatGPT 生成圓潤風格的 3D 學生角色，後續調整比例、表情、校徽與制服細節，最後匯出 WebP 並補齊無障礙標記。
底下是討論階段的概念圖，用來驗證風格與角色規格：
使用聲明：本段示意人物非真實個人，僅作情境展示；招生與活動報導仍以實際攝影為準。
新舊官網比較。
右邊的網站結構是台灣大部分國高中官網的「標準樣板」
密密麻麻的資訊堆疊，看似完整
卻讓人第一眼就覺得難以閱讀
這次在做wireframe時，我們花了不少時間
先把這些舊站的文字內容逐一彙整
再重新調整呈現方式
完成後的版面清爽了、動線順暢了
資訊也更容易被理解。
新舊官網比較：做多，不如做對
舊站是常見的「國高中標準樣板」：入口密集、資訊堆疊，第一眼就難以下手。Wireframe 階段我們逐一把內容彙整、重排層級，最後的變化：
- 版面更清爽，層級一眼可掃
- 動線更直覺，重要入口不用找
- 內容更易讀，公告與課程不再被淹沒
不是把東西做多，而是把東西做對。
專案資訊
- 專案客戶：台中光華高工
- 專案窗口：Joanna Huang
- 內容整合：Genie Chen / Joanna Huang
- 網站內頁設計：A-Bao Wu
- 前端程式：Hiking Chen
- WP 後端支援：ChangPo Hu
特別感謝：校方出動無人機拍攝；依據我們提供的腳本，完成精采影像素材。
光華高工官網：www.khvs.tc.edu.tw/
招生專區：www.khvs.tc.edu.tw/admissions/
寫在最後
第二階段內容正緊鑼密鼓準備中，我希望能把這份專案氛圍和能量延續下去。
也很謝謝 Sean 介紹這個機會，這是一個既痛快、又充滿學習的案子。
如果你也正面臨資訊架構老化、網站難以閱讀的問題，
或是希望把「專業內容」翻譯成「人人都能秒懂的語言」，
歡迎聊聊我們可以怎麼幫助你。
更多案例與設計觀察：超能力設計戰隊官網
Email：[email protected]
延伸閱讀：
