接案作品集網站怎麼做？沒有大案子也能談到客戶的 Portfolio 實作

剛開始接案的人最常卡在同一個死結：客戶問「有沒有作品可以看？」，你打開資料夾，裡面是三個做到一半的練習、一份幫朋友免費做的排版、還有一個上線兩週就被對方改到面目全非的網站。你知道自己會做，但你拿不出一個「可以直接丟連結給對方」的東西。於是你回一句「我整理一下再給您」，然後這個案子就沒有下文了。

更常見的是另一種卡點：你其實有作品，但全部散落在雲端硬碟、Instagram、某個接案平台的個人頁、還有一份三年前做的 PDF。每次有人問，你就要花半小時重新拼裝。這篇要處理的就是這件事——把「作品集網站」當成一個有明確任務的工具來做，而不是一個要等到「有夠好的案子」才能開始的裝飾品。作品集網站的目的從來不是炫技，是降低客戶的決策風險。認清這一點，你會發現沒有大案子也一樣做得出來。

先搞懂：客戶點開你的作品集時，腦子裡在算什麼

很多人做作品集的預設觀眾是「同行」，所以拚命放最炫的視覺、最刁鑽的技術細節、最完整的設計稿。但真正付錢的人多半不是同行。他可能是一間貿易公司的行銷專員、一家餐廳的老闆、一個剛募到第一輪資金的創辦人。他打開你的網站，不是來欣賞的，是來評估風險的。

客戶心裡的三個問題

幾乎所有委託方在看作品集時，都在快速回答三個問題，而且順序固定：

• 「這個人做過像我這樣的東西嗎？」——不是問你會不會，是問你熟不熟。同樣是網站，做過餐飲業訂位頁的人，跟只做過個人部落格的人，在客戶眼裡的風險完全不同。
• 「跟他合作會不會很痛苦？」——這題你以為作品集答不了，其實答得了。你怎麼描述專案、怎麼交代限制、怎麼講你跟對方怎麼溝通，全部都在洩漏你的協作性格。
• 「東西交出來會是什麼樣子？」——客戶怕的不是做得不好看，是做出來跟他想的不一樣。所以「你怎麼決策」比「成果多美」更能安撫他。

回過頭看，這三題沒有一題需要「大案子」才能回答。一個標示清楚的自主專案，只要你把問題背景、限制條件、取捨過程寫得誠實，在降低風險這件事上的效果，往往勝過一張沒有任何說明的漂亮成品圖。

為什麼作品放太多反而讓人不敢下單

這是新手最反直覺的一課。你以為放二十件代表你經驗豐富，但客戶讀到的訊息是「這個人什麼都做，所以什麼都不專精」。更慘的是，二十件作品裡只要有三件明顯比較弱，客戶就會用那三件當作你的水準下限來評估——人在評估風險時看的是最差值，不是平均值。

還有一個現實的問題：注意力。潛在客戶多半是快速掃過你的作品集，而不是逐件細讀——這是接案現場的普遍經驗，不是什麼統計數字，但你只要回想自己上次看陌生網站的方式就懂。放二十件，等於把篩選工作丟回給他，而他多半不會做，會直接關掉。順帶一提，還有另一個不同層次的門檻也在消耗這點注意力：Nielsen Norman Group 長年引用的介面反應時間三個門檻指出，系統回應一旦超過十秒，使用者就很難把注意力留在當前任務上。那篇談的是等待時間而非瀏覽件數，但結論指向同一件事：作品集的載入速度同樣不能拖。

沒有真實案子時，你手上其實有四種可用素材

「我沒有作品」通常不是真的沒有，是「我沒有能光明正大說是商業案的東西」。這兩件事差很多。以下四種素材都可以放，前提是標示要誠實，不能讓人誤以為是商業委託。這條紅線非常重要，等一下會單獨講後果。

一、自主專案（Self-initiated）

你自己定題目、自己設限制、自己做完的東西。例如你重新設計了住家附近那間常去的早餐店的點餐流程，或是你做了一個記錄自己接案收支的小工具。這類作品的最大優勢是你完全掌握敘事——為什麼做、卡在哪、怎麼解，全部是你的真實決策，寫起來最有血肉。

要讓自主專案有說服力，關鍵是把「限制」寫進去。真實案子之所以難，是因為有預算、有工期、有難搞的窗口。你的自主專案如果沒有任何限制，看起來就像是無限時間下的美術作業。所以請自己設限：三天內完成、只能用免費資源、必須在舊版瀏覽器可用、成本壓在某個等級以下。把限制寫出來，作品的分量立刻不一樣。

