RWD 響應式網頁設計：Blocksy 打造美髮作品集

服務型品牌站常有不少訪客用手機瀏覽。他們在社群看到一張漂亮的染髮作品，點進官網，結果手機畫面上圖片被切一半，預約按鈕壓在廣告下面點不到，最後默默回到通訊軟體問朋友推薦。美髮、攝影、室內設計這類服務型品牌站，轉換常卡在同一個地方：客人看到作品卻不知道怎麼聯絡。這不是配色不夠美的問題，是響應式設計（RWD，Responsive Web Design）沒有為「作品集」這種內容量身調整。

這篇要談的，不是響應式網頁設計的定義（那個觀念我在RWD 的基礎觀念裡談過），而是一個很具體的實戰場景：用 Blocksy 這套輕量 WordPress 主題，從斷點哲學、資訊架構、Header Builder、作品集排版、圖片效能、SEO 一路到聯絡轉換，把手機和電腦兩種螢幕都照顧到。如果你正在幫設計師、沙龍、工作室架作品集，這篇可以當成施工圖。

先把結論說在前面：作品集的 RWD，要解決的不是「排得進去」，是「客人會不會動手」

很多人把 RWD 想成「同一份內容在三種螢幕上都不會破版」就過關了。現在還要多問一層：使用者能不能在手機上看清楚作品、找到地址，並順利完成預約。實際的行動裝置占比與停留時間，應以網站自己的分析資料為準。

也因此，我會建議服務型作品集不要從「配色」開始，要從「手機上的動線」開始。配色是品牌資產，但它解決不了轉換；動線才解決得了。Blocksy 在這個場景之所以好用，不是因為它漂亮（漂亮的主題很多），是因為它把「不同裝置看到不同東西」這件事做進了後台，讓你不用寫程式也能調出手機專屬的導覽與按鈕。

接下來我會順著一個實際的施工順序展開：先講選主題的理由，再講斷點與資訊架構這種地基，然後進到 Header、作品排版、圖片效能、SEO 這些看得見的工程，最後收在聯絡動線與上線檢查。你可以把它當成一份清單，邊架邊對照，哪一段還沒做完，就先別急著把網站開放給客人看。地基沒打好就上線，事後回頭修往往比從頭蓋還累。

為什麼美髮、攝影這類服務型作品集，第一個該決定的是 RWD，不是配色

這不是誇張，而是這類服務型品牌站反覆出現的同一個痛點。沙龍、攝影工作室、室內設計公司，本質上都在賣「視覺信任」。客人會不會走進來（或預約），取決於她在手機上滑過你作品的當下，有沒有被那張圖說服。可是絕大多數這類網站上線時，老闆花最多時間挑的是首圖顏色，最少時間檢查的是「手機上點那個按鈕會跑到哪」。

翻成白話：你把櫥窗擺得很美，卻忘了在門口放一個推得開的門把。Google 在 2023 年宣布行動版內容優先索引全面到位，也就是主要以智慧型手機代理程式看到的內容建立索引（見 Google Search Central 的公告）。這不是一個獨立的排名加分項，但手機版若缺少主要內容、連結或中繼資料，Google 能理解與索引的資訊也會跟著缺少。

所以順序應該倒過來。先決定手機上的核心動線（看作品 → 知道你在哪 → 預約），再回頭處理桌機版的版面，這時候 Blocksy 的「逐裝置可見性」就派上用場了。

Blocksy 憑什麼被選中：一個輕量主題在作品集場景的真實取捨

依 W3Techs 的統計（2026 年 6 月），WordPress 是目前全球市佔最高的內容管理系統（CMS），長期遙遙領先其他對手。在 WordPress 生態裡，主題選擇多到讓人焦慮，Blocksy 會被我放進作品集的候選名單，原因僅有一個：它的核心很小，把效能預算留給你真正需要的東西，也就是圖片。

作品集和一般形象站最大的差別，在於它先天就是圖片密集。一個染髮作品集首頁可能要放十幾張 before/after，攝影師可能一上就是三十幾張。每多一張未妥善處理的高解析圖，都可能增加載入成本並影響 Core Web Vitals。如果主題本身已經載入許多用不到的輪播、動畫或大型框架，你等於還沒放作品就先把效能預算花光。

