作品集網站製作的盲點：你在展示作品，對方在查核證據

一位人資在下班通勤的捷運上，用手機點開你履歷裡的作品集連結。畫面白了好幾秒才吐出內容，接著是一排年份不明的截圖，她找不到你的名字放在哪裡，也看不出下一步該點哪裡。兩站過去，手機收回口袋，這段評分就結束了。你全程不在場，也沒有機會補充說明。

另一個場景常發生在會議室：你傳過去的雲端資料夾連結被投影到布幕上，畫面跳出權限錯誤，而你直到隔天才在垃圾信匣裡看到那封存取請求。多數評分都發生在你不在場的時刻，而沒有下文的原因，多半不是美感輸人，是對「網站會怎麼被使用」的想像從一開始就偏了。點開連結的面試官與業主不是來欣賞作品的，他們各自帶著一個還沒消除的疑問在找資料：這個人能不能勝任、把事情交給他風險高不高。用展示的邏輯去做一個其實被拿來查資料的東西，做得再漂亮，也是答非所問。

誰在看、看什麼、憑什麼相信你，這三個問題會貫穿整篇。前面先給一套三分鐘的自我診斷，把卡點定位在曝光、理解或信任其中一層；接著依序拆案例頁怎麼寫成證據、視覺與圖片怎麼傳遞紀律、網站怎麼被找到；平台與版型放到接近結尾，用是非題和淘汰法選。整套流程不假設你會寫程式，給的是判斷順序與檢查表，不是某一套工具的安裝步驟；這套做法的極限在哪裡，結尾之前也會交代。

快速重點：作品集網站不是把作品變漂亮放上網的櫥窗，而是你不在場時替你被評分、替你通過查核的文件。先診斷卡點在曝光、理解還是信任，把案例頁寫成可檢驗的證據，用一致的視覺傳遞紀律，平台與版型留到結尾再選。

你以為在佈置櫥窗，對方其實在驗貨

作品不差、網站也不醜，寄出連結後卻沒有下文，最常見的原因是網站被使用的方式被想錯了。訪客點開連結的動機不是欣賞，是稽核：他心裡抱著一個疑問，這個人能不能勝任我要找的事、把事情交給他風險高不高，而網站上的每一頁、每段文字、每張圖，都在替他完成「驗證你」這件事。用佈置櫥窗的心情做一件其實被拿來稽核的東西，等於把考卷寫成了海報。

這個誤解有來源。多數教學從版型、特效、工具開始講，把作品集網站做成一門美術加分題：挑一個漂亮主題、裝一套頁面編輯器、加個進場動畫，看起來就像完成了。鮮少有教學先解釋這個網站接下來會怎麼被讀、被誰讀、讀的時候對方在想什麼，於是投入的力氣集中在「看起來怎麼樣」，鮮少落在「替對方省了多少查證的功夫」。

換個說法：作品集網站的成效，取決於它替對方節省多少驗證你的成本，而不是它展示了多少才華。做得好，等於把可信度外包給網站，讓它在你不在場時替你回答疑問；做得不好，特效再多只是把疑點放大。可以把它想成一台有三個部件的機器：被找到、被驗證、被聯繫。三個部件各有專責，後面的章節大致照這個順序展開。

公司做品牌官網，通常會先問要說服誰、說服他什麼，才輪到版面與視覺；個人作品集省不掉這一步，差別只在說服的標的從產品換成你這個人。品牌網站從定位開始建的流程同樣適用於個人：先確定說服對象與主張，再決定長相。把作品集當成縮小版的說服工程，而不是放大版的履歷附件，後面所有取捨才會有依據。

三分鐘自我診斷：曝光、理解、信任，卡點在哪一層

作品集一直沒替你帶來面試或委託，先別急著花錢改版，先花三分鐘分流。完全沒有人點開，問題在曝光層；點開了卻看不懂你在做什麼，問題在理解層；看得懂，但對方不敢把事情交給你，問題在信任層。三層的處方完全不同，誤診的後果就是預算花了、狀況沒變。

