網站設計接案怎麼做？從 Figma 到上線的完整流程 SOP 2026

很多想接網站設計案的上班族，都以為「會用 Figma 畫圖」就能接案。實際接了第一個案才發現：難的不是畫圖，而是怎麼把客戶模糊的需求，一步步變成一個能上線、客戶滿意、自己也不會做到死的網站。

網站設計接案，本質上是一套流程。從接到案、訪談、設計、確認到上線，每一段都有該做的事與該跟客戶確認的節點。把流程跑順，你才能準時交件、減少改稿、撐起報價。這篇就給你一條從 Figma 到上線、可以照著做的完整 SOP，適合下班只有一到兩小時、想把網站設計變成第二收入的人。

第一步：需求訪談，把模糊變清楚

接案最大的風險，幾乎都來自「需求沒談清楚」。第一步不是打開 Figma，而是先把客戶要什麼問清楚。

訪談時要釐清這幾件事：這個網站的目的是什麼（形象、賣東西、收名單）、目標客群是誰、要哪些頁面與功能、有沒有喜歡的參考網站、品牌色與素材是否齊全、上線時間與預算。把這些寫成一份書面的需求確認單，請客戶確認後再開工。這一步看似花時間，卻能幫你省下後面無數次來回。

第二步：蒐集參考，建立視覺方向

需求清楚後，先別急著畫。花一點時間蒐集參考、建立一個簡單的 moodboard（風格參考板），把客戶喜歡的色調、排版、氛圍收在一起。

這一步的價值，是讓你和客戶在「視覺方向」上先達成共識。你可以提出兩到三個方向給客戶選，避免你埋頭做完整版，客戶才說「這不是我想要的」。方向確認了，後面的設計才不會白做。

第三步：線框 wireframe，先排結構再談美感

很多新手一上來就做精美視覺，結果結構不對、整個重來。正確順序是先做線框。

線框（wireframe）是用簡單的灰階方塊，把每一頁的版面結構、區塊順序、資訊層級先排好，先不管顏色與細節。先跟客戶確認「這一頁要放什麼、順序對不對」，結構定了再進視覺。這樣改起來成本最低，也最能避免大返工。

第四步：Figma 視覺稿，把結構變成成品

結構確認後，才在 Figma 裡把線框變成正式視覺稿——上色、選字體、放圖片、設計按鈕與互動細節。

Figma 的好處是支援即時協作與留言，你可以把連結給客戶，讓他直接在稿子上標註意見，省去截圖來回。設計時記得善用元件（component）與樣式（style）統一色彩與字級，後續要改或要做 RWD 都會更快。2026 年也有不少 AI 輔助設計功能可加速排版與配圖，但最終的視覺判斷仍要由你把關。

第五步：客戶確認，設定明確的改稿規則

視覺稿完成後，進入最容易失控的環節：改稿。沒有規則的改稿，是接案者最大的時間黑洞。

提案時就要講清楚：包含幾次修改、超出的修改怎麼計費、每次回饋請一次集中給。把改稿次數寫進報價與合約，是保護你也是專業的展現。客戶在 Figma 上集中標註、你一次處理，效率最高。

第六步：切版上線，把設計變成真網站

視覺定稿後，就把設計實作成真正能運作的網站。這一步有幾條路：用 WordPress 搭配 Elementor 套版、用 Framer／Wix 直接做、或手刻切版。選哪一條，取決於你的技能與客戶後續維護需求。

這一步一定要做 RWD（響應式設計），確保網站在手機、平板、電腦上都好看好用——現在多數訪客來自手機，RWD 沒做好，等於網站做了一半。實作完成後，逐頁測試連結、表單、載入速度與各裝置顯示。

第七步：交付與教學，讓案子漂亮收尾

網站上線不是結束，交付才是。把網域、後台帳號、使用說明整理好交給客戶，並錄一段簡單的操作教學影片（例如用 Loom），教客戶怎麼自己更新基本內容。

這一步做得好，客戶滿意度會大幅提升，也更願意回購或轉介紹——而轉介紹，正是接案最穩定的案源。提醒：接案收入會因個案、產業與你的交付品質而不同，本文不對任何收入做保證。

怎麼估時程與報價：用流程反推

懂了流程，報價與時程就有依據，而不是憑感覺喊價。最實用的方法，是用上面七個步驟反推。

把每一步要花的時間列出來：訪談與需求確認、參考與方向、線框、視覺稿、改稿、切版上線、測試與交付。每一段乘上你實際的工時，再加上一點緩衝，就是合理的交期。報價也一樣，依頁數、功能複雜度、是否需要多版設計與後續維護來分級，並以區間呈現、保留修改次數。

