官網『相簿燈箱』(Lightbox / Image Gallery) 設計完整攻略：中小企業如何把幾張作品照做成客戶願意慢慢滑的成交利器
作品照片牆點下去沒反應、圖片小到看不清、手機滑起來卡卡的？中小企業官網最該做但常做爛的相簿燈箱，一次講清楚該怎麼做、細節怎麼抓。
一、老闆你先想想，客戶點下去那張照片時，到底在期待什麼？
台灣中小企業的官網，最容易被浪費的區塊有兩個。一個是「關於我們」，另一個就是「作品集 / 產品照片牆」。
做裝潢的、做網站的、做美甲的、做食品的、做汽車包膜的、做 3D 動畫的，網站上多多少少都會放一區「精選案例」或「產品照片」。但九成的老闆做法都一樣：把手機拍好的照片丟到 WordPress，套一個 3 欄或 4 欄的圖片牆，然後——就沒有然後了。
客戶點下去，如果什麼事都沒發生，馬上跳走；如果被強制跳到一個新分頁，也馬上跳走；如果跳出一張圖但不能滑到下一張，還是跳走。你花了那麼多力氣拍的照片，最後只有客戶「滑一下、瞄一眼」的兩秒鐘。
要解決這件事，就要把圖片區塊做成「相簿燈箱」（Lightbox / Image Gallery）。這篇文章把我們幫客戶做網站時常遇到的坑一次講完：燈箱該不該做、要做要注意什麼、什麼細節會決定轉換率，還有中小企業老闆最常誤解的地方。
Photo by Panos Sakalakis on Unsplash
二、什麼是「相簿燈箱」？跟一般圖片牆差在哪？
相簿燈箱（Lightbox）其實就是「點下去之後，圖片被放大到覆蓋整個畫面，背景變暗，你可以用左右箭頭滑到下一張，按 Esc 或空白處可以關閉」的這個互動效果。
看起來只是個小功能，但它幫你做了三件事：
- 把照片看清楚。縮圖 400px 寬的作品照片，客戶根本看不出質感。燈箱把它變成 1600px 全螢幕，一秒鐘看出你有沒有料。
- 把客戶留在同一頁。不用跳走、不用開新分頁、不用回上一頁。滑完 20 張再點「聯絡我們」，比每張都跳走再回來，成交機率高很多。
- 把「一張圖」變成「一系列故事」。透過左右滑動，客戶可以連續看完一組作品的施工前 → 施工中 → 完工照，或是一組產品的六個顏色。這是普通圖片牆做不到的。
簡單講：燈箱是把「靜態展示」升級成「沉浸式瀏覽」的最便宜方法。而且技術上早就是成熟到不行的東西，不是什麼稀有配備。
三、哪些中小企業官網「一定要」做燈箱？
老實說，不是每個網站都需要。以下這幾類，如果你沒做燈箱，就是把生意往外推：
- 裝潢、室內設計、系統櫃：作品是最強證明，客戶會想放大看細節。
- 美甲、美睫、紋繡、美髮：圖片就是一切，濾鏡有沒有調、光線有沒有夠，客戶要放大確認。
- 汽車包膜、車燈改裝、輪框：質感差一點客戶就會退回去看第二眼，一定要放大。
- 婚攝、寫真、活動攝影：作品集就是官網主體，沒有燈箱等於白做。
- 食品、烘焙、私廚：色澤、油光、擺盤的細節都是購買決策關鍵。
- 建案、預售屋、辦公室出租：格局、採光、視野照片一定要看得夠大。
- 網站設計、3D 動畫、設計服務：連自己都不放大展示，客戶怎麼相信你有品味。
反過來說，如果你賣的是「純資訊服務」——例如會計師、律師、顧問——燈箱就沒那麼重要。因為客戶不是來看圖，而是來看你的專業論述。
四、燈箱設計的六個關鍵細節，做錯就等於沒做
光是「點下去圖片會放大」不叫燈箱做好了。以下這六個細節，每一個都會直接影響客戶的體感和轉換率。
1. 縮圖必須「等比裁切」，不要讓圖片牆長短不一
最醜的圖片牆長什麼樣？就是有的圖是直的、有的是橫的、有的接近正方形，硬塞成一排參差不齊的樣子。這種區塊看起來就像「阿嬤的相簿」，一秒把整個網站的專業感拉低。
正確做法是：所有縮圖統一比例（1:1 正方形，或 4:3 橫式），用 CSS 的 object-fit: cover; 強制裁切，寧可犧牲部分邊緣也要視覺整齊。反正客戶點下去看的是「原圖大圖」，縮圖只要吸引到他點就好。
2. 燈箱一定要有「左右切換」跟「數字進度」
客戶點開第 1 張後，能不能一路滑到第 20 張，決定他會不會多看幾張。左右箭頭鍵可以按、手機可以左右滑、還要顯示「第 3 / 20 張」，讓他知道還有多少可以看。
沒有這個，客戶看完第一張就會直覺按叉叉關掉，然後想想又懶得再點第二張。
3. 手機版體驗要獨立設計，不是把電腦版縮小就好
台灣網站流量七成以上來自手機。手機版燈箱要注意：
- 照片是全螢幕撐滿，不是縮在中間留白邊。
- 左右滑動要靈敏，不能只能點小小的箭頭。
- 關閉的叉叉要在右上角，而且要「夠大」，手指按得到。
- 不要跳系統瀏覽器的圖片檢視器（否則會離開你的網站）。
很多網站的燈箱在電腦版看很棒，一到手機就變成雞肋，都是這幾點沒做。
Photo by lucas Favre on Unsplash
4. 圖片要「兩份」——縮圖用小圖、燈箱用大圖
不要偷懶把 5MB 的原圖直接當縮圖載入，那頁面會跑到讓人想砸電腦。正確的做法是：
- 縮圖：壓縮到 400~600px、100KB 以內，用 WebP 或 AVIF 格式。
- 大圖（燈箱用）：1600~2000px、200~400KB，客戶點下去才載入。
- 載入時有 skeleton 或漸進顯示，避免白屏一秒。
這件事看起來很技術，但直接影響 Google 排名（Core Web Vitals）跟手機用戶的耐心。做好了，SEO 跟轉換率同時往上跑。
5. 每張圖要有「說明文字」，不然客戶記不住
燈箱最常被浪費的地方，就是圖片下方那條說明文字。老闆多半留白或只放「作品 001」，這是最可惜的。
正確的說明可以放：
- 案例名稱：「桃園中壢．3 房 2 廳．25 坪．工業風」
- 使用材質：「胡桃木貼皮 + 灰色鐵件 + 微水泥牆面」
- 案主需求：「屋主想要保留北歐感但又不要太冷調」
- 甚至一句 CTA：「想做類似風格？點這裡免費諮詢」
這 30 個字，讓一張照片變成一個「案例故事」。客戶不只記得你會拍照，還記得你會思考、會表達，這就是差異化。
6. 分類與篩選：讓客戶只看想看的那類
如果你的作品有 40 張以上，就一定要加分類標籤。例如裝潢公司可以分「工業風 / 北歐 / 日式 / 現代」；產品公司可以分「小家電 / 廚房 / 生活」。點選某個分類，圖片牆只顯示對應作品，客戶就不用滑到手抖。
這個功能技術上叫 Isotope 或 Filter Grid，市面上很多現成套件，成本不高，但體感差很多。
五、燈箱區塊做好會發生什麼？——三個常被忽略的隱藏效益
做網站的老闆常問：「這個東西真的有差嗎？」我們幫客戶做了很多年，答案是「差很大」，而且不只在轉換率。
- 停留時間拉長 → SEO 排名上升。Google 會看訪客在你網站停留多久。燈箱讓人多滑 30 秒，一個月累積下來，關鍵字排名會慢慢往上爬。
- 詢問單品質變高。客戶看完一整組作品才詢問，比只滑首頁就填表單的人，成交率高好幾倍。因為他已經被你的作品「說服」過了。
- 照片可以直接當廣告素材。網站上高解析度、有描述、有分類的作品照，直接拿去投 Facebook / Google 廣告就能用。素材整理成本大幅下降。
Photo by Claudio Schwarz on Unsplash
六、WordPress / 自架網站要怎麼做燈箱？三種常見做法比較
這裡把三種常見選擇的優缺點列一下，方便老闆自己判斷：
- A. WordPress 外掛：Envira Gallery、Modula、FooGallery
優點是零程式碼、五分鐘上手；缺點是免費版功能被閹割，效能不一定好，還有可能跟其他外掛打架。適合預算低、案例不多（30 張以內）的網站。 - B. Elementor Pro 內建 Gallery Widget
如果你的網站已經是 Elementor Pro，內建的圖庫元件已經夠用了，可以直接分類、Lightbox、Lazy Load 全部一次搞定。缺點是版型受限於元件樣式，客製空間有限。 - C. 純前端 JS 套件：GLightbox、PhotoSwipe、Fancybox
做客製化網站首選。效能最好、體驗最流暢、可以自訂到跟品牌完全一致。缺點是需要工程師寫 code。適合有一定預算、想做出跟同行不一樣的公司。
我們自己幫客戶做的話，一頁式或活動頁通常用 GLightbox（開源、輕量、好客製）；WordPress 專案則看情況搭配 Elementor 或 FooGallery。重點不是選哪個套件，是「有沒有把上面那六個細節做齊」。
七、結語：先問「客戶要什麼」，再決定要不要做
燈箱不是每個網站都要做，但如果你的生意是「靠照片說服客戶」的類型，這件事的投報率非常高。它不需要你重做整個網站，通常花 3~5 個工作天就能把圖片區塊改頭換面。
老闆可以先做一件事：打開自己網站的作品集頁面，用手機點三張照片試試看。如果體驗跟你在 Instagram 或 Pinterest 上看圖差一大截，那就是該改的時候了。
網站的每一個小細節，都在替你決定客戶到底信不信任你。與其把預算花在「頁面再加一個炫砲動畫」，不如先把作品照片好好放大讓客戶看清楚。
有想法要把作品區塊升級的老闆，歡迎跟我們聊聊——我們會先看你現在的網站狀況，判斷是「調整現有版型」還是「整區重做」比較划算，不會一開口就叫你砍掉重練。