高雄市文府國小旅城·綠動：小公民們親手打造的減塑城市導覽網站

學生探索的成果，讓世界看見

文府國小的學生做了一件創舉：用雙腳丈量高雄，然後試著記錄這座城市的美好。

最好的永續教育！學生不只在課堂上學習，而是真的走進社區。搭大眾運輸規劃城市低碳路線、拜訪在地減塑商家、製作影音紀錄、舉辦說明會。這些行動累積出五條具體的旅遊路線和一份減塑友好商家名單，分散在紙本、群組、YouTube 各地，現在只缺一個完整的線上平台展示。

圖片出處：5A TRAVEL 旅城‧綠動Go on

---

五條路線，一座城市的不同切面

學生親手規劃的五條低碳城市旅遊路線，是這個網站的核心內容：

• 重返糖金歲月：以橋頭糖廠與旗山老街為主軸，行程從學校出發搭捷運抵達橋頭糖廠，再步行前往車站返回，完整體驗舊糖業歷史路線
• 遊走港灣探古今：哈瑪星、鼓山一帶的港灣文化探索
• 漫遊在理性與感性之間：結合知識性與人文情感的旅遊體驗
• 穿越時空的鐵道之旅：台鐵、捷運、輕軌串聯的鐵道景觀遊程
• 鳳山古蹟事件簿：以鳳山地方古蹟為主題的歷史導覽

每條路線以生動的頁籤設計呈現，整合了學生拍攝的圖片素材、YouTube 影片導流、景點介紹與詳細行程規劃，讓訪客不只看到「要去哪」，也能感受到規劃這條路線的孩子想說什麼。以「重返糖金歲月」為例，行程從 07:45 學校集合出發，全程以大眾運輸接駁，連搭車換乘的時間與站名都完整標注。

圖片出處：5A TRAVEL 旅城‧綠動Go on

---

減塑友好商家地圖

除了路線導覽，網站另一個核心功能是文府減塑友好商家雙語地圖。

這份名單的來源，是學生親自走訪社區、拜訪店家、說服商家加入的結果。從察覺到社區塑膠袋使用問題，到召開說明會、繪製地圖、積極參與展覽活動，這張地圖背後是整個年級的行動紀錄。

網站以中英文雙語呈現商家資訊，目前收錄 38 間左營、楠梓、仁武一帶的在地友好商家，從麵食、飲料到早午餐、超商一應俱全，方便國際旅客與來訪的交流學校按圖索驥。商家資料會隨時間更新，並且能在學生手繪地圖及Google Map之間切換。

圖片出處：5A TRAVEL 旅城‧綠動Go on

---

開發過程的挑戰

讓多元成果找到統一的呈現方式

學生的課程成果形式非常多樣：有路線規劃文件、有影音紀錄、有商家拜訪報告、有活動照片。如何把這些不同形式的內容整合進一個結構清晰的網站，是設計階段花最多時間討論的部分。

最終我們以路線詳情頁為主要容器，讓每條路線都能同時承載文字、圖片與影片，既保有彈性，也維持整體視覺一致性。

中英雙語資訊與長期維護

網站的使用對象包含文府國小的國際交流學校。這讓雙語呈現成為必要，而不只是加分項目。

商家地圖的長期維護也是設計考量的一部分：友好商家的資訊會異動，新商家會加入、舊商家可能停業，需要一套讓學校端能配合更新的資料管理流程。

視覺風格要活潑，也要有質感

這個平台的主角是學生，但訪客也可能是家長、教育工作者、國際交流夥伴。視覺設計需要在「學生作品的生命力」和「對外展示的專業感」之間找到平衡點。創準在網頁元件設計上投入了客製插畫與整體色彩計畫，讓網站在外觀上能代表文府國小的品牌。

---

技術架構

• 前端框架：Vue.js + Nuxt.js + Vuetify
• 開發語言：HTML5、CSS3、JavaScript（Node.js 套件）
• 響應式設計：RWD，支援各種裝置螢幕尺寸
• 部署環境：Google Cloud Platform 台灣伺服器（2 vCPU + 8GB RAM）
• 設計範疇：UI/UX 規劃、主視覺設計、網站色彩計畫、網頁元件插畫

---

持續陪跑

文府國小的減塑教育不是一個有終點的專案，網站也一樣。

建置上線後，創準持續提供年度維運服務，並逐年協助更新網站。例如減塑友好商家的完整資料、名單雙語化後重新整合進地圖等新功能開發。

---

這個案子的核心學習

這個網站存在，是為了讓一群認真行動的孩子，有一個配得上他們努力的數位舞台。

技術上沒有什麼特別困難的決策，但要讓網站真的「配得上」這些學生的行動，需要很細心地去理解他們做了什麼、為什麼而做。

「不做不會怎樣，做了很不一樣！」這是小學生們不塑畢旅的主軸，也是我們對這個案子最好的詮釋。