這也是為什麼在這個場景，Blocksy 會和其他 Gutenberg 優先、可搭配區塊外掛的輕量主題一起列入候選。挑選時仍要用實際頁面內容測試載入資源，而不是僅看主題宣稱。如果你對主題的比較方式還不熟，可以先看一下WordPress 主題的整體比較再回來。

Blocksy 強在主題層級的佈局與導覽控制（Header、Footer、文章範本、斷點）。如果你要的是高度自由的拖放排版，仍要搭配頁面或區塊編輯工具。所以選 Blocksy 前，要先確認你是否願意用 Gutenberg 區塊為主來組頁面；這會直接影響操作方式與後續維護成本。

需求	Blocksy 合適度	背後原因
服務型作品集（首頁 + 作品 + 聯絡）	很合適	主題級斷點與 Header Builder 直接對應這個結構
圖片密集、在意載入速度	很合適	核心小，效能預算留給圖片
需要像素級自由排版	要搭配區塊外掛	主題本身不取代頁面編輯器
大型購物車、複雜結帳流程	支援但非強項	Blocksy 也支援 WooCommerce，但作品集才是它的甜蜜點

從主機到手機螢幕：先決定你的「斷點哲學」

很多教學會直接告訴你「斷點設 768px 跟 1024px」，然後就過了。我想多聊一句：斷點不是技術預設，是商業判斷。你要問的是「我的客人最可能用什麼尺寸的螢幕看這個網站」。一個社區型美髮沙龍，客人多半是通勤族、用手機查「附近哪裡可以染」；一個接案的攝影師，客戶可能是用筆電看作品集挑合作對象。這兩種人，你的手機版重心應該完全不一樣。

設計端若是在 Figma 打稿，斷點要設幾個、每個尺寸要怎麼重排，可以照著從 375 走到 1280 的斷點規劃流程先跑一輪，再回到 Customizer 對數值。

Blocksy 在 Customizer（自訂器）裡把斷點拆成 mobile 與 tablet 兩組，你可以分別為這兩種寬度調整欄位數、字級、間距。這在作品集場景特別有用，因為同一個作品牆在桌機可以是 3 欄、在平板縮成 2 欄、在手機再縮成單欄直滑，這個轉換你要親眼看過一次才會知道哪個斷點切換最順。

螢幕情境	常見寬度	作品集該驗證的事
大桌機螢幕	1280px 以上	3 到 4 欄作品牆是否仍清楚、留白是否舒適
小筆電	1024 到 1280px	欄位縮成 3 欄時圖片是否變太小
直向平板	768 到 1024px	2 欄的閱讀節奏、側欄是否該收起
大手機直向	375 到 430px	單欄直滑、預約按鈕是否在拇指可及處
手機橫向	700 到 900px	橫向時圖片比例是否變形、選單是否擠壓

容器寬度（container width）與側欄是另一組要連動考慮的設定。桌機版常會在作品列表旁邊放一個側欄，用來放分類篩選或熱門標籤；到了手機，這個側欄要自動收到底部，或變成頂部的篩選列，否則它會佔掉手機上很寶貴的垂直空間。Blocksy 可以讓你針對不同裝置切換側欄的位置或直接隱藏，這個設定值得花五分鐘調好，它直接影響作品列表在手機上的呼吸感。

我的實務習慣是這樣：先在手機實機（不是 Chrome 開發者工具的模擬）上看過每一個關鍵頁面，因為模擬器給你的字體渲染和觸控熱區都不準。真的走一遍「客人會走的路」：首頁 → 作品分類 → 單一作品 → 預約。哪一段卡住，就回到那一段的斷點去調。這比盯著桌機螢幕調手機版有效十倍。

這裡也順帶提一個觀念問題：RWD 不是 AWD（Adaptive Web Design，自適應設計）。RWD 是同一份內容依螢幕伸縮，AWD 是伺服器端依裝置送出不同版本。對中小型作品集來說，RWD 維護成本低、SEO 又僅有一份內容要顧，幾乎都是更好的選擇。這兩者的取捨我在AWD 與 RWD 的完整比較裡談過，這裡不重複。

