喬絲朵設計工坊

一、專案概述 多數台中在地網頁設計接案者，官網普遍存在定位模糊、服務流程雜亂、案例分類凌亂、無法讓中小店家快速判斷「是否適合合作」的通病，同時過度依賴實體面談溝通，拉高雙方時間成本，也無法透過網站建立長期信任與自動獲客機制。喬絲朵設計工坊 是我為自身網頁接案業務量身打造的品牌官網，本專案不只是單純作品集展示，更是一套完整「中小店家低預算建站銷售型官網」，完整傳達我獨有的「線上優先遠距協作」建站模式，解決在地小店、個人創業者預算有限、時間零碎、難以頻繁面談的痛點，同時做為我的數位名片、案例展示、方案報價、線上諮詢一站式入口，既是我對外承接網站專案的營業工具，也是自身前端、Wordpress、SEO、AI 整合技術能力的實戰示範案例。 不同於一般設計師官網只堆作品圖片，本網站完全站在潛在案主視角規劃資訊邏輯：從店家找網站的痛點切入，清晰拆解線上協作流程、固定總額透明報價、適合產業、完整實績案例，搭配 FAQ 消除合作疑慮，全程導入轉換導流機制，引導訪客透過 LINE 傳送需求素材，大幅提升有效詢問單數，完整實現「品牌形象展示 + 服務銷售 + 客戶開發」三重營運目標。 二、專案背景與核心建置目標 本人具二十餘年前端開發、網頁設計實務經驗，累積大量餐飲、美業、製造、法律、攝影、瑜伽、室內設計等全產業 Wordpress 官網實績，長期觀察到台灣中小微型店家建網兩大核心痛點：第一，傳統網頁公司動輒高額客製報價，中小品牌難以負擔；第二，合作需要頻繁開會面談，店家日常營運抽不出空，來回溝通耗費大量時間，預算反而被會議成本吃掉。 因此我確立本站四大核心建置目標，所有版面、內容、功能都圍繞目標設計： 差異化定位傳達：明確主打「線上優先遠距建站」，透過 LINE、Email、Google Drive 完整協作，僅台中區域可選擇面談，區分市場上強制面談的傳統設計公司，建立獨特競爭優勢； 降低案主決策門檻：推出單一固定總額 NT$8,800 標準建站方案，不做繁雜分級報價，降低中小店家預算壓力，完整標示方案包含內容，杜絕後續隱藏收費疑慮； 完整實績建立信任：收錄咖啡、醫美、攝影、室內設計、瑜伽五大產業完整網站案例，另外規劃 10 大產業 DEMO 架構參考，讓不同領域案主快速找到同類型參考作品； 自動化轉換獲客：全站每個區塊配置 LINE、雲端素材傳送引導按鈕，規劃清晰六步線上製作流程，搭配 FAQ 解答工期、素材、付款、面談等常見疑問，減少重複詢問，提高有效合作諮詢量。

富雋專業美髮剪刀製造廠

