桶裝瓦斯是很傳統的行業：打電話叫氣、等師傅送到，桶子裡還剩多少氣也看不到。「好運氣」是台北的桶裝瓦斯配送新創品牌，想用數位預約、新型瓦斯桶與標準化的配送流程，讓叫瓦斯這件事變得不一樣。
新的服務模式，需要一個能把它講清楚的官網。這篇整理我們為好運氣製作官網的過程：怎麼把品牌概念延伸到網站、怎麼讓消費者感受到新型瓦斯桶的不同，以及怎麼讓訪客在任何一頁都能馬上預約。
案例為扛臺北電子商務有限公司「好運氣」官方網站，2025 年底上線，由文網股份有限公司承製，主機代管與網站維護也由我們負責：好運氣官方網站。
一、專案概要
| 客戶 | 好運氣（扛臺北電子商務有限公司） |
|---|---|
| 產業 | 桶裝瓦斯配送，服務範圍以台北市為主 |
| 網站類型 | 品牌形象官網：首頁、關於我們、服務介紹、瓦斯專送流程、最新消息、聯絡我們 |
| 製作時程 | 約一個月 |
| 我們負責 | 網站設計與建置、主機代管、網站維護 |
| 建置平台 | XOOPS 開源內容管理系統，客戶可自行在後台更新內容 |
二、從品牌概念出發
「好運氣」這個名字有兩層意思：字面上是幸運，拆開來則是好的「運」送、安全用「氣」。品牌名稱、Logo 與配色都是客戶既有的，網站的任務是把這個概念延伸到每一頁。
所以網站內容以「安全運送」為核心價值展開，並圍繞客戶自己定下的三個關鍵字：線上化、透明化、便利化。從關於我們的品牌理念、服務介紹的項目說明，到流程頁的每一個步驟，講的都是同一件事：瓦斯不是一般商品，配送必須有一套被嚴格執行的流程。
三、最大的挑戰：讓消費者感受到新型瓦斯桶的不同
這個案子最難的地方，不是版面，而是怎麼讓消費者感受到新型瓦斯桶帶來的差異。
大多數人對瓦斯桶的印象，就是一個看不到裡面、搬起來很重的鋼瓶。要讓訪客理解「新的瓦斯桶到底好在哪裡」，光寫一段說明文字是不夠的。我們用三種方式把它拆開來講：
五張優勢卡：一張只講一件事
服務介紹頁把新型瓦斯桶與服務的好處拆成五張卡片，每張只講一個重點，讓訪客一眼就能看完：
- 存量看得見：瓶身透光，剩多少氣肉眼可見
- 安全又美觀：新型瓶身的安全與外觀說明
- 樓層不加價：不論住幾樓，都不另外收費
- 餘氣可累積：換桶時殘存的瓦斯可以累積兌換
- 數位管理：用手機預約，掌握配送進度
進度條：誠實呈現品牌正在走到哪裡
服務介紹頁用進度條呈現三件事的推進狀態：新型安全氣瓶 100%、數位預約與流程透明 80%、服務區域拓展 20%。對一個剛起步的品牌來說，坦白告訴消費者「服務範圍還在擴大中」，反而比假裝什麼都做好了更有說服力，也呼應了「透明化」這個品牌關鍵字。
流程頁：把叫瓦斯拆成四個步驟
瓦斯專送流程頁把整個服務拆成四步：打開官方 LINE 下單、認證配送員出發、使用環保瓦斯桶、累積餘氣回饋。消費者還沒叫過一次瓦斯，就已經知道整個過程會怎麼進行。
四、讓訪客在任何一頁都能馬上預約
好運氣的主要下單管道是 LINE 官方帳號，所以網站的每一頁都把訪客導向 LINE：
- 浮動按鈕：畫面右側固定有「聯絡我們」「加入好友」「回到頂端」三顆按鈕，不論看到哪一頁、捲到哪裡，都能一鍵加入 LINE。
- 點了就能撥號：客服電話做成撥號連結，在手機上點一下就能直接打過去。
網站負責介紹與建立信任，LINE 負責成交，兩者分工清楚。網站與 LINE 的其他整合方式，可以參考網站與 LINE 整合的四個方向。
五、視覺：用影片讓傳統產業有現代感
首頁主視覺使用背景影片，影片靜音、循環播放，在手機上也能直接在頁面裡播放，不會跳出全螢幕。配色沿用品牌既有的色彩，讓網站與客戶的 Logo、實體形象保持一致。
網站採用響應式設計，在電腦、平板與手機上都能正常瀏覽，手機版的主選單會收進可展開的選單裡。
六、主機與資安：網站上線之後也有人顧
網站上線之後，主機代管與維護也由我們負責。主機環境的重點：
- 全站 HTTPS 加密：訪客輸入 http:// 也會自動導向加密連線。
- HTTP/2 傳輸：同一條連線可以同時傳送多個檔案，頁面載入更有效率。
- 網站應用程式防火牆（WAF）：攔截 SQL 注入、跨站腳本（XSS）等常見攻擊，阻擋短時間內的大量異常請求，限制登入失敗次數以防止暴力破解，並禁止上傳可執行的危險檔案。
- 防止網頁被嵌入：禁止其他網站把頁面嵌入框架中，降低點擊劫持的風險。
更多主機代管與資安的內容，見我們的主機代管與資安服務。
傳統產業，也值得一個好官網
桶裝瓦斯、搬家、水電、清潔……很多在地服務業的生意，靠的是口碑與信任。一個把服務講清楚、讓客人隨時找得到你的官網，就是把這份信任放到網路上。