資訊架構先於版面：作品集的分類與導覽深度

作品集網站最容易在「分類」這關出事，而且出事的方式很隱性。你累積了兩三百張作品，桌機上用一個下拉選單把它們全攤開沒問題，可是到了手機上，那個下拉會變成好幾層的折疊選單，客人點兩下就迷路，乾脆退出。問題出在你把桌機的資訊架構直接搬到手機，沒有為小螢幕重新剪裁。

分類邏輯有三種常見選擇，各有適用情境：依服務類型（染髮、燙髮、剪髮、護髮）、依設計師（多位設計師的沙龍適用）、依風格或長度（短髮、鮑伯、歐美風）。選哪一種，取決於你的客人怎麼搜尋你、以及她想用什麼角度瀏覽。社區型沙龍的客人多半是想找「我有沒有做過類似她要的感覺」，所以依風格或服務分類通常比依設計師分類更貼近她的思路。

分類邏輯	適用情境	潛在風險
依服務類型（染、燙、剪、護）	服務項目清楚的單一設計師或小型沙龍	風格相近的作品混在同一類，辨識度偏低
依設計師	多位設計師的大型沙龍，客人會指名	單人作品累積少時，分類頁看起來空
依風格或長度（短髮、鮑伯、歐美風）	客人靠感覺找靈感的瀏覽情境	風格命名主觀，分類邊界容易模糊

導覽深度的原則很簡單：手機上分類層級壓在兩層以內。首頁 → 大分類 → 作品列表 → 單一作品，這是上限，再多就會有人在途中流失。Blocksy 的選單可以讓你為桌機保留完整的多層分類，同時在手機版僅露出前兩層，把更細的分類收進分類頁本身，靠頁面上的篩選器或標籤雲來引導。這個「桌機深、手機淺」的不對稱設計，是作品集 RWD 最該花心思的地方之一。

麵包屑（breadcrumb）是另一個常被低估的導覽元件。它讓客人隨時知道自己在哪、能一階退回上層。Blocksy 內建麵包屑，但手機上要留意它佔的垂直空間，必要時可以僅在桌機顯示、手機用返回按鈕取代。麵包屑同時對 SEO 有幫助，搜尋引擎能藉它理解你網站的層級結構，在搜尋結果裡顯示更完整的路徑。

Header Builder 實戰：手機選單是作品集的隱形業務員

Blocksy 最值得學的一塊，是它的 Header Builder。它把頁首拆成桌機、平板、手機三組獨立的「列」，每一列你可以放不同的元素（Logo、選單、按鈕、聯絡資訊），而且可以單獨控制「這個元素僅在手機出現」或「桌機才出現」。這個逐裝置可見性，就是服務型作品集的轉換槓桿。

怎麼說？我會建議你在手機的頁首固定放兩樣東西：一是電話或 LINE 預約按鈕，二是「立即預約」。理由很直接：手機使用者的拇指就在螢幕下半部，你把預約入口放在頂端固定列，她滑到哪、按鈕就跟到哪。客人看到喜歡的作品、心動的那一瞬間，按鈕就在她拇指旁邊，這就是動線設計在幫你成交。這跟高壓成交話術無關，這僅是讓一個已經有興趣的人少一次摩擦。

桌機版則可以從容一點，把完整的作品分類選單展開來，因為桌機螢幕夠大，導覽的任務是「讓人逛得久」。但請注意一個常見錯誤：很多人把桌機選單直接搬到手機，結果手機上的主選單變成一長串下拉，預約按鈕被埋在第四層。手機選單要的是「短」，把次要的分類收進漢堡選單，把預約與聯絡留在第一層眼睛看得到的地方。

Blocksy 的 off-canvas（側滑）選單也很適合這個場景。手機點漢堡圖示後，選單從側邊滑出來，你可以在裡面放電話、地址、營業時間這類「客人決定來不來」的關鍵資訊，而不僅是頁面連結。選單觀念的基礎這裡不展開，我聚焦在 Blocksy 特有的逐裝置控制。

