← 返回首頁

拾光 Nail Atelier — 美甲美睫沙龍形象網站

為預約制美業個人工作室打造的品牌官網:完整服務價目、主理人介紹、Google 評價社群證明、LINE 一鍵預約串接,響應式設計搭配深色模式與 SEO 優化。

品牌官網 美業 / SPA 響應式設計 深色模式 SEO 優化 LINE 預約 Schema.org
▶ 訪問 Demo 網站

專案概述

「拾光 Nail Atelier」是為大安區美甲美睫個人工作室設計的形象網站案例,定位為「預約制、1 對 1 服務」的高單價美業品牌。透過清晰的服務價目、主理人故事與社群證明(Google 評價、IG 作品)建立信任感,並將所有 CTA 統一導流至 LINE 預約。

解決服務型店家三大共通痛點:價目不透明造成詢價門檻新客缺乏信任無法決策預約管道分散難以追蹤成效

核心價值:讓個人工作室擁有專業質感的官網門面,把 Google 搜尋與廣告流量直接轉化為 LINE 諮詢,免去客戶在 IG / Google Map / 部落格之間反覆比較。

核心區塊

品牌 Hero 區

主視覺標語 + 主理人資歷數據(年資、回流熟客、Google 評分)建立第一印象信任。

服務價目表

美甲 / 美睫 / 飄眉三大主類,每項標示熱銷標籤、體驗價、含卸甲/補色等細節。

主理人介紹

師資背景、進修證照、作品理念,強化「為什麼選她」的差異化說服。

Google 評價牆

精選 5 星評論輪播,作為社群證明(Social Proof)降低新客決策門檻。

常見問題 FAQ

預約規則、卸甲須知、取消政策一次說明,減少客服往返成本。

LINE 預約 CTA

所有區塊 CTA 統一導向 LINE 官方帳號,加上 UTM 可追蹤每個入口轉換率。

技術架構

前端

  • 純 HTML / CSS / JS 零框架
  • CSS Custom Properties 主題化
  • IntersectionObserver 捲動動畫

SEO

  • Schema.org LocalBusiness 結構化資料
  • OG / Twitter Card 社群分享預覽
  • 語意化 HTML 利於 Google 索引

使用者體驗

  • 響應式設計 手機 / 平板 / 桌機
  • 深色模式 跟隨系統偏好
  • Lighthouse 90+ 效能 / 無障礙

整合

  • LINE 官方帳號 一鍵諮詢
  • Google Map 內嵌位置
  • Umami / GA 流量分析

技術棧

HTML5 CSS3 JavaScript Schema.org 響應式設計 SEO LINE OA Nginx

關鍵成果

100%
響應式覆蓋
<1.5s
首屏載入
SEO
結構化資料
深色
模式切換
▶ 立即訪問 Demo 網站