二、重製作（Redesign / Rebuild）

拿一個現有的公開網站或產品，重做一次。這是設計和前端最常見的練習型作品，但也是最容易踩雷的一種。三個必守規則：

• 明確標示為未受委託的個人重製練習，並且註明原品牌與你無任何關係。
• 不要貶低原作。寫「原版很醜」只會讓人覺得你不專業；改寫成「我假設一個情境：如果目標是降低結帳流失，我會怎麼調整」，格局差很多。
• 謹慎使用他人商標與素材。品牌 Logo、產品照、字型都可能有權利歸屬問題。做重製時盡量以自製素材或授權明確的資源替代，若必須呈現原始品牌識別，也應限縮在說明用途、並保留移除的餘裕。這裡要注意的是，畫面、照片、字型這類素材的重製屬於著作權法的範圍，而品牌名稱、Logo 這類識別標誌另外受商標法規範——兩者是不同的法，別以為引用一部就涵蓋全部。實務說明則可查經濟部智慧財產局的公開資料。

三、練習作與課程作業

來自線上課程、自學挑戰、社群共學的產出。它的問題是同質性高——同一堂課出來的成品長得都一樣，客戶看多了會疲乏。要救它只有一招：加上你自己的變數。把課程給的題目換成一個真實的在地情境，把假資料換成你實際去查來的資料，把「照著做」變成「我改了什麼、為什麼改」。這樣它就從練習作升級成半個自主專案。

四、有限度參與的協作案

你只做了其中一部分：幫朋友的工作室做了幾張圖、在某個團隊專案裡負責切版、幫親戚的店家寫了商品文案。這種案子可以放，但一定要寫清楚你的角色與範圍。「我負責 A、B，視覺由 C 提供，後端非我開發」這句話不會讓你顯得渺小，反而會讓客戶覺得你誠實、邊界清楚、將來好合作。

反過來說，最致命的錯誤就是把上面任何一種素材，包裝成「某某品牌委託案」。這不只是道德問題——當客戶或原品牌方發現，你失去的不是一個案子，是整個口碑。接案圈子比想像中小，而網路上的東西不會消失。

四種素材的定位與標示方式

素材類型	可信度	建議標示寫法	主要風險
自主專案	中高（敘事完整時最高）	「自主專案，題目與限制由我自訂」	沒設限制會顯得像作業
重製作	中	「個人重製練習，非受委託，與原品牌無合作關係」	商標與素材授權、被解讀為貶低原作
練習作／課程作業	中低	「課程延伸練習，我調整了 X 與 Y」	同質性高、缺乏個人判斷
協作案（部分參與）	高	「我負責 A 與 B，其餘由團隊成員完成」	角色寫不清會被誤會攬功
完整商業案	最高	「客戶委託，已取得公開授權」	未取得同意就公開會違約

一個案例頁該講什麼：問題→限制→做法→結果

絕大多數失敗的作品集，敗在案例頁只有圖。三張截圖、一行標題、結束。客戶看完只知道「你會做圖」，不知道「你會不會解決我的問題」。有效的案例頁應該像一份精簡的偵辦報告，四段就夠。

第一段：問題（一到兩句話說清楚痛在哪）

不要從「這是一個電商網站」開始，要從「這家店有六成訂單來自 Line，但沒人記得誰買過什麼」開始。問題寫得越具體，讀者越容易在自己身上找到對應。如果是自主專案，就寫你觀察到的真實現象；如果是重製作，就寫你假設的情境，並且老實說那是假設。

第二段：限制（這一段最能建立專業感）

限制包含時間、預算等級、技術條件、既有系統、決策者的偏好。新手最愛跳過這段，但這段恰恰是客戶最有共鳴的地方——因為他的案子也一定有限制。你寫「必須沿用對方既有的品牌色，即使它對比度偏低，所以我在按鈕上另外處理了可讀性」，客戶馬上懂你是能在現實條件裡工作的人。順帶一提，可讀性與對比度有公開標準可循，W3C 的 WCAG 無障礙指引就是可以引用的依據，寫進案例頁比空口說「我很重視體驗」有力得多。

第三段：做法（重點是取捨，不是流程）

很多人在這段寫成 SOP：「訪談 → 線框 → 視覺 → 切版 → 上線」。這種東西每個人都一樣，不具辨識度。真正有價值的是你放棄了什麼。「我原本想做動態篩選，但考量到對方沒有工程維護能力，最後改成靜態分類頁」——這一句話同時展示了技術判斷、成本意識和對客戶處境的理解。

第四段：結果（沒有數據時怎麼寫）