一個小提醒：頁尾（Footer）也是 Header Builder 的兄弟功能，邏輯一樣。千萬別忽略頁尾，因為手機使用者滑完整頁到底部時，那是你「再次遞出聯絡方式」的最後機會。把 LINE、電話、地址、營業時間放進頁尾，等於在出口處再攔一次轉換。

作品集頁面的 RWD 排版：讓 before/after 在 6 吋螢幕上仍然有戲

作品集頁面是這類網站的心臟，也是 RWD 最容易出問題的地方。問題通常出在「欄位數」。桌機上 3 欄或 4 欄的作品牆看起來很氣派，但如果你沒有為手機重新定義欄位，到了 6 吋螢幕上每張作品會被擠成指甲片大小，染髮的漸層細節全部看不見，等於白放。

我的習慣是：作品牆在手機上一律單欄或最多雙欄，而且單欄的效果通常最好。因為單欄直滑符合手機使用者原本的瀏覽直覺，每張作品都能拿到接近滿版的寬度，細節才看得出來。你會發現，這樣做之後停留時間會比硬撐 3 欄來得久。

before/after（改造前後）是美髮、造型、醫美作品集的招牌格式。這種格式的痛點是：兩張圖要並排比對。在桌機上並排沒問題，到手機上如果硬並排，每張僅剩半個螢幕寬，比對效果盡失。比較好的做法是手機上改成上下疊（先 before 後 after），或用一個輕量的滑動比對元件（drag slider）。Blocksy 本身沒有內建這個元件，這時就要靠 Gutenberg 區塊外掛補上，這類區塊工具的入門門檻不高，挑一套順手的即可。

另一個容易被看漏的是「作品單頁」的排版。客人點進某一張作品後，她想知道的不僅是圖，還有：這是什麼服務、價格大約多少、是哪一位設計師做的、多久前做的。這些資訊在手機上要用清晰的區塊呈現，避免塞成一坨文字。用 Blocksy 的文章範本（Single Post Layout）搭配區塊，你可以把手機版的作品單頁做成「圖片在上、服務資訊卡在下、預約按鈕固定底部」的結構，這個結構對轉換非常友善。關於作品集網站的整體規劃，作品集網站製作教學有更全面的脈絡可以對照。

RWD 與 SEO 彼此相關：行動版內容不能缺漏

前面提過 mobile-first indexing，意思是 Google 主要以手機代理程式看到的版本建立索引。它本身不是排名加分項；真正的風險是手機版少了主要內容、標題、中繼資料或重要連結，Google 能取得的資訊也會跟著減少。桌機版有作品分類連結、手機版卻沒有可到達的路徑，就可能影響使用者與檢索器發現該頁面。

所以做作品集的 RWD 時，請把「內部連結的完整度」也列進檢查項目。桌機版出現的每一個重要分類與作品入口，手機版都要有對應的路徑能走到，哪怕外觀長得不一樣。這不是為了美觀，是為了讓搜尋引擎跟你的人客都找得到路。

結構化資料（Schema）是作品集常被漏掉的一塊。美髮沙龍可依頁面可見內容使用 LocalBusiness 或較具體的 HairSalon，標示店名、地址、營業時間與電話等資料。這能協助搜尋引擎理解商家資訊，但不保證在地排名或特殊搜尋版位。可用合適的 SEO 外掛設定，再以 Google 支援的結構化資料文件與測試工具檢查。

圖片的替代文字（alt）同時是無障礙與 SEO 的基本功。每一張作品圖都要有描述性的 alt，例如「短髮霧灰染髮 before after 作品」，讓圖片搜尋與螢幕閱讀器都讀得到內容。作品集頁面數量多，sitemap 也要確認有把每個作品單頁送出去，搜尋引擎才會知道你到底累積了多少作品可看。這幾件事綜合起來，就是你讓作品集「被找到」的底層工程。

把上面幾項整理成一份作品集的行動版 SEO 基本盤，照著檢查一次就不會漏：

1. mobile-first：桌機版的重要內容與入口，手機版也要有對應路徑。
2. 結構化資料：用 LocalBusiness 或 HairSalon 標記店家資訊。
3. 圖片 alt：每張作品都有描述性的替代文字。
4. Sitemap：作品單頁全部送出，確認搜尋引擎收得到。
5. 內部連結：桌機選單出現的頁面，手機也連得到。

