作品集網站製作教學：面試接案都好用

作品集能不能幫你拿到面試或接案，關鍵不只在作品多寡，也在讀者能否快速看懂你的角色、能力與證據。與其臨時把不同年份、格式與解析度的檔案塞進一份 PDF，不如建立容易瀏覽與更新的網站。

或者你是接案工作者，每當有新業主來詢價，你都得重新整理一份「這次特別挑過的」作品清單，深怕把舊的、不夠代表性的案子放進去會壓低自己的報價。作品對你來說，變成一份要反覆手工拼裝的臨時文件，稱不上一個會替你說話的資產。

這篇教學要解決的就是這件事：把散落的作品，整理成面試官與接案業主都好用的個人品牌網站。內容從「誰會看、看什麼」一路走到上線與維運，不假設你會寫程式。

先講結論：作品集網站的核心答案

作品集網站不是把所有作品放上去就成立，它是一個有明確受眾與轉換目標的小型網站。讀者應能快速理解你是誰、獨立查看代表作，並在手機上正常閱讀。技術選擇只是手段，內容架構與頁面體驗才是核心。

用一句話講完核心立場：把每一件作品做成一份會說話的證據，這件事勝過追求任何最炫的特效。下面的章節會把這句話進一步拆解。

先回答一個多數人跳過的問題：你的作品集，到底要說服誰

很多教學一開始就教你挑平台、買網域，那是把順序想反了。在動手之前，可以先逼自己回答兩個問題：這個網站最主要的訪客是誰？他看完之後，要讓他做出什麼動作？這兩個答案會回頭決定你要用什麼工具、要寫多少字、要不要放聯絡表單。

從實務觀察，作品集網站的訪客大概分成三種，他們在乎的東西完全不一樣：

訪客類型	他正在解決的問題	他會在乎的作品集要素
招募面試官、用人主管	「這個人能不能勝任我開的職缺？」	代表作的深度、技術棧是否對得上、能否獨立完成、過程思考
潛在接案業主	「把這件事交給他，風險高不高？」	同類型案子的前後對比、業主回饋、報價區間、合作流程
同行、社群、媒體	「這個人有沒有值得追蹤或邀請的想法？」	觀點文章、演講紀錄、可被引用的思維框架

問題在於，絕大多數作品集只照顧到第一種或第二種訪客，然後用同一份內容硬塞給所有人。結果就是面試官覺得「太多業配感」、業主覺得「看不到跟我類似的案例」、同行覺得「沒有自己的觀點」。你在動手蓋網站之前，要先決定你的主要訪客是哪一種，其餘兩種則是順便服務，這樣後面所有的版面取捨才有依據。

實務上的建議是：如果你正在找工作或打算轉職，主受眾就設成面試官；如果你已經在接案或想全職自由工作，主受眾就設成潛在業主。不要企圖一碗水端平，那會讓網站變成四不像。

一個能同時被面試官與業主看懂的網站，結構長怎樣

決定主受眾之後，下一步是規劃網站的資訊架構。一個好用的作品集網站，可以拆成五到六個核心頁面，它們各自承擔一個明確任務。這個結構的好處是：面試官走「首頁 → 關於 → 代表作」這條快線，業主走「首頁 → 作品列表 → 同類型案例 → 服務方式 → 聯絡」這條深線，兩條線共用同一份內容，卻能各自走完。

核心頁面清單與各自任務

• 首頁：一句話講清楚你是誰、做什麼、為誰做。上方放三到四件最能代表你的作品縮圖，點進去能直達案例頁。首頁不是自傳，是一張名片加上一個櫥窗。
• 關於我（About）：你的經歷、技術棧、目前狀態（開放面試／開放接案／兩者皆是）。誠實寫出你擅長什麼、不擅長什麼，反而會讓人覺得可靠。
• 作品列表頁：所有作品的索引，最好能依「類型」或「年份」篩選。這一頁服務的是「快速掃描」的訪客。
• 單一案例頁（最重要）：一件作品獨立一頁，寫清楚背景、你的角色、做法、成果、回饋。這是整個網站的靈魂，下面會專門展開。
• 服務或合作方式：給業主看的。寫清楚你提供哪些服務、大致流程、怎麼開始合作。不需要寫死報價，但可以給一個區間。
• 聯絡頁：一個簡單的表單，加上你的 email 與社群連結。讓有意願的人能用最低摩擦力找到你。