有數據當然最好，但新手通常沒有，或者有也不能公開。這時候有三個誠實的替代寫法：

• 寫可驗證的產出事實：「交付 12 個頁面模板與一份操作說明，對方行政人員可自行新增活動頁」——這是事實，不是吹噓。
• 寫技術性的客觀指標：載入速度、行動裝置適配、無障礙檢查結果。這些你自己就能量，工具也是公開的，例如 Google 的 PageSpeed Insights，或參考 web.dev 的 Core Web Vitals 說明來理解該看哪些數字。
• 寫回饋與後續：「上線後對方追加了第二階段的內容維護」——續約本身就是最強的信任證明。

絕對不要做的事：編一個「轉換率提升 40%」出來。這種數字很容易被追問細節，一問就破。而且一旦客戶發現一個數字是假的，他會合理推論整個作品集都不可信。

角色說明：一行字避免九成誤會

每個案例頁都應該有一行角色標示，寫明你做了什麼、沒做什麼、專案期間大約多長、跟誰協作。這一行的成本是三十秒，但它擋掉的是「客戶以為你也會做他沒說出口的那一半」這種災難。關於範圍怎麼談、怎麼在接案前把界線劃清楚，可以搭配接案合約的必備條款與著作權歸屬一起看，作品集寫得清楚，合約談起來也會順很多。

平台怎麼選：自架、筆記工具、作品平台、個人網域

這題沒有標準答案，只有取捨。先講一個原則：不要為了做作品集而先花三個月學架站。你的目的是接到案子，不是擁有一個技術上很酷的網站。除非你賣的就是架站服務——那你的作品集本身就是最大的作品，另當別論。

自架 WordPress

可控性最高，網址、版型、SEO、資料全部在自己手上，未來要加部落格、服務頁、聯絡表單都容易。代價是你要負責主機、更新、備份與安全性，出事沒人幫你。如果你本來就想順便經營內容、累積搜尋流量，這是長期最划算的路。想先掌握成本結構，可以看自架、找接案與套版平台三種方案的費用比較；實際動手排版時，Elementor 從安裝到做出第一個頁面的步驟可以省掉不少摸索時間。官方文件與外掛生態則以 WordPress.org 為準。

Notion 或類似的文件型工具

最快上線的一種。你會打字就會做，結構調整靈活，特別適合「先有一個能丟出去的連結」這個階段。代價是版面自由度低、載入速度與 SEO 控制權有限、長期不容易做出品牌感。功能與方案細節請直接看Notion 官方網站，這類工具的規格與收費調整頻繁，任何二手轉述都可能過期。

作品平台（Behance、Dribbble、各類接案平台個人頁）

優點是自帶流量與同行曝光，缺點是版面被平台框死、聯絡動線被平台掌握，而且你辛苦累積的頁面權重最終屬於平台。比較務實的做法是「平台做曝光，自己的網站做成交」：在平台放精簡版並附上自己網站的連結。想理解各家平台的抽成與金流差異，可以參考國內外接案平台的比較整理。

靜態網頁託管

如果你本身寫前端，用靜態網站產生器加上免費託管（例如 GitHub Pages 這類服務）是成本最低、速度最快的組合。代價是每次更新都要動到程式碼與部署流程，非技術背景的人不建議。

四種方案怎麼比

方案	初期成本	可控性	SEO 潛力	上線速度	適合誰
自架 WordPress	需負擔網域與主機	高	高	慢（數天到數週）	想長期經營內容、賣網站相關服務的人
Notion 等文件工具	低（多有免費層，以官方為準）	低	低到中	最快（數小時）	急著要一個連結、還在測試定位的新手
作品平台個人頁	低（部分平台抽成）	最低	不屬於自己	快	視覺類、需要同行曝光的人
靜態網頁託管	低（網域另計）	高	中到高	中（看技術熟練度）	會寫前端、追求載入速度的人

表格裡刻意不寫具體金額，因為主機商與平台的方案變動太快。要評估成本，請直接開官方定價頁對照當下的版本，不要相信任何一篇文章（包括這篇）裡的數字。

網域與網址：一個被嚴重低估的信任訊號

把作品集放在「某平台網址／你的帳號」跟放在「你的名字.com」，在客戶眼裡是兩件事。前者代表你是某個平台的使用者，後者代表你是一個經營自己事業的人。這個差別在報價越高的案子越明顯——當你要開一個六位數的報價，對方會下意識檢查你有多「像一間可以簽約的對象」。

網域怎麼挑

