NPO 看過來：從真實建站案例，學會驗收網站的 5 個檢查點

「網站做好了，但我怎麼知道做得好不好？」

這句話我從 NPO 夥伴口中聽過不下十次。秘書長看著廠商交付的網站，畫面是漂亮的，但心裡就是沒底——速度夠不夠快？手機能不能用？Google 找不找得到？捐款流程順不順？這些問題，不是「看起來漂亮」就能回答的。

今天我要用一個自己親手操刀的建站案例，帶你走一遍「驗收網站」的完整流程。這個案例不是 NPO，而是一家系統家具品牌——沐築系統家居。但別急著關掉，因為好網站的標準是跨產業通用的，而我想驗證的正是這件事：同一套建站方法論，能不能在不同產業都交出及格的成績單。

結果是可以的。而你讀完這篇之後，會帶走一份可以直接拿去用的 NPO 專用驗收 Checklist。

本文是NPO 官網建設完整指南的延伸篇，聚焦在「網站做完之後，怎麼確認品質」這個多數 NPO 管理者最沒把握的環節。

為什麼要拿一個「非 NPO」的案例來說？

你可能會問：一個社福科技顧問，為什麼會去做系統家具的網站？

答案很直接：我想用不同產業的專案來驗證我的建站方法論是否真的可靠。如果同一套流程——需求訪談、資訊架構規劃、效能優化、SEO 基礎建設——只在 NPO 場域有效，那它就不是方法論，只是經驗。但如果它換一個產業照樣能交出高品質的成果，那回過頭來服務 NPO 夥伴時，我就更有底氣說：這套做法是經得起考驗的。

沐築系統家居是一家位於台北的系統家具品牌，他們需要一個從零開始的品牌官網——展示作品、傳達品牌調性、讓潛在客戶能快速聯繫。這個需求結構，跟很多 NPO「需要一個能展示服務成果、建立信任、讓捐款人能快速行動」的需求，本質上是一樣的。

所以接下來，我不會跟你聊程式碼，而是用這個真實案例，教你看懂一個網站到底做得好不好。

30 天從零到上線——每一週都在做什麼？

「一個月做得出一個網站嗎？」這是我最常被問的問題之一。

答案是：**可以，但前提是第一階段只做核心功能，不堆砌用不到的頁面。**沐築這個案子的時程安排如下：

每一週結束時，都有一個明確的「交付物」可以驗收。這很重要——如果你的廠商跟你說「我們會做好再給你看」，中間完全沒有階段性的檢查點，那你就是在賭運氣。

驗收網站的 5 個檢查點——怎麼看門道？

接下來是這篇文章的核心。我會用沐築的實際成果，示範每一個檢查點「做到位」長什麼樣子，然後告訴你怎麼把同樣的標準套用到你自己的 NPO 網站上。

檢查點一：手機版打開來——是不是真的好用？

現在超過 70% 的網站流量來自手機。如果你的網站在手機上需要放大縮小才能看清文字、按鈕小到點不到、或者選單打不開——那這個網站基本上是不及格的。

怎麼測？ 拿起你的手機，打開網站，試著完成「你最希望訪客做的那個動作」。NPO 的話，就是完成一次捐款或填一次志工報名表。如果任何一個步驟卡住了，就是問題。

沐築的案例中，我們採用 Mobile-First 設計——先做手機版，再往桌面版擴展。手機版的導航選單、作品圖片瀏覽、LINE 聯絡按鈕，都能單手流暢操作。

NPO 對照：你的「立即捐款」按鈕在手機上夠不夠大？捐款表單在手機上填起來順不順？如果訪客需要用兩隻手指放大畫面才能填完表，你每天都在流失潛在捐款人。

檢查點二：載入速度——3 秒內打得開嗎？

根據 Google 的研究，頁面載入時間從 1 秒增加到 3 秒，跳出率（訪客進來就離開的比率）會提升 32%。對 NPO 來說，每一個跳出的訪客都可能是一位錯過的捐款人。

怎麼測？ 到 Google PageSpeed Insights 輸入你的網址，看行動版的效能分數。90 分以上是優秀，50-89 分需要改善，50 分以下是警訊。

沐築的網站在 PageSpeed Insights 上拿到了高分，關鍵做法包括：所有圖片都經過壓縮並轉為 WebP 格式、使用現代化的靜態網站架構減少伺服器回應時間、以及妥善設定瀏覽器快取策略。

NPO 對照：很多 NPO 網站速度慢，不是因為主機差，而是因為首頁放了十幾張未壓縮的大圖、或者裝了太多用不到的外掛套件。請你的廠商檢查這兩件事，通常就能看到明顯改善。

檢查點三：SEO 基礎——Google 找不找得到你？

一個網站再漂亮，如果 Google 搜不到，就等於不存在。SEO（搜尋引擎最佳化）聽起來很技術，但對管理者來說，只需要確認三件事：