圖片是作品集最重的資產，也是最容易拖垮 Core Web Vitals 的元兇

前面提過作品集先天圖片密集，這裡要把它講到底。一張沒壓縮過的手機直拍照片，單檔可能 3 到 5 MB。你的首頁如果同時載入十幾張這種圖，手機用戶會等到走人。Google 自己在 web.dev 上的研究早就指出，頁面載入時間每增加，訪客離開的機率就顯著上升，載入速度直接影響使用者體驗與轉換。對作品集來說，這句話等於在說：你的圖如果慢，客人就看不到你的實力。

所以圖片這關，是 RWD 之外我會花最多力氣的一塊。實務上有四件事一定要做：

1. 轉檔成 WebP 之類的現代格式，同樣畫質檔案小得多。
2. 壓縮再上傳，這一步可以用 WordPress 的圖片壓縮外掛自動化處理，不要靠手動。
3. 非首屏的圖片開延遲載入（lazy loading），讓瀏覽器僅在使用者快滑到時才抓圖。
4. 給每張圖正確的寬高屬性，避免圖片載入完把版面往下推、造成畫面跳動。

這四件事都可能影響 Core Web Vitals。手機版作品集的 LCP（最大內容繪製）元素常是首圖或 Hero 作品，但仍應以測量結果確認。圖片未妥善處理，會拖慢 LCP 與使用體驗；Core Web Vitals 是小幅排名訊號，不能把名次變化全部歸因於單一圖片。背後的指標邏輯與優化手法，可參考Core Web Vitals 的 SEO 實戰；圖片壓縮與延遲載入則可對照圖片 SEO 優化指南。

這裡要特別誠實講一個常見的踩坑：有人為了讓作品牆「載入快」，把所有圖片壓到解析度極低，結果桌機大螢幕上看起來糊成一片，反而像低質量網站。RWD 的圖片策略不是「壓到最小」，是「對的螢幕給對的尺寸」。Blocksy 搭配 WordPress 的響應式圖片功能（srcset），可以讓瀏覽器依裝置自動挑選合適解析度的檔案，你要做的是確保伺服器上確實產出了多種尺寸，避免把一張圖壓死。作品集的 Hero 圖尤其值得手動準備兩到三個版本：手機用較小的檔、桌機用較大較銳利的檔，讓兩種螢幕都拿到該有的清晰度。

跨裝置測試與觸控友善：實機永遠比模擬器誠實

RWD 做完不等於做完，要驗收。而驗收最有效的方式，是拿真實的手機走一遍，而不是用桌機瀏覽器的開發者工具模擬。模擬器告訴你的是「版面在這個寬度會不會破」，實機告訴你的是「真人按下按鈕會不會誤觸、字會不會糊、滑動順不順」。這兩件事的落差，往往就是轉換率的落差。

觸控目標大小是手機版最常翻車的細節。按鈕、連結、選單項目的可點擊區域，建議至少要有 44×44 像素，這是無障礙與行動易用性的共通標準。小於這個尺寸，手指按下時很容易誤觸隔壁的項目，客人點「預約」卻跳到「關於我」，一次摩擦就足夠讓她離開。Blocksy 的按鈕與選單間距可以調，記得把手機版的點擊熱區放大，不要僅顧視覺精緻。

另一個桌機與手機的本質差異是 hover（滑鼠懸停）。桌機常靠滑鼠移上去展開二級選單或顯示資訊，手機沒有 hover 這件事，所有「移上去才出現」的東西，到手機上都要改成「點一下才出現」，否則手機使用者永遠碰不到那層內容。這在設計作品分類選單時特別關鍵。

測試時還有一個變數常被遺漏：手機本身的效能。你用最新旗艦機測得很順，不代表客人手上那支用了三年的中階機也順。作品集圖片多，舊一點的手機在載入與滑動時更容易卡。建議你找一台效能普通的手機實測一次，如果它在作品牆上滑動會頓，那就是你圖片或動畫該再減量的訊號。這個動作能幫你抓到那些僅在低階裝置上才出現的體驗破口。