這個結構跟我們在 品牌官網架設全攻略 裡談的原則是相通的：先有任務分工，才有版面設計。差別在於，品牌官網服務的是「公司對客戶」的信任建立，而作品集網站服務的是「個人對機會」的媒合，所以它更輕、更聚焦在「你這個人」身上。

兩條閱讀路徑：把同一份內容排給兩種人看

「同時服務兩種受眾」聽起來抽象，把它落成兩條具體的點擊路徑就清楚了。一個面試官通常只有幾分鐘，他走的是快速判斷路徑；一個正在評估要不要委託的業主，他走的是深度驗證路徑；偶爾還會有同行或媒體循著你的觀點找過來。你要確保的是，這幾條路徑上每一頁，都放了他正在找的那一塊資訊，別讓他用猜的。

訪客與路徑	典型點擊順序	每一頁要交付的東西
面試官的快線	首頁 → 關於我 → 代表作案例頁	一句話定位、技術棧、你在代表作裡的具體角色與成果
業主的深線	首頁 → 作品列表 → 同類型案例 → 服務方式 → 聯絡	同類案子的前後對比、業主回饋、報價區間、合作流程
同行的探索線	關於我 → 觀點文章或演講 → 聯絡	你的思考框架、可被引用的觀點、能聯繫到你的入口

把這張表對照你自己的網站走一次，你會發現很多作品集的問題往往出在資訊的位置不對，內容本身通常不缺。例如把業主最在意的「前後對比」藏在第三層選單，或把面試官最需要的一句話摘要省略，直接放整段背景說明。調整資訊出現的順序，往往比增產新內容更有效，於是，建議先把閱讀路徑想清楚，再回頭決定每一頁要寫什麼。

三種蓋法，三種代價：動手前的決策框架

結構想清楚了，接著是工具選擇。市面上能拿來蓋作品集的方法大概可分成三大類，每一類背後對應的是不同的時間成本、月費成本與自由度。那種「一律推薦某一個工具」的懶人答案在這裡並不成立，因為你的階段不同，最適合的選擇就不同。

蓋法	適合的人	每月成本（概估）	自由度	主要代價
託管型網站建立器（Wix、Squarespace、Webflow 等）	學生、想最快上線、不想碰任何技術的人	中（月費制，含主機與網域）	低到中	搬家困難、長期月費會累積、客製化受限
WordPress 自架站（佈景主題＋頁面編輯器）	想長期經營個人品牌、在意 SEO、未來想擴充功能的人	低到中（主機＋網域年費為主）	高	有學習曲線、要自己處理備份與更新
手刻程式碼（HTML／CSS／JS 或框架）	前端工程師、設計師想完全掌控視覺、要把作品集當成技術展示	低（主機＋網域）	最高	時間成本最高、內容更新要改程式

如果你完全不想碰技術，第一類的託管型建立器是最快的進場路徑，你可以先把這篇 作品集網站平台推薦 當成選項清單來比價。但實務上偏好第二類的 WordPress 自架站，理由很實際：根據 W3Techs 的長期統計，WordPress 是目前全球市佔最高的內容管理系統，市佔意味著生態系，意味著遇到問題找得到答案、想加功能找得到外掛、未來要換人接手也找得到會用的人。

如果預期長期增加案例、內容與功能，WordPress 值得納入評估；若更重視免維護與快速上線，託管平台也可能更合適。使用年限本身不能直接決定工具。可先看網站建置成本指南與網站架設方式比較。

從零到上線：一份你可以照著跑的實戰流程