「做網站」在這套流程裡，被重新定義成「修一個可供查核的載體」，三個訊號各對應一組可以自問的問題。曝光層問：搜尋你的名字找得到網站嗎？履歷與社群上的連結是最新的嗎？理解層問：一個不認識你的人，三十秒內說得出你做什麼、證據在哪、怎麼聯絡嗎？信任層問：單一作品有交代你的角色與成果嗎？聯絡方式最近實測過嗎？三組問題答完，卡點通常已經浮出來。

這一節也是整篇的導覽樞紐。卡在曝光層的，先跳到能見度檢查那一節；卡在理解層的，問題多半出在結構與案例頁，看兩條閱讀路徑與案例頁的六個區塊；卡在信任層的，重心放在案例證據與聯絡管道。常見的誤診是把美感問題當成技術問題：覺得網站不夠好看，就換主題、加動畫、重做視覺，卻沒發現真正的斷點是案例頁什麼都沒證明。先診斷再動預算，這個順序能省下的錢通常比想像中多。

兩種訪客走兩條路：快線看定位，深線看證據

面試官和潛在業主打開的是同一個網址，看到的卻不是同一個網站，因為他們帶著不同的疑問進來。面試官的疑問是勝任度：一句話定位、做過什麼角色、代表作的成果在哪裡，幾分鐘內要有判斷。業主的疑問是風險：有沒有同類案例、前後差異多大、流程順不順、出了狀況找不找得到人，他願意看得比面試官久，但每一頁都在累積他對風險的估計。結構的任務不是平均照顧所有人，是讓兩條路各自走得完，而且每一頁都放該路徑要找的資訊。

先給一個建立體感的方法，姑且叫三十秒測試：請一位不認識你的人打開網站看三十秒，然後請他說出三件事，這個人做什麼、證據在哪、怎麼聯絡。三件事答不齊，問題通常不是內容不存在，是資訊放錯了位置。資訊放錯位置等於沒寫：業主最在意的前後對比藏在第三層選單、面試官最需要的一句話摘要被整段背景說明淹沒，都屬於這一類。調整位置比增產內容快，也便宜。

把兩種人放回真實的瀏覽行為，會看到兩條主要的閱讀路徑。趕時間的面試官走快速判斷那條：首頁的定位、關於頁的角色、一件代表作的成果，幾分鐘內要有答案；評估委託的業主走深度驗證那條：同類案例的前後對比、合作方式、來回溝通的細節，他看得慢、問得細，還會回頭再看一次。除了這兩條，偶爾有同行或媒體循著你寫過的觀點找進來，多繞幾頁再決定要不要引用你。幾條路徑用的是同一個網站，你要檢查的是每一條路徑上的每一頁，都放了正在找那條路的人要找的資訊，別讓他用猜的。

頁面分工可以用「每一頁要回答的問題」來想，比記頁面清單有用。首頁回答你是誰、做什麼；關於頁回答你的經歷與現在的狀態；作品列表回答你做過哪些類型；單一案例頁回答這件事是不是你做的、做得怎樣；服務方式回答怎麼跟你合作；聯絡頁回答現在怎麼找到你。六個問題都有去處，網站的地圖就成立，哪一題沒有專屬頁面在回答，那一塊就是斷點。做法上可以對照作品集網站的設計要點整理，把每個頁面的資訊層級排出來。

還有一個取捨要先承認：主要受眾只能選一種。正在求職或準備轉職，主受眾就是面試官；已經在接案、或打算全職接案，主受眾就是業主。選定之後，其餘受眾順便服務就好，不必三種都當主角。一碗水端平的結果，通常是快線的人找不到結論、深線的人找不到證據，兩邊都沒被服務到。

讓一件作品自己站出來作證：案例頁的六個區塊

一張漂亮的成品圖，說服不了任何不認識你的人，因為圖只能證明作品存在，證明不了你的貢獻與判斷。同樣一張介面截圖，可能是你從頭到尾設計的，也可能是團隊做完、你負責匯出圖檔的。把案例頁寫成一份有固定區塊的文件，訪客才能在你不在場的情況下自行完成驗證。這是整個網站最接近「拿到面試與委託」的一層，值得放最多的力氣。