做法	桌機適合	手機該改成
滑鼠懸停展開二級選單	順手	點一下展開，避免 hover 失效
按鈕做得很精緻但很小	還能點	放大點擊熱區到至少 44px
作品牆 3 到 4 欄	氣派	單欄或雙欄，細節才看得見
before/after 左右並排	好比對	上下疊或用滑動比對元件
一長串主選單全展開	清楚	收進漢堡選單，預約放第一層

把「看到作品」接上「點一下預約」：聯絡動線才是作品集的目的

回到這篇文章最核心的一句話：客人看到作品卻不知道怎麼聯絡，是這類網站最常見的轉換斷層。前面講的 Header、排版、圖片，最終都是為了把人送到「預約」這一步。所以聯絡動線不能僅擺一個放在頁尾的電子郵件信箱，那等於沒擺。

服務型作品集最有效的聯絡入口，依序是：LINE（或你常用的即時通訊）、電話、線上表單。為什麼 LINE 排第一？因為台灣消費者習慣用 LINE 諮詢，按一下就能對話，摩擦最低。電話第二，是因為很多預約還是會用電話確認。表單第三，是給那種想一次把需求講清楚、不想被立即打擾的客人。

在手機版，我會把這三個入口做成固定在螢幕底部的快捷列（sticky CTA），或至少把 LINE 與電話做成兩顆大按鈕。Blocksy 的 Header 與區塊搭配可以做到這件事，背後的按鈕設計心理學與擺放原則，可以對照CTA 按鈕設計指南。表單本身的選擇與設定，則屬於 WordPress 表單外掛的範圍，挑一套適合服務型網站的方案即可。

講到表單，再補一個常見的轉換殺手：欄位太多。服務型預約的線上表單，欄位越少越好，基本上「姓名、聯絡方式、想做的服務、備註」就夠了，細節可以留到 LINE 或電話裡確認。每多一個必填欄位，就多一批人在這一步放棄。這個原則在手機上尤其重要，因為小螢幕上打字本來就累，欄位一多，放棄率會跳得很快。細節不用在表單裡一次問完，先把客人留下聯絡方式，後續往來交給即時通訊就好。

還有一個常被低估的轉換細節：營業時間與地址要在每一頁都拿得到。客人決定要不要預約的那一秒，她腦袋裡同時在算「這家離我多遠、現在還開嗎」。這兩項資訊藏在聯絡頁深處，等於逼她多點兩次。把手機版的頁尾固定放營業時間與地址，或用區塊做一個常駐資訊卡，能明顯降低「看完作品卻沒下文」的比例。如果你的網站整體詢問數一直上不來，問題常常出在這些動線細節身上，跟流量沒有直接關係，值得回頭系統性地把詢問動線排查一次。

中文字體在 RWD 下的閱讀層級：別讓手機上的字小到看不見

作品集網站很容易把心力全砸在圖片上，忘了字也是內容。中文字體在手機上有兩個特殊問題：一是筆畫密度高，字級太小就糊掉；二是中文字形檔案大，載入慢會拖累效能。這兩個問題在 RWD 下會同時發作，因為你總希望桌機上字大一點有氣勢、手機上字又要小到塞得下。

我的習慣是：正文在手機上不要小於 16px，標題層級要拉出明顯對比。Blocksy 的 Customizer 裡可以逐斷點調字級，這個一定要調，不要直接套預設。行距對中文也很關鍵，太擠會讓整頁看起來像壓力鍋，太鬆又浪費手機的垂直空間，一般落在字級的 1.5 到 1.7 倍之間最舒服。配色對比也要顧，正文與背景的對比度建議達到 4.5 比 1 以上，這是 WCAG 無障礙標準的基本線，也是手機在陽光下仍能閱讀的關鍵。很多作品集為了走低調質感，會把字的顏色壓得很淡，桌機上很有氣氛，到了手機在戶外使用時就整片糊掉，這個取捨要想清楚。中文字體的選擇與搭配是另一門學問，從黑體、明體到圓體各有氣質，美髮作品集通常適合現代感的黑體或帶圓潤感的字體，字體的選擇與應用邏輯值得花時間深入研究。