這一節把蓋站的流程拆成可執行的步驟。以下以 WordPress 自架站為例，因為它的步驟最完整、也最能讓你看清楚每一個環節在做什麼。如果你用託管型建立器，中間幾個步驟會被平台自動包辦，但理解全貌還是有助於你判斷平台到底幫你做了什麼。

七個步驟，從空無一物到網站上線

1. 決定網域：網域就是你的門牌。對個人作品集來說，最推薦的格式是 你的名字.com 或 你的名字.tw，因為它一輩子不會換工作就失效。詳細的挑選與註冊流程見 網域名稱註冊指南。
2. 選主機：依預估流量、圖片容量、PHP／資料庫版本、SSL、備份、客服與效能挑選入門方案，不要只選最便宜。差異可看主機類型比較。
3. 安裝 WordPress：多數主機後台都有一鍵安裝。裝完後你會拿到一個後台網址、帳號與密碼，那是你之後管理所有內容的入口。
4. 挑佈景主題：主題決定網站的外觀骨架。作品集建議挑一個乾淨、留白多、載入快的主題，避開那種把動畫塞滿的款式。如果你完全沒有方向，作品集範本大全 可以先給你一些視覺參考。
5. 用頁面編輯器排版：主題給你骨架，頁面編輯器讓你用拖拉的方式把內容填進去。Elementor、Divi、Bricks 都是常見選擇，而它們各自都有作品集專屬的模組，例如 Elementor 作品集教學、Divi 作品集設計、或 Astra 作品集模組教學。
6. 裝 SSL 憑證：SSL 讓你的網址從 http 變成 https，瀏覽器不再顯示「不安全」。現在很多主機免費附贈，但它的重要性不能跳過，原因與設定方式見 SSL 憑證指南。
7. 上線前總體檢：在正式對外宣告之前，至少做三件事：用手機打開網站看一次、點過每一個連結確認沒有 404、把幾篇案例的圖片壓縮過避免載入太慢。

實際時程取決於素材、網域、主機與學習成本，不必把一個週末當成標準。最常拖延進度的通常是案例內容與圖片尚未整理。

挑佈景主題的五項快速檢查

一個免費主題到底能不能用在作品集上，判斷時不會只看它 Demo 漂不漂亮，而是用五個問題快速檢視。這五項只要有兩項不及格，就應該換掉，因為主題是地基，地基歪了上面再漂亮都會倒。很多人栽在這一步，挑了一個視覺很炫的主題，半年後被載入速度與更新地獄拖垮。

• 載入速度：用行動裝置與 PageSpeed Insights 檢查 Demo，但要記得展示站的主機、內容與外掛不同。把結果當候選比較依據，不用單一三秒門檻直接淘汰。
• 手機版呈現：它在窄螢幕下的選單、字體大小、圖片都還合理嗎？很多主題桌面漂亮、手機崩潰，而你的訪客多半是用手機看。
• 作品集版型的彈性：它有沒有內建作品集、案例、Portfolio 這類內容類型，還是只能用一般頁面硬排？前者會讓你日後新增、分類作品輕鬆很多。
• 維護狀態：查看最近更新、支援紀錄、相容的 WordPress／PHP 版本與安全公告。沒有適用所有主題的一年淘汰線。
• 評價與安裝數：它在官方目錄或市集的評分與活躍安裝數夠不夠？這是社群幫你先行測試過的間接證據，比你自己試誤可靠。

通過這五項的主題其實不少，你不需要花大錢買最貴的那套，找一個你看得順眼、又過得了這五關的就好。主題是長期共事的夥伴，寧可多花一個晚上挑，也不要上線半年後才痛苦地搬家。如果你完全不知道從哪幾套開始看，作品集網站設計指南 與前面提過的範本大全，都可以當成你的第一批候選清單。

上線前檢查清單

在把網站正式對外宣告之前，建議照著接下來這張表走一遍。它不長，但每一項都曾經真的讓某個作品集在關鍵時刻掉鏈子。把它存下來，每次大改版之後也跟著跑一次，比憑感覺判斷可靠得多。