一、專案概述 多數台灣精密製造廠的官網仍停留在單純產品型錄層次，視覺粗獷、資訊雜亂，難以同時承接一般消費者零售與品牌商 OEM 代工兩種客群，這也是富雋找上我重新建置品牌官網的核心痛點。富雋是全程 MIT 台灣製造的專業美髮剪刀工廠，同時經營面向髮型師的 B2C 零售業務、面向美業品牌的 B2B 客製代工，過去僅靠蝦皮賣場、零散社群圖文曝光，缺乏獨立品牌網站建立專業信任，產品分類、維修流程、代工合作資訊無系統整合，潛在客戶查詢、詢單轉換率長期偏低。本次專案以 Wordpress 搭配 Elementor 搭建全站，打造一體化雙通路品牌官網，不只做產品展示，更透過產業邏輯內容、互動式數據模組強化說服力，完整覆蓋零售選購、工具維修、品牌代工三大營業轉換路徑，解決傳統工廠網站「專業感不足、使用者路徑混亂、搜尋曝光弱」三大關鍵問題。 二、客戶背景與專案需求拆解 富雋深耕專業美髮剪刀研發、研磨、量產多年，擁有 28 款完整產品線、17 款可直接線上訂購商品，主打高規不鏽鋼、人體工學配重剪刀，同時提供刀具維修、LOGO 刻印、刀型客製、包裝設計一站式 OEM/ODM 批量代工服務，目標使用者分為兩大族群：第一類是美髮沙龍設計師，需求為快速篩選適合自身剪法的剪刀、查閱規格價格、了解售後保養維修；第二類是想自創美業工具品牌的創業者、連鎖美業集團，需要清晰代工流程、產能規格、客製化配套說明。 客戶本次建站明確提出四大核心需求：第一，統一精細工藝質感視覺，擺脫傳統工廠粗糙廉價印象，傳達 MIT 高階工具的專業價值；第二，建置清晰分層資訊架構，分開一般零售與企業代工兩大閱讀路徑，避免資訊互相干擾；第三，導入基礎 SEO 架構與 Google Console 完整配置，提升在地美業工具關鍵字自然搜尋排名；第四，網站後台易於自主更新，後續新增剪刀型號、優化代工資訊不需依賴開發人員，長期降低維護成本。 除此之外，客戶額外期望網站具備差異化競爭內容，能透過數據、對照邏輯讓髮型師直觀理解「高品質剪刀能提升營業產值」，而非單純陳列產品規格，從根本強化消費者購買動機。 三、視覺設計與資訊架構規劃 視覺風格定位走低飽和金屬工藝質感，整體版面捨棄重工廠冷硬風格，改用乾淨留白、淺灰基底搭配金屬銀色重點強調，搭配大量剪刀實拍、工廠研磨細節影像，平衡工業精密感與美業溫潤氛圍，不論手機、電腦都維持一致 RWD 響應視覺體驗。首頁資訊層次由上至下精準規劃使用者閱讀節奏：首屏直接標註「MIT 台灣製造美髮剪刀」核心定位，同步露出零售選購、維修保養、OEM 代工三大核心入口，使用者進站 3 秒內就能找到自身對應需求；接續鋪陳「工具影響工作效率」產業痛點內容，先共鳴髮型師長期使用劣質剪刀的手腕疲勞、剪裁失準困擾，再對比富雋產品的人體工學優勢，建立品牌價值認同；中段放置產品對照表格、產值計算互動模組，用具體數據量化使用高階剪刀的營業收益，強化購買說服力；底部區分全系列產品分類、代工合作流程、線上諮詢導流，完整承接不同客戶的轉換需求。 全站資訊分四大模塊獨立規劃，彼此互不干擾：零售產品模塊收錄 28 款剪刀完整資訊，依平剪、打薄剪、長刃剪分類，每款產品獨立頁面標註材質、尺寸、落髮比例、定價，並串聯蝦皮賣場連結方便直接下單；維修保養模塊整理刀具鈍化、卡髮等常見問題，提供線上諮詢流程，讓設計師不用到廠也能初步評估維修方案；OEM/ODM 代工模塊完整說明刀型客製、LOGO 刻印、包裝設計、批量生產全流程，面向 B2B 品牌客戶建立合作信任；產業知識模塊包含選刀指南、工具效益計算單元

森山醫美診所