對新手而言，前幾個案可以把價格訂在「能接到、又不會做白工」的甜蜜點，重點是累積作品與好評；等作品集夠厚、轉介紹變多，再逐步往上調。實際金額會因產業與案件差異很大，本文不對任何報價或收入做保證，請依個案評估。

新手最常見的三個失誤

第一個失誤，是跳過需求訪談直接做設計，結果方向錯了整個重來。第二個失誤，是改稿不設規則，被無止境的「再調一下」拖垮。第三個失誤，是忽略 RWD 與交付教學，網站在手機上跑版、或客戶不會自己更新，導致售後變成無償加班。

這三個失誤的共同點，都是「流程沒走完整」。把訪談、改稿規則、RWD 與交付教學補上，你的接案體驗會完全不同。

每個階段的品質把關重點

把 Figma 到上線的七步流程走順，關鍵是每一步都有明確的品質把關。需求訪談要問到「這個網站要達成什麼目標、給誰看、成功長什麼樣」，而不只是「你想要什麼顏色」——目標不清楚，後面全走偏。蒐集參考要跟客戶對齊視覺方向，避免做出來才發現彼此想像差很多。線框（wireframe）要先排結構與內容優先級，別急著談美感——結構對了，視覺才有意義。Figma 視覺稿把結構變成成品，這階段要確認風格一致、RWD 各尺寸都想到。客戶確認要設定明確的改稿規則（含幾次修改），避免無限改稿。切版上線要確認實作與設計一致、跨裝置正常、速度可接受。交付與教學給客戶操作說明，讓案子漂亮收尾。每一步的把關，決定了最終品質與客戶滿意度。

這套流程最大的價值，是把「設計」從憑感覺變成有步驟、可預期。新手最常見的問題就是跳步驟——沒訪談就開始設計、沒線框就直接做視覺、沒設改稿規則就交稿，結果來回修改沒完沒了。照流程走，每一步都先確認再進下一步，你的設計案就能做得順、客戶也滿意。

怎麼估時程與報價：用流程反推

設計案的時程與報價，可以用流程反推。把七個步驟各自預估要花多少時間（含來回溝通），加總就是總工時；用總工時乘上你的目標時薪，加上工具與稅的成本，就是報價的底線。這種「用流程反推」的估法，比憑感覺喊一個數字準確得多，也讓你在報價時心裡有底、不會做白工。特別要把「客戶確認與改稿」的時間算進去——這往往是設計案最耗時、也最容易被低估的環節。

報價時務必寫明「包含幾次修改、超出如何計費」。設計案的無限改稿是最傷的——客戶對視覺的意見特別多，沒有約定修改次數，你的時間會被無限消耗。把修改次數寫進報價與合約，遇到「再改一下」時你就有依據專業地說「這次超出約定次數，需要額外計費」，既保護自己又不傷和氣。

新手最常見的三個失誤

失誤一：跳過需求訪談就開始設計。沒搞清楚客戶的目標與受眾，做出來的設計再美也可能不對——結果大改特改。解法：動工前一定先訪談，把「這網站要達成什麼」問清楚。失誤二：沒設改稿規則，陷入無限修改。客戶對視覺意見多，沒約定修改次數就會一改再改，你的時間被耗盡、利潤歸零。解法：報價與合約寫明修改次數與超出計費。失誤三：只顧美感，忽略結構與功能。設計得漂亮但動線混亂、RWD 跑版、速度慢，等於中看不中用。解法：先用線框排好結構，再談美感；上線前測跨裝置與速度。避開這三個失誤，你的設計案就贏過大多數新手。

這三個失誤的共同根源，是「急著做視覺、跳過該有的步驟」。設計接案的專業，一半在美感，另一半在流程——訪談、線框、改稿規則、跨裝置測試這些「不那麼有趣但很重要」的環節，才是決定案子做得順不順、客戶滿不滿意的關鍵。把流程跑順，設計才接得久。

本週行動：把流程做成你的接案 SOP

這週給自己一個任務：把「Figma 到上線」的七步流程，做成一份你自己的接案 SOP——每一步要做什麼、要跟客戶確認什麼、對應的文件（需求書、報價單、改稿規則）是什麼。做好之後，未來每接一個設計案都照 SOP 走，既不會漏步驟，也讓你的接案顯得專業有制度。設計接案能不能做久，關鍵不只在設計功力，更在流程管理——把流程跑順，你才能穩定交付、客戶才會滿意、案源才會源源不絕。想看更多設計接案的流程與範本，歡迎加入文末的登島者學院 LINE。