1. Google 搜尋你的組織名稱，第一頁會出現你的官網嗎？ 如果連搜組織名稱都找不到你，代表網站的基礎 SEO 設定有嚴重問題。
2. 每個頁面有沒有自己的標題和說明文字？ 這就像每本書都要有書名和簡介，Google 才知道這個頁面在講什麼。
3. 網站有沒有告訴 Google「我是誰」？ 這叫做結構化資料，用來讓搜尋引擎精準理解你的組織類型、地址、聯絡方式。

沐築的網站設定了完整的結構化資料，告訴 Google「這是一家位於台北的系統家具品牌，營業時間是幾點到幾點，可以透過這支電話聯繫」。這讓它在搜尋結果中能直接顯示營業資訊，而不只是一個光禿禿的連結。

NPO 對照：你的網站有沒有告訴 Google「我們是一個非營利組織」？有沒有標示你們的服務項目和聯絡方式？如果沒有，請你的廠商設定 NonprofitOrganization 結構化資料——這是免費的，而且效果立竿見影。關於 NPO 網站的 SEO 基礎設定，可以參考NPO 網站 SEO 入門指南。

檢查點四：聯絡入口——訪客能不能一鍵找到你？

訪客在你的網站上找到感興趣的內容之後，下一步一定是「我想聯繫」。如果這個步驟需要翻三個頁面才能找到電話號碼或 Email，你就是在製造障礙。

怎麼測？ 請一個完全不認識你的組織的朋友，打開你的網站，計時他找到「聯絡方式」或「捐款入口」需要幾秒。超過 10 秒就是太久了。

沐築的網站在每個頁面的右下角都有一個 LINE 浮動按鈕，訪客隨時都能一鍵聯繫。不需要找、不需要翻頁、不需要記電話號碼。

NPO 對照：你的「捐款」按鈕在手機版的哪裡？是不是要滑到頁面最底部才看得到？建議把「立即捐款」或「成為志工」做成固定在畫面底部或右下角的浮動按鈕——讓訪客在任何時刻都能行動，不要讓他的「衝動」冷掉。

檢查點五：無障礙設計——每個人都能用嗎？

對於服務弱勢族群的社福機構來說，網站的無障礙設計不只是法規要求，更是你正在服務的價值觀的延伸。如果你的組織致力於讓每個人都能被接住，那你的網站也應該讓每個人都能使用。

怎麼測？ 最簡單的方式：試試看只用鍵盤（不用滑鼠）能不能從首頁一路操作到完成捐款。如果做不到，代表視障者使用螢幕閱讀器時也無法操作你的網站。

沐築的網站雖然是商業品牌，我們依然加入了基礎的無障礙設計：Skip Navigation 讓鍵盤使用者可以跳過導航直接到主內容、所有互動元素都有明確的 aria-label 標示、圖片都有替代文字描述。

NPO 對照：社福機構在申請政府補助時，網站無障礙合規往往是審查項目之一。如果你的網站還沒做到基本的無障礙設計，現在開始規劃不算晚。完整的無障礙標章申請流程，請參考無障礙標章申請全攻略。

NPO 專用驗收 Checklist——可以直接拿去用嗎？

把前面五個檢查點，加上 NPO 獨有的需求，我整理成一份你可以直接印出來、帶去驗收會議的 Checklist。NPO 專用驗收清單意指一份針對非營利組織特殊需求（如捐款流程、收據發送、財務揭露、無障礙合規等）所設計的網站驗收檢查表，因為一般的網站驗收標準並未涵蓋這些社福機構的關鍵需求。

基礎品質（所有網站都該做到）

NPO 專屬項目

這個案例跟 NPO 架站有什麼關係？

如果你讀到這裡，可能已經發現：沐築做的事情，跟 NPO 需要做的事情，骨子裡是一樣的。讓我做一個對照：

這個對照表想告訴你的是：你不需要懂技術，但你需要知道怎麼驗收。 就像你不需要會蓋房子，但你看得出來牆壁有沒有歪、門能不能關。網站也是一樣——用這篇文章教你的五個檢查點，你就有能力判斷廠商交給你的東西到底及不及格。

如果你正在規劃建站或改版，建議先讀完我們的NPO 官網建設完整指南搞清楚需求，再用7 道驗證問題篩選廠商，最後拿這篇文章的 Checklist 去驗收——這三步走完，你的建站專案就不太容易踩坑了。

這是我過去協助社福機構進行網站建置與數位轉型的實務經驗總結。如果你想進一步了解我們的NPO 官網建置服務，歡迎參考服務頁面的詳細說明。

常見問題 (FAQ)

參考文獻

• Google Web Vitals — 網站體驗核心指標官方文件
• Schema.org — NonprofitOrganization 結構化資料定義
• W3C — WCAG 2.2 快速參考指南
• Think with Google — 行動頁面速度對跳出率影響的研究報告