網頁設計關心單一頁面的閱讀與操作；網站設計則處理整站目標、頁面關係、功能、內容管理、技術、安全和維護。若只把首頁做得漂亮，卻沒有清楚導覽、可靠後台與更新責任，網站上線後很快就會失效。
第一步不是畫畫面，而是定義網站任務
常見網站目標包括品牌介紹、名單蒐集、線上銷售、預約、會員服務、內容出版、活動報名與內部入口。不同目標會改變網站架構和預算。
需求訪談應回答：
- 主要使用者有哪些？
- 每類使用者最常完成什麼任務？
- 公司希望網站帶來什麼結果？
- 哪些內容由誰提供與更新？
- 需要串接付款、物流、會員、CRM或其他系統嗎？
- 有哪些法規、資安、語言或權限限制？
- 上線後由誰維護，多久檢查一次？
「做一個有質感的網站」不是完整需求，因為無法據此判斷頁面、功能或完成標準。質感可以是視覺方向，網站任務仍要能被具體描述。
資訊架構決定網站是否找得到內容
資訊架構是網站的分類、命名、層級與導覽方式。它通常以網站地圖呈現，但不只是畫一棵頁面樹。
規劃時要從使用者任務出發。企業內部習慣將產品分成事業部，顧客卻可能依用途、問題或預算尋找。若網站完全照組織架構分類，內部人員覺得合理，外部訪客卻不知道該點哪裡。
好的導覽應做到：
- 名稱使用讀者能理解的語言。
- 最常用功能不需穿過太多層。
- 手機和桌面維持相同概念。
- 使用者知道自己目前在哪裡。
- 搜尋、篩選和分類彼此配合。
- 沒有內容的分類不為湊數而存在。
大型網站可以使用卡片分類、站內搜尋、麵包屑與篩選器，但工具越多不代表越容易找。要以真實任務測試，例如請第一次造訪的人找出退貨方式、某項服務價格或特定年份文件。
先建立內容模型，再建立頁面模板
網站內容不只是文章。產品可能包含名稱、價格、圖片、規格、庫存、適用對象和下載檔案；活動有日期、地點、主辦人和報名狀態；服務頁則有流程、限制、案例與聯絡方式。
內容模型先定義這些欄位和關係，再決定畫面如何呈現。這樣可以讓同一份資料出現在列表、搜尋結果和詳細頁，而不需多次手動複製。
模板則處理重複頁型，例如文章、產品、案例和據點。模板要有一致結構，也要容納真實內容長度。若每篇文章都需要工程師改HTML，或標題一長就把按鈕推出版面，代表內容模型與模板沒有設計完整。
設計系統讓整站一致，但不讓所有頁面一樣
設計系統通常包括色彩、字體、間距、圖示、按鈕、表單、提示、卡片、導覽與版面規則。它能降低重複決策，讓新頁面沿用成熟元件，也方便之後修改品牌或無障礙問題。
一致不等於每頁複製同一套區塊。首頁、商品列表、文章、後台與結帳流程任務不同，應使用適合的資訊密度和元件。設計系統提供共同語言，頁面仍要依內容選擇組合。
元件至少要定義正常、滑過、焦點、停用、載入、成功與錯誤狀態。若設計稿只有最漂亮的完成畫面，開發人員就必須自行猜測其他情況。
前台、後台與CMS怎麼選？
前台是訪客看到並操作的介面；後台處理資料、權限、訂單、內容與商業邏輯；CMS則讓非工程人員管理文章、產品或頁面。
選擇現成CMS、網站平台或客製開發時，不要只看第一年建置費。應比較：
- 內容更新是否容易。
- 功能能否滿足未來兩三年的需求。
- 權限能否區分編輯、審核和管理者。
- 資料是否容易匯出與搬遷。
- 外掛、版本和安全更新由誰負責。
- 多語、搜尋、表單與第三方串接是否穩定。
- 客製程度提高後，維護成本如何變化。
企業介紹站不一定需要複雜框架；會員平台也不適合硬塞進只擅長靜態頁面的工具。技術選擇要跟需求、團隊能力和維護責任一致。
響應式與無障礙要在整站層級處理
響應式設計不只是首頁有手機版。導覽、搜尋、表格、登入、彈窗、結帳和後台操作都要在不同尺寸下測試。
無障礙也不能等完工後才修。W3C的WCAG 2.2依可感知、可操作、可理解與穩健四原則建立要求。網站設計階段就應處理正確HTML結構、鍵盤操作、焦點、色彩對比、圖片替代文字、表單標籤、字幕與錯誤提示。
採用語意HTML可同時改善可維護性、鍵盤與輔助科技支援。無障礙不是另外做一個簡化版網站，而是讓同一套內容與功能能被更多人使用。
效能不是上線前才壓縮圖片
網站速度會受到主機、資料庫、程式、圖片、字型、第三方追蹤碼、廣告和快取策略影響。只在最後壓縮首頁圖片，無法解決整體架構問題。
Core Web Vitals目前關注LCP、INP與CLS：主要內容載入、互動回應與版面穩定。良好門檻分別是2.5秒以內、200毫秒以內及0.1以下，並以第75百分位評估真實造訪。
設計階段可以預防許多效能問題：避免無目的的大型影片、自動播放與多套字型；替圖片和廣告預留尺寸；限制第三方腳本；讓重要內容不必等待大量JavaScript才出現。開發階段再搭配壓縮、快取、延遲載入與伺服器優化。
安全和隱私是網站功能的一部分
網站收集姓名、電話、信箱、登入資料或付款資訊，就必須在架構中納入安全與資料治理，而不是只裝SSL憑證就結束。
網站安全最基本的原則，是不直接信任任何來自瀏覽器的資料。網址參數、表單、Cookie與上傳檔案都需要在伺服器端驗證和清理。基本工作包括：
- 全站使用HTTPS與適當安全標頭。
- 保持系統、框架和外掛更新。
- 使用強密碼、適當驗證和最小權限。
- 限制檔案類型、大小與儲存位置。
- 對輸入做驗證、輸出編碼並防止注入。
- 定期備份，並真的測試還原。
- 只收集業務需要的資料，訂定保存與刪除方式。
- 記錄重要管理操作與異常登入。
Content Security Policy可以限制瀏覽器允許載入的程式與資源，降低跨站腳本和點擊劫持等風險，但它是縱深防禦，不可取代輸入清理與安全程式設計。OWASP Top Ten則可作為團隊盤點常見Web應用風險的起點。
完整網站設計流程
第一階段：探索與盤點。確認目標、使用者、既有內容、系統、數據與限制。
第二階段：架構與規格。建立網站地圖、內容模型、功能流程、角色權限及驗收標準。
第三階段：線框與原型。先測試導覽和任務流程，再投入高成本視覺與開發。
第四階段：視覺與設計系統。定義品牌語言、元件、狀態、手機與桌面版。
第五階段：開發與內容建置。前後台、CMS、第三方串接與真實內容同步進行。
第六階段：測試。涵蓋功能、瀏覽器、裝置、無障礙、速度、安全、權限、表單通知與資料正確性。
第七階段：上線。準備網域、DNS、HTTPS、轉址、備份、監測和回復方案，不在最後一刻才搬資料。
第八階段：維護。持續更新內容與軟體、查看錯誤、修補安全問題，並以使用資料改善流程。
網站改版最容易漏掉的事
改版不是把舊內容搬進新外觀。最常見的風險包括舊網址失效、搜尋流量消失、表單沒有寄信、分析代碼遺漏、圖片授權不明、後台權限過大，以及只有首頁完成，內頁仍沿用臨時樣式。
上線前應建立URL對照表，為有替代頁的舊網址設定永久轉址；確認標題、描述、Canonical、網站地圖和索引設定；抽查下載檔、搜尋、篩選、登入與通知；也要確認分析事件不是「有裝代碼」而是實際收到正確資料。
委託網站設計公司時要問什麼？
- 報價包含哪些頁型與功能，而不是只寫頁數。
- 內容、攝影、翻譯與資料輸入由誰負責。
- 手機版、無障礙和瀏覽器支援範圍。
- 網域、主機、原始碼、設計稿和帳號歸屬。
- 第三方服務與外掛的年度費用。
- 安全更新、備份、監測和故障處理由誰負責。
- 需求變更如何估價，驗收以什麼條件判斷。
- 合作結束後能否匯出內容與資料。
不要只比較首頁視覺和最低價格。網站成本包含規劃、內容、程式、測試、搬遷、授權、主機與長期維護。前期省略的工作，常在上線後以更高成本補回。
結語
網站是持續營運的系統，不是一次性交付的海報。好的網站設計把使用者任務、企業目標、內容、技術和維護放在同一張圖上。視覺很重要，但它必須建立在清楚架構、可管理內容、穩定功能、安全資料與真實驗收之上。
上線不是結束，而是網站開始接觸真實使用者的第一天。能被持續更新、觀察、修正和擴充的網站，才會隨著組織成長，而不是在完成後逐漸變成沒人敢碰的舊系統。
資料來源
- W3C Web Accessibility Initiative，WCAG 2 Overview
- web.dev，How the Core Web Vitals metrics thresholds were defined
- OWASP Foundation，OWASP Top 10:2025
- OWASP Foundation，OWASP Secure Headers Project
- Google Search Central，Redirects and Google Search