• 優先用可以唸出來的名字：自己的英文名、工作室名。避免夾雜數字、連字號一大堆的組合，那種網址在電話裡唸出來會災難。
• 短、好拼、不要玩諧音：你要的是對方打得出來，不是覺得你有梗。
• 後綴不必執著：.com 最沒有溝通成本，但 .tw、.dev、.design 這類也早就被接受。台灣網域的註冊制度與受理註冊機構名單可查財團法人台灣網路資訊中心（TWNIC）。
• 一開始就決定要不要用真名：用真名的好處是搜尋你的名字時會找到你，壞處是將來若想轉成團隊品牌會有點尷尬。沒有標準答案，但中途改網址的成本很高，先想清楚。

網址結構也有差

案例頁的網址盡量做成語意清楚的路徑，例如以專案名稱為結尾，而不是一串隨機編號。這不只對搜尋引擎友善，也讓你在對話中貼連結時對方一看就知道要去哪。Google 官方對網址結構本身就有明確建議（使用有意義的字詞、避免一長串參數與無意義編號），可直接對照Google Search 的網址結構指引。至於頁面上的文案該寫成什麼樣，則是另一份文件的範圍，整理作品集敘述時值得順手對照實用內容指引。

要放幾件？怎麼排序？

先給一個可執行的起手式：三到六件，寧少勿多。三件是下限，因為低於三件客戶會覺得你剛入行（雖然這可能是事實，但沒必要主動強調）。六件是上限，因為超過之後邊際效益急速下降，你的維護成本卻線性上升。

排序的三個原則

• 第一件放「最像你想接的下一個案子」，不是最華麗的那件。作品集的排序其實是在宣告你的定位。如果你想接品牌識別的案子，第一件就不該是一個 App 介面。
• 第二件放「證明你能處理複雜度」：有限制、有取捨、有協作的那一件。
• 最後一件放「有溫度的那件」：自主專案、公益案、或你真心喜歡的題目。人在看完一串專業內容後，最後留下的印象往往是情感的。

需要分類嗎

作品少於六件時不要分類，直接排成一條線就好。分類是為了讓大量內容可導航，作品只有五件卻分成三個類別，每類兩件，看起來反而更空。等到累積到十件以上、而且服務項目確實分歧時，再考慮做分類或篩選。

NDA 或客戶不同意公開時怎麼辦

這是接到真案子之後才會遇到、卻幾乎沒人事先準備的問題。你辛苦做完一個很好的專案，結果合約裡有保密條款，或客戶單純不想被知道外包。這時候有幾條可走的路，風險由低到高排列：

第一條路：事前就談公開權

最好的解法是在簽約當下就處理。在合約裡加一條「乙方得於作品集中以匿名／具名方式呈現本案成果，範圍為……，甲方得要求下架」，多數客戶並不會反對，尤其你主動提出「可以匿名、可以只放局部、可以延後半年再放」的彈性時。台灣的營業秘密相關規範可參考全國法規資料庫的營業秘密法條文，具體個案的保密範圍仍應以你們簽署的合約文字為準。

第二條路：匿名化呈現

拿掉品牌名稱、Logo、真實資料，改寫成「某餐飲連鎖品牌」「一家 B2B 零件供應商」。畫面上的文字換成無意義的示意內容，數字換成相對值（例如「訂單處理時間縮短約三分之一」而非揭露實際筆數）。要注意的是，匿名化不是萬靈丹——如果案子特徵太明顯，業內人一看就知道是誰，那實質上仍可能違反保密義務。判斷標準應該是「知情者是否能辨識」，不是「我有沒有寫出名字」。

第三條路：只講方法，不放成品

把案例改寫成一篇方法論短文：我遇到什麼類型的問題、我用什麼框架拆解、我的判斷順序是什麼。完全不出現任何客戶資訊。這種寫法的說服力其實不輸截圖，因為它展示的是可遷移的能力。

第四條路：私密連結或需索取的版本

把敏感案例做成不公開的頁面，只在對方明確詢問時提供。技術上可以設定不被搜尋引擎收錄，Google 官方對 noindex 標記的用法有完整說明。但請記得，「沒有被搜尋引擎收錄」不等於「保密」——連結一旦交出去就可能被轉傳。真正受保密義務約束的內容，能不放就不要放。

七個常見的致命錯誤

以下這些不是風格問題，是會直接讓案子飛掉的問題。

一、載入太慢

作品集最愛塞高解析度大圖，然後首頁十秒開不完。客戶在手機上、可能還在等紅燈，他不會等。上線前務必壓縮圖片、使用適當格式、加上延遲載入，並用公開工具實測一次行動裝置的表現。如果你用 WordPress，主題本身的肥瘦也會左右速度，選主題時可以參考含速度考量的佈景主題挑選建議。