用一個建構情境示範前後差異，情境是虛構的，不是真實案例。假設一位轉職介面設計的學員，過去的案子多數是課堂練習與小型接案，作品頁每件只有一張圖加一行標題。重寫時她不需要換作品，只需要把同一件作品補上脈絡：當時的限制、她做的決定、上線後的回饋。作品力沒變，可以被核對的內容多了好幾倍，因為讀的人第一次有東西可以對照。

所謂的查核文件，拆開來是六個內容區塊。項目之間有先後，也有彈性，依案子的性質調整：

1. 專案標題與一句話摘要：標題寫做了什麼，摘要寫為誰做、解掉什麼問題。一句就夠，讀的人靠這一句決定要不要往下看。
2. 背景與限制：專案發生的情境、時間與資源的限制、當時不能動的條件。限制寫得誠實，後面的成果才有分量。
3. 角色與做法：你是主導、協作還是支援，做了哪些關鍵決定，被否決過什麼。這一段最能分出參與者和負責人。
4. 過程與前後對比：把之前的狀態和之後的狀態並排放，用圖、數據或流程圖都行。對比是案例頁裡最省字的說服元素。
5. 成果與影響：有數字給數字，沒有數字就給具體變化，範圍寫清楚是團隊的還是個人的。灌水會在追問時拆穿。
6. 回饋與未竟之處：取得同意的業主或合作者回饋，加上你自己知道還沒解決的問題。誠實寫限制，其餘的宣稱反而更可信。

這六個區塊是一份檢查清單，不是逐字模板，案子不同，能誠實填上的項目就不同，順序也可以換。每填上一項，這一頁就多一層經得起追問的說服力；留白也是資訊，訪客會注意到你跳過了哪一塊。寫的時候把自己放在審查者的位置，把作品當成一份替自己作證的文件來寫，別只是把資料夾裡的圖檔上傳了事。

這套寫法對得上搜尋引擎自己給出的方向。Google Search Central 在建立實用、可靠、以人為本內容的官方說明裡，把清楚呈現資訊、展現第一手經驗與可驗證性列為評估內容的原則。原則是為一般內容而寫的，搬到案例頁剛好：它假設讀者會核對、會追問，所以先把可核對的東西寫出來。寫給欣賞的人看和寫給查證的人看，用字與結構完全不同，後者才是作品集真正的讀者。

再談灌水的反噬。把團隊成果寫成個人功勞、把概念發想寫成全程執行，在紙本作品集的年代或許撐得過幾次面試；放到網站上，讀的人可以慢慢比對，追問兩句就拆穿。誠實在這裡不是修辭，是最穩的策略：角色寫小一點，判斷寫清楚一點，說服力反而更強。

版面怎麼承接這些內容，可以對照現成的作品集版型案例看幾種排法，再從設計範本的挑選方法裡找一個結構接近的骨架來改，省下從零排版的時間。

一致感也是證據：不是設計師也做得到的視覺底線

不會設計、沒有美術底，照樣能讓網站看起來可信，因為可信來自一致性與克制，不是天分。訪客看到統一的色彩、字體與間距，會把版面上的紀律外推成你的工作品質：一個連縮圖比例都對齊的人，交辦的事情大概也不會亂。反過來，配色每到一頁換一套、字體三種輪流出現，訪客讀到的不只是雜亂，是不穩定。

一致性的成本結構對非設計師有利：它靠「決定一次、全面套用」，不靠「到處微調」。多數人掉進的時間坑，是在十幾個地方各調一點顏色、換一套字體，永遠不滿意也永遠收不了尾。把決定收斂到三件事上，每件事只做一次決定，之後所有頁面照辦，網站自然整齊，也省下無止盡的調整時間。

三個定案。一是色彩：一個主色、一個輔色、一個底色，全部頁面只用這三個，角色怎麼分配可以看品牌識別的基本觀念，主色怎麼挑參考選色的方法，整套配色怎麼排進版面則有網站配色的入門說明。二是字體：中英各一套，不超過兩個家族，中文從中文字型的挑選思路裡選一套可讀性高的黑體，英文配一套氣質接近的英文字型。三是標誌：用名字的字母組合一個極簡符號就夠，免費的標誌製作工具或用 AI 產生標誌的選項都能快速做出堪用版本，不必花大錢。