檢查項目	要回答的問題	通過標準
手機實機瀏覽	用自己的手機開過每一頁嗎？	沒有破圖、文字沒被裁切、按鈕點得到
連結健檢	每一個連結都能正確開啟嗎？	沒有 404，也沒有連到草稿頁
聯絡表單測試	填一封測試信，自己收得到嗎？	信件正常進到收件匣，沒有被歸進垃圾信
首頁三十秒測試	一個陌生人三十秒內說得出你做什麼嗎？	找一個不認識你作品的人實測
圖片載入	案例頁的圖都在兩秒內載入嗎？	用手機網路實測，不是家用 Wi-Fi

這張表的重點在於「用手機網路實測」這幾個字。很多人只在家用 Wi-Fi 下檢查，結果面試官在捷運上打開就卡住。請你刻意用最差的網路環境，預演那個你最在乎的讀者，這樣測出來的結果才會接近真實世界。

把作品變成證據：單一案例頁的內容架構

這是整篇教學最值得帶走的一段。多數作品集的致命傷，不是長得不好看，而是作品頁只剩下一張圖、一行標題、一行「這是我做的」。對一個不認識你的訪客來說，那樣的頁面什麼都沒證明。

以室內設計工作室的假設情境為例：若原本把所有案件塞進一份 PDF，可改成每件案件獨立一頁，交代背景、角色、前後差異與已取得同意的回饋。這個改動的本質，是把「展示作品」升級成「提供判斷依據」。

換句話說，一個好的案例頁，要讓訪客不需要你再開口，就能回答他心裡那一句「這個人做過的事，跟我現在的需要，有沒有關係」。為了讓這件事可執行，以下把案例頁拆成一個你可以重複套用的內容模板：

單一案例頁的六個內容區塊

1. 專案標題與一句話摘要：標題寫「做了什麼」，摘要寫「為誰做、解決了什麼」。例如「為一間咖啡烘焙工作室重新設計包裝，讓通路鋪貨率提升」。摘要一句就夠，不要寫成長篇。
2. 背景與挑戰：這個專案是在什麼情境下發生的？你被找去解決什麼問題？誠實寫出限制條件，反而會讓你的角色更立體。
3. 你的角色與做法：你是主導、協作、還是支援？你做了哪些關鍵決定？這一段最能區分「參與者」與「負責人」，也是面試官最在看的。
4. 前後對比或過程：用圖片、數據、流程圖，把「之前」與「之後」擺在一起。視覺對比是案例頁最具說服力的單一元素。
5. 成果與影響：可以的話給數字，沒有數字就給具體描述。絕對不要灌水或把團隊成果講成個人功勞，被追問時會非常難看。
6. 業主或合作夥伴的回饋：一段真實的引言，勝過你自己寫十句好話。徵得同意後放上對方姓名與職稱，會讓信任度大幅上升。

這六個區塊本質上是一份檢查清單，沒有要你逐字照搬。你不需要每件作品都六項全填，但每填一項，案例頁的說服力就多一層。重點是有意識地把每一件作品，當成一份要替自己作證的文件來寫，別只是把資料夾裡的圖檔上傳了事。

視覺與品牌：不成為設計師，也能做出一致感

作品集網站的視覺，目標在於一致，驚豔只是錦上添花。這套一致性，本質上就是把品牌識別系統的邏輯套到個人網站：色調、字體與間距遵守同一套規則，讓讀者把注意力放在作品。

要做到一致，你只需要在三件事上做決定，之後全面套用就好。第一是主色與輔色：挑一個主色、一個輔色、一個底色（通常是白或淺灰），全部頁面只用這三個。色彩怎麼挑、怎麼配，可以參考 品牌色彩挑選指南 與 網站配色指南。第二是字體：中文挑一個、英文挑一個，不要超過兩個字體家族。中文可讀性優先，推薦從 這份字體清單 裡選一套安全的黑體；英文則從 英文字體推薦 挑一套搭配。第三是標誌：如果你還沒有 Logo，用名字的字母組合一個極簡符號就夠了，真的沒有必要花大錢。預算有限時，免費 Logo 製作工具 或 AI Logo 產生器 都能快速產出一個堪用版本。

