想自己弄一個網站，打開搜尋結果一看，Figma、WordPress、Wix、Webflow、Photoshop、VS Code 全冒出來，每一個都被歸在網頁設計軟體底下，但它們做的其實根本不是同一件事。有些是畫設計稿的，有些是把網站真的架起來的，有些是寫程式的編輯器，有些只是拿來測試或找素材。搞不清楚分類，就會買錯工具、學錯方向。
這篇把網頁設計軟體依照用途分成幾類，說清楚每一類在流程中負責哪一段、誰該用、免費版夠不夠用。在往下看之前，有一個問題要先回答，因為它會直接決定你需要哪些工具。
選網頁設計軟體之前，先決定你要自己做還是發案
這兩條路需要的工具完全不同。如果你打算自己從頭做到尾，你需要的是能真的把網站生出來的建置工具，設計稿工具反而是可選的。如果你打算把案子發給廠商或接案者，你其實不需要學會任何建置工具，但你會很需要看得懂設計稿、能在上面留意見的能力。
還有第三條路，是自己做但只做內容與日常維護，把初期的架設與版型交給別人。這種情況下你要學的是網站後台的操作，不是設計軟體。很多人在這裡走錯路，花好幾個月學了一套設計軟體，結果日常真正會碰到的只有後台的文章編輯器。
所以先問自己三件事：這個網站未來誰改內容、有沒有預算請人、你願意投入多少時間學工具。答案不同，下面各類網頁設計軟體對你的重要性排序就會完全不同。
設計稿工具：先把長相決定下來
這一類工具負責的是在真正開始做之前，把頁面長什麼樣子畫出來。它們產出的是圖，不是能上線的網站。
Figma 目前是業界最常見的選擇。它在瀏覽器裡就能跑，多人可以同時在同一個檔案上作業，留言直接標在元件旁邊，還能做出可以點擊的原型讓人預覽流程。對於要跟廠商來回討論的人特別友善，因為你只要收到一個連結就能看，不用裝任何東西。個人使用的免費方案對一般小型網站的專案通常已經夠用，檔案數量與協作人數到一定規模才會需要付費。
Adobe XD 的定位跟 Figma 接近，也是做介面設計與原型。如果你原本就在 Adobe 的生態裡作業，檔案要跟其他 Adobe 軟體互通會比較順。不過近年整體的社群資源與新專案採用度不如 Figma 活躍，新學的人現在多半會直接選 Figma。
Photoshop 常被誤以為是網頁設計軟體，它真正擅長的是影像處理：去背、修圖、調色、把攝影素材裁切成適合網站用的尺寸。用它來排整頁的網頁版面在今天已經不是主流做法，因為它的檔案不適合協作，也不容易產出可以點的原型。但它在素材處理這一段仍然沒有被取代。
Illustrator 處理的是向量圖形，也就是放大不會糊的那種。標誌、圖示、插畫、需要輸出成向量格式放進網站的元素，都是它的守備範圍。網站上的圖示如果用向量格式，在各種螢幕解析度下都清晰，檔案通常也小，這一點對行動裝置特別有意義。
- 只是要跟廠商溝通、看得懂稿：Figma 免費版就夠
- 要自己畫整套介面：Figma 為主，需要修圖再補 Photoshop
- 要做標誌與圖示：Illustrator
- 完全不打算碰視覺，直接用現成版型：這一類可以整個跳過
網站建置工具：真的把網站架起來的那一段
這一類才是把網站變成可以連上去的東西。它們彼此的差異主要在自由度與門檻的取捨。
WordPress 搭配 Elementor 是台灣中小企業官網最常見的組合。WordPress 本身是內容管理系統，負責文章、頁面、選單、使用者這些結構；Elementor 是視覺化的頁面編輯器，讓你用拖拉的方式排版而不用寫程式。這個組合的優點是資源極多、外掛生態完整、SEO 相關設定的可控性高、資料在自己手上想搬就搬。代價是你要自己處理主機、更新、備份與安全性，主題和外掛裝太多也會拖慢速度。
Wix 走的是另一個方向：主機、系統、編輯器全部包在一起，註冊就能開始拖拉，不用管技術細節。對完全沒有技術背景、網站規模不大、只想快點有一個像樣門面的人來說，它的上手速度確實最快。代價是自由度受限於平台提供的功能範圍，日後要搬到別的系統也相對麻煩。
Webflow 比較特別，它是給懂版面邏輯的人用的視覺化工具。你在畫面上拖拉，它背後生成的是結構相對乾淨的程式碼，對版面細節的控制力遠高於一般拖拉工具。學習曲線明顯比 Wix 陡，因為你還是得理解盒模型、排版邏輯這些概念，但做出來的成果精緻度高。適合設計師或有一定基礎、又不想從頭寫程式的人。
Shopify 是專門做電商的。金流、物流、庫存、訂單、退換貨這些流程它都內建處理好，你不用自己拼湊。如果你的網站主要目的就是賣東西，用專門的電商系統通常比在一般網站上硬加購物功能來得省事。但如果你的網站以內容和形象為主、商品只是附帶，那它就未必划算。
程式編輯器與切版工具
如果你會碰到程式碼，哪怕只是改一小段樣式，都會需要一個像樣的編輯器。Visual Studio Code 是目前的主流選擇，免費、輕量、擴充套件豐富，語法高亮、自動補全、即時預覽這些都能靠擴充補齊。改 WordPress 佈景的樣式檔、調整一段程式、比對兩個版本的差異，用它會比用記事本或後台的內建編輯框安全得多。
切版指的是把設計稿變成真正的網頁結構與樣式。這一段沒有什麼神奇的軟體，主要靠的是編輯器加上瀏覽器的開發者工具。開發者工具幾乎每個現代瀏覽器都內建，按下 F12 就能開，它讓你直接檢視頁面上每個元素套用了哪些樣式、即時修改看效果、模擬不同螢幕寬度。以使用頻率來說，它可能是整份清單裡最該學會的一個。
另外有一類是版本控制工具，用來記錄每一次改了什麼、出事的時候能退回去。如果你只是在後台改文字，用不到；但只要你開始動程式碼，早一點養成習慣會省掉很多痛苦。
測試與檢查工具
網站做好不等於做對。同一頁在不同瀏覽器、不同螢幕寬度、不同網路速度下的表現可能差很多，這些都需要實際看過。
跨瀏覽器的部分，最基本的做法是把手邊能裝的瀏覽器都裝起來各開一次。Chrome、Safari、Firefox、Edge 的算繪引擎不完全相同，偶爾會出現只在某一個瀏覽器發生的顯示問題。市面上也有雲端的跨瀏覽器測試服務，讓你在各種系統與版本組合上看畫面，適合有一定規模、需要正式驗收的專案。
行動裝置的部分，除了用開發者工具模擬各種寬度，真機一定要看。模擬器重現不了觸控手感、系統字型差異與實際的網址列行為。Google 提供的網頁體驗與行動裝置相關檢測工具也值得跑一遍，它會指出載入表現與基本可用性上的明顯問題。
- 版面檢查：瀏覽器開發者工具，拉動視窗寬度全程觀察
- 速度與體驗：Google 的頁面體驗檢測工具
- 連結與基本結構：能整站掃描的爬蟲類工具，抓斷掉的連結與缺漏的標題
- 真機：至少一支較新與一支較舊的手機
素材、字型與配色工具
網站的質感常常不是輸在版面，而是輸在素材。一張解析度不足或明顯是廉價素材庫的圖片，可以毀掉整頁的精緻度。
圖片素材方面，有提供免費授權的攝影素材網站，也有付費的素材庫。不論免費或付費，使用前務必確認授權範圍是否涵蓋商業使用，這一點在企業官網上出過事的案例不少。更好的做法是重要的頁面盡量用自己拍的實照，真實感是素材庫換不來的。
字型方面，Google Fonts 提供可自由使用的字型，中文字型的選擇雖然比英文少，但已有幾套品質不錯的開源選項。要注意中文字型檔案體積遠大於英文，載入一整套完整字重會影響速度，需要斟酌使用範圍。
配色方面，有不少線上工具能從一個主色推導出整組配色，或直接提供現成的配色方案。挑配色時除了好不好看，一定要順便檢查文字與背景的對比度是否足夠，這既是可讀性問題也是無障礙的基本要求。另外還有一類工具能把圖片壓縮到更小的體積而肉眼幾乎看不出差異，這對網站速度的幫助非常直接，建議納入固定流程。
免費與付費的分界在哪裡
大致可以這樣看：個人學習、單一小型網站、功能需求單純，免費方案通常撐得住。開始需要多人協作、需要更多檔案或專案、需要進階功能或商業授權、需要客服支援，就是付費的門檻。
比較值得花錢的地方通常是這幾項：主機與網域這種基礎建設不要省，省下來的錢會用速度和穩定性加倍還回去；商業授權該買就買，免得日後出事；以及你每天都會用到的那一兩個核心工具，付費版省下的時間往往超過費用本身。
比較不值得的，是一次訂閱一整套你其實只會用到一個功能的軟體包，或是為了「以後可能會用到」而買進階方案。工具的價值取決於使用頻率，先用免費版把流程跑過一輪，卡在哪裡再針對那一點升級，通常是比較務實的做法。
常見問題
我完全沒有設計底子，該從哪一個網頁設計軟體開始？
如果目標是快點有一個能用的網站，直接從建置工具開始，不要先學設計稿工具。用現成的版型把網站架起來、把內容填好，實際跑過一輪之後，你才會知道自己真正缺的是什麼。先學一大堆設計軟體再來架站，很容易在中途就放棄。
用拖拉式的工具做出來的網站，SEO 會比較差嗎？
不能一概而論。影響搜尋表現的主要還是內容品質、網站結構、頁面載入表現這些因素，工具本身只是決定了你能調整的空間有多大。有些平台對標題結構、網址格式、標記設定的可控性較低，遇到需要細調的情況會綁手綁腳；但如果需求單純，差別未必明顯。
Figma 和 Photoshop 我該學哪一個？
如果目的是畫網頁介面，選 Figma。Photoshop 的強項在影像處理，兩者其實不衝突也不互相取代。實務上很常見的分工是：用 Figma 排版面，需要修圖或處理照片時才開 Photoshop。
免費工具做出來的網站，看起來會不會很廉價？
不會，決定質感的是內容編排、圖片品質和版面的一致性，不是工具的價格。用免費工具搭配自己拍的好照片，往往比用付費工具配上隨便抓的素材圖好看很多。反過來說，工具再貴也救不了排版邏輯混亂的頁面。
網頁設計軟體的清單看起來很長，但真正要同時用到的其實不多。先確定自己是要自己做還是發案，再從那一類裡挑一個上手，把一個完整的網站從頭到尾跑過一次，後面需要補什麼工具自然就清楚了。工具是拿來解決問題的，不是拿來收集的。