定案之後，克制先於花俏。動畫只在作品本身需要動態演示時出現：做動態設計的人，特效就是作品；其他多數工作者，進場動畫只是讓證據晚幾秒送達的裝飾。在學任何進階技巧之前，先把已經決定的事貫徹到底，這件事不靠天分，靠紀律，而紀律在別人眼裡看起來就是專業。

圖片的處理方式，就是訪客眼裡你的做事方式

作品集是圖片密度最高的網站類型之一，圖片的處理同時決定兩件事：載入速度，以及專業感。依顯示尺寸輸出、替代文字各司其職、縮圖比例統一，這三個習慣不難養成，卻會被訪客讀成你做事的方式。隨意的裁切、忽大忽小的縮圖、點開才發現的破圖，折損的不只是美觀，是前面辛苦累積的信任。

流程上建立一條單一的輸出規則就好：圖片依版面實際顯示的尺寸輸出，格式與壓縮在匯出時一次到位，之後不再反覆存檔。同一張圖被有損壓縮三次，畫質的傷害是疊加的，救不回來。WordPress 站上怎麼把這條規則自動化，圖片壓縮與輸出的完整做法有逐步說明。

替代文字的寫法有官方依據可循。Google 對圖片搜尋的官方建議是一致的原則：傳達資訊的圖片，替代文字要描述內容與功能；純裝飾的圖片，替代文字留空。檔名比照這個精神，用幾個字說明這是哪件作品的哪個階段就夠，堆關鍵字沒有意義。作品集裡多數圖片屬於資訊型，一張前後對比圖的替代文字，值得寫成「某專案改版前後的結帳頁對比」這種讀得出內容的句子。

縮圖比例統一是投報比最高的一個動作：同一個作品列表頁，全部用同一個比例，4:3 或 16:9 擇一，視覺立刻從草稿感升級。素材的授權意識也屬於這一層：情境照與示意圖從標明授權條款的免費圖庫取得，介面上的小圖示從可商用的圖示來源挑選，使用前確認可否商用與修改，不預設網路上的圖都能拿來用。

查核現場多半發生在手機上

回想作品集最常被打開的情境：通勤的零碎時間、會議中順手點開、訊號不穩的現場，而且多半是手機。回應式版面與載入表現決定的，是證據能不能送達；送達率是零，前面每一層都白做。全球網頁流量裡，行動裝置的佔比長期偏高，Statista 對此有長期追蹤；實際比例隨時點浮動，以查閱當下的資料與自家數據為準，但「對方用手機打開你」這個假設，放在求職與接案情境很少吃虧。

回應式設計讓版面跟著螢幕寬度調整，但它不是做一次就對所有裝置成立：換了內容長度、加了新的案例區塊、改了字體，都要回頭重測。原理與實作看回應式版面的基礎說明；服務型網站調整手機閱讀動線的實例，可以參考手機版動線的調整紀錄。

載入與互動的表現，搜尋引擎也納入考量，但Google 對頁面體驗的官方說明把它定位為眾多訊號之一，官方也明說改善分數不保證排名變動。對作品集而言，這件事本來就不必為搜尋引擎做，最直接的受益者是訪客。實測方法很樸素：用手機網路，不是家用 Wi-Fi，把快線與深線各走一遍，哪一頁卡住，那一頁就是當週要修的事。

先被找到，才有資格被查核：三層能見度檢查

一個月只有幾十上百個訪客的作品集，做能見度有沒有意義？有，但目標不是流量規模，是在被搜尋的那一刻可見、可索引、能代表你。做個假設：一個月一百個訪客裡，有三個是搜尋你的名字而來的面試官或業主，這一百人的價值就高過一萬個不認識你的追蹤者。這是價值判斷，不是流量承諾，先講清楚。

