千茶丘

台南中西區的精品手搖飲品牌。一頁式官網把品牌故事、招牌、菜單、門市與外送預訂收在同一頁，讓訪客在單一頁面完成資訊查找。

01
客戶
千茶丘 QUALITEA DRINK，台南中西區西門路的精品手搖飲品牌。堅持台灣在地茶區的茶葉與 100% 台糖純蔗糖，用萃茶設備控制水溫與秒數。
02
想法
以單頁整合品牌與門市資訊，依瀏覽需求安排品牌故事、招牌飲品、菜單、門市與外送入口，讓訪客在單一頁面完成資訊查找。
- 導覽列跟著捲動高亮目前段落
- 菜單按分類即時過濾，不重新載入
- 點餐路徑收斂到電話與官方 LINE 兩條
↓
03
設計
深綠配金，襯在米白紙感底色上。標題用襯線體撐出茶行的重量，內文維持無襯線的易讀性。茶葉實拍鋪滿首屏，讓產品自己說話。
- 主色 #1C3F24，點綴金 #C9A054
- 標題 Cinzel + Noto Serif TC，內文 Noto Sans TC
- 依行動裝置的閱讀與操作習慣調整版面
↓
04
成果
已上線於 teahill.tw，並完成在地搜尋所需的設定：TeaRoom 結構化資料（地址、電話、營業時間、座標）、sitemap、robots 與 Search Console 驗證，讓店家在「台南手搖飲」這類搜尋裡有機會被找到。

畫面選讀

SCREENS

01品牌理念OUR PHILOSOPHY
手搖飲最難的是講清楚「為什麼比較貴」。這裡只挑三件可以被驗證的事：萃茶設備、100% 台糖蔗糖、在地茶區，一張卡片一件，不多說。
02職人招牌推薦SIGNATURE DRINK
整站唯一的單品特寫。菜單有六十幾個品項，但新客只需要一個理由踏進店裡——所以把人氣 No.1 的蜜香波霸單獨拉出來講。
03線上菜單MENU SHOWCASE
六個分類即時過濾，不重新載入頁面。每張卡片給品名、容量、價格與一句風味描述；加料區獨立框起來，因為配料加價是手搖飲最常被問的問題。
04紙本菜單PAPER MENU
線上菜單方便查詢，但熟客要的是店內那張。點「檢視紙本菜單圖片」直接展開完整版，含冰塊與甜度對照——兩種需求各給一個入口，不互相妥協。
05門市資訊STORE INFO
營業時間下方那顆綠點是即時的：依 09:00–21:00 判斷現在營業與否，同一則狀態也顯示在頁首公告條。訪客不必自己算現在幾點、店開不開。
06外送與洽詢CONNECT WITH US
沒有做購物車。手搖飲的訂單本來就走 LINE，所以整站的轉換就收斂成 QR Code 與一顆加入按鈕，加上頁首那條「立即點餐」。

下一個專案