二、找不到聯絡方式

聽起來荒謬，但這是實務上最高頻的錯誤。作品集做得很漂亮，客戶想問報價，翻遍全站只有一個藏在頁尾的社群圖示。聯絡方式應該在首頁看得到、在每個案例頁的結尾再出現一次。而且要寫清楚你偏好哪種聯絡方式、大約多久回覆、需要對方提供什麼資訊才好估價。

三、沒說明角色

前面講過，這裡再強調一次：不寫角色，等於默認你做了全部。客戶依此想像，之後發現落差，糾紛就是這樣來的。

四、把所有東西一次倒出來

包含三年前的舊作、學生時期的練習、跟現在定位無關的類型。作品集是策展，不是備份。每半年做一次汰換，把最弱的一件拿掉，換上新的。

五、只有圖沒有字

純圖的作品集不只說服力弱，對搜尋引擎也幾乎不可見。至少要有專案敘述、角色說明，以及每張圖的替代文字。替代文字的正確用法可參考 MDN 對 img 元素的說明，這同時也是無障礙的基本要求。

六、報價完全不透明

不一定要公開價目表，但至少要給一個參考框架，例如「單頁形象網站專案通常從某個級距起跳，實際依範圍調整」。完全不給任何線索，會過濾掉一批本來預算足夠但不想浪費時間問的客戶。怎麼設計價格結構、什麼時候該報專案價什麼時候報時數，可以參考五種定價模型與行情參考。

七、放了無法自證的成果數字

「幫客戶業績成長三倍」這種句子，如果你拿不出可解釋的算法與期間，最好不要寫。專業的客戶會追問，追問不出來就扣分；不專業的客戶會相信，然後對你抱持不切實際的期待，這在專案後期會變成災難。

上線前檢查清單

把下面這份跑一次，跑不過的不要上線。這不是追求完美，而是避免你用一個有破洞的網站去見客戶。

內容面

• 作品數量在三到六件之間，每一件都能說出「為什麼它在這裡」。
• 每個案例頁都有問題、限制、做法、結果四段，不是只有圖。
• 每個案例頁都有一行角色與範圍說明。
• 非商業案（自主專案、重製作、練習作）全部明確標示，沒有任何一件會讓人誤以為是委託案。
• 沒有任何無法解釋來源的成效數字。
• 有一段「我適合接什麼樣的案子」，也誠實寫出你不接什麼。

信任面

• 有一張真人照片或至少一個一致的頭像，以及一段像人講話的自我介紹。
• 聯絡方式出現在首頁與每個案例頁結尾，且寫明回覆時間預期。
• 網域是自己的，或至少網址在口頭上講得出來。
• 有基本的服務範圍與合作流程說明，讓客戶知道接下來會發生什麼事。

技術面

• 手機上實際打開過，不是只用瀏覽器縮小視窗看。
• 圖片全部壓縮過，首頁載入不會讓人等到想關掉。
• 每張圖都有替代文字，標題階層（h1、h2、h3）沒有亂跳。
• 所有外部連結與案例連結逐一點過，沒有死連結。
• 需要保密的內容確認不在公開頁面上，敏感頁面已設定不收錄。
• 網站有加密連線，表單送出後有明確的成功提示。

維護面

• 你知道下一次更新是什麼時候（建議每季檢視一次、每半年汰換一件）。
• 有一個地方持續記錄「這個案子將來可以怎麼寫成案例」，趁記憶新鮮時寫下限制與取捨，不要等一年後回想。
• 備份機制存在，且你真的還原測試過一次。

最後：先上線，再變好

作品集最大的陷阱不是做得不夠好，是永遠在準備。很多人卡在「等我接到一個像樣的案子再來做」，結果因為沒有作品集所以接不到案子，形成一個封閉的迴圈。打破迴圈的方法只有一個：用你手上現有的東西，先做出一個三件作品的最小版本，這週就上線。

它一開始一定不夠好。第一版可能只有一個文件工具的頁面、三個標示清楚的自主專案、一段誠實的自我介紹和一個 Email。但這個版本已經足以讓你在下一次有人問「有沒有作品可以看」的時候，回一句「有，連結在這」——而這句話跟「我整理一下再給您」之間的差距，往往就是一個案子。

之後每接完一個案子，就回頭補一則案例；每半年換掉最弱的一件。兩年後你會發現，這個網站已經不需要你去說服任何人了，它自己會做這件事。