三層依序打底。第一層是姓名與品牌詞：檢查網站標題、關於頁與公開社群上的名字是否一致，再搜尋自己的名字看結果能不能代表你；一致性能幫助搜尋引擎理解，不保證永遠排第一。第二層是專長與服務詞：先查這些詞有沒有實際搜尋需求，再自然寫進對應頁面；長尾詞不代表競爭低，也不保證穩定流量。第三層是技術可索引性：重要頁面可抓取、可索引，sitemap 涵蓋需要收錄的網址；sitemap 只協助發現，不保證索引。

入口層的定位要守住：它是機器的進水口，不是網站的主力。資源配置上，案例頁的證據密度永遠優先於能見度的細節，順序反了，等於在替一個還通不過檢視的網站拉客。實際操作上，WordPress SEO 的系統性做法與Search Console 的設定流程兩篇把技術部分講得完整，照著檢查即可。

工具放到結尾選，反而不容易選錯

所有教學都從挑平台、買網域開始，這套流程卻把工具放到接近結尾，理由是：疑問、證據、結構想清楚之後，工具只是承載的容器，這時選工具的判斷成本最低，也最不容易選錯。順序反過來的代價很常見：先買了主機，才發現需要的只是託管平台；先套了版型，才發現案例頁根本沒有內容可填。

託管平台（例如 Wix、Webflow）、WordPress 自架、手刻程式三條路，用四題是非題就能分流。多久要上線？一週內要有，託管平台的起跑最短。要不要長期累積內容與案例？要，自架的擴充空間就值得考慮。願不願意自己處理更新與備份？不願意，自架的維護很快就會變成拖欠。有沒有高度客製的視覺或互動需求，而且你寫得動程式？有，手刻才劃得來。四題答完，通常只剩一條路，或一條主路加一段過渡。

三條路的差異可以用「買到什麼、付出什麼」記住：託管平台買到速度，付出月費與搬家的限制；自架買到控制與擴充，付出學習與維護；手刻買到完全的表現自由，付出時間與日後所有維護。階段變了可以換路，工具選擇不是終身判決。兩兩之間的完整比較，三種架站方式的差異分析整理成對照表；託管平台的選項盤點，看作品集平台的清單比較。

自架這條路的收穫與代價，WordPress.org 的功能說明寫得直白：開源授權、支援自訂內容類型、可裝外掛擴充。對作品集來說，自訂內容類型的意思是，「作品」能成為一種獨立管理的資料，日後新增、分類、排序都不必改版面；外掛生態則代表遇到問題找得到答案。文件同樣寫明代價：主機與維護自行負責。對照W3Techs 的市佔統計，WordPress 長期是內容管理系統裡佔比最高的一套，市佔的意義是生態與人力市場：將來要找人接手，找得到會用的人。

決定自架之後，真正要花錢採購的只有兩樣，第三樣通常是確認而不是購買。網域是門牌：個人作品集用自己名字的網址走長期最穩，註冊與續約的注意事項見網域註冊的完整說明。主機是地基：依預估的圖片量與流量選一個可升級的方案，審核的問題列幾個就好，磁碟容量夠不夠放圖、流量怎麼計價、能不能平滑升級、備份拿不拿得走；規格之間的差異看主機方案的比較。SSL 憑證是門鎖：讓網址走 https，訪客的瀏覽器不會標示不安全；多數主機免費附贈，你要做的不是另外掏錢，而是確認它已生效、到期會自動續，原理與安裝見憑證的說明與設定。

這幾樣東西共用一個判準：可攜帶性。網域所有權登記在自己名下，主機的備份搬得走，憑證換主機可以重簽，退場自由就一直在你手上。費用的量級可以先記個概數：網域一年約數百到一千多元，入門主機一年數千元，付費版型多為一次付費數千元；完整區間與細項，網站成本的組成結構有逐項拆解。還要提醒一件事：使用年限不能直接決定工具，預期的內容量與維護意願才是；打算放五十件案例與打算放五件，主機與版型的選擇自然不同。

五道關卡淘汰法：版型這樣挑

上千個免費付費版型，用直覺挑選等於把幾百個選項同時排進腦中比較；換成淘汰法，把候選丟進五道關卡，兩關不過就淘汰，活下來的都能用，挑順眼的就好。關卡的順序有講究，從最能一票否決的開始問。

