作品集網站製作實戰教學：從零開始打造面試接案都好用的個人品牌網站
作品集網站製作是一套從定位、版型、配色到作品展示與聯絡表單的完整系統，把作品圖丟上網頁只是其中最表層的一環。用 WordPress + Astra + Elementor 這套組合…
作品集網站製作是一套從定位、版型、配色到作品展示與聯絡表單的完整系統，把作品圖丟上網頁只是其中最表層的一環。用 WordPress + Astra + Elementor 這套組合，一個人就能在一個週末做出面試與接案都派得上用場的個人品牌網站。重點在於先想清楚給誰看、想被記住什麼，再決定版型與展示方式。WordPress 目前驅動全球超過四成的網站 [來源：W3Techs〈Usage statistics and market share of WordPress for websites〉https://w3techs.com/technologies/details/cm-wordpress 〈2026〉]，生態成熟、外掛齊全，是最適合個人長期經營的選擇。
重點先看：作品集網站最常見的失敗是順序錯了，先挑版型才想作品怎麼分類，結果做出美美的空殼；先把每件作品的背景、做法與成果寫下來，再依產業或技能分類，最後挑能配合這套分類的版型，勝率才會高。一個夠用的作品集至少要六個頁面，其中單一作品詳情頁最常被略過，卻是拉開專業度差距的關鍵。
作品集網站是什麼？為什麼求職接案都該有一個
作品集網站是你專屬、可被搜尋到的個人作品展示入口，能在一個網址裡統一呈現作品分類、創作背景與聯絡方式。它和把作品丟上雲端硬碟或 PDF 的本質差別在於：網站能被搜尋引擎收錄、版型完全可控、不受平台規則限制。面試官或業主 Google 你的名字就能看到完整作品，這對設計系學生、求職新鮮人、攝影師、插畫家、前端工程師這類需要對外展示作品的人來說，是低成本的個人曝光管道。
很多人會問，不是已經有 Behance、Notion、Google Drive 可以放作品了嗎，為什麼還要花時間做網站？差別很實際。把 PDF 丟給對方，要嘛檔案太大傳不過去，要嘛對方電腦字型跑掉排版整個歪掉；用平台放作品，網址長得像 behance.net/你的帳號，別人記不住，平台改規則、改介面你也無能為力。自有網域加自有版型的網站，是你完全掌控的數位資產。
四個要素缺一不可，這是我判斷一個作品集「算不算數」的標準：
- 自有網域：用自己的名字或品牌命名，一眼可辨識，也方便記憶與轉發。
- 統一視覺：配色、字體、間距全站一致，看起來是同一個人做的，不是拼裝車。
- 作品分類：依產業或技能分組，瀏覽者能快速找到想看的類型。
- 聯絡入口：表單加社群連結，手機上也能一鍵寄信或加 LINE。
求職的優勢很直接。面試時直接給網址，省去傳檔、避免格式跑掉，履歷被搜尋時也能露出。接案的優勢更明顯，業主 Google 你名字就能看到完整作品，降低溝通成本、提升成交機會。比起丟 PDF 或 作品集網站平台 上的個人頁，自有網站的信任感高一個檔次。
這裡要講句實話。不少人以為網站架起來就贏了，隨便丟三兩件作品上去也沒分類，結果比傳一份 PDF 還糟。真正的問題出在那種「先有再說」的心態，它會一路滲進後面每個決定，分類亂、敘事跳、配色湊不出一致性，最後成品跟草稿沒兩樣，真正的主因是順序錯亂而非技術不足。所以動工前先想清楚順序，比學會任何工具都重要。
想先看看別人怎麼做的，可以參考 作品集網頁範本，或研究各種 用 Bridge 主題打造專業履歷作品集網站 的做法，建立對「好作品集長怎樣」的直覺。
做之前先決定這三件事：給誰看、想被記住什麼、用什麼工具
動手拉版型之前，先回答三個問題，這三個答案會直接決定後面所有選擇。第一，這個網站主要給誰看？第二，你想讓對方記住你的哪個特質？第三，用自架 WordPress 還是平台型工具？很多人架站失敗，問題多半出在開工前沒把這三件事想清楚，做到一半不斷重做，與工具熟不熟其實關係不大。
這三個問題可以用一張三欄檢查表先填下來再開工，填不出來就代表還沒想透。給誰看那一欄請寫具體的人，例如「想找兩年以上資歷前端工程師的中型新創技術長」，把「公司」或「業主」這種模糊稱呼排除掉；想被記住什麼那一欄請寫一句你能用自己的話講出來的定位，不要抄產業慣用語；工具那一欄寫下你願意投入的上限時間，這會直接決定走自架還是平台。三欄都填完，後面所有選擇都有依據可對照，做到一半想改方向也只需要回頭改這張表。
| 欄位 | 填寫方式 | 常見錯誤 |
|---|---|---|
| 給誰看 | 寫出對方的職稱與他正在解決的問題 | 只寫「業主」「面試官」等模糊稱呼 |
| 想被記住什麼 | 一句你能脫稿講出的定位 | 抄襲業界流行語，自己講不出來 |
| 工具與時間 | 寫出可投入的總時數上限 | 低估學習曲線，沒預留除錯時間 |
給誰看決定語氣與結構。給面試官看，結構偏履歷感，要放經歷、技能矩陣、可下載履歷；給業主看，結構偏成果導向，首頁直接秀代表作與服務項目；給同行看，可以偏自由展示，多一些創作過程與實驗。對象不同，整個網站的骨架就不同。
想被記住什麼，請先寫一句話定位自己。例如「專做電商視覺的平面設計師」、「做金融產品體驗的前端工程師」、「拍紀實婚禮的攝影師」。這句話不是寫好看的，它是你首頁主視覺、作品分類、配色語氣的源頭。定位清楚，後面的選擇會自然收斂；定位模糊，你會在幾十個版型之間舉棋不定。
工具決策可以簡化成一條判斷：要長期經營、想被搜尋到、預算有限，選 WordPress 自架；只想快速上線、不想碰技術，選平台。下面的比較表把兩條路的主要差異列出來。
| 面向 | WordPress 自架 | 平台型工具（Wix / Webflow 等） |
|---|---|---|
| 初期投入 | 一次性設定主機與網域 | 註冊帳號即可開工 |
| 月費 / 年費 | 主機加網域，年費制 | 月費或年費制，方案綁功能與儲存空間 |
| 版型控制 | 完全可控，可自訂 CSS | 受限於平台編輯器 |
| 網址 | 自有網域 | 免費方案多為子網域，要付費才能用自有網域 |
| SEO 收錄 | 可完整設定，生態成熟 | 可設定但受平台限制 |
| 匯出搬移 | 資料完全自有 | 匯出困難，搬移成本高 |
| 學習曲線 | 要花時間學主機與後台 | 所見即所得，上手快 |
時間預估要誠實說。用 WordPress 加現成版型，從主機申請到第一版上線，大約一個週末到一週；如果想從零刻版型，以月計算。所以對第一次做的人，我的建議永遠是先用現成版型把東西做出來，別一開始就想自己刻。
有一種情況建議直接跳過自架，就是這個作品集只用一次，例如交完一門課的期末作品就再也不會更新。這種情境下，自架投入的主機費、網域費與學習時間很難回收，用免費平台開一個頁面、用完即棄反而務實。判斷標準很簡單：問自己一年後還會不會回來更新這個網站，答案是不會，就不要為了「擁有自己的網站」這個念頭而自架。
若你傾向自架，可以先讀 WordPress 架站完整攻略 與 如何架設網站完整自學指南 建立整體概念；想快速跑通流程，30 分鐘快速架好 WordPress 網站 與 WordPress 架站新手五步驟教學 是很好的入口。若是想評估不同做法的取捨，架站方式全比較分析、網頁製作平台終極評比 與 AI 網站建立工具實測比較 提供完整的橫向對照。
作品集網站必備的六個頁面與內容規劃
一個夠用的作品集網站至少要有六個頁面：首頁、關於我、作品列表、單一作品詳情、服務或經歷、聯絡頁。其中單一作品詳情頁最常被忽略，但它才是讓對方真正理解你能力的關鍵，每件代表作都該單獨成一頁，寫清楚背景、做法與成果。
這六個頁面不是隨便湊的，每一個都對應一個使用者需求。對方進站第一眼想看到什麼、想確認你是誰、想快速找到想看的作品、想深入了解某件作品、想知道你提供什麼服務或經歷、想聯絡你。少一個頁面，對方就會卡在某個環節然後跳出。
- 首頁：一句話定位加上主視覺，再放精選三到六件代表作。不要把所有作品全塞上來，首頁塞滿只會讓人眼花，連一件都記不住。
- 關於我：照片、一句話介紹、技能清單、可下載履歷連結。這頁的功能是建立信任感，讓對方覺得你是一個真實、可聯絡的人。
- 作品列表：用分類讓瀏覽者快速找到想看的類型，分類邏輯下一節會詳細講。
- 單一作品詳情頁：問題、你的角色、設計過程、成果與資料。這頁最能拉開專業度差距，多數人偷懶不做，做了就贏一半。
- 服務或經歷頁：接案者放服務項目與報價區間，求職者放經歷與技能矩陣。
- 聯絡頁：聯絡表單加社群連結，手機上也能一鍵寄信或加 LINE。
說到底，作品詳情頁決定了對方記不記得你。我每次看學生交來的作品集，最常見的狀況是列表點進去，只有一張大圖加一行「這是我做的某某專案」。面試官或業主想在這頁看到的是你怎麼界定問題、試過哪些方向、最後成果怎麼衡量，圖只是佐證。同樣一件作品，寫清楚背景與成果的那頁，會讓人在事後還想得起來你做過什麼。
把六個頁面放進一個優先順序評分卡來看，價值高低會更清楚。首頁與單一作品詳情頁是「決定留下還是跳出」的關頁，少了或做得爛，後面所有頁面都不會被看到，因此這兩頁要投入最多心力；關於我與聯絡頁是「建立信任與促成聯絡」的轉換頁，做及格就好，做太好也不會反敗為勝；作品列表與服務經歷頁是「導航與佐證」頁，重點在分類清楚、資訊完整，不必過度雕琢視覺。把心力按這個優先順序分配，才不會把一整個週末耗在裝飾聯絡頁。
| 頁面 | 角色 | 投入心力 | 不及格的後果 |
|---|---|---|---|
| 首頁 | 第一印象、決定去留 | 高 | 訪客三秒內跳出 |
| 單一作品詳情頁 | 展現思考深度 | 高 | 被記成「會做圖但不會想」 |
| 關於我 | 建立信任 | 中 | 對方覺得你不真實 |
| 聯絡頁 | 促成聯絡 | 中 | 想聯絡卻找不到入口 |
| 作品列表 | 分類導航 | 中低 | 找不到想看的類型 |
| 服務或經歷頁 | 報價與經歷佐證 | 中低 | 無法快速判斷合作可能 |
頁面規劃離不開整體版面與排版邏輯，網頁版面設計與響應式排版 與 網頁設計必備關鍵元素 值得先讀一遍。若想把作品集放到更大的個人形象脈絡裡，品牌官網架設完整實戰指南、用 Astra 打造專業形象網站 與 品牌官網設計全攻略 提供更完整的框架。
作品集要怎麼分類？先寫故事框架再挑版型
分類不要照上傳時間排，而是依誰會看、看什麼來分。建議先為每件作品寫下三件事，這是什麼專案、你解決了什麼問題、成果是什麼，再依產業或技能兩種邏輯分類，最後才挑能配合這套分類的版型。順序反過來做，很容易做出沒重點的展示牆。
這一步是多數人最容易跳過、卻最決定成敗的環節。直接套版型、放圖片，當下很有成就感，但對方記得住的從來是作品的分類邏輯和每件作品背後的問題與成果，特效只能加分、不能取代。先把這些寫清楚，版型才有依據可挑，否則再漂亮的模板也只是把混亂包裝得更整齊。
選主分類邏輯可以靠一個二維判斷：你的作品跨度（單一產業或跨產業）對應你想被定位成什麼（通才或專家）。跨度窄、想被看成專家，主分類用技能，把同類作品集中放大深度；跨度窄、想被看成某產業的熟手，主分類用產業，累積該領域案例量；跨度廣、想被看成通才，主分類用產業，輔助用技能，讓對方依需求切換視角；跨度廣、又想強調成長，主分類用產業或技能，年份一律放輔助篩選。這四種組合涵蓋了絕大多數作品集的定位需求，選定一組就能往下走，不必在分類邏輯上反覆改。
| 作品跨度 | 想被定位成 | 主分類 | 輔助篩選 |
|---|---|---|---|
| 單一產業 | 專家 | 技能 | 年份 |
| 單一產業 | 該產業熟手 | 產業 | 技能 |
| 跨產業 | 通才 | 產業 | 技能 |
| 跨產業 | 強調成長 | 產業或技能 | 年份 |
常見的分類邏輯有三種，挑一個為主、另一個為輔即可，不要三種混用。
- 依產業：餐飲、金融、電商、教育等。適合服務過多種產業、想展現跨領域適應力的人。
- 依技能：平面、網頁、動態、品牌等。適合技能多元、想被歸類為某類專家的人。
- 依年份：2024、2025 等。適合作品量大、想展現成長軌跡的人，通常作為輔助篩選。
每件作品的敘事框架要固定下來，養成習慣，否則每件寫法不一樣會看起來很零散。我的建議格式是：
- 背景：這是什麼專案、為誰做、時間點。
- 我的角色：你負責哪些環節，是主導還是協作。
- 做法：你怎麼思考、用了什麼方法、遇到什麼困難怎麼解。
- 成果：最後產出什麼，有數字更好，例如轉換率提升、上線時程、使用者回饋。
首頁只放三到六件代表作，其他進分類頁。很多新手怕別人覺得自己作品少，於是把所有東西都放上去，結果視覺疲勞，多數人滑兩頁就跳出。幫對方先篩過，是因為人的注意力本來就有限，與其讓他在二十件作品裡找亮點，不如直接把最強的擺在最前面。
版型要跟著分類走。分類多、作品量大，用網格瀑布流呈現分類索引最清楚；作品少、每件都很重磅，就做大圖輪播或單欄敘事，把空間留給內容。不要硬套一個看起來酷但跟你的分類邏輯對不上的版型。
不分類全倒上來，等於讓瀏覽者自己在一堆圖裡翻找，多數人會直接跳出。想看分類與版型怎麼搭配，可以參考 Divi 作品集設計與展示樣式 與 Elementor Pro 作品集展示頁面教學。
單一作品詳情頁怎麼寫才專業：敘事骨架與成果呈現
單一作品詳情頁是整個作品集裡資訊密度最高、也最考驗敘事能力的一頁。把這頁做紮實，等於給對方一份能直接拿去內部討論的判斷依據。它要回答的核心問題只有一個：你憑什麼被認定為這件作品的關鍵貢獻者。圍繞這個問題，一頁完整的詳情頁通常包含七個區塊，按下面順序由淺入深排下來。
- 一句話概述：用一到兩句話講清楚這是什麼、為誰做、解決了什麼。對方多半只看這句話決定要不要往下讀。
- 背景與挑戰：專案是怎麼開始的，當時面對的限制是什麼，預設目標是什麼。把限制講清楚，後面的做法才顯得有道理。
- 你的角色：你負責哪些環節，是主導還是協作，與誰配合。模糊地說「參與」會讓對方無法判斷你的實際貢獻。
- 思考與做法：你怎麼界定問題、試過哪些方向、為什麼選擇最後這個方案。這段最能展現思考深度，也是多數人偷懶略過的地方。
- 過程與迭代：草稿、中間版本、被否決的方向。呈現過程比只放完稿更能讓人理解你的判斷力。
- 成果：最後產出什麼，能用數字衡量就用數字，例如轉換率提升、上線時程縮短、使用者回饋。沒有可量化成果時，用具體的質化描述替代。
- 反思與學習：如果重做你會怎麼調整。這段讓你看起來是會持續進步的人，而不是只交差的人。
成果區塊是最常被寫壞的地方。常見的錯誤有三種：只放完稿圖沒講結果、用模糊形容詞帶過成果（例如「大幅改善」）、把別人的功勞算到自己頭上。修正的方式很直接。沒有可量化數字，就描述具體的前後變化，例如「從原本要手動處理改成一鍵匯出，每週省下約半天工時」；有數字但不是你獨力達成，就標明你的貢獻範圍，例如「在我負責的結帳流程環節，將放棄率從兩成降到一成」。誠實標示貢獻範圍反而會增加可信度。
這七個區塊不必每件作品都寫滿。代表作寫到七個區塊齊全，次要作品壓縮成概述加背景加成果三段即可。把心力集中在三到六件代表作的詳情頁，其餘作品用較精簡的格式帶過，整體資訊密度才會剛好，不會讓對方在冗長的描述裡失去耐心。
WordPress 自架作品集網站：從主機網域到版型的完整步驟
決定用 WordPress 自架之後，實際流程大致分五步：申請網域與主機、一鍵安裝 WordPress、套用 Astra 等輕量主題、用 Elementor 視覺化編輯拉版面、安裝 WP Portfolio 等作品集外掛、最後做響應式調整與聯絡表單。全程不用寫程式，重點是把每一步的選擇理由想清楚，預設值能用的就拿來用，該調整的再調整，照單全收會做出與別人長得一樣的網站。
走完五步之後，建議對照一份上線前自檢清單逐項確認，缺一項就可能在上線後才被對方發現問題。這份清單把最容易漏掉的細節集中起來，照著走一次大約半小時，能擋掉八成以上的初次上線疏失。
- 每個頁面都有正確的標題與描述設定
- 聯絡表單實際寄出測試信並確認收得到
- 手機與平板實機走過每一頁，圖片與按鈕都正常
- SSL 憑證已啟用，網址顯示為 HTTPS
- 網站圖示（favicon）已上傳，瀏覽器分頁有圖示
- 404 頁面與選單連結都已設定，沒有死連結
- 圖片已壓縮，單張不超過合理大小
- 備份排程已啟用，至少有一個可還原的版本
這條路是 CP 值最高的組合。根據 Astra 官方說明，Astra 是目前 WordPress 生態裡最主流的輕量主題之一，載入快、免費版就夠用；Elementor 則是主流視覺化編輯器之一，拖拉就能排版，連手機版都能即時預覽。兩者搭配，一個人就能做出質感接近客製化的作品集。
- 主機與網域：挑有 WordPress 一鍵安裝的主機，省去手動設定。網域用自己名字或品牌命名，增加辨識度，也方便記憶與轉發。
- 主題：裝 Astra，輕量、載入快、免費版就能做出像樣的作品集，重視覺的需求它能撐住。
- 編輯器：裝 Elementor，可視化拖拉排版，連手機版排版都能即時預覽，改一行字不用碰程式碼。
- 作品集外掛：裝 WP Portfolio，支援多種展示類型，省去手刻版面的功夫（依 WP Portfolio 官方功能說明）。
- 響應式與表單：手機版單獨調字級間距，聯絡表單用 Elementor Pro 或 Contact Form 7 串接信箱。
主機與網域是地基，選錯後面會很痛苦。挑主機的原則是穩定、有在地客服、提供一鍵安裝。可以參考 hosting.com 主機實測評價開箱、WordPress 主機深度評測比較 與 虛擬主機類型比較與選擇指南，這幾篇把不同方案的穩定度與價格帶都拆得很清楚。
網域申請與 DNS 設定是新手最容易卡關的地方。網域申請購買全攻略 與 DNS 網域名稱指向設定教學 把從挑到設的流程講得很細；上線前別忘了 SSL 憑證安裝與 SEO 影響解析，HTTPS 是基本款，沒裝等於讓瀏覽器跳警告。
主題與編輯器部分，Astra 與 Elementor 的教學資源很多。Astra 免費主題新手架站教學、Astra WP Portfolio 作品集外掛教學 與 Astra Premium Starter Templates 模板匯入 是一條完整的縱線；Elementor 則看 Elementor 頁面編輯器完整教學、Elementor Pro 購買與功能指南 與 Ultimate Addons for Elementor 擴充模組。
聯絡表單是作品集轉換的最後一哩。表單做壞了，前面做得再漂亮也收不到信。用 Elementor Pro 表單可以參考 Elementor Pro 聯絡表單製作教學；偏好免費方案就選 Contact Form 7，Contact Form 7 聯絡表單完整教學 與 WordPress 聯絡表單外掛推薦比較 有完整比較。
視覺細節：Logo、配色與字體怎麼選才有質感
視覺質感來自一致性而非花俏。Logo 用 Canva 就能做出夠用的版本，配色先鎖定一個主色加一個輔助色，字體中文選一種明體或黑體搭配英文一種無襯線體就夠。關鍵是全站一致、克制，不要超過三種顏色與兩種字體家族。
這裡要強調一個觀念：質感不是錢堆出來的，是紀律守出來的。我看過太多作品集，Logo 做得超精緻、配色用了七八種漸層、字體塞了四種，結果整體看起來比陽春版還亂。問題不在預算，在沒有建立一套設計系統，新增頁面時每頁都各自發揮，最後全站走樣。
- Logo：用 Canva 選極簡範本改字即可，放在頁首能一眼辨識，不必花大錢找設計師。想要更進階的玩法，可以參考 AI Logo 產生器推薦 或 免費 Logo 設計工具推薦。
- 配色：先決定主色，呼應你的個人特質或專業領域，再用 Adobe Color 從色相環找輔助與對比色。配色工具可以看 網頁配色工具與神器推薦、品牌色彩挑選指南 與 網頁設計配色計畫實戰。
- 字體：中文選思源黑體或明體，英文選 Inter 或 Playfair，全站不超過兩種字體家族。深入挑字可以讀 中文字體設計與推薦、英文字體推薦與下載 與 排版設計與字體行距技巧。
留白比花俏重要。留白夠，作品圖才是主角；背景太花、裝飾太多，視線會被干擾，作品反而被埋掉。不少人花大錢買付費字體、挑高級配色，卻因為每頁都塞滿裝飾元素，結果整體還是顯得擠，這在作品集比在一般網站更吃虧。 這裡有一個常見錯誤值得點出來：很多人把首頁主色直接設成飽和度極高的亮色，理由是「要讓人印象深刻」。這個判斷在作品集場景裡會反噬，因為觀眾停留的目的不是被配色驚豔，而是快速判斷你的作品值不值得點進去看。高飽和底色會讓作品圖的對比下降、細節糊掉，於是真正該被注意的內容反而看不清。一個比較穩的做法是，把底色壓在低彩度的中性色（米白、淺灰、深墨），把飽和色留給極少數的強調用途，例如按鈕或單一重點標示。這套取捨在設計領域是共識，不需要任何額外成本就能做到，差別只在於願不願意克制。
建立設計系統的意思是，把主色、輔助色、字級、間距寫成一份規範，新增頁面時照這份規範走，網站才不會越做越散。Logo 與配色的進階主題可以看 網站 Logo 設計與配色實戰 與 Canva 新手設計技巧寶典，進階玩家再讀 Canva Pro 進階設計技巧。
要花多少錢？自架 vs 平台的費用比較
用 WordPress 自架，初期一年大約落在幾千塊台幣等級，主要花在網域、主機與少數付費外掛；若選 Wix、Webflow 這類平台，則是月費或年費制，看起來便宜但長期累積未必划算。差別在自架是一次性投入換長期掌控，平台是用方便換掉部分主導權。要算的是總持有成本，不是首年費用。
費用的真相常常被首年方案遮住。很多平台用極低的首年價吸引你進門，第二年續約價格直接翻好幾倍，這在 WordPress 自架網站費用全解析、WordPress 架站費用真實成本拆解 與 網站架設費用完整解析 裡都有拆解。簽下去之前，務必把續約價算進去，否則兩年後會被帳單嚇到。
| 費用項目 | 自架 WordPress | 平台型工具 |
|---|---|---|
| 網域 | 年費，多家廠商可選 | 常內含於方案，或需額外加購 |
| 主機 | 年費，依方案分級 | 內含於月費或年費 |
| 主題 / 外掛 | 免費版可用，付費選配 | 內含，但綁方案等級 |
| 隱藏成本 | 學習與維護時間 | 被綁約、匯出困難風險 |
| 長期彈性 | 高，資料完全自有 | 低，搬移成本高 |
省錢建議很實際：先用免費主題與外掛做出第一版，確定要長期經營再升級付費。Astra 免費版加 Elementor 免費版，做出來的作品集已經足以應付多數面試與接案場景，不需要一開始就買齊所有付費方案。 判斷要不要為某個付費外掛花錢，可以用一條簡單的決策門檻：先問這個外掛解決的問題，免費方案繞一下能不能做到。能繞過去，就先不買；繞不過去，再算它能幫你省多少時間，把那個時間換算成你的接案時薪，金額低於外掛年費就值得，高於就先擱著。以作品集這個階段來說，真正會卡住的多半是作品詳情頁的展示效果與聯絡表單的串接，這兩塊在免費方案裡都有替代做法，因此多數人第一年其實不需要任何付費外掛就能上線。
這裡的報價區間僅供參考，實際以各服務官網公告為準，方案常調整。把費用拆解到這個顆粒度，是為了讓你看到錢花在哪、有沒有更省的替代方案，避免被一個總數嚇退。
上線後：響應式檢查、SEO 與持續更新
上線只是開始，後面還有維護要做。至少要做三件事：逐頁檢查手機版排版有沒有跑掉、提交網站到 Google Search Console 讓作品可被搜尋到、排一個固定的作品更新節奏。不更新的作品集會比沒有更讓人覺得你已經停滯。
響應式檢查是上線前最後一道關卡，也是最常被草草帶過的一關。很多人只在電腦上看過自己的網站就上線，結果手機上一打開，圖片變形、按鈕擠在一起、字小到看不清。把這件事放上數據會更具體：在 2026 年第一季，行動裝置（不含平板）佔全球網站流量的比例超過一半 [來源：Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 〈2026-04-28〉]。換句話說，忽略手機版等於直接放棄掉過半的訪客，這對作品集這種靠連結被點開的場景尤其致命。請每一頁都用手機與平板實機看一次，重點看圖片比例、按鈕點擊範圍、字級與行距。響應式的觀念與實作可以讀 響應式網頁設計 RWD 教學 與 RWD 響應式網頁設計實戰。
載入速度與響應式是一體兩面。手機網路環境不穩，圖片沒壓縮、外掛裝太多，頁面開啟就會卡。Google 自 2021 年起把 Core Web Vitals 列為搜尋排序訊號之一，這意味著載入體驗不只影響訪客感受，也會影響作品能不能被排在前面 [來源：Google Search Central Blog〈Evaluating page experience〉https://developers.google.com/search/blog/2020/05/evaluating-page-experience 〈2020-05-28〉]。實務上把首頁主視覺圖壓到合理大小、停用暫時用不到的外掛、開啟快取，就能讓多數作品集站的速度回到可接受範圍。
SEO 基礎不需要很複雜，但要確實做。設好網站標題與描述、提交 Sitemap 到 Search Console、每個作品頁寫清楚標題與一段說明。這些是讓你的作品被 Google 收錄、被面試官或業主搜尋到的前提。相關教學看 WordPress SEO 必做八大設定、WordPress 提交 Google Search Console 與 WordPress 架站與 SEO 優化攻略，圖片佔比高的作品集別漏了 WordPress 圖片優化指南，圖太大會拖垮載入速度，連帶影響排名與體驗。也有人會反過來問，沒有網站的話要怎麼開始做 SEO，答案其實是先把能被搜尋到的作品集站做起來，SEO 才有施力點。
聯絡表單上線前一定要實測。自己寄一封測試信，確認收得到，避免被擋進垃圾信箱。我遇過好幾個案例，作品集做得很好，業主也來信了，結果信被主機或信箱服務擋掉，半年後才發現錯失了一堆機會。這條不花你五分鐘，但能救你一整年的接案量。
持續更新的節奏因人而異，但原則是固定。每完成一個新專案就上架，並同步更新關於我的最新經歷。設定一個提醒，例如每季檢視一次作品列表，把過時的拿下來、把新的補上去。一個作品集網站如果半年沒動，給人的印象會比沒有網站更差，對方會直覺認為你最近沒在接活。
備份與維護是底層保險。定期備份，主機與外掛更新時安排時間處理，避免某天更新後網站掛掉卻沒有還原點。WordPress 備份與還原指南 有完整的做法，這部分習慣養成後幾乎不用再操心，但沒養成就會在某次外掛衝突時一次清空你幾個月的心血。
想讓作品集與時俱進，可以追 最新網頁設計趨勢解析；想知道哪些做法該避開，讀 自架網站常見設計錯誤。素材方面，作品集少不了圖片，商用免費圖庫網站總整理 能省下不少找圖時間。想把作品集擴成長期經營的內容站，WordPress 部落格架站教學 與 網頁設計從零到一完整指南 是下一步的路線圖，網頁設計自學路線圖 則適合想系統化學習的人。
最後給一個容易上手的開工順序：先拿一張紙，把你手上每一件作品想被記住的那句話寫下來，再決定主分類邏輯，最後才打開主題挑版型。多數人架站卡關，卡的不是 WordPress 或 Elementor，而是還沒把作品背後的故事講清楚就急著拉版面。把這一步做紮實，後面的版型、配色、外掛都會跟著收斂，做出來的作品集才有機會在面試與接案時真正幫上忙。
作品集網站製作常見問題
作品集網站要放哪些內容？
至少要有六個頁面：首頁放一句話定位與三到六件精選作品，關於我放照片、介紹與技能，作品列表用分類呈現，單一作品詳情頁寫清楚背景、角色、做法與成果，服務或經歷頁放報價或經歷矩陣，聯絡頁放表單與社群連結。重點在於每件作品都有清楚的敘事，數量多寡是次要考量。
作品集網站用什麼工具做最好？
看你要不要長期經營。打算做個兩三年、希望作品被搜尋引擎收錄，WordPress 自架加 Astra 加 Elementor 是目前公認最划算的組合；只是想這週就把作品擺上去給人看、不想碰後台，Wix 或 Webflow 這類所見即所得的平台會快很多。兩者的取捨不在難度，而在你願不願意用前期設定換長期的掌控權。
WordPress 適合做作品集網站嗎？
適合。WordPress 驅動全球超過四成的網站，生態成熟，有 Astra、Elementor、WP Portfolio 等專為作品集設計的免費與付費資源，可被搜尋引擎完整收錄，資料也完全自有。對重視長期經營的個人創作者與接案者來說，是首選。
作品集要怎麼分類才專業？
挑一個主軸再加一個輔助篩選就夠了。主軸可以是產業別，例如餐飲、金融、電商，也可以是技能別，例如平面、網頁、動態；輔助篩選通常放年份。切記不要三種邏輯同時上場，那會讓分類頁變成一團混亂；分類要成立，前提是每件作品本身的背景與成果都先寫清楚了。
作品集網站要花多少錢？
自架的話，第一年大概是幾千塊台幣這個級距，錢主要花在網域年費和主機方案，付費主題與外掛屬於加值、不是必要。平台走月費或年費，報價看起來親民，但續約價常常翻倍。真正該比的是兩年、三年累積下來的總開銷，別被首年方案牽著走。
作品集網站一定要自架嗎？還是用平台就好？
不一定。若你只想要一個能放作品的頁面、不在意網址形式與長期掌控，平台就夠用；若你想長期經營個人品牌、被搜尋到、未來能自由搬移與擴充，自架的彈性與資料所有權會是更好的選擇。
作品集網站的配色怎麼選？
先定一個呼應你個人特質或專業領域的主色，再用 Adobe Color 從色相環找一個輔助色與一個對比色，全站不超過三種顏色。質感來自一致性而非顏色多，把留白當成設計元素，作品圖才是主角。
作品集網站要做成響應式嗎？
一定要。現在過半的瀏覽發生在手機上，面試官收到你的履歷連結，多半也是先用手機點開。所以每一頁都得拿實機走一遍，特別留意圖片有沒有變形、按鈕好不好按、字會不會小到看不清。忽略這一步，等於直接放棄掉一半以上的潛在觀眾。
作品集網站的聯絡表單怎麼設定？
用 Elementor Pro 表單或 Contact Form 7 串接信箱，欄位盡量精簡，姓名、聯絡方式、訊息三欄就夠。設定完成後務必自己寄一封測試信確認收得到，避免信件被擋進垃圾信箱而錯失機會。
作品集網站上線後如何被 Google 找到？
設好網站標題與描述、提交 Sitemap 到 Google Search Console、每個作品頁寫清楚標題與一段說明，並做好圖片優化避免拖慢載入。這些基礎做完，作品才有機會被收錄並出現在搜尋結果。
單一作品詳情頁要寫到多詳細？
代表作寫滿七個區塊：一句話概述、背景與挑戰、你的角色、思考與做法、過程與迭代、成果、反思與學習；次要作品壓縮成概述加背景加成果三段即可。成果區塊盡量用可量化的數字，沒有數字就用具體的前後變化描述，並誠實標示自己的貢獻範圍。原則是心力集中投在三到六件代表作上，其餘用精簡格式帶過，整體資訊密度才會剛好。