外部字型可評估改成本機託管，以減少第三方請求並簡化部分隱私管理；是否更快仍取決於檔案大小、快取、預載、字重數量與原本的 CDN。WordPress 設定方式可參考Google Fonts 本機化教學，完成後應重新量測載入時間、LCP 與 CLS，而不是預設指標一定改善。

上線前的 RWD 檢查清單：不要等客訴才發現問題

網站上線前，我一定會跑一遍這張檢查表。它不是裝飾用，是真的會抓到問題的工具。建議你分別用一支手機和一台筆電各跑一次，不是用桌機的瀏覽器縮視窗來模擬，因為模擬永遠測不出觸控熱區和真實字體渲染。

檢查項目	手機	桌機	沒過的後果
預約按鈕在第一屏就看得到	必須	建議	客人看完作品找不到下一步
LINE 與電話可一指點擊撥打	必須	建議	轉換斷在聯絡這一步
作品牆不會被擠成指甲片	必須單欄或雙欄	3 欄為主	作品細節看不見等於白放
圖片有壓縮、非首屏圖片有延遲載入	必須	必須	可能拖慢 LCP 與瀏覽體驗
營業時間與地址在頁尾拿得到	必須	必須	客人不知道何時能來
選單項目精簡、預約在第一層	必須	可完整展開	預約被埋進深層選單
正文字級不小於 16px	必須	視設計	中文字糊掉、閱讀體驗差
觸控目標至少 44×44 像素	必須	視設計	誤觸隔壁項目、客人離開
桌機的內部連結手機也走得到	必須	必須	分類頁在搜尋與導覽中被埋掉
跨頁面導覽不會回到死路	必須	必須	客人在某頁卡住後離開

這張表背後有一個共同邏輯：每一項都對應「客人在這一步會不會走掉」。RWD 檢查的本質是驗收動線，美觀僅是附加價值。把這個念頭放在心裡，你會發現很多原本覺得「還好」的小問題，其實都是轉換的破口。

六步把作品集推上線：給你的行動方案

講了這麼多觀念，給你一份可以照著做的順序。這不是唯一的流程，但它是你在時間有限時，最不會走冤枉路的版本。

1. 先把動線畫出來：拿一張紙，寫下「客人首頁 → 作品分類 → 單一作品 → 預約」這條路，標出每一段她需要看到什麼。這一步比選主題更重要。
2. 把 WordPress 與 Blocksy 裝起來：主題的安裝流程在WordPress 主題安裝教學裡有完整步驟，Blocksy 的裝法與一般主題一致。
3. 用 Header Builder 設手機頁首：把手機版的固定列放上 LINE 與預約按鈕，桌機版放完整選單。逐裝置可見性是你的主戰場。
4. 組作品集頁面：作品牆在手機設單欄、桌機 3 欄，before/after 在手機改上下疊。用 Gutenberg 區塊組，必要時補區塊外掛。
5. 處理圖片效能：轉現代格式、壓縮、開延遲載入、設寬高。跑一次行動裝置速度測試，確認 LCP 過關。
6. 上線前跑一遍檢查表：手機與筆電各走一次真實動線，任何一項沒過就回頭修，不要帶著破口上線。

如果你想更系統性地把主機、網域、SSL、主題、外掛一次搞懂，可以回頭找一份從主機到外掛的完整架設全攻略來搭配，這篇的作品集視角能當作它的補充。

再給你一個驗收角度：上線之後，回 Google Analytics 看行動裝置的轉換與跳出率。如果手機流量很高、預約卻集中在桌機，那多半不是手機客人不想約，是手機版的動線還有破口。數字會誠實告訴你下一步該修哪裡，這比憑感覺調版面可靠得多。

換句話說，RWD 作品集要贏的，從來不是誰的桌機版比較炫。是誰讓一個在捷運上單手滑手機的客人，在兩秒內看懂你的實力、並且一指就能預約。Blocksy 給了你逐裝置控制的工具，但要不要把手機版當成一等公民來設計，是你自己的選擇。把手機這條動線顧好，你的作品才真的有機會變成訂單，而不是僅停留在被按讚。