• 關於
  • 服務
  • 作品
  • 報價
  • 聯絡
取得報價→
  • 關於
  • 服務
  • 作品
  • 報價
  • 聯絡
作品集/N° 01

E-Commerce · 電商平台

H. Manor

希爾芳園

為精油芳療品牌打造的全方位平台——把身心靈課程、靈性卡牌商城與會員系統,整合進一個溫暖療癒的數位空間。

客戶
H. Manor · 希爾芳園
類型
電商 · 課程 · 會員系統
時程
2025
服務
設計 · 開發 · CMS · SEO
連結
healmanor-web.vercel.app ↗
H. Manor 首頁截圖
H. Manor
healmanor-web.vercel.app ↗

01 / Background

客戶背景
與面臨的問題。

N° 01

希爾芳園(H. Manor)是一個精油芳療與身心靈品牌,提供精油產品、靈性卡牌,以及線上身心靈課程。品牌的核心是「療癒」——透過植物的力量與課程的引導,陪伴學員照顧自己的身心。

專案開始時,品牌的銷售分散在不同管道:課程報名一套流程、卡牌販售另一套、會員資料又在別處。每多一個管道,就多一份手動核對的工作。品牌需要的不只是一個「商城」,而是一個能把商品、課程、會員整合在一起的完整平台——同時保有品牌溫暖療癒的氣質。

療癒的體驗,應該從進站的第一秒開始。

這是整個專案的設計方針:功能面是一個電商平台,體驗面卻要像走進一間芳療教室。

02 / Design

設計決策
與系統建構。

N° 01

多數電商為了轉換率,把畫面塞滿促銷與倒數;希爾芳園走完全相反的路。整體視覺以「走進芳療教室」為氣氛核心:溫暖的米白底色取代電商常見的冷白,以植物與精油的實景攝影為主角,輔以薰衣草與草本的柔和色調,留白讓畫面能呼吸。

字體延續品牌的溫柔語氣:英文以纖細的襯線體斜體呈現品牌語句(Heal your mind, embellish your life),中文用宋體的細字重承接,即使是商品價格與按鈕,也刻意降低視覺音量,不打斷療癒的節奏。

資訊架構上最關鍵的決定:把「商品」「課程」「品牌故事」放在同一層,而不是把課程藏在商品分類裡。對這個品牌來說,課程不是附加商品——它就是品牌本身。導覽的每一步都在告訴訪客:這裡賣的是一種生活方式。

Warm Cream
米白基底
Lavender
薰衣草紫
Herb Sage
草本綠
Amber Oil
精油琥珀
Ink
深墨文字

03 / Tech

技術選型
與工程取捨。

N° 01

這個案子的內容型態特別多元:實體商品、靈性卡牌、線上課程、文章,每一種的欄位結構都不同。所以我們選擇 Next.js + Sanity CMS 的 headless 架構——在 Sanity 為每種內容量身定義模型,品牌方在同一個後台上架商品、發佈課程、寫文章,前台自動同步。

前端用 Next.js 的原因很實際:商品與課程頁需要好的 SEO 與載入速度,會員與課程觀看又需要應用程式般的互動。Next.js 讓兩者共存在同一套架構裡。部署在 Vercel,每次改版都有預覽網址,與品牌方的確認往返變得非常輕快。

Framework
Next.js
CMS
Sanity Studio
Hosting
Vercel
UI
React
Commerce
商品 · 訂單
Courses
課程 · 影音
Members
會員系統
SEO
Meta · OG

04 / Results

成果展示
與交付內容。

N° 01

上線後,原本分散在各管道的銷售終於收攏到同一個地方:訪客在同一個網站認識品牌、購買卡牌、報名課程、登入會員回看內容。品牌方透過 Sanity 後台自主經營全部內容,不需要每次更新都回頭找工程師。

Desktop · 首頁
Desktop · 首頁
Mobile · 首頁
Mobile · 首頁
3
系統模組
商城 · 課程 · 會員
1
內容後台
Sanity Studio
100%
響應式設計
手機 · 平板 · 桌機
2025
正式上線
Vercel

Next · 下一件

CCHR Taiwan →

N° 02 · 公民人權協會官網

看下一件→想開始類似的專案
Flowing Light
流光拾曜

Your brand, brilliantly built.

Pages

  • 關於
  • 服務
  • 作品
  • 報價
  • 聯絡

Services

  • 形象官網
  • 電商網站
  • 一頁式銷售頁
  • 行銷顧問

Contact

  • tinakungk@gmail.com
  • Instagram
  • LINE 官方帳號
© 2026 Flowing Light 流光拾曜
隱私權Taipei · Remote Worldwide