第一關問有沒有作品集內容類型：版型支不支援把作品當成獨立內容來管理，決定日後每加一件作品是三分鐘還是三小時。第二關看行動版表現：把示範站縮到手機寬度，選單、字級、圖片還合不合理。第三關查維護紀錄：最近的更新時間、相容的系統版本、有沒有安全公告。第四關看載入表現：示範站的效能源僅供候選之間比較，主機與內容都不同，不能當絕對門檻。第五關看評價與活躍度：官方目錄或市集的評分與啟用數，是社群替你先行測試過的間接證據。

版型是要長期共事的夥伴，寧可多花一晚把五關跑完，也不要上線半年後痛苦搬家。選定之後的延伸讀物，依你選的方向挑：Divi 的作品集版面做法、Elementor 的作品集實作，或Astra 的作品集設定教學，三套邏輯相通，讀通一套就能類推其他。

這套機制的極限在哪裡

診斷、證據、結構都做對之後，哪些問題依然不會被解決，要說清楚。作品集網站是放大器，放大的不只是強作品，弱作品同樣被放大；它變不出不存在的經歷，也不保證流量與機會上門。承認邊界，投資才會回到作品力本身。

放大器的邊界具體長這樣：三件寫得扎實的強作品，勝過二十件平庸的陳列，因為訪客的記憶有限，記住的是最強與最弱的那幾件，不是總數。作品集的價值在精不在多，弱作品放上網站，等於親自提供反證。如果你此刻的作品力還撐不起三件強案例，優先順序應該是補作品，不是補網站。舊作品的去留用同一把尺衡量：看它還能不能代表現在的你，而不是看年份；仍是代表作的舊案留著並標註年代，手法已經換代的就收進資料夾備用。

特效的位置也一樣。對做動態與互動設計的從業者，特效本身就是作品，屬於證據；對其他多數工作者，進場動畫與視差滾動是注意力稅，扣的是訪客的耐心與載入時間。判斷的方法只有一題：拿掉這個特效，作品有沒有變得比較難被理解？沒有，就刪。

更全面的設計地雷，可以拿網頁設計常見錯誤的清單交叉檢視一遍，兩種視角疊起來，會抓出單看作品集角度漏掉的問題。

上線之後，誰來讓它繼續替你說話

網站做好就放著，不會立刻壞，但有兩種失效會讓它在關鍵時刻背叛你：聯絡管道失效，以及內容過期。過期資訊比沒有網站更傷，聯絡方式、目前角色、服務內容一旦失準，整站的舊證據會跟著貶值，因為訪客無法判斷哪一部分還算數。更新頻率沒有固定門檻，看的從來不是時間，是內容準不準確。

維運排成固定節奏就好，三件事。備份要異地：備份檔不能只放在同一台主機，主機出事時要拿得回來，做法見備份與還原的完整流程。更新要有順序：核心、版型與外掛更新前先備份，並確認相容性，安全修補及時處理。聯絡要實測：定期寄一封測試信，確認表單通知沒有沉進垃圾信匣，設定方式見聯絡表單的設定；錯過一封上門的詢問，損失的不只是一封信。

每季回到開頭那套三層診斷回診一次：曝光、理解、信任，卡點是不是移動了？多數人的卡點會隨階段移動，求職期過了，深線的驗證變成重心；接案穩定了，品牌詞的能見度就值得加碼。診斷、修復、回診，這個循環讓網站持續替你說話，而不是逐年變成一份過期的存檔。

整篇的取捨濃縮成一張對照表，同一個決策點，兩種心態會做出不同的選擇：

如果只做一件事，拿一張紙寫下對方要驗證什麼，那句他心裡還沒消除的疑問，用完整的句子寫。然後回頭檢查你的網站，每一頁有沒有在回答它。作品集網站終究是一份替不在場的你作證的文件，開場那趟捷運上的評分，下次還會發生；差別在於，到時候站出來替你說話的，是排列整齊的證據，還是一排年份不明的截圖。