## 一、專案概述 多數醫美診所官網普遍存在兩大致命問題：過度誇大療效、使用未規範術前術後對照圖，不僅容易觸犯醫療廣告法規，也會讓消費者產生不信任感；同時資訊雜亂，隱藏風險、資質、收費資訊，潛在客戶查詢時充滿疑慮，難以順利預約。森山醫美主打「原生輕醫美」，核心經營理念為「先讓醫師看過再規劃療程」，重視透明資訊、醫師專業與消費者安全，本次建站首要目標是打造一套完全符合台灣醫美廣告規範、以「信任建立」為核心的品牌官網，兼顧奶油輕奢高質感視覺、完整合規資訊架構與清晰預約轉換路徑。 本專案採 Wordpress 搭配 Elementor 遠距協作開發，全程透過 LINE、Google Drive 完成素材、文案與版面確認，解決醫美產業「法規合規、專業信任、預約導流」三大核心需求，是適合輕醫美、皮膚管理診所的標準示範網站。 ## 二、客戶定位與核心建站需求 診所主打溫和原生輕醫美，拒絕誇大行銷，堅持線上僅做資訊參考，所有療程評估、價格規劃皆需透過醫師一對一面診，因此提出四大明確需求： 第一，視覺走奶油輕奢低飽和風格，大量留白營造安心、放鬆的就診氛圍，跳脫同業濃艷誇張的行銷設計； 第二，全站內容嚴格遵循醫療廣告規範，案例區明確標註僅為情境示意、不代表療效，完整揭露療程風險、禁忌族群、術後照護； 第三，資訊架構優先強化信任證據，包含醫師團隊、診所資質、儀器耗材來源、獨立隱私診間四大信任模塊； 第四，操作簡單易維護，搭配基礎 SEO 優化，引導使用者透過 LINE、電話預約免費膚況諮詢，無強制消費，降低客戶預約門檻。 ## 三、網站架構、功能與技術執行細節 全站規劃預約、療程、醫師、環境、FAQ 五大核心閱讀模塊，完全依照消費者「查詢→了解風險→確認專業→預約諮詢」的思考邏輯排布。首頁開頭直接標示品牌核心價值「先諮詢、再面診、後照護」，開宗明義傳達透明經營理念；中段分類肌膚管理、輪廓抗衰、微創精修等四大療程，每項皆標明適應族群與注意事項；案例區強制置入完整法規警示文字，避免違規宣稱療效；接續展示醫師團隊、診所環境、消毒流程，強化專業信任感；底部整合營業時間、地址、LINE 與電話一鍵預約入口，搭配完整 FAQ 解答諮詢、收費、術後反應等常見問題。 技術層面以 Wordpress 為底層，模組化 Elementor 搭建全頁 RWD 響應版面，手機瀏覽資訊完整不錯位；同步完成全站基礎 SEO 布局，針對台中輕醫美、膚況諮詢、皮膚管理等在地關鍵字優化；所有圖片輕量化壓縮，兼顧質感與載入速度。製作採線上遠距協作流程，客戶雲端上傳空間、醫師形象素材，線上逐版確認修改，7-10 個工作天完成全網測試上線，後台可自主更新療程、營業資訊。 ## 四、專案差異化亮點與落地價值 相較多數醫美網站重行銷、輕合規，本網站最大特色是**以法規為底線、以信任為核心**，完整規避醫美廣告違規風險，透過文字標示、內容架構建立消費者安全感。全站每個區塊埋設預約 CTA 按鈕，引導使用者免費線上諮詢，不強迫消費，契合診所溫和原生的品牌定位。 同時完整驗證服務型醫美店家低預算建站可行性，在標準方案內一次整合品牌形象、合規資訊、療程介紹、醫師資歷、空間展示、預約轉換、SEO 曝光七大功能，無需額外加價增購模組。網站上線後做為官方權威資訊入口，彌補社群資訊碎片化、資訊不完整的缺點，穩定承接在地自然搜尋諮詢單，大幅減少客戶初次詢問基礎資訊的溝通成本。 ## 五、專案總結 森山醫美診所官網是一套專為輕醫美、皮膚管理診所量身打造的合規型 Wordpress 形象網站，

日常小室咖啡