把這三件事定下來之後，其餘的留白、排版、圖片風格，自然會被這三個邊界框住。一致性，換句話說，就是「在還沒學會高級技巧之前，先學會克制」。

圖片與素材：作品集的隱形基本功

這一節談的東西很少被寫進作品集教學，但它直接決定你的網站載入快不快、看起來專不專業。作品集是一個圖特別多的網站類型，它的視覺品質與速度，九成取決於你怎麼處理圖片，跟用哪個主題或頁面編輯器關係不大。以下把最容易翻車的三個地方整理出來，這三個習慣一旦養成，你會贏過大半同儕的作品集。

三個會直接影響成敗的圖片習慣

• 建立單一圖片最佳化流程：依顯示尺寸輸出、選擇合適格式與壓縮品質，再視需要用外掛自動轉檔。避免對已壓縮圖片反覆做有損壓縮。細節見WordPress 圖片優化。
• 檔名與替代文字要符合用途：資訊型圖片用簡潔 alt 描述內容與功能；純裝飾圖片使用空 alt，避免螢幕閱讀器讀出無意義文字。檔名可描述作品，但不要堆疊關鍵字。
• 作品的尺寸要統一：同一個作品列表頁裡，如果縮圖有大有小、比例不一，整頁會看起來很零碎、很像草稿。事先定好一組統一的圖片比例（例如全部 4:3 或 16:9），所有縮圖都套用同一組規格，視覺上的整齊感會立刻提升一個檔次。

如果需要合法可商用的情境照、Mockup 或紋理背景，可以從免費圖庫網站挑選；商業作品集仍要確認授權、署名與修改條件，不要預設網路圖片都能用。介面上的小圖示也有類似的授權考量，可以從免費 icon 下載網站找合法可商用的素材。

手機版決定你會不會被約談：行動裝置與頁面體驗

全球網頁流量中，行動裝置占比長期很高（Statista 的行動流量追蹤，2026 年 4 月資料）。面試官或業主可能用手機與較慢網路開啟作品集，破圖、等待與難點擊的按鈕都會增加離開機會；實際裝置比例仍要看自家數據。

響應式設計（RWD）讓版面依螢幕寬度調整，但不是做一次就能保證所有裝置成立。觀念與實作可看響應式網頁設計指南；完成後仍要測試多種尺寸、觸控、縮放與內容長度。接案網站若要調整手機版流程，可參考服務型作品集的手機版動線設計。

頁面體驗包含載入、互動與視覺穩定等面向。Google 會使用相關訊號，但只是眾多排名訊號的一部分，不保證改善分數就得到更多曝光，可見 Google 官方對頁面體驗的說明。圖片最佳化、控制外掛與動畫，最直接改善的是訪客體驗。

讓作品集被找到：給個人網站的 SEO 基礎

很多人以為 SEO 是公司網站才需要的事，個人作品集「反正也沒什麼流量，做不做沒差」。這是低估了它。即使你一個月只有一百個訪客，只要其中三個是「搜尋你的名字」而來的面試官或業主，這一百個訪客的價值就遠勝過你粉專上一萬個不認識你的粉絲。作品集網站的 SEO，目標不是衝大量，而是讓對的人在關鍵時刻找得到你。

個人作品集的 SEO 可以分三層。第一層是品牌與姓名查詢：在標題、關於頁與公開社群一致使用姓名或品牌，讓搜尋引擎更容易理解，但不能保證一定排第一。第二層是專長相關查詢：研究地點、技能與服務詞的實際需求，再自然寫進相關頁面。長尾詞不代表競爭一定低，也不保證帶來穩定流量。

第三層是技術基礎：確認重要頁面可抓取、可索引，並讓 sitemap 涵蓋需要收錄的網址。Sitemap 只協助發現，不保證索引；結構化資料也只應使用與可見內容一致、目前受支援的類型，不保證複合式搜尋結果或排名。詳細操作見WordPress SEO 完整教學與Google Search Console 設定。

