網頁設計外包流程拆解:五階段把關,從需求到上線
網頁設計外包流程完整指南:五個階段從需求定錨、選商簽約、資訊架構、設計開發到上線交接,每階段配一個書面簽認的閘口,教你把需求寫死、報價拆到頁面與功能、合約寫清修改輪數與保固期,避開超支與糾紛。
作者:褚崇名(Sliven)
想像一下這個場景:你跟設計公司開了三次比稿會議,來回修改首頁,合約簽了、尾款也結了,網站順利上線。幾個月後想加活動頁,才發現後台不能自行新增;想換主機時,又發現原始檔沒交、後台帳號由對方持有,連網域都登記在設計公司名下。這些風險不必等到發生糾紛才處理,需求、權限與交付條件都能在簽約前寫清楚。
問題從來不在「找錯公司」這一點上。從事後技診的角度往回推,一大半的技術債,源頭都可以追溯到當年外包的那一刻:連「要做哪一種網站」都沒寫進需求單,於是規格、報價、驗收、交接每一關都各說各話。這篇指南僅回答一件事:網頁設計外包的完整流程怎麼走、每一個階段的把關閘口在哪裡、閘口沒過會踩到什麼雷。以下用五個階段拆解,每個階段配一個書面簽認的閘口,讓你從需求到上線都能把主導權留在自己手上。
如果你僅想要一個快速結論,記住這句話就好:把外包當專案管理,不要當採購;每一次付款,都要綁一個寫下來的閘口。
快速總覽:外包流程的五階段 × 五閘口
- 階段一(比稿前):需求定錨 → 閘口是「需求文件」,網站類型、頁面清單、目標全部寫下來。
- 階段二(選商簽約):報價逐條對應需求 → 閘口是「合約+報價單的口徑一致」。
- 階段三(資訊架構):sitemap 與線框稿 → 閘口是「IA 書面簽認」才能進視覺。
- 階段四(設計與開發):視覺稿確認+功能 UAT → 閘口是「逐頁簽認與驗收清單勾完」。
- 階段五(上線與交接):SEO、安全、交接三方檢查 → 閘口是「全綠燈才上線、才付尾款」。
為什麼「外包流程」本身才是最大的地雷
多數人把外包的風險想成「會不會遇到爛公司」。老實說,會。但更普遍的狀況是:你找到一家技術不差、態度也好的公司,最終卻還是踩雷。原因出在流程沒有閘口。
所謂閘口,就是一個「必須白紙黑字簽認、沒過就不能往下走」的關卡。沒有閘口的流程,會自然滑坡成「口頭答應、事後爭議」。設計師在 LINE 上說「這個之後可以加」,你以為是承諾,他以為是聊天;三個月後你要的那個功能變成加價項目,你拿不出任何證據。這種爭議九成以上,都是因為中間少了那張紙。
更深一層的問題是,外包階段的每一個技術決定,都會變成你未來三到五年的 SEO 資產或技術債。網站類型選錯,canonical 策略從起跑點就歪;資訊架構沒談清楚,內部連結結構無法支撐主題叢集;CMS 被鎖在對方主機,你想做技術 SEO 都動不了。這些不是「設計美感」問題,是「外包流程有沒有把 SEO 放進需求」的問題。想看一個網站從零到委外該怎麼盤點大方向,可以先讀架站方式全比較把心法底定下來。
這篇把流程切成五個階段,每個階段設一道書面閘口。閘口不能保證專案不出問題,但能把需求、責任與驗收證據留下來,降低口頭認知不一致的風險。
把這件事換算成成本會更具體。一份閘口文件平均花你一到兩個小時準備,五個閘口加起來大約十個小時的工作量。這十個小時換來的是:報價口徑清楚、修改輪次有據、驗收標準白紙黑字、帳號與原始檔全部到手。反過來看,一個沒走閘口的外包專案,事後的補救成本往往超乎想像。光是搶救一個被鎖在對方主機、沒拿到原始檔的網站,重建的工程費用經常就超過當初整個外包預算。閘口的本質,是用十個小時的紀律,去對賭那種災難級的補救風險。這筆帳,怎麼算都划算。
階段一:比稿之前的需求定錨
絕大多數外包糾紛,種子在這個階段就埋下去了。你連自己要什麼都講不清楚,就開始找公司比稿,每家公司不得不各自猜測你的需求,報出來的價格口徑完全不同,你最終挑了最便宜的那家,卻沒發現他的報價裡少了一半你以為「應該有」的東西。
需求定錨的第一步,是把「網站類型」先敲死,wireframe 還排在更後面。形象官網、一頁式銷售頁、電商購物車、內容部落格、客製系統,這五種是截然不同的工程,報價結構、技術棧、後續維護成本天差地遠。如果你連這個都還在猶豫,先去把一頁式網站設計全指南、品牌官網設計全攻略、電商平台比較這幾篇讀過,把方向先定下來。方向不定,後面的需求文件僅是空話。
需求文件要寫進去的七件事
需求文件不需要寫成一本企劃書,但它必須回答這七個問題,缺一不可。這份文件就是你階段一的閘口 deliverable,後面所有報價、合約、驗收都要對應它。
- 網站類型與核心目標:是要接名單、直接賣東西、做品牌曝光、還是累積內容流量?目標決定功能優先順序。
- 主要受眾與使用情境:誰會來、用什麼裝置、想做什麼事。這直接影響響應式策略與資訊架構。
- 頁面清單與優先序:首頁、關於我們、服務、案例、部落格、聯絡,列出第一版必須上線的頁面。
- 功能需求:表單、金流、會員、多語系、後台可自行編輯、預約系統。能具體就不要模糊。
- 內容誰負責:文案、圖片、影片是業主提供還是設計公司代寫?這一條沒寫清楚是最大的隱形加價項。
- 上線時程與預算區間:給區間就好,但要有。沒有預算區間,對方僅能用最保守的規格報價。
- 後續維護與 SEO 預期:網站要不要自己改?要不要做 SEO?這決定 CMS 與主機的選擇。
這份文件寫好之後,先在內部對齊一次再拿出去。客戶內部意見分歧、邊做邊改需求,是設計公司最怕、也最容易藉機加價的狀況。把內部共識先弄出來,比稿的品質會立刻拉開一個檔次。
階段一的閘口很簡單:需求文件存在、而且已經過內部簽核。沒有這份文件,不要發需求給任何一家公司。你可以參考企業為什麼需要形象網站先把「為什麼要做」想清楚,再回頭把需求寫具體。
階段二:選商、報價與簽約
需求文件出去之後,你會收到幾份報價單。多數人這時候僅看總價,這是最大的錯誤。報價單的本質不是「多少錢」,而是「這份合約到底買到什麼」。你必須把報價單當合約讀,逐條對應你的需求文件,找出缺口。
報價單裡必須看清的十個欄位
| 欄位 | 沒寫清楚的後果 |
|---|---|
| 頁面數 vs 版型數 | 十個頁面可能僅有三個版型,其餘套版;以為買到十頁客製,其實僅有三頁 |
| 修改次數 | 「無限修改」幾乎不存在;通常設計 2 至 3 輪、程式 1 至 2 輪,超過要加價 |
| RWD 是否含、含到哪些裝置 | 有些報價僅到平板,手機直式要另計;或僅調整不大改 |
| SEO 基礎包含範圍 | 多數僅做 meta 欄位,schema、sitemap、網址結構、速度優化常另計 |
| 主機與網域誰付、登記在誰名下 | 綁對方主機、網域登記在設計公司,是日後被掐脖子的最常見原因 |
| 原始檔是否交付 | 不交原始檔,你日後想換人維護要從零重做 |
| 著作權歸屬 | 預設多半歸設計公司,你要取得授權範圍必須寫進合約 |
| 保固期與保固範圍 | 通常 3 到 6 個月,且僅保程式 bug 不保內容修改與主機問題 |
| 第三方授權費 | 主題、外掛、圖庫、字型的年費常另計,第一年與第二年差很多 |
| 階段付款點 | 報價總價怎麼拆:簽約、設計確認、上線、尾款,每一段綁什麼 |
這十個欄位,缺哪一個,那一塊成本就會在事後以「加價」的形式出現。把每一份報價單都拿這十欄去對,你會立刻看出哪家實在、哪家在玩低報價綁後續的把戲。想知道合理行情落在哪裡,可以對照網頁設計費用全公開與網站架設費用完整解析抓一個基準,WordPress 架站費用拆解則能讓你看懂委外報價裡哪些是工程成本、哪些是服務費。
套版、半客製、全客製:流程深度完全不同
選商階段另一個關鍵判斷,是你要的是哪一種外包關係。這三種的流程深度天差地遠,把全客製的流程套到套版專案,會被當奧客;把套版的流程拿來做全客製,會被坑到脫褲。
| 類型 | 適合 | 流程可壓縮處 | 絕對不能省的閘口 |
|---|---|---|---|
| 套版快站 | 預算有限、時程急、功能單純的形象站 | IA 與視覺可大幅簡化 | 主機網域所有權、原始檔、可自行後台編輯 |
| 半客製形象站 | 多數中小企業、品牌官網、服務業 | 開發期可套用主流 CMS 主題 | 需求文件、IA 簽認、設計稿逐頁確認、SEO 基礎 |
| 全客製 / 電商 | 特殊流程、會員系統、購物車、多語系 | 幾乎不能壓縮 | 全部五個閘口都要走完,驗收清單要逐功能 |
選商本身是一門學問,這篇的重點是流程,所以僅點到這裡。想知道怎麼實際檢驗一家公司的體質,可以接著讀網頁設計公司挑選指南與網頁設計公司推薦;如果你有 logo、視覺系統要一起談,也別忘了把logo 設計費用一起算進總預算,避免視覺與網站兩頭外包時各做各的。
階段二的閘口是:合約與報價單口徑一致,所有需求文件的項目在報價裡都有對應條目,缺口寫進合約或排除條款。簽約前,把報價單逐條念一次、把口頭承諾全部寫進合約附註。這一關花你兩個小時,可以省掉日後幾十個小時的爭執。
階段三:資訊架構與線框稿
簽約後,應先把網站的資訊架構(IA)拆清楚,再進入視覺設計。越晚修改 IA,通常牽涉越多版型、網址、內容與轉址工作;但上線後調整不等於「整個 SEO 排名歸零」。先做網址對照、301 轉址、canonical、內部連結與 sitemap 更新,可以降低遷移風險。
IA 階段要產出三樣東西:sitemap、線框稿、內容分配表。sitemap 決定網站有幾個層級、彼此怎麼連;線框稿決定每個頁面的區塊結構與優先序;內容分配表決定每個區塊的文字圖片由誰產出。這三份東西一起簽認,才能進視覺設計。想扎實地把 sitemap 做好,可以參考網站 sitemap 指南,搭配 AI 工具的話看sitemap AI 工具。
為什麼 IA 等於你的 SEO 骨架
SEO 不該等到上線後才補。IA 會影響讀者導航、內部連結、爬取路徑與網址規劃;層級太深不等於爬蟲一定抓不到,但可能讓重要頁面較難被發現。網址上線後仍可修改,僅是必須配合逐一轉址與監測,不能假設排名會自動保留或全部重來。
具體來說,IA 階段至少要回答這幾個 SEO 相關問題:
- 主要導覽與 footer 連結結構,能不能在三次點擊內到達任何重要頁面?這個原則可以對照網站結構 SEO 指南檢查。
- 每個主要頁面的網址結構是否語意化?產品分類、部落格文章、服務頁的網址層級要怎麼分?網址優化會告訴你規則。
- 頁面之間的內部連結怎麼佈?支柱頁與群集內容的關聯要先在 IA 裡畫出來。
- 版面配置上,每個頁面的主區塊、CTA、內部連結位置怎麼排?網頁版面配置指南可以當檢查表。
- 哪些關鍵字對應到哪些頁面,避免自己網站內部互相搶排名?這個盤點動作建議搭配關鍵字研究一起做。
把 SEO 放進 IA 階段,是為了提早決定分類、頁面角色、網址與內部連結。上線後仍能修正結構,不必一律砍掉重做;僅是需要內容盤點、轉址、canonical 與逐步驗證,成本通常比線框階段高。
階段三的閘口是:sitemap、線框稿、內容分配表三份文件書面簽認。簽認之前,視覺設計師不應該開始畫任何一個頁面的 high-fi 版面。這聽起來很官僚,但它是唯一能擋住「邊做邊改」這個外包最大成本來源的閘口。
階段四:視覺設計確認與開發
IA 過了之後,進入視覺設計與程式開發。這個階段是最容易情緒化的一關,因為美感見人見智,而「不好看」這句主觀評價無法被驗收。你必須把美感判斷轉換成可量化的檢查項目,否則設計師會在你的主觀感覺裡無限修改,直到修改次數用完。
設計稿確認:把「看起來不錯」翻譯成檢查表
「看起來不錯」不是簽認,「逐項檢查表勾完」才是。設計稿確認時,至少要走過這幾個檢查面向:
- 品牌一致性:色票、字級、logo 使用規範是否與品牌手冊一致?
- 手機版:每一頁都要單獨出手機版設計稿,不能僅看桌機。響應式設計與AWD vs RWD 比較能幫你跟設計師對齊「響應式」到底要做到什麼程度。
- CTA 與轉換路徑:每個頁面的主要動作是什麼、按鈕在哪、表單多長?這部分可參考系統化的網頁設計完整指南。
- 常見錯誤掃描:對照網頁設計常見錯誤逐項檢查,把可避免的問題在設計階段擋掉。
- 載入效能預期:首頁用幾張大圖、有沒有影片、動效多不多?這些都會影響上線後的速度,網站速度優化會告訴你紅線在哪。
- 無障礙與對比:文字與背景對比、字級、鍵盤操作,這些既是使用體驗也影響搜尋引擎可讀性。
設計稿的修改次數要在合約裡寫死,而且每一輪修改的範圍與版本號都要郵件留存。多數爭議不是出在「不給改」,而是出在「我以為這一輪還能改、你說已經用完了」。版本號與修改紀錄是你唯一的證據。
開發階段:你要驗的是功能,不是美感
設計稿簽認之後進入開發。開發階段最容易出的問題是「你驗錯了東西」。很多業主在這階段還在挑剔顏色和字級,那些應該在設計階段就結束;開發階段你要驗的是功能、是後台、是資料結構、是能不能自行維護。
如果你的網站是 WordPress 基底(這也是台灣中小企業最主流的選擇,依 W3Techs 的統計,全球超過四成網站都用它),開發階段就要把這幾件事驗清楚:
- 後台能不能自行新增頁面、文章、產品?還是每改一個字都要找設計公司?這個能不能做到,跟主題與編輯器的選擇有關,可參考WordPress 架站教學與頁面編輯器、頁面編輯器比較。
- 用的是哪一套主題與編輯器?主流如 Blocksy、Astra 搭配 Gutenberg,或 Elementor,這些決定你日後好不好維護。可參考WordPress 主題推薦、Elementor 完整教學。
- 外掛清單要列出來,並且註明每個外掛的功能與授權費。WordPress 生態有幾萬個外掛(見 WordPress.org 外掛目錄),但每多裝一個就多一份衝突與資安風險,主題安裝教學與圖片優化能幫你理解為什麼有些外掛非裝不可、有些是浪費。
- 資安基本款有沒有做:SSL、登入保護、定期備份。安全外掛與備份外掛是上線前必須確認到位的兩件事。
階段四的閘口是兩道:第一道是視覺設計稿逐頁書面簽認、修改次數歸零紀錄;第二道是功能驗收清單逐項勾選完成(UAT)。功能驗收清單應該在合約裡就先定義好,不要等開發完才想標準。清單裡每一項都要可測試、可勾選,例如「聯絡表單送出後會收到 email 通知」、「後台可新增文章且前台正確顯示」、「手機版選單可正常展開」。
階段五:驗收、上線與交接
走到這裡,多數人已經心力交瘁,僅想趕快上線。這正好是最危險的時刻。上線前的最終一哩路,是把 SEO、資安、交接三件事一次檢查清楚,因為上線之後再回頭修,成本是上線前的十倍。
上線前的 SEO + 資安 + 交接三方檢查表
| 面向 | 檢查項目 | 沒做的後果 |
|---|---|---|
| SEO 基礎 | robots.txt 允許收錄、sitemap.xml 已產生並提交、canonical 設定正確、無 noindex 殘留、網址結構與 IA 一致 | 上線後發現整站沒被收錄,或收錄到測試網址 |
| 轉址與網址 | 舊網址是否設定 301 轉址到新網址、有沒有孤兒頁面、404 頁面是否客製 | 漏做網址對照與 301 轉址,可能造成收錄、流量與外部連結訊號流失 |
| 資安 | SSL 憑證已掛載且全站 HTTPS、登入頁有保護、備份排程已啟用、主機與外掛版本已更新 | 上線一週被入侵、資料遺失、被 Google 標為不安全 |
| 分析追蹤 | GA4、Google Search Console 已安裝並驗證、事件追蹤與轉換已設定 | 上線後沒有數據,等於瞎子開車 |
| 交接文件 | 主機帳密、網域註冊商帳密、資料庫帳密、後台管理帳密、原始檔下載位置、外掛授權清單 | 日後想換人維護,什麼都拿不到 |
| 教育訓練 | 後台操作教學、新增頁面文章流程、緊急聯絡窗口 | 小改也要發包,維護成本失控 |
SSL 憑證、DNS 指向、網域註冊這三件事,是上線的技術前置。它們看起來瑣碎,卻是「網站到底能不能算你的」的底層。SSL 可以看SSL 憑證指南,DNS 指向看DNS 設定教學,網域若還沒申請就照著網域申請全攻略走一次。這三個底層都登記在你或你公司名下,是你對這個網站擁有控制權的最低門檻。
SEO 部分,上線前的 on-page 檢查可對照on-page SEO 指南與WordPress SEO 完整教學;如果你想長期累積內容流量,WordPress SEO 技巧與從源頭做 SEO 的觀念會提醒你哪些架構決策在上線那一刻就決定了未來的流量天花板。
交接:把主導權拿回來
交接是整個外包流程裡最被忽略、卻最關鍵的一關。一個網站做完,你應該拿到的不僅是一個會動的網址,而是這份東西的「全部鑰匙」。具體要拿到:
- 主機、網域、資料庫、後台的完整管理員帳號與密碼,且帳號是你公司的、不是設計公司的。
- 原始檔:HTML、CSS、JavaScript、設計稿檔、PSD 或 Figma 檔、資料庫匯出檔。從本地端搬上線的流程可以看WordPress 本機上線,日後要搬家看搬家外掛與備份還原。
- 外掛與主題的授權證明、購買帳號。沒有這個,主題或外掛更新時你會被鎖在外面。
- 一份完整的操作手冊與教育訓練錄影。這通常要另行談費用,但值得。
上線後 48 小時:保固期的黃金監控窗
正式上線的那一刻,才是網站真正開始被測試的時候。開發期的測試再完整,都比不過真實流量進來之後暴露的問題。保固期通常僅有三到六個月,這段時間是你最能要求設計公司免費修復的窗口,所以上線後的頭 48 小時到頭兩週,你要密集盯五件事:
- 搜尋引擎收錄狀態:到 Google Search Console 確認 sitemap 已提交,並用網址檢查工具檢查重要頁面。Google 沒有三天內收錄的保證;未收錄可能和 noindex、robots.txt、抓取、canonical、內容品質或網站新舊有關。robots.txt 僅管理爬取,不是存取控制,敏感頁面仍需登入或伺服器權限保護。
- 表單與金流:親自跑一遍每一張聯絡表單、每一條結帳流程,確認通知信到得了、訂單狀態正確、自動回覆有發出。這是上線最常見的破口,也是對營收影響最直接的環節。
- 速度與穩定度:用 PageSpeed Insights 觀察首頁與主要頁面的分數,並留意主機在尖峰時段是否回應變慢。SEO KPI 的觀念可以幫你設定監控的基準線,知道哪些數字掉到紅線就該求救。
- 行動裝置實測:不要僅看瀏覽器的模擬器,拿實際的手機走一次完整流程,從首頁到結帳或表單送出。很多排版與互動問題僅在真機上才會浮現。
- 404 與轉址驗收:逐一檢查舊網站的重要網址,確認 301 轉址到最相近的新頁面,並找出非預期 404。轉址缺漏可能讓舊網址失效、外部連結價值與使用者路徑中斷,但流量變化仍可能同時受內容、索引、內部連結與搜尋需求影響。
這份監控清單跑完一次,把發現的問題整理成單一文件回報給設計公司。問題集中、口徑一致,修復效率才會高。零散地在通訊軟體上回報十幾次,對方多半會漏掉一半,最終各自認定對方沒處理好,又是下一輪爭執的起點。保護自己的方式,永遠是把溝通也文件化。
階段五的閘口是:SEO、資安、交接三方檢查表全部勾完,且所有帳號與原始檔都已交付到業主手上。閘口沒過,不上線、不付尾款。尾款是你最終、也最有力的籌碼,不要在上線前一天就先付掉。
五個閘口一張表:把流程變成檢查表
把前面五個階段的閘口濃縮成一張總表,把它印出來或存在專案資料夾,每次開會帶著。這張表的目的不是官僚,是讓每一次付款都有一個明確的對應文件,把口頭承諾全部逼成書面。
| 階段 | 閘口 deliverable | 沒過的後果 | 付款連動 |
|---|---|---|---|
| 一、需求定錨 | 需求文件(七項) | 報價口徑混亂、比稿失真 | 簽約金之前必須完成 |
| 二、選商簽約 | 合約+報價單口徑一致 | 口頭承諾不算數、隱形加價 | 簽約金撥付的條件 |
| 三、資訊架構 | sitemap+線框稿+內容分配表簽認 | SEO 骨架歪掉、日後改很貴 | 第二期款的條件 |
| 四、設計與開發 | 設計稿逐頁簽認+功能 UAT 清單 | scope creep、驗收標準各說各話 | 第三期款的條件 |
| 五、上線與交接 | SEO+資安+交接三方檢查表 | 上線即破功、被設計公司綁架 | 尾款的條件 |
這張表的精神是:每一段付款,都綁一個閘口;閘口沒過,不撥款。聽起來像在跟設計公司對立,其實不是。專業的設計公司反而歡迎這種結構,因為它同時保護雙方。真正怕這張表的,是那種靠模糊承諾吃案子的公司,而那正是你該避開的。
三種外包關係,流程深度怎麼抓
不是每一個專案都需要走完五個閘口的完整深度。把全客製的流程套到一個套版形象站,會讓設計公司覺得你是奧客;把套版的精簡流程拿來做電商,會讓你被坑到脫褲。流程深度要跟外包關係的類型匹配。
第一種是套版快站。預算有限、時程急、功能單純的形象站或活動頁,屬於這一類。這種專案的 IA 與視覺階段可以大幅壓縮,因為你選的就是現成版型。但仍要寫清楚網域註冊人、主機或平台帳號、管理員權限、內容匯出能力與移轉條款。SaaS 平台未必交付底層原始碼,供應商代管也不必然有問題;關鍵是合約與帳號能否讓業主持續營運或順利移轉。想用平台快速搭起來的,可以參考網站製作平台評比。
第二種是半客製形象站。這是多數中小企業、品牌官網、服務業的真實選擇。流程深度走完整五個閘口,但開發期可以套用主流 CMS 主題加速。需求文件、IA 簽認、設計稿逐頁確認、SEO 基礎,這四個閘口一個都不能少。如果你的服務業別有特殊慣例(例如餐飲、作品集),可以再參考餐飲網站設計或作品集網站製作把行業細節補進需求文件。
第三種是全客製與電商。特殊業務流程、會員系統、購物車、多語系、跨國金流,屬於這一類。這種專案五個閘口全部要走完,而且驗收清單要細到每一個功能、每一個狀態。電商尤其不能省事,因為金流、庫存、訂單狀態任何一個環節出錯都是直接的金錢損失。想打底電商 Know-how,看電商完整指南與WooCommerce 完整教學。
判斷流程深度的原則是:後續修改成本愈高的階段,閘口要愈嚴謹。IA、網址結構、CMS 選擇,這三件事一旦上線幾乎無法回頭,閘口絕對不能省;顏色、字級、圖片這些視覺細節,修改成本低,可以適度放寬。把心力投在回不了頭的決策上,這是流程管理的核心。
外包流程裡最容易被偷走的五件事
這一節是整篇指南的反面清單。不是流程怎麼走,而是流程沒走好時,你會被偷走什麼。這五項可以統稱為「外包五失」,因為它們安靜無聲,等你發現時木已成舟。
- 原始檔。原始設計檔、程式碼、建置檔與可匯入備份是否交付,要在合約列出格式、時間與可用性。法律義務會受契約與個案關係影響,不能僅靠通則猜測。
- 著作權與授權。台灣委託創作的著作人、著作財產權歸屬與利用範圍,會受契約約定及《著作權法》規範影響,不宜一概寫成「預設全歸設計公司」。應逐項約定圖文、程式、版型、字型與第三方素材的權利、授權範圍及是否可再修改,必要時請律師審約。
- 主機與網域控制權。網域註冊人、主機、DNS、CDN 與分析工具應清楚列出所有者、管理員與交接方式。由供應商代管不等於業主「法律上什麼都沒有」,但若缺少帳號與移轉條款,確實會提高中斷與綁定風險。虛擬主機指南與主機類型比較能協助盤點。
- SEO 基礎。最隱形的失竊。網站做起來了,但 canonical 沒設、sitemap 沒交、網址是亂碼參數、圖片沒壓、JS 把內容蓋掉,這些都不影響「網站會動」,卻直接決定你三年後有沒有自然流量。
- 可維護性。後台鎖死、外掛綁特定授權、客製碼沒文件,你日後想做任何優化都動不了,僅能回頭找原公司,而他知道你沒有別的選擇。這是外包最深的陷阱:表面交付完成,實質終身依賴。
這五件事,每一件都對應到前面某一個閘口。把閘口走完,這五件就不會被偷走;省掉閘口,這五件就是日後帳單的項目。長期維護成本的觀念,可以再對照網站維護費用解析,把「便宜的外包」放進三年的時間軸裡重新算一次,你會得到完全不同的結論。
結語:把外包當專案管理,不要當採購
外包網站這件事,最大的誤解是把它當成採購:找一家公司、付一筆錢、拿一個網站。這種心態註定踩雷,因為網站不是商品,是一段持續演進的關係。把它當專案管理,用閘口取代口頭承諾,用文件取代記憶,用付款節奏逼出雙方的紀律,你才能把主導權從第一天就握在自己手上。
把這篇指南濃縮成六步行動方案:
- 動手前:寫一份需求文件,回答那七個問題,內部簽核完才找公司。
- 比稿時:把十欄報價檢查表套到每一份報價單,找出口徑不一致的地方。
- 簽約時:合約附上報價單、需求文件,口頭承諾全部寫進附註,付款綁閘口。
- 製作時:IA 與線框稿先簽認才進視覺;設計稿逐頁簽認才進開發。
- 驗收時:用功能清單做 UAT,不要憑主觀感覺做判斷。
- 上線時:SEO、資安、交接三方檢查表全綠燈,帳號原始檔全部到手,才付尾款。
這六步不需要你懂寫程式,僅需要你願意多寫幾份文件、多開幾次會。多數外包糾紛,不是因為業主不懂技術,是因為業主把流程的責任全部讓渡給了設計公司。你讓渡的不是工作,是主導權。而主導權一旦讓渡,再好的設計公司也救不了你。
還有一個觀念值得在簽約前就想清楚:外包結束的那一刻,你跟設計公司的關係並沒有結束,僅是換了一個形式。網站會需要改版、主機會需要升級、外掛會需要更新、SEO 會需要持續優化、內容會需要累積。這些後續工作,有些設計公司願意用維護合約承接,有些你會想自己做或交給別人。關鍵在於,五個閘口走完之後,你拿到的是不是一份「可以交給任何人接手」的網站。如果是,你就真的擁有這個網站;如果不是,你僅是租了一個別人隨時可以收回的使用權。把這個標準放進你對外包成敗的定義裡,你會發現前面花的每一個小時都值得。
網站可能成為未來數年的內容與名單基礎建設。前期多花時間把需求、權限、驗收與交接寫清楚,無法保證排名或詢問,但能降低返工、綁定與責任不清的成本。
常見問題
網頁設計外包流程有哪些步驟?
網頁設計報價單通常包含哪些項目?
外包網站修改可以改幾次?
網站上線後的維護自己做好還是外包?
外包網站時,主機和網域應該登記在誰名下?
操作步驟
- 階段一需求定錨:寫需求文件回答七個問題(網站類型與目標、受眾、頁面清單、功能需求、內容誰負責、時程預算、後續維護與 SEO 預期),內部簽核完才發給任何一家公司。
- 階段二選商簽約:把報價單拿十個欄位逐條對應需求文件(頁面數 vs 版型數、修改次數、RWD、SEO 範圍、主機網域所有權、原始檔、著作權、保固期、第三方授權費、付款里程碑),合約與報價單口徑一致才付簽約金。
- 階段三資訊架構:產出 sitemap、線框稿、內容分配表三份文件並書面簽認,敲定網址結構與內部連結,才能進視覺設計。
- 階段四設計與開發:視覺稿逐頁書面簽認、修改次數歸零紀錄,開發完照功能驗收清單做 UAT(例如聯絡表單送出收得到通知、後台可新增文章且前台正確顯示、手機版選單可展開)。
- 階段五上線與交接:跑完 SEO、資安、交接三方檢查表(robots.txt/sitemap/canonical、SSL/備份/登入保護、主機網域資料庫後台帳密與原始檔全部到手),全綠燈才上線、才付尾款。