## 一、專案概述 多數巷弄咖啡館的網站常陷入兩大困境：要麼畫面雜亂、無法還原店內溫柔氛圍，要麼只簡單放上菜單，缺少預約、空間展示等實用轉換功能，難以吸引顧客到店消費。「日常小室咖啡」主打慢步調日系奶油原木風，以自然光、木質空間、手沖咖啡與手工甜點為核心品牌特色，客戶需求是打造一間能完整傳遞「放鬆停留」氛圍的形象官網，不只做菜單展示，更要透過視覺氛圍、清晰資訊引導顧客線上預約，建立線上品牌門面，提升在地曝光與到店人潮。 本專案採 Wordpress 搭配 Elementor 視覺化搭建，全程以 LINE、Google Drive 遠距協作完成，完美落地日系溫潤簡約美學，同時整合菜單分類、空間相簿、營業資訊、LINE 預約四大核心功能，兼顧視覺美感、行動裝置瀏覽體驗與基礎 SEO 優化，是適合中小型餐飲、咖啡品牌的標準形象官網示範案例。 ## 二、客戶需求與設計定位拆解 店家核心經營理念為「把生活節奏放慢」，店內以淺木色、自然光、柔和奶油色為空間基調，客戶明確提出三大建站需求：第一，網站視覺必須完全貼合店內日系奶油原木風，透過留白、柔和色調、寫實空間照片還原門店氛圍，給使用者放鬆舒適的瀏覽感受；第二，資訊架構簡單直覺，顧客打開網站可快速找到咖啡、甜點品項、店內環境、營業時間與預約管道；第三，後台操作簡單，店家可自主更新季節甜點、營業異動，無需依賴開發人員，同時提升在地咖啡關鍵字搜尋曝光。 視覺定位捨棄濃重色彩與繁雜裝飾，以米白、淺木灰作為全站基底，大量運用店內自然光實拍圖做為版面主視覺，透過大面積留白降低閱讀壓力，字體選用輕柔無襯線字型，搭配簡潔線條區塊，完整還原巷弄咖啡館安靜、溫暖的品牌調性，讓使用者瀏覽時就能提前感受到店的放鬆氛圍。 ## 三、網站架構、功能與技術執行細節 全站規劃首頁、咖啡、甜點、環境、預約五大獨立頁面，資訊邏輯完全依照顧客造訪咖啡館的資訊需求排序：首頁首屏直接露出品牌核心理念，快速建立品牌印象；中段分類展示手沖、拿鐵、戚風蛋糕等招牌品項，清晰區分咖啡與甜點兩大品類；空間相簿模塊集中展示窗邊座位、木質吧台等店內特色場景，強化空間吸引力；底部完整標示營業時間、門店地址、電話與 LINE 一鍵預約入口，打造完整到店路徑。 技術層面以 Wordpress 為底層 CMS，使用 Elementor 模組化開發，所有頁面皆支援 RWD 響應式排版，手機、平板、電腦畫面自動調整，解決消費者手機查詢資訊排版混亂的問題。開發階段同步完成基礎 SEO 布局，針對巷弄咖啡、手沖咖啡、甜點咖啡館等地區關鍵字優化標題與內文；所有圖片輕量化壓縮，兼顧畫面質感與網站載入速度。 製作流程採標準遠距協作模式：客戶透過 Google Drive 上傳空間、餐點實拍圖與文案，LINE 同步調整意見，Email 留存正式確認紀錄，全程不需實體面談，7-10 個工作天完成設計、修改、測試與上線交付，後續店家可自主透過後台新增季節餐點、更新營業資訊，長期維護零門檻。 ## 四、專案亮點與落地價值 相較市面多數咖啡網站過度堆砌餐點圖片，本網站最大特色是「氛圍優先」，以品牌理念作為版面核心，透過統一柔和視覺建立記憶點，而非單純陳列商品。全站每個區塊都埋設預約導流按鈕，引導使用者透過 LINE 線上訂位，直接解決店家顧客預約分散、難以統一管理的營運痛點。 同時完整驗證中小餐飲品牌低預算建站可行性，在固定總額標準方案內，同時實現品牌形象展示、菜單分類、空間美學、預約轉換、搜尋曝光五大價值，不需額外加價增購功能。網站上線後做為店家專屬線上