客戶確認環節：把改稿變可控

設計案最容易失控的環節，就是「客戶確認與改稿」。把它變可控，有幾個關鍵做法。分階段確認，而非最後才給。在線框階段先確認結構、視覺稿階段再確認風格，每一步都取得客戶同意再往下，避免做到最後才發現方向錯要全部重來。明確定義修改次數與範圍。合約寫清楚「包含 N 次修改」，並定義什麼算「一次修改」（例如一輪意見彙整算一次，而非每個小意見都算），避免認知落差。引導客戶給結構化的意見。與其讓客戶說「感覺怪怪的」，不如請他具體指出「哪個區塊、想要什麼效果」，讓修改有依據、不空轉。這三個做法，能把原本無底洞的改稿，變成有次數、有範圍、有依據的可控環節。

改稿失控往往不是客戶故意刁難，而是「規則沒講清楚」。當你在一開始就把改稿次數、確認流程、意見方式都約定好，客戶其實會配合——因為他也不想無止盡地改。把改稿規則講在前面，是保護雙方、讓合作愉快的專業做法，而不是對客戶的防備。

常見問答 FAQ

Q1：不會寫程式能接網站設計案嗎？ 可以。用 WordPress、Framer、Wix 等工具能在不寫程式的情況下交件；想接更複雜的案子時，再逐步補上技術能力。

Q2：一定要用 Figma 嗎？ 不一定，但 Figma 是業界主流、支援協作與留言，對接案溝通很有幫助，建議優先學會。

Q3：設計稿要給客戶看幾版？ 建議先給兩到三個方向選，定案後再深化。並在報價時講清楚包含的修改次數，避免無限改稿。

Q4：RWD 一定要做嗎？ 要。現在多數訪客用手機瀏覽，沒做好響應式等於網站只完成一半，也會影響搜尋表現。

Q5：交付後客戶一直要我免費改怎麼辦？ 在合約與報價中先界定「上線後的修改範圍與計費方式」，並提供操作教學讓客戶能自行更新基本內容。

Q6：接案要不要先做作品集？ 強烈建議。新手沒有作品很難說服客戶，可以先幫朋友的店、自己的興趣主題做一兩個示範網站當作品集，把它放上自己的官網，讓客戶看得到你的實力。

Q7：一個網站設計案大概要做多久？ 視頁數與功能而定，從一頁式的數天到形象網站的數週都有可能。用上面的七步流程逐段估時，再加緩衝，會比憑感覺準確很多。

Q：一定要用 Figma 嗎？其他設計工具可以嗎？ 不一定。Figma 是主流的介面設計工具，但重點是流程（訪談、線框、視覺稿、確認、上線），用哪個工具其次。挑一個你順手、能跟客戶協作的即可。

Q：設計和切版一定要同一人做嗎？ 不一定。設計（視覺稿）與切版（實作）是可分開的專業，很多案是設計與工程協作。若你只擅長設計，可與工程師合作或用架站工具實作，把設計能力練精本身就是高價值。

Q：客戶一直改稿又不想加錢怎麼辦？ 拿出合約約定的修改次數，超出的以追加報價。事前講清楚就有依據；若沒事前約定，這次先溝通、下次一定把改稿規則寫進合約。

設計接案能走多久，往往不是取決於你的美感天花板，而是取決於你的流程有多穩。一個流程跑順的接案者，就算美感只是中上，也能穩定交付、準時收尾、讓客戶滿意；反之，美感再好但流程混亂、改稿失控、交期一再延誤，客戶合作一次就怕了。把七步流程練成肌肉記憶，你的設計接案才能從「接一個累一個」變成「越接越順、越接越值錢」。

結語：把流程跑順，設計才接得久

網站設計接案能不能長久，關鍵不在你會多炫的設計技巧，而在你能不能把整個流程跑得順、跟客戶溝通得清楚、準時交出好用的成品。流程順了，改稿少了，你才有餘力接下一個案。換句話說，客戶買的從來不只是一張漂亮的設計稿，而是一段「省心、準時、上線後還能自己維護」的完整體驗。把這段體驗做好，回購與轉介紹自然會來。

職涯避險的本質，是替自己多開一條能力線。從一個小案、一套流程開始，利用下班一到兩小時，慢慢替自己造船，蓋出一座離職橋。

• 想系統學會網站設計接案的完整流程？歡迎參加免費直播與諮詢：加入登島者學院 LINE
• 更多上班族接案與第二收入資源：登島者學院官網