上線只是起點：維運、更新與內容迭代

網站上線後仍要維運，但作品集多久沒更新才顯得不活躍，沒有固定半年門檻。更重要的是聯絡資訊、代表作、履歷與技術狀態是否仍準確。

第一是定期備份，而且備份檔不要只放在同一台主機，做法見WordPress 備份與還原。第二是更新核心、主題與外掛：更新前先備份並檢查相容性，重要安全修補要及時處理，不能用固定每月十分鐘保證安全。第三是維護聯絡管道，定期寄測試信並確認通知沒有被垃圾信過濾，設定可見WordPress 聯絡表單。

維運的目標是讓網站持續可用、可信。檢查頻率依更新量、安全風險與聯絡需求安排，不必硬套每月小修或每季大檢。

內容層面則是每做完一件新作品、或每過一個階段（換工作、拓展服務、學了新技術），就回頭更新一次案例頁與關於頁。把作品集當成一份會長大的履歷，別當成一次性的成品。久而久之，它會成為你最穩定、也最難被取代的個人資產。

五個最常見的作品集錯誤

這一段整理出作品集最常見、也最傷的五個錯誤。它們都不需要技術能力就能修，需要的只是意識到問題存在。你可以把它當成另一份檢查表，定期拿來對照自己的網站。

• 把所有作品都放上去：作品集的價值在精不在多。放二十件平庸的作品，會稀釋你那三件代表作的力道，讓讀者抓不到重點。寧可只展示三到五件最強的，把其餘收進資料夾備用。
• 沒有一句話定位：首頁找不到一句「我是誰、做什麼、為誰做」。讀者離開的時候，連你是做哪一塊的都沒記住，等於這次造訪白費。
• 案例頁只有圖沒有脈絡：一張漂亮的圖說服不了任何不認識你的人。少了背景、角色、成果這些脈絡，那只是一張截圖，稱不上是證據。
• 聯絡資訊找不到：有意願的訪客找不到怎麼聯絡你，等於把上門的機會往外推。聯絡入口要在每一頁都容易看到，別只藏在一個選單深處。
• 資訊過期：舊年份本身不是問題；聯絡方式、目前角色、履歷或服務內容失準才會直接降低可信度。

這五個錯誤的共同點是：它們跟天分無關，只跟紀律有關。把這幾項顧好，你的作品集就已經站在一個很穩的位置上。如果你想把檢查範圍拉更大，更全面的設計地雷可以再對照 網頁設計常見錯誤 一起檢視，兩份清單交叉著看，會抓出更多盲點。

給你的六步行動方案

讀完不等於做完。整篇可以濃縮成六個你今天就能開始的步驟，照著跑一遍，你會發現作品集這件事沒有想像中那麼大。

1. 寫下你的主受眾：在紙上寫一句話，回答「這個網站最要說服的是面試官、業主，還是同行」。這句話會決定你後面所有的取捨。
2. 盤點現有作品：列出近期且與目標相關的作品，標註角色、成果與可公開程度，再挑足以證明能力的代表作。
3. 挑一個蓋法：對照前面的決策表，選一個跟你階段相符的路徑。不要為了面子選最難的，也不要為了省事選未來會卡死的。
4. 用六個區塊重寫第一件代表作：拿本文的案例頁模板，把你最強的一件作品重新寫一遍。寫完你會立刻感覺到它跟「只放一張圖」的差別。
5. 把網站跑上線：照七步流程把基本版架起來，先求有、再求好。醜但能開，永遠勝過完美但永遠在硬碟裡。
6. 用多種裝置測試，再請目標讀者試用：請對方說出「這個人做什麼、證據在哪、怎麼聯絡」，依卡點修改首頁與案例摘要。

作品集網站是一個會陪你很多年的東西。你每更新一次作品、每釐清一次自己的定位，它就長大一點。把它當成你職涯的複利帳戶，慢慢存，時間會替你證明它的價值。現在，就從那一句「這個網站最要說服的是誰」開始吧。