準備架站？ 2026 製作網站前必看的網頁設計全攻略

決定要做一個網站之後，真正讓人卡住的往往不是報價單上的數字，而是接下來完全不知道自己該做什麼。要先想好幾頁，還是先找人畫版面？文案自己寫，還是等對方要？網域申請下來，又該放在誰的帳號底下？這些問題平常沒人一次講完，等到真的卡關，才發現自己漏掉了一件早該決定的事。

其實整件事並不是一團模糊的黑箱，而是有清楚的先後順序。先決定這個網站要讓誰做什麼事，再決定範圍與流程，接著才輪到版面、文字、速度這些看得到的東西，最後才是上線與追蹤。順序對了，每個決定只需要做一次；順序錯了，前面已經定案的東西，後面常常要打掉重練。

這篇要把這整趟路從頭走一次：網頁設計實際在做哪些事、你要準備什麼、每個階段該確認什麼。接下來，先從最基本的問題講起，網頁設計實際在做哪些事。

網頁設計在設計什麼？畫面只是其中一段，不是全部

「網頁設計」這四個字實際包含哪些工作、你要點頭的又是哪幾件事，很少有人一次講清楚。這幾個詞各自在講不同層的事，先拆開，後面每一章要你做的決定才有個依附的架子。

網頁設計管一頁，網站設計管整站，網頁開發管打不打得開

這幾個詞在台灣沒有正式的法定定義，底下講的是實務上大家怎麼用。網頁設計交付的是畫面長什麼樣、按下去會怎樣，拿到手上通常是一張一張的頁面設計圖，還不能連上網。網站設計交付的是整個網站要有哪些東西，哪幾頁、彼此怎麼連，給出來的是頁面清單與分類規劃，不是圖。白話一點，網頁設計管一頁，網站設計管整站，對方講「網站設計」時，通常在跟你談範圍與頁數，不是好不好看。網頁開發交付的是瀏覽器真的打得開的東西，再往下拆會聽到前端（你看得到、按得到的部分）和後端（資料存在哪裡、表單送到誰的信箱）。

另外兩個常聽到的詞，UI 設計管畫面上會看到、會按到的元件；UX 設計管整段路順不順，從搜尋到你、看懂你在做什麼，到決定要不要留下聯絡方式。這兩件事中小企業案子常由同一人做，但討論時分開講，才不會把「按鈕太小」跟「整個流程走不通」混成同一個問題。

對方講到某個詞，其實是在告訴你他正在談哪一層。你不需要會做這些事，但要知道哪些內容只有你拿得出來，你賣什麼、賣給誰、手上有什麼照片與文字，沒有人能代你決定。

網站是四層疊起來的，少一層就打不開，或打開了看不懂

一個網站是四件東西疊起來的：內容與資訊架構、介面與視覺、前端實作、主機與網域。四層都到位才叫一個網站，少了任何一層，網站就打不開，或打得開卻沒人看得懂。

第一層，內容與資訊架構，回答要說什麼、怎麼排。內容是文字、照片、案例；資訊架構是這些東西怎麼分類、放在第幾層。這一層是你的主場，沒辦法外包乾淨，你賣什麼、跟別人差在哪，只有你知道，連公部門在訂網站規範時，都把釐清網站定位與服務對象需求擺在最前面，不是視覺排第一。

第二層，介面與視覺，回答長什麼樣、怎麼操作，由設計端主導但要你點頭。第三層，前端實作，把稿子變成打得開的網站，對多數中小企業來說其實是選一套現成的後台系統，不是從零寫程式，有沒有後台（不用碰程式碼就能自己改文字換照片的管理介面），決定你上線後改不改得動。第四層，主機與網域，回答網站放在哪、叫什麼名字，這一層是租來的、會過期，帳號要掛在自己名下（後面有一節專講）。

前兩層是你要決定的，後兩層是交付項，做完驗收就好，順序不能倒著走，內容決定版位，版位決定畫面，倒著做就會出現「這裡還缺三行字」的填空稿。這四層裡最常空著的是兩格，文字和照片由誰產出、網域跟主機在誰的帳號底下，空著，時程一定會拖。

好看只管到不被秒關，讓人決定問你的是內容順序

好看有用，但只管到「不被立刻關掉」。人對一個網頁好不好看的第一印象，其實在短短五十毫秒內就會形成，畫面雜亂真的會讓人在看懂內容之前就離開，這是 Lindgaard 等人 2006 年測出來的結果。但決定「會不會被選中」的不是好看，外觀主要預測的是淘汰，真正預測選擇的是資訊的可信度、以及內容跟自己切不切身，這是 Sillence 等人 2004 年連續四週觀察十五位使用者後得到的發現。翻成做網站的話，視覺負責讓人不要秒關，內容與順序負責讓人決定問你，把預算全押在前者，後者不會自己長出來。

同樣三段文字，你是誰、你解決什麼、下一步怎麼聯絡，排列順序不同，讀者的反應完全不一樣，順序是設計決策，不是文案細節，政府自己對網站設計的定義就是「引導使用者完成操作」，不是好看。所以看設計稿該問的不是好不好看，而是客人會不會照你想的順序讀到東西。

驗證方式很簡單，把顏色和圖片全部拿掉，只剩黑字白底，看第一段說不說得出你在賣什麼。讀不出來，就不是美術問題，是內容順序問題，換配色、換照片都救不了。

有社群和 AI，還需要官網嗎？門前多了一種訪客，是機器

官網常被比喻成公司的門面，一棟大樓的招牌、櫃檯，原本只服務走進來的人。這個比喻現在要多補一句，這扇門前面多了一種訪客，不是人，是機器。搜尋引擎與 AI 助理背後的程式每天都在讀網頁，讀完之後還會把讀到的東西講給下一個問的人聽，所以門面這件事，現在同時要給人看，也要給機器讀懂。過去做網站的目標是被點進來，現在多了一個目標，就算沒被點，也要能被理解、被當成答案的依據。

廣告是租來的曝光，社群是借來的觸及，官網是自己的地

三者的分工一句話就能定位：廣告是租來的曝光，停了就沒有；社群是借來的觸及，規則不是你訂的；官網是自己的地，網址、內容、來訪資料都在你名下。三個都要做，但不能只有前兩個。

粉專累積的粉絲名單你帶不走，拿不到聯絡方式，平台哪天把觸及調低、把帳號限制住，你都只能配合。官網來的一筆詢問，姓名電話信箱會直接進到你的信箱，那份名單才是你的，所以官網上至少要有一個能送出的表單。平台限制內容曝光是天天在發生的事，歐盟已經要求各大平台建立透明度資料庫，公開申報每一次下架或限制曝光的理由，資料庫裡累計收到的申報決定已超過三十億筆，四成多完全由自動化系統做成，沒有人工介入。

社群負責被看見與日常對話，官網放社群放不下的東西，完整的服務說明、報價怎麼算、案例的前因後果。官網不是社群的備份，貼文原封不動搬上去只是把看不懂前因後果的片段丟在自己的地上，官網內容要能單獨看懂，因為看到它的人和機器通常沒看過你之前的貼文。你要決定的是，社群貼文最後要把人帶去官網的哪一頁，不是首頁，是那一頁。

AI 的答案要有出處，沒有讀得到的內容就進不了答案

AI 不是憑記憶回答，而是先去搜尋索引裡找相關的網頁，讀完後把內容組成回覆，再把那些網頁掛成佐證連結，說白了就是答案要有出處。對你來說意義很直接，沒有一頁可以被讀到的內容，你就不會出現在任何一個答案裡。

官網的角色因此從「被點進來」變成「被讀進去」，只要被引用，公司名與網址就會出現在答案旁邊，那本身就是帶著背書性質的曝光。系統回答問題常把一個問題拆成好幾個子問題同時搜尋，答案可能來自你網站的不同頁面，所以每一頁都要能獨立看懂，不能只有首頁講得完整。

有資格被引用是有明確條件的，不是玄學：網頁要已經被收錄、符合顯示摘要的資格，而且系統讀得到、頁面回應正常、裡面有真的可以讀的文字內容，不是整頁都是圖片。整頁做成一張圖的版面設計，會直接讓這一頁失去被引用的資格。台灣已經在用的搜尋 AI 功能就支援繁體中文，這不是還沒發生的事。

實體資訊在這時候突然變得重要，AI 回答會視情況帶入商家的在地資訊，拿去回答的往往是你登記在商家檔案、以及寫在官網上的那份資料。公司全名、電話、地址、營業時間要準備成同一份定稿，官網跟登記在其他地方的商家資料共用同一份，不要各寫各的。名稱要跟招牌、對外文件一致，不一致輕則被要求更正，重則整筆商家資訊被下架，這是開工前就該定案的事。

為了 AI 不必做的三件事：說明檔、切碎內容、重寫一遍

有三件事 Google 在它給網站經營者的說明文件裡已經明講不必做，知道了可以省下不少力氣。第一，不必放一份宣稱是給 AI 讀的特殊說明檔，Google 搜尋本身不會使用這些東西，放了也不會對曝光或排名有幫助。第二，不必把內容切成一小塊一小塊，系統能理解一頁裡多個主題的細微差異，頁面長度沒有理想的標準值。第三，不必為了 AI 重寫內容、把各種講法都塞進去，系統能理解同義詞與使用者實際想問什麼，這份力氣不如拿去寫只有你講得出來的東西。

打完這三個迷思，正解其實很樸素，可以被機器讀懂靠的是用對的標籤裝對的內容，加上一套有層次的標題，大標底下才是中標，不能因為想讓字變大就跳著用。

結構化資料也順便定位一下，它是寫給機器看的補充說明，不改變畫面外觀；AI 搜尋不需要靠它才看得懂，但它仍是搜尋結果上那些帶星等、帶圖的特殊版位的入場券。後面有一節專講，這裡你只要決定它有沒有排進交付清單、由誰負責。

點擊變少了，那該看什麼？詢問單送出幾次、電話被點幾次

從有 AI 摘要的搜尋結果點進來的人雖然變少，但停留與投入的品質比較高。過度專注在點擊次數，反而抓不到真正該優化的方向，應該改看網站上的轉換指標，成交、訂閱，或商家資訊被查詢的次數。

轉換指標就是有人在你網站上做了你想要他做的事的次數，詢問單送出幾次、電話按鈕被點幾次，這些事得先在網站上數得到，之後才有得看。你要決定的是這個網站上算成功的動作是哪一個，通常只有一個，答不出來，後面所有版面決策都沒有依據。這個決定會回頭改設計，最好在開工前就定案：成功動作是打電話，電話要在手機上一按就撥；是填表單，表單要短到填得完，送出後要有明確的確認畫面。

畫稿之前先回答這 8 個問題，答完就是一份需求書

這八題的順序本身就是答案的一部分，前面兩題沒定，後面幾題會反覆改。把答案寫下來，這份清單就是你的需求書起點。

前兩題定方向：這個網站給誰用、要辦成什麼事、要幾頁說完

① 這個網站要讓誰、做什麼事？ 這一題要寫成一句完整的話，讓某一種人，能夠完成某一件具體的事。「讓餐飲店老闆看到我們的案例，然後填詢問表單」是合格答案，「提升品牌形象」不是，因為它無法判斷任何一個頁面該不該做。答案落在「讓人認識我們」，走向以案例與聯絡方式為主的形象網站；落在「讓人在線上完成某個動作」，走向有流程的網站，兩者的頁數與時程不是同一個量級。你要決定的是這一句話，寫下來，之後每一頁都拿它對照。

② 這件事需要幾個頁面才說得完？ 網站的一頁是一個獨立的網址，不是螢幕上的一個畫面，再長的頁面也只算一頁。首頁、關於我們、聯絡我們、隱私權政策、服務條款這五頁是打底配備，再加上每一項會被單獨比較詢問的服務各算一頁，案例作品一個列表頁，持續發文再加一個文章列表頁。該不該獨立成一頁，問三句就好：會不會有人單獨拿去搜尋、塞進別頁會不會讓那頁失焦、之後會不會單獨拿去投廣告，有一題答會就值得有自己的網址，但也別為了頁數灌水。一頁式網站把內容排在同一個網址上，靠捲動與選單跳段瀏覽，只推一件事、內容量小、流量主要來自社群或廣告連結才適合，服務項目三種以上就該走多頁式。最常被忽略的正解是兩個都要，多頁式官網搭配活動用的一頁式頁面。先寫得出八到十二個頁面名稱，你就有了一張可以拿去開工的頁面清單。

中間三題定功能：收不收錢、多久更新一次、內容由誰寫

③ 需不需要線上交易或線上預約？ 兩個都不要的話，頁面以說明加詢問表單為主；要預約不收款，要處理可預約時段、避免重複預約、允許取消改期；要線上收款，是電商，多出商品列表、購物車、結帳、退換貨說明，還要串接收款與物流。只要開始蒐集個資就有明確的告知義務，連預約表單都算，「有表單」代表要有一份對得上實際內容的隱私權政策，有線上交易，聯絡資訊也要寫齊。你要決定的是這個網站要不要有一個會扣款或佔時段的按鈕，答要，就要同時決定誰處理訂單、誰回覆預約、退款怎麼辦。

④ 內容多久更新一次？ 後台是一個你自己登入、不用寫程式就能改文字換圖片、發文章的管理畫面。一年動一兩次，只需要改文字換圖的權限；每個月有新消息或案例，需要列表頁加內頁的內容型別；每週發文靠內容帶搜尋流量，則需要分類、標籤與內部連結規則。新內容也要有地方連得到，發了文章卻沒有頁面連到它，等於白發。誰會登入後台、能改哪些東西，這件事現在就要有答案，答案是大概沒人會登入，就不要做部落格。

⑤ 內容由誰產出？ 這一題決定的是時程風險，延期最常見的原因不是改稿，是文字沒到位。自己寫，費用低但要先排時間表；請人寫，時程穩但要給素材與訪談時間；沿用舊網站文字最省事也最容易出錯，價格與聯絡方式都要重新核對。不必一開始就寫全文，先為每一頁寫下一句訪客看完要能回答什麼，你就有了整站的內容大綱。每一頁的負責人與交件日，是這一題要交出的答案。

最後三題收範圍：哪些延後、帳號在誰名下、要不要多語系

⑥ 第一版哪些先不做？ 分界線很清楚，可以延後的是功能，不能延後的是結構。會員系統、線上金流、報名系統、外語版本可以延後；網址規則、選單結構、要不要多語系不能延後，網址一改，累積的搜尋成績會先掉一段。第一版只保留讓訪客從進站到送出詢問這條最短路徑上的頁面，其餘列進第二版清單，第二版那欄要有東西，不是空白。

⑦ 誰握有網域、主機、後台帳號？ 這一題是資產盤點，網站跟營業登記一樣是資產，要分四處登記在公司名下。網域是使用權，不是買斷，誰是登記的那個名字，這個網域就算誰的；快到期的通知只會寄到當初留的信箱，要用公司長期收得到的職務型信箱。沒繳費會先停用一段時間，補繳還能救回來，再拖下去就會被釋出、任何人都能重新申請，網域最常出事是到期沒繳，不是被搶。主機是網站檔案存放的空間，控制台帳號在誰手上，決定誰能備份、救回網站。後台要確認公司有一組最高權限的管理員帳號，不是只有一組能改文章的帳號。DNS 是把網域指向主機的指路表，握有它就能把網站和信箱指到別的地方。你要決定的是這四個入口分別用哪個信箱建立、密碼誰保管，再把網域到期日寫進行事曆。

⑧ 要不要做多語系？ 判準只有一個，不是公司規模，成交對象裡有沒有讀不懂中文的、佔多少。在地服務業優先度低，觀光旅宿、跨境電商、面向國際客戶的品牌才是剛需。這一題要在架構階段就決定，因為它改的是網址結構與選單層級，每種語言要有專屬網址，判斷頁面語言看的是實際內容，只把首頁翻譯等於其餘頁面沒有外文版。上線後才改，就是全站網址與選單重排一次。外語受眾比例低但仍存在時，折衷做法是第一版先做一頁完整的外語簡介頁，並把網址結構定成日後容易擴充的形式。

網頁設計流程有哪幾個階段？四個階段，一次只定案一種事

為什麼要分階段？改稿貴在改的時間點，不在改的次數

網頁設計不是把一張圖畫得漂亮就結束，而是一連串定案動作，每個階段把一批問題釘死，下一個階段才能往前走。你的角色不是最後才評審畫面好不好看，而是依序做決定。分階段的理由很單純，每個階段只解決一種爭議，整理頁面吵「要有哪些頁」，排內容吵「先說哪一句」，上色才吵「長什麼樣」，混在同一次討論裡就會各說各話。

改稿成本失控，幾乎都是修改發生在錯的時間點，不是修改次數多。已經在看上色稿才提出「加一個服務分類」，選單要重排、首頁區塊要重切，一句話會擴散成好幾份檔案的重做，NASA 一份跨專案錯誤成本研究也量過這個現象，錯誤拖到上線後才修，代價可能是數十倍以上。網站規模小得多，但方向共通，早改一句話跟晚改同一句話，不是同一個量級的代價。

所以「定案」要有具體形式，不能只靠口頭說好：每個階段結束時把確認版本存一份、寫上日期，還沒決定的另外列清單，少了這一步，「我以為那時候講好了」多半會在兩個月後變成爭執。

四個階段各定案一件事：頁面、內容位置、視覺規則、原型

網頁設計大致走過四個階段：先定頁面，再排內容，接著上色定稿，最後做出能點的原型。

先定頁面，這個階段業界叫「網站地圖」，就是網站有哪些頁、誰是誰的下層，整理成一張清單或樹狀圖，格子裡放頁面名稱。這步定案頁面總數與層級、選單會出現哪幾項，頁數就是報價與時程的地基。你要交出的是頁面清單，每頁旁邊寫一句「這頁要讓訪客知道什麼」，選單項目若拖到後期才增減，等於全站頁首重做一次。

接著排每頁的內容，這個階段叫「線框圖」，畫成去掉顏色的灰階草圖，方框標出「這裡是標題、這裡是服務卡、這裡是詢問按鈕」，只管內容位置，不管好不好看。英國政府的服務手冊建議早期忍住上色的衝動，一上色大家立刻滑向「藍色好不好看」，該定的「第一句話要說什麼」反而沒人談。你要交出各頁文案初稿（怎麼準備，後面有一節專講），若到上色階段才發現少一個區塊，等於整頁重排。

再來是「視覺稿」，套上品牌色、字體、實際照片，做出上線後真正會長的樣子，只是還不能點，定案的是一整套視覺規則，之後每一頁都照這套規則做出來。看稿子時該問的是「三秒看得出這頁在講什麼嗎」，不是喜不喜歡。你要交出 LOGO 原始向量檔、品牌色碼，以及寫得下來的明確回覆，規則沒收斂，網站看起來會像好幾個網站硬拼在一起。

最後是能點的原型，把按鈕串起來，點「聯絡我們」真的會跳頁，但背後沒有資料庫，它只演流程，不辦事，定案流程走不走得通、手機按鈕按不按得到。英國政府的服務手冊講得很直接，投入建置任何東西之前必須先做原型，但也講得很硬，原型工具不具備正式服務需要的安全性與效能，是拿來丟掉的，丟得起才敢改。

四個階段加起來，中小型形象站常見落在一個半月到三個月，拉長時程的通常是文案到位與你回覆確認的速度，不是畫圖速度。階段之間可以來回，但不能跳號，跳過的那一格最後要用好幾倍力氣還回來。

原型能點就找人測，4 到 5 個人找得出八成問題

原型能點之後不必等上線，就能找幾個不熟悉這個網站的人做一件具體的事，例如「送出詢問」，在旁邊安靜看他們操作，記下卡在哪、點錯哪顆按鈕，不要問好不好看，要看有沒有辦完事。4 到 5 位受測者通常就能找出大約 8 成的易用性問題，這是 Virzi 在 1992 年的易用性測試研究得到的結論；英國政府的服務手冊建議每輪找 4 到 8 位參與者。任務要有明確目標、可信，且不能先透露答案。

至於 A/B 測試，也就是同時放兩個版本比較哪一版較好，門檻不在技術而在人數，要看出真的有差需要相當多訪客量。新網站或每月只有幾百次造訪的，先把流程測通比較實在，A/B 測試留到流量長起來以後。

上線三年後你還改得動嗎？CMS 改得動內容，改不動結構

會重複出現的零件，像按鈕、表單欄位、服務卡片，叫元件；把這些零件的規則統一寫下來管理，叫設計系統。它換來的是維護成本，零件先定義好，新增一頁是組裝不是重畫，改一次元件全站一起變；沒有元件規則的網站，每一頁都是獨立作品，改一個小地方得把全站巡過一遍。

網站做好之後自己改不改得動，答案要拆成兩半看，內容改得動，結構改不動。根據 W3Techs 統計，現在超過一半的網站建在內容管理系統（CMS）上，也就是讓你不必改程式碼就能更新內容的軟體，你可以自己換文字、換照片、發文章；但要改版面結構、加新頁型，通常還是得回頭找設計端。交付時問到三件事：哪些內容能自己改、新增一頁是套現成頁型還是要重做、有沒有一份規則文件留給我。

也順帶打掉一個常見的誤會，不少人以為改版就是把視覺重畫一次，但實際上要動的多半是架構與內容，頁面要合併或拆開、選單要重排、文字要重寫，視覺反而是最後才換也最不花時間的一層（怎麼判斷該改版還是重做，最後一章會講）。

開工前要備的不只素材，照片、文案、法遵頁面少一樣都會拖

開工前要備齊六樣東西，缺一樣就卡在等資料

設計端開工那天會跟你要一包東西，齊不齊決定案子是照表走完，還是一路停在等資料。第一項是把「這個網站要讓誰、來做什麼事」寫成一句話，要具體到能決定版面。第二項是 2 到 3 個參考網站，每一個都要說得出參考的是哪一點，例如「參考它選單只有四項」，順手再備一個不喜歡的並說出原因，排除項往往比喜好更能收斂方向。

第三項是 LOGO 的向量原始檔，向量檔用數學描述線條與形狀，放大縮小都不會糊；JPG、PNG 是像素拼出來的，放大會出現鋸齒模糊。副檔名是 .ai、.eps、.svg，或可編輯的 .pdf 通常就是向量檔，真的找不到就先回頭跟當初做 LOGO 的人要，真的要不回來就得請人重描一份，早知道早排。

第四項是品牌標準色，要給網頁看得懂的六碼色碼或 RGB 三個數字，不是「深藍色」三個字，一組堪用的色票至少要四個：主色、輔色、文字深色、背景淺色。第五項是既有品牌物料的原始檔，用途是反推標準色、撈現成文案、確認網站跟實體物料是同一家公司。第六項是網域與主機的登入帳號（後面有一節專講）。把這六項開成六個資料夾，缺的那一格空著，就是你這週要處理的事。

最會拖的是照片：沒有的就是沒有，只能重拍

文案可以先寫粗稿，圖片不行，沒有的照片就是沒有，得去拍，是唯一花錢也解決不了、只能提早準備的素材。自有攝影跟圖庫怎麼分工有一條線，要證明你做過什麼的版位一定要用真實照片，講概念的版位才輪得到圖庫，圖庫照片放進案例頁，訪客一眼看得出來，信任訊號反而扣分。

沒有商業攝影預算時，先盤點已經有的照片，通常比想像中多；手機拍就夠，靠窗自然光、同一批用同樣角度拍，整批一致比單張漂亮更重要。交檔案時交原始檔，不要用通訊軟體傳過再存下來，那已被壓縮過，放大就糊。今天就打開手機相簿，數數看能直接用的照片有幾張。

文案怎麼起手？先寫訪客看完這頁要能回答什麼

每一頁動筆之前，先寫一句「訪客看完這一頁，要能回答什麼」：首頁可能是「這家在做什麼、適不適合我」，聯絡頁是「我現在要怎麼開始、多久會有人理我」，一頁一句，寫完再回頭填內容。這不是自創做法，英國政府的服務手冊要求團隊先把使用者需求寫成固定格式的一句話再開始設計，理由講得很直白，不了解對方是誰、需要什麼，就做不出對的東西。

這也接住「先做版面還是先寫文案」的老問題，版面是內容的容器，先做好容器再找東西塞，結果就是滿版的「這裡還缺三行字」。真正要交出去的是每一頁那句話、每個區塊的真實字數量級（20 字的標語，還是 300 字的說明）、已確定不會改的關鍵資訊，有這三樣排版就能照真實長度排。把每一頁的那句話寫在一個檔案裡，一頁一行，先寫首頁那一句，首頁定不下來，後面每一頁都會跟著改。

網域、主機、SSL：要的是能登入的帳號，不是誰記得密碼

這裡只補一個前面沒講的名詞：SSL 憑證是讓網址從 http 變成 https 的東西，作用是加密資料、也證明這個網址真的是你的。開工前要拿到的是能登入的帳號，不是某個人記得密碼。

SSL 這段最有時效性，你要確認的是「會不會自己續」，制定憑證規則的產業組織 CA/Browser Forum 已排定效期一路縮短，現在申請到的憑證最長只有 200 天，下一階段是 2027 年 3 月起 100 天、2029 年 3 月起 47 天，過去動輒一年多效期的時代已經過去。現在也不能不做，因為 2026 年 10 月起 Chrome 會把「一律使用安全連線」設為預設，第一次連往沒有 HTTPS 的網站前會先跳出來詢問，2026 年 4 月起已有一批使用者先看到這個提示。Web Almanac 2025 的資料顯示，網站首頁走 HTTPS 已超過 97%，舊圖片、舊表單只要還走 http，同樣會觸發警告。把帳號實際拿到手上，再確認憑證是不是自動續發，這一項才算備好。

隱私權政策要不要算頁數？有表單就要，至少多抓兩頁

只要網站上有任何會送出資料的地方，像聯絡表單、報名、電子報訂閱、會員註冊，你就在蒐集個人資料，法律要求清楚告訴對方蒐集了什麼、要拿去做什麼。這幾種頁面要算進頁數與時程：隱私權政策、服務條款、聯絡與公司資訊（公司名稱、聯絡人、電話、電子郵件、地址，一項不能少），有線上交易再加退換貨與消費爭議處理。

有些後果值得白話講清楚：運費的計價與負擔方式如果沒寫在頁面上，法律上會視同由你自己吸收；退貨規則寫不寫得清楚，也決定你面對的是幾天還是拖得更久。Cookie 界線要畫清楚，以台灣使用者為主的網站，在隱私權政策裡寫清楚用了哪些追蹤就好，不必跳同意橫幅；真正會被要求跳橫幅的是對歐盟使用者提供服務的網站，做外銷才需要往下處理。最小的形象網站，法遵頁面至少要抓 2 頁，有線上交易再加 2 到 3 頁，開工時沒指定誰寫，就會停到上線前一週才被想起來。

隱私權政策不是找一份網路範本貼上就好，範本寫的是別人蒐集了什麼，你的表單問了哪些欄位、有沒有裝追蹤工具，範本上不會有。想知道自己漏了什麼，把每個會送出資料的地方對照政策有沒有提到，列得出來卻找不到對應段落的，就是要補的那一塊。

分類和選單怎麼排，訪客才找得到？照他要辦的事排

分類照訪客要辦的事分，不是照「設計部、工程部」分

資訊架構，講白了就是這個網站有哪些頁、哪一頁歸哪一類、彼此怎麼連的整體安排，跟顏色版型無關，要在畫任何畫面之前先定下來。導覽（主選單）則是把這套安排轉換成訪客看得到的那幾行字。

分類只有兩種起手式：照公司內部分工分，像部門、產品線代號；或照訪客上站要辦的事分。前者對外部是災難，訪客不知道你公司怎麼分工。拿裝修公司當例子，照組織分的選單是「設計部、工程部、業務部」，照訪客要辦的事分則是「做過的案子、費用怎麼算、預約丈量」，訪客心裡真正的話是「你們做過像我這樣的空間嗎」，右邊每一項才是他心裡那句話的原文。要定出分類，把訪客會問的問題寫成便條，找 3 到 5 個不熟悉這行的人幫忙分堆取名字，再驗一次「要找某件事你會點哪一項」。Web Almanac 2025 涵蓋 2025 年 7 月全網資料的調查也印證了這件事，首頁的連結文字最含糊，通過「具描述性」檢測的比例只有 84.64%，選單反而是最該優先改的地方。

你要交出來的不是版型，是一份 5 到 8 個名字的清單，每個名字都是訪客會說出口的話。

主選單放幾項？5 到 8 項、最多兩層，先攤平再說

選單研究長期偏好每層約 8 個選項，但拿真正的網頁做實驗，結論不同，把 512 個項目排成三層跟兩層比較，三層反而最慢，這是 Larson 與 Czerwinski 那場經典實驗測出來的結果。這個矛盾的解法在於，決定該深該淺的不是項目數，是標籤清不清楚，含糊時分層會拖慢，清楚時分層反而更快。中小企業官網標籤通常偏含糊，所以預設先攤平：主選單 5 到 8 項、最多兩層。

某一項底下有 3 個以上、且訪客會分別去找的頁面時才開下拉；收進下拉的東西一定要在上層頁面再出現一次，因為手部顫抖或只用鍵盤操作的人可能根本打不開滑過才展開的選單。判斷什麼收進選單、什麼收進頁面內文，就看訪客是一進站就會主動找它，還是看完某一頁才需要。隱私權政策、聯絡資訊屬於「需要時要找得到」，慣例放頁尾。選單也要全站一致。這一節你要定三件事：主選單名單、哪幾項開下拉、哪些放頁尾。

想驗證很簡單，找 3 個人各給一件具體任務，記錄有沒有退回上一層，卡住的地方幾乎都是標籤看不懂，不是項目太多。

麵包屑什麼時候才需要？三層以上，站內搜尋等內容長大

頁面上方那一行「首頁 › 作品 › 辦公室 › 這個案子」，每一層都能點回去，這叫麵包屑，用途是標示頁面在網站階層中的位置，三層以上的網站才需要。它還會出現在搜尋結果裡幫這一頁的資訊分類呈現（目前只在桌機版），背後要標記一種寫給機器看的結構化資料，這是交付項，但要呈現訪客到達這頁的典型路徑，不是照抄網址結構。

站內搜尋只搜尋這一個網站，跟 Google 搜尋是兩回事，門檻是內容會持續長大、且訪客會用具體名詞找東西。連要求所有公開網站都要有搜尋功能的美國聯邦數位服務標準，自己列的豁免都是內容量很少、不用搜尋也能輕鬆瀏覽。太早做反而有代價，全站只有 20 頁時，搜尋結果常回 0 到 2 筆，等於當場告訴訪客這裡沒什麼東西。Google 過去曾在搜尋結果顯示網站專屬搜尋框，已全面移除，別為此做站內搜尋。第一版不做搜尋沒關係，但要有第二條路：選單清楚，加上頁尾有一頁列出全站連結。

從首頁一路點下去到不了的頁面，等於沒有上線過

站內一頁連到另一頁的連結，叫內部連結，它一邊帶著訪客走，一邊是搜尋引擎認識你網站結構的方式。搜尋引擎主要是靠已知頁面上的連結去發現新網頁，所以你在意的每一個頁面，都該至少有一個站內頁面連得過去。

站上存在、卻沒有任何一頁連得到的頁面，叫孤兒頁面，常見是新文章沒有列表頁列出它，或原本只出現在首頁前幾筆，被新內容擠掉後就再也沒有連結指向它。怎麼自己檢查：只從首頁開始點連結，看走不走得到你在意的每一頁；或搜尋你自己的網域，看收錄頁數跟實際頁數差多少。解法是確保每一類內容都有一個列表頁，新增的東西自動被列進去，連結文字也要能單獨看懂，「更多」對人跟搜尋引擎都是零資訊。

如果第一版就決定要做多語系，這裡有一個上線後補不回來的決定：每個語言要有自己的網址，不能靠瀏覽器設定切換文字，因為搜尋引擎的爬蟲通常不帶語言偏好，靠自動偵測換內容的網站可能根本看不到中文以外的版本。網址結構上線後才改等於全站搬家，必須在架構階段就決定。

版面不是排整齊，是排順序：誰先被看到，誰後被看到

設計稿為什麼看起來怪？五種字級一起冒出來，就沒有主角

你看一張設計稿常說不出哪裡怪，問題多半出在視覺層級，也就是畫面上誰先被看到、誰後被看到的排序。它不是好不好看的問題，是先後順序的問題，一張稿排不出順序，訪客得自己找重點，多數人不會花這個力氣，直接就走了。

排這個順序能用的手段只有大小、粗細、位置、留白、對比五種，顏色只是其中一小塊。決定一個元素會被注視多久，尺寸的影響力最大，愈大愈容易被看到，這是 Buscher 等人 2009 年一份追蹤 361 個網頁的眼動研究測出來的結果。同一頁也別放超過一個主要按鈕，主要行動一多，每一個的力道都被稀釋。層級靠的是落差，不是靠樣式多，一張稿同時冒出五種字級、四種粗細，不是層級豐富，是每一種都在宣告自己重要，等於沒有層級。

字調大調粗、看起來像標題，不代表機器也認得出它是標題，靠視覺呈現出來的結構，必須也能被程式判讀；根據 HTTP Archive 的全網調查，只有 59%的行動版網站標題順序正確。所以看設計稿時第一件事很簡單，問自己這一頁的主角是哪一個，你自己指得出來嗎？指不出來，問題不在美感，是沒有東西被排到第一順位。

訪客不是讀完，是掃過去：四分之一的頁面停不到 4 秒

訪客的眼睛不會乖乖照順序走完整頁，他是用掃的，不是逐行讀。四分之一的頁面停留不到 4 秒，超過一半的造訪不到 10 秒，停留不到 12 秒的頁面平均還塞了 430 個英文字，這是 Weinreich 等人 2008 年一份長期網頁行為研究測出來的，追蹤了 25 名受試者、記錄超過 13 萬次頁面瀏覽。研究者說，沒有人能在這麼短的時間讀完這麼長的一頁，訪客是掃過去的，不是讀過去的。

掃描路徑也有形狀，但要說清楚是哪種裝置的研究。桌機畫面首屏右側幾乎完全被忽略，左上角最快被看到，這是前面提到的 Buscher 等人那份眼動資料顯示的結果，研究者解讀是使用者對頁面右側的期待很低，那裡長年被當成廣告位。這是桌機、由左至右閱讀語系的研究結果，手機是單欄版面，右側欄根本不存在，這一段目前沒有能直接引用的一手數據，只能當實務觀察，手機的動線比較接近由上往下走。

小標在這裡不是排版裝飾，是路標，把最重要的話放在段落開頭。但也別以為沒人會往下捲，同一份研究也發現，仍有超過 23%的連結點擊發生在不捲動就看得到的範圍以外，每往下捲一段，都要有東西接住視線。所以看設計稿時，把這一頁最重要的三件事圈出來，看它們是不是都落在畫面上方到中間，最重要的那件事若被放在最底部，不是風格差異，是位置放錯了。

留白不是浪費版面，畫面愈塞滿，第一眼好感掉得愈多

留白就是畫面上刻意不放東西的空間，它不是還沒填滿，是版面的一部分，做兩件事：讓靠得近的東西被當成同一組，讓一段空白告訴訪客這裡換主題了。W3C 的網頁無障礙指引把用標題與間距分組內容列進建議清單，理由是能減少畫面雜亂、更容易被掃讀；文字間距也有具體門檻可以核對，行高至少要有字級的 1.5 倍、段落間距至少字級的 2 倍，留白多少不是憑感覺，是有規範可以依循的。

塞滿版面其實是最傷第一印象的做法。視覺複雜度高的網站好感度掉得最多，而且顏色鮮不鮮豔的影響其實很小，畫面塞不塞得滿，比顏色漂不漂亮更決定第一眼的印象，這是 Reinecke 等人 2013 年一份研究測出來的結果，找了 548 名受試者評 450 個網站、每個只看 500 毫秒。留白也要有級距，同一組的東西之間空得少，不同組之間空得多，組才會被看出來。

有個常見誤解值得就地拆掉：「這裡好空，再塞點東西進去吧」，背後假設留白等於浪費版面。實際上留白是分配注意力最便宜的手段，前面那份 500 毫秒研究已經證明，畫面複雜度高才是好感度掉最多的那一群。要驗證也不難，數一數畫面上在喊自己很重要的東西有幾個，超過三個，該拿掉的是東西，不是留白。所以看設計稿時要問，畫面上哪些東西被空白圈成了一組，覺得太空了的時候，先問自己一句：填進去的東西會搶走誰的注意力？

按鈕為什麼會在按下去的瞬間換位置？圖片沒先標尺寸

版面跳動指的是頁面已經顯示出來，但圖片晚一步才載入完成，把已經在螢幕上的內容硬生生擠開。版面跳動最惱人的地方在於，文字忽然移動會讓人讀到一半找不到剛才那一行，更糟的是手指按下去的瞬間按鈕換了位置，結果按到別的東西。成因多半是圖片沒有先講好長寬，行動版有 62%的頁面至少有一張圖沒標明尺寸，這是 HTTP Archive 例行調查測出來的數字。這是交付項目，不是你要自己動手的事，你要做的只有一個動作，驗收時用手機重新整理頁面，看文字有沒有被後到的圖片擠走，有的話把「圖片請補上尺寸」這句話交回去就好，記得排進上線前的驗收，不是看稿階段。

配色和字級的第一關不是好看，是看不看得清楚

配色是分配工作，先定的不是品牌色，是內文用哪一階灰

配色第一件要決定的不是喜歡哪個顏色，是把顏色分工。主色是整個網站看起來是什麼顏色的那一個，通常是品牌色；輔色是陪襯用的第二色，負責分區；強調色面積最小、最跳，專門用來讓某個東西被看見、被點。還有一個常被忽略、其實占面積最大的角色，中性色，也就是內文的字色、線條、底色。你要決定的第一件事，其實不是品牌色，是內文用哪一階灰。

美國聯邦政府的設計系統給了一個可操作的分配比例，60 比 30 比 10，約六成主色系、三成輔色系、一成強調色系，但這個比例算的是非中性色的部分，畫面看起來最多的其實是灰與白。強調色的鐵則是只留給要被點的東西：主要按鈕、正在被選取的選單項；裝飾線、圖示、卡片邊框都不該用強調色。強調的本質是跟周圍不一樣，同一個顏色出現在二十個地方就不再是不一樣，而是背景的一部分，品牌色鋪滿全站的網站，往往還得再發明一個更跳的顏色來當按鈕，這正是配色開始失控的起點。同一套系統建議從黑白開始做，先把訊息和層級用字級與位置調對，再讓顏色進來支持它，看設計稿時先看拿掉顏色的那一版站不站得住，站不住，問題不在配色，在版面。

顏色也不能是傳達資訊或標示動作的唯一手段，這是網頁無障礙指引（W3C）明訂的規定，連紅色警示按鈕都不能只靠顏色傳達嚴重性，必填欄位也不能只把標籤變紅，要同時有文字說明。你要交出去的不是「我喜歡這幾個顏色」，是三句話：內文字用哪一階灰、主色是什麼、強調色只給哪一件事。

文字和底色的對比夠不夠？截圖轉黑白，糊成一片就是不夠

對比度，講的是文字顏色跟底色的亮度差距，W3C 的網頁無障礙指引用一個比值表示，範圍從 1 到 21，白底黑字接近 21，白底淺灰字可能只剩 2 出頭，數字愈大愈看得清楚，這件事有數字可以核對，不必用「我覺得還好」來吵。訂這個標準是為了補償中度視力下降、色覺缺陷，以及隨年齡而來的對比敏感度衰退，忘了帶老花眼鏡、盯著螢幕久了眼睛疲勞，都是同一件事。大字級的門檻比小字寬鬆，看設計稿時最該盯的是內文和小字，像頁尾、註記、表單提示，不是標題。

自己粗略檢查有兩招：把頁面截圖轉成黑白，主要按鈕還是一眼跳出來、內文還讀得下去就是過關，一片糊就代表你的層級是靠顏色撐的；或者把瀏覽器縮小、瞇眼看，看得出哪裡是主角，對比與層級就成立。正式判定要靠對比度檢測工具，但這兩招足夠讓你在看稿當下講出「這裡看不清楚」。桌機與行動網站都只有三成色彩對比達標，HTTP Archive 逐年統計都是這個數字，這是全網最普遍的毛病，也是最容易讓你的網站看起來比別人俐落的地方。

中文排版不能照抄英文設定，一行超過 40 個字就該收窄

中文和英文排版差在三個地方：中文每個字佔一個正方形格子，沒有英文那種寬窄大小寫的差異；筆畫更密，字級一小就先糊掉的是中文；詞跟詞之間沒有空格，眼睛少了一組休息點。照英文的設定做中文網頁，第一個症狀就是看起來擠、讀起來累，但一般人說不出原因。

行長是這裡最值得記住的一件事，一行寬度不要超過 80 個字元，中日韓文字則減半是 40 個字，因為中文字大約是英文字母的兩倍寬，這是無障礙指引裡 W3C 明講的數字。這是可讀性的上限，不是強制規定，但拿它當標準很夠用，量法很簡單，把網頁在自己平常用的螢幕上打開，隨便挑一行內文數字數，超過 40 個字就該把內文欄位收窄，很多網站的問題不是字太小，是內文橫跨了整個寬螢幕。

行高至少字級 1.5 倍是所有語言通用的下限，但沒有哪個標準機構專門為中文訂過倍數，剩下只能用眼睛驗，連讀三行不會串行、不用手指指著，就夠了。兩端對齊這條英文規則也不能直接搬過來，中英夾雜的內文一旦兩端對齊，被拉開的常常是英文詞之間的空白，反而更花，靠左對齊就好。字級同樣沒有一個放諸四海的最小值，判斷法比數字有用，用自己的手機看一段內文，如果會不自覺把手機拿近或想放大，字就是太小了。內文字級、內文欄位多寬、行距鬆不鬆，這三件事和顏色無關，卻決定了你的網站讀起來累不累。

選字體也是在選載入量：中文字型檔是英文的九十到一百倍

網頁上要顯示某一款字，訪客的裝置裡不一定有，瀏覽器就得從網路上下載那個字型檔才顯示得出來，選字體也等於決定訪客要多下載多少東西。中文字型檔的體積代價值得記一次，W3C 針對 Google 字型庫做的一份評估報告顯示，中日韓字型的檔案大小中位數約 1.75MB，壓縮後仍有約 750KB，拉丁字母字型中位數只有約 17KB，一個完整的中文字型檔，大約是一個英文字型檔的九十到一百倍，這也是多數中文網站改用系統內建字體、或只挑用得到的字打包的原因。

你要確認的三句話是：內文用不用系統內建字體，還是一定要指定的品牌字體？如果要指定中文字體，是整套載入，還是只挑用得到的字？字還沒載完的那幾秒，畫面是空白，還是先用替代字顯示？

顏色與字型之外，一致性本身就是辨識度，不只是美感問題。訪客通常不是從首頁進來的，如果內頁跟首頁的字型、顏色、圖片風格對不上，他不會意識到自己已經在你的網站上，辨識度是靠重複建立的，不是靠一個 LOGO。你要交出去的是一份很短的清單：主色與強調色的色碼、內文與標題用什麼字、圖片是實拍還是插畫。

首頁第一眼要回答三件事：做什麼、幫誰解決、現在點哪裡

首屏放不下公司沿革，只夠一句主標題、一行說明、一顆按鈕

首屏是訪客一打開你的網站、手指還沒滑動之前看得到的那塊畫面，桌機大約是螢幕上半部，手機更小，大概只有一句主標、一行說明、一顆按鈕的空間就滿了。首屏只有三個任務：你是誰、你能解決什麼、下一步點哪裡，這三件事沒答完之前，任何得獎紀錄、公司沿革都不該擠進來。

「你是誰」不等於公司名，Google 對首頁標題的建議是別用「首頁」這種模糊描述，「歡迎光臨」等於什麼都沒說；「你能解決什麼」要用訪客講的話寫，他會想的是「我要一個能收詢問單的網站」，不是「整合型數位解決方案」；「下一步點哪裡」要單一，首屏放一顆主要按鈕就好。

要知道首屏過不過關，最直接的方式是拿手機打開自己的首頁，不捲動，直接截一張圖，拿給完全不知道你做什麼的人看十秒，問他三題，這家公司做什麼、做給誰、現在要我做什麼。有一題答不出來，首屏就不合格。加碼版是把圖片全部拿掉，只剩文字，如果文字說不出你在賣什麼，代表你的訊息其實一直是靠圖片暗示。首頁的主標題也應該講你做什麼，全網只有 66%的頁面有非空的主標題（HTTP Archive 統計的數字），很多首頁的主標題只放了商標或公司名。所以你首頁要先準備的是三句話：一句說你做什麼、一句說你幫誰解決什麼、一個按鈕上的動詞。

首頁六個區塊照訪客的問題排，證據要放在要求行動之前

首頁的區塊順序，不是公司內部誰重要誰在前，而是訪客心裡的問題依序出現的順序，英國政府網站 GOV.UK 改版首頁時也是這樣排的，把更多人需要的內容排到前面，理由都是使用需求，不是組織位階。

六個區塊照順序分別回答：①首屏，回答「我來對地方了嗎」，放一句主張加一顆主要按鈕；②服務概覽，回答「你提供什麼」，放三到六個服務項目、各一句白話說明，這是首頁最主要的分流閘門，少了它訪客只剩選單可以亂猜；③憑什麼是你，回答「你跟別家差在哪」，放可查證的事實，像做幾年、服務哪些產業，寫成一串形容詞等於沒寫；④證據區，回答「你真的做過嗎」，放三到六個真實案例的縮圖與一句話結果，一定要出現在你開口要求行動之前；⑤怎麼合作，回答「找你之後會發生什麼事」，放合作流程與大概多久回覆，跳過這塊直接放表單，訪客會怕「一問就被纏上」而關掉視窗；⑥行動區與頁尾，回答「現在點哪裡、你是不是真的存在」，再放一次主要行動入口，加上完整聯絡資訊。

最常見的排錯是把「關於我們」或「最新消息」放進第二塊，那是給已經認識你的人看的，不是第一次來的人要的；或者把證據區排到聯絡表單後面，等於先要資料再給理由。也不要把六塊全部塞進首屏，美國聯邦政府設計系統的到達頁模板明白寫著，套用時要逐一移除用不到的元件，態度是刪不是加。所以你首頁要準備的是六份材料：三句話、服務清單、可查證的事實、三到六個案例、一段合作流程、一組完整聯絡資訊。

最上面那張主視覺挑哪一種？握手、齒輪、地球都等於沒放

首屏那塊主視覺通常叫做 Hero 區塊，一張大圖或大色塊，上面壓著主標題和按鈕，工作是支撐那句主張，不是填滿空間。情境照適合服務業，條件是畫面裡看得出你在做的事；產品或作品照適合成品本身就是賣點的行業，條件是單一主體、背景乾淨；純文字排版適合抽象服務，也適合手上沒有夠好照片的情況，這是最被低估的選項，文字載入最快、放大不糊，而且逼你把話講清楚。

「放了等於沒放」的圖有明確特徵：握手、齒輪、地球這類抽象圖庫照，不為畫面增加任何真正的資訊。另外要當場換掉的 Hero 圖，包括主標題被做進圖片裡的字、白字壓在明亮照片上沒有底色、手機裁切後主體被切掉只剩背景，桌機和手機一定要各看一次。首屏那張圖通常是頁面上最大的元素，它跑得慢整頁看起來就慢，所以它必須是最先載入的東西，不是最後。

首頁該把人送去哪？先寫下三到四種來訪者，各給一個入口

首頁的任務不是把全站內容縮小塞進一頁，而是把來意不同的人送到對的頁面去。動筆排首頁之前，先寫下會來你網站的三到四種人，每一種人給一個明確的入口。

手機版的優先序跟桌機不是同一件事，桌機上左右並排的區塊，到了手機會變成上下堆疊，那個上下順序就是你實際的優先序。手機首屏能放的內容大約只有桌機的三分之一，原因常常是響應式設計把主視覺在窄螢幕上縮掉或拿掉，你在桌機看到的主視覺，手機上常常根本不是同一件事，兩邊要分開檢查。

不要讓任何東西蓋住首屏，促銷彈窗這類覆蓋整個畫面、要先關掉才看得到內容的彈出視窗，是 Google 明列的檢查項目之一，法定義務的告知或占用合理版面且容易關閉的橫幅則不在此限。首頁也不必為了與眾不同把結構打亂，版面愈單純、愈接近同類網站的慣用結構，第一眼的接受度反而愈高。所以你首頁要準備的最後一份東西，是一張「誰來、要去哪」的對照表，寫下三到四種來訪者，各給一個入口。

手機版不是桌機版縮小，是另一套要用拇指按的版面

RWD 不是另做一個手機版，手機版砍掉的內容等於沒寫過

響應式網頁設計，英文縮寫 RWD，指的是同一份網頁、同一個網址，會依照螢幕寬度自己改變排列方式，不是另外做一個手機版網站。Google 官方建議採用這種做法，理由很直接，它最好實作，也最好維護。早年那種依裝置回傳不同版本的做法已經幾乎絕跡，對應的技術標記現在全網只剩約 1%的網頁還在用，這是 HTTP Archive 例行調查測出來的數字。

過去常有一種說法，說沒有證據顯示 Google 把響應式設計列入排名因素，這個框架已經站不住了。Google 在 2023 年 10 月底宣布，行動優先索引已經全面完成，白話講，Google 派去讀你網站的程式看的是手機版的畫面，只有手機版顯示的內容會被用來建立索引。這代表如果設計端為了「手機版看起來清爽」把服務說明、案例砍掉，那些內容在 Google 眼中就沒寫過。

但有一個關鍵區別要講準，收合起來不等於刪掉。Google 官方文件明講可以把內容收進可展開的區塊或分頁標籤來節省手機版空間，只要內容跟桌機版是對等的；真正會出事的是內容要等使用者點下去、滑一下才去伺服器抓，這種內容 Google 完全看不到。你要問設計端的是，手機版收起來的那些內容，原始碼裡本來就有，還是點了才去載？最極端的後果要說準，如果手機完全無法存取你的網站，才會直接從索引消失，這是底線，手機版體驗不好不等於不被索引。

斷點該設在哪？看排法什麼時候變難讀，不是看熱門機型

斷點，指的是版面換一種排法的那個螢幕寬度，比方三張並排的服務卡片，畫面縮到某個寬度就會變成直排，它是設計交付的一部分，不是上線後才調的東西。追著當紅機型定斷點是徒勞的，Google 官方的建議是不要依裝置類別、品牌或作業系統來定斷點，熱門機型尺寸每一輪新機發表都會變。正確做法是先把內容排到最窄的螢幕裡能看，再把畫面慢慢拉寬，拉到排法開始難看難讀的那一刻，就在那裡設一個斷點。

有一個能核對的地板數字，內容在相當於 320 個網頁像素寬的情況下要能正常呈現、不必左右滑動，這是 W3C 訂在無障礙規範裡的門檻。你要檢查的是，把網站在手機上打開，任何一頁都不該需要左右滑動才能讀完一行字。也要順手拆掉一個常見的錯誤反應，畫面塞不下的時候最省事的做法是「這段手機版就別顯示了」，但不要只因為畫面塞不下就把內容藏起來，螢幕大小預測不了使用者想看什麼。這件事其實已經是標配，讓網頁知道自己該用手機排版的那行基礎設定，現在在全網超過九成的行動網頁上都有。

按鈕至少 24×24 像素，主要按鈕要做到花生米那麼大

觸控目標，指的是手指真正按得到會有反應的那塊範圍，不是圖示畫多大。這裡 W3C 給的數字很明確：可以用手指點的按鈕，大小至少要有 24×24 個網頁像素，更保險的版本則是至少 44×44 個網頁像素。換算成拿尺量得到的長度，24 大約是 6.3 公釐，差不多一顆綠豆的大小，44 則接近一顆花生米。

24 是最低門檻，不是夠用，換算單手拇指操作觸控螢幕的建議數值，已經逼近 44（Parhi 等人的研究結果）。給你的判斷是，24×24 當「不算違規」的底線，主要按鈕請往 44×44 靠。間距跟尺寸一樣重要，兩顆相鄰的按鈕，只要中心點之間留得下一個目標的安全距離，即使按鈕本身不到 24×24 也算通過，最常出事的地方是頁尾一整排擠在一起的社群圖示。

拇指構得到的範圍是手持裝置獨有的問題，螢幕愈大、手愈小，構得到的比例愈低，而且拇指構不到對側的上角。右手單手拿手機時，最難按的是左上角，最好按的是螢幕下半部靠右側那一帶，左手持握則左右相反。你最希望訪客按的那顆主要按鈕，應該落在螢幕下半部而且橫向要夠寬。自己驗證的方法很直接，單手拿手機，另一隻手放下，用拇指把最重要的那顆按鈕按十次，如果需要換手、需要挪動握法，那不是使用者手笨，是尺寸和位置的問題。

手機表單怎麼填得完？少打字，聯絡入口別收進漢堡選單

手機表單真正的敵人是打字，手機是在一塊會被虛擬鍵盤吃掉一半的螢幕上，用拇指戳一塊比手指還小的鍵。原則很簡單，必填欄位能少一個是一個，能之後再問的就之後再問。輸入類型是最便宜的體驗改善，網頁欄位可以標明它要收什麼資料，手機就會自動換上對應的鍵盤，你可以直接驗收，點電話欄位跳出的應該是數字鍵盤，點電子郵件欄位鍵盤上應該直接有 @ 符號。字級也有一個隱形門檻，表單控件字級太小，部分手機瀏覽器會在使用者點進欄位的瞬間自動放大整頁，版面就跟著跑掉。

手機上單欄排列也比多欄好讀，標籤文字放在欄位上方最好掃讀，而且如果說明文字是正確關聯的欄位標籤，點文字也會聚焦到欄位，等於免費把可點範圍放大一倍。已經給過的資料不要叫人在手機上重打一次，兩步驟以上的詢問單，第二頁不該再問一次姓名電話。

漢堡選單，也就是畫面右上角那三條橫線，點了才會展開整份選單，螢幕小、選單項目多時是合理做法，它的代價是曝光，入口收起來就要多一次點擊才被看見。給你的規則是，最重要的那一到兩個入口，通常是「聯絡我們」，要固定留在畫面上看得見的地方。同樣的彈窗代價在手機上也更大，一個彈出視窗在桌機蓋掉三分之一畫面，在手機上就是整頁，Google 官方建議改用只占畫面一小部分的橫幅。

無障礙為什麼不只是政府網站的事？對比和按鈕誰都在用

無障礙不是慈善，是老花、手不方便、大太陽底下都用得下去

無障礙（accessibility）講的是一件具體的事，同一個網站，不管使用者的視力、聽力、手部靈活度不一樣，用的裝置不一樣，所處的環境不一樣，都能把事情辦完。制定網頁標準的國際組織 W3C 的說法是讓人「看得到、看得懂、走得動、按得下去」。受益的族群比想像中寬，像是年紀變大後視力與手部精細度跟著改變的人、用小螢幕手機的人、手骨折或眼鏡忘了帶這類暫時性受限的人、大太陽底下看手機這類情境受限的人，還有網路不夠快的人，都用得到同一批設計。

無障礙也分等級，這是最常被搞混的一件事：國際通用標準把要求分成 A（最基本）、AA（中間）、AAA（最嚴格）三級，等級愈高門檻愈嚴，例如文字對比在 AA 是 4.5 比 1、AAA 就變 7 比 1。國際與各國法規實務通用的門檻是 AA，跟設計端要的不是做到最高等級，是主要頁面達到 AA，而且它不是感覺問題，每一條都有數字或可判定的條件，能寫進驗收清單當場核對。

這件事的規模也值得放進判斷裡，全球約有 13 億人有顯著身心障礙，占全球人口六分之一，且數字還在成長（世界衛生組織的估計）。台灣的處境也一樣往這個方向走，65 歲以上人口占比已接近五分之一、且持續往上（主計總處統計），網站上那段淺灰色的小字說明，正在對相當一部分訪客關門。色覺也常被忽略，大約每 12 位男性就有 1 位有色覺辨識困難，最常見是紅綠分不出來，這是美國國家眼科研究所（NEI）估計出來的比例，「必填欄位標紅色」「錯誤訊息用紅字」若沒同時加文字說明，對這群人等於沒標。

法律上誰非做不可？台灣只管政府機關與學校

台灣的強制規定只管到各級政府機關、附屬機構與學校的網站，一般企業官網目前沒有對應的強制義務。企業真正會碰到合規壓力的情境只有兩種：網站替政府機關或學校建置，或對歐盟消費者提供電子商務服務、而且規模超過一定門檻（很小的公司通常被排除在外）。除了這兩種情況，不是被要求做無障礙，是值得做，原因接下來就講。

不少人聽到無障礙，第一個反應是「這是政府網站才要做的事」，這句話只對了一半。法律義務確實只到政府機關與學校，但無障礙要求的東西，夠不夠對比、字能不能放大、按鈕好不好按、表單看不看得懂，是所有人都在用的功能，不是少數人的特殊需求。自己驗證也不難：把手機亮度調到最低，走到戶外打開自己的網站首頁，看還看不看得清楚按鈕上的字；回室內把滑鼠推開，只用 Tab 鍵走一次詢問流程，看每一步是不是都知道停在哪。有一題答不出來，無障礙已經在影響你的詢問單了。

替代文字、標題階層做一次，人、搜尋引擎和 AI 都讀得懂

無障礙要做的那批基本功，該用什麼標籤就用什麼標籤（按鈕用按鈕的標籤、標題用標題的標籤，不是拿一個沒有意義的方塊、用樣式畫成按鈕的樣子）、正確的標題階層、圖片替代文字、表單標籤、看得見的焦點樣式，不是額外多做的事，是本來就該做對的做法。做對之後，同一份工作會被三種讀者同時吃到：用你網站的人、搜尋引擎，還有愈來愈多的 AI，畫面上兩種寫法長得一模一樣，但機器只讀得到標籤。

Google 自己在談網站怎麼替 AI 功能做最佳化的文件裡，就建議盡量用對的標籤寫網頁，理由正是它「幫得到螢幕閱讀器」。螢幕閱讀器是把畫面文字唸出來給看不到螢幕的人聽的軟體，只讀得到程式碼裡寫的東西。AI 讀網頁的方式跟螢幕閱讀器其實是同一套架構，瀏覽器會整理出一份清單，記錄頁面上有哪些東西、各自叫什麼名字、是什麼角色，螢幕閱讀器讀這份清單，AI 找可以互動的按鈕與欄位靠的也是它。按鈕在程式碼裡沒有名字，這兩邊會同時瞎掉，該問設計端的問題是「每個可以點的東西，程式碼裡有沒有名字」，不是「按鈕好不好看」。

標題階層是另一個一份工作、兩個用途的例子，看起來像標題的文字要真的用標題標籤做，不能只是放大加粗。螢幕閱讀器使用者靠標題跳著找內容，同一份階層也是搜尋引擎理解「這頁在講什麼」的骨架。圖片替代文字（alt）要寫成人話、不能塞關鍵字，純裝飾的圖留空就好，是設計交付的一部分，不是上線後才補。表單標籤也一樣，打字就消失的提示字螢幕閱讀器多半不會當標籤讀，每個欄位都需要看得見、打完字還留著的標籤。焦點樣式服務的是只靠鍵盤操作的人，按 Tab 鍵時瀏覽器會在停留的元件外面畫一圈外框，這是設計端最常為了畫面乾淨拿掉的東西，拿掉可以，但要換一個自己畫的、看得出來的樣式。把這些想成投資而不是成本，會更容易說服自己去做；重點不是為了無障礙、SEO、AI 引用分別做三次，而是同一份把標籤用對、階層排對的工作，一次讓三邊都讀得懂。

無障礙先做這六件事，補回焦點外框就贏過六成網站

無障礙聽起來像大工程，但對一般企業官網來說，真正要做的是六件很具體的事，而且都不需要懂程式。

第一件是文字與背景的對比。一般文字至少要 4.5 比 1，較大的文字（大約 24 像素以上或 18.7 像素粗體）可放寬到 3 比 1；按鈕邊框、輸入框外框這類要靠它才知道有東西可按的圖形，對相鄰顏色也至少要 3 比 1。這個數值不必用猜的，瀏覽器按右鍵選「檢查」，點一下文字顏色前面的小色塊，展開後就會標出對比值，也會直接告訴你符不符合標準。

第二件是每張有意義的圖都要有一句能替代它的說明。替代文字寫的是「這張圖在說什麼」，不是檔名也不是關鍵字，純裝飾的圖則留空。判斷標準很簡單：把圖片全部關掉之後，剩下的文字仍然要說得通。

第三件是表單欄位要用標籤，不是只靠提示字：標籤要看得見、打完字還在。

第四件是不要把鍵盤焦點樣式拿掉。用 Tab 鍵從表單第一格按到送出，每一步都要看得出現在停在哪，也不能被固定導覽列、Cookie 提示或聊天視窗整個蓋住。很多網站為了畫面乾淨把預設的焦點外框關掉，等於讓不用滑鼠的人瞎走。

第五件是網頁要標好語言。標了，螢幕閱讀器才會用正確的發音規則唸，瀏覽器也才會正確顯示字形。這是一行設定的事，交付時問一句就好。

第六件是手機上不要把縮放關掉。兩指要能把畫面放大，這一條在台灣特別重要，關掉縮放等於直接把老花眼的客戶推出門外。

這六件裡全網做得最差的是焦點樣式，超過六成的網站直接把預設的焦點外框拿掉了（HTTP Archive 逐年統計都是這個數字），光做到這一項就已經贏過大多數網站，成本是零。順帶一提，Lighthouse 的無障礙分數指的就是無障礙，不是跨裝置瀏覽順不順暢，它檢查對比度、替代文字、按鈕名字這類項目，且全有全無計分，一頁只要有一顆按鈕沒名字那項就是零分，人工判斷的項目根本不計分，所以分數只適合拿來抓明顯錯誤。

載入速度不是憑感覺，LCP、INP、CLS 三個指標各有門檻

LCP、INP、CLS 各量什麼？2.5 秒、200 毫秒、0.1 是及格線

網站快不快不再是憑感覺，是三個各自有門檻的數字，分別回答東西多快出現、按下去多快有反應、畫面會不會亂跳三個問題。這三項合稱網站體驗的核心指標，Google 的網站管理工具裡有一份同名報表，直接把網頁標成良好、需要改善或不良。

最大內容繪製（LCP）量的是從按下網址那一刻，到畫面上面積最大的東西完整出現要多久，通常是主視覺大圖或一段顯眼標題，門檻 2.5 秒以內良好，超過 4 秒不良。互動到下一次繪製（INP）量的是點一下按鈕到畫面真的有反應隔多久，量的是整段瀏覽期間最慢的那一次互動，門檻 200 毫秒（0.2 秒）以內良好，超過 500 毫秒不良。累計版面配置位移（CLS）量的是正在讀的內容有沒有被突然載完的圖或廣告往下推，把這種非使用者造成的位移累加成一個分數，0.1 以內良好，超過 0.25 不良。

這三個門檻不是自己開電腦測一次的成績，而是把所有真的造訪過的人排隊，看排在第 75 位的那個人遇到什麼，也就是每四個人裡最慢的那一個。看這個位置能確保多數造訪都達到這個水準，又不被少數異常拖垮判斷，達標的定義因此是至少 75% 的造訪都符合門檻。而且一定要分開看手機與電腦，多數網站的手機表現明顯落後電腦，驗收時第一句該問的是這是手機還是電腦的數字。

LCP 卡在主視覺，INP 卡在外掛，CLS 卡在圖片沒留位置

這三個數字其實是三個設計問題的計時器。LCP 等於挑的那張主視覺多快出現，多數網站畫面上最大的元素就是一張圖片，首頁挑了一張橫幅大圖等於直接指定了 LCP 由這張圖決定，手機版把主視覺縮小甚至拿掉，常常同時解決手機太慢與首屏看不到重點兩件事；要拿掉的是那張裝飾用的大圖，不是文字內容，內容砍掉是另一回事。INP 等於頁面上放了多少會跑程式的東西，拖慢反應的通常不是圖，是即時客服視窗、社群嵌入、彈出視窗、自動輪播與追蹤碼，瀏覽器同一時間只忙得過來一件事，忙這些東西時就沒空理訪客的手指，每答應加一個小外掛就是替反應速度記一筆帳。CLS 等於有沒有東西先空著後來才長出來，成因幾乎都是設計端排上去的，沒有預留空間的圖片與廣告區塊、動態插入的內容、字體換載時的文字重排，所以 Cookie 通知這類東西要浮在內容上面，不能插進去把內容往下推。

速度要從哪裡下手？先動圖片，它占了整頁重量最大的一塊

HTTP Archive 每年追蹤全網頁面重量，測出來的中位數行動版首頁裡，圖片是整頁重量裡佔比最大的一塊，加上程式碼與字體大約佔整頁重量六成，是設計端能直接減、又減得最多的地方。實際輸出尺寸不必遠大於顯示尺寸，抓顯示尺寸的兩倍上下就夠。只要圖片先告訴瀏覽器它的長寬，瀏覽器就會先把版面空出來，圖片載入時內容不會被推走，這是全網做得最差、卻幾乎不用額外成本的一件事。現在的圖片格式壓縮效率比傳統格式好上不少，可以在需求裡直接寫圖片請用現代格式輸出。延遲載入（讓畫面外的圖先不要載、捲到才載）該用在首屏以下的圖，常見的自傷是連首屏那張最大的圖也設成延遲載入，等於親手把它出現的時間往後延。中文字型檔案動輒龐大，內文用系統既有字體通常是效能上最划算的決定。

「圖片放愈多、愈大，網站看起來愈豐富」是常見誤解，實際上首屏那張最大的圖直接決定 LCP，沒有先預留位置的圖片載入時又會把訪客正在讀的文字往下推，多放幾張大圖換來的常常是更慢、更會跳。想自己驗證，拿手機關掉 Wi-Fi 改用行動網路重新打開自家首頁，看主視覺是不是拖很久才出現，正在讀的那行字有沒有被後來冒出來的東西擠走。

快一點換到的不是排名，是詢問和成交

Google 的網頁效能文件 web.dev 整理過具名案例。電信業者 Vodafone 做過對照測試，兩個版本只差在效能優化，主視覺圖重新調整尺寸、避免載入畫面外的圖，結果最大內容繪製時間明顯改善，銷售與名單轉換也跟著提升；電商平台 Rakuten 24 把版面跳動大幅壓低後，每位訪客帶來的營收與轉換率同步成長。這些是各家條件不同的官方案例，能說明的是方向與量級，不是保證，但方向一致：畫面早一點出現、少跳一次，換到的是實際的成交與詢問。

根據 HTTP Archive 在 2025 年 7 月採集的全網資料，三項指標同時達標的網站手機版大約只有一半，電腦版稍微好一點，手機端最難達標的是 LCP，剛好是設計決策影響最大的那一項。網站也在持續變重，近十年來手機版首頁的中位重量成長超過兩倍，變慢多半不是某天壞掉，是每次再加一個區塊慢慢累積出來的。免費的測速工具輸入網址就能看，行動與桌機分開列，看的時候抓三件事：有沒有真實使用者資料、三個數字有沒有踩線、有沒有切到行動那一欄。速度跟排名的關係其實很簡單，相關系統會用到這些指標，但沒有單一訊號能決定排名，速度的價值要先算在使用者與詢問轉換上，不是排名捷徑。

有人來看了網站，為什麼沒有詢問單？從按鈕到回信都會漏人

一頁只留一顆主要按鈕，別只寫「送出」

一頁只放一個主要動作，不是設計偏好，是注意力的算術。多顆一樣顯眼的按鈕擠在同一頁，例如「立即詢價」「加 LINE」「電話洽詢」「下載型錄」同時出現，注意力會被平均切散，讓訪客更難知道下一步該做什麼。正確做法是選一個主要動作做成按鈕，其餘降級成文字連結。

按鈕文案的判準是「按下去會發生什麼」，不是「送出」兩個字交差，把它換成「送出需求，一個工作天內回覆」，這同時也是無障礙的最低要求，連結與按鈕的目的本來就該從文字判斷得出來。按鈕位置也要跟著決策進度走，還沒說清楚在做什麼、大概多少錢、要花多久就放按鈕，是在向還沒被說服的人要東西。手機上再留一個動作，電話號碼做成能直接撥號的連結。

沒人點通常不是按鈕不夠顯眼，而是訪客走到按鈕前面時還沒被說服。顏色不是完全沒差，GOV.UK 曾把起始按鈕換成綠色，測得點擊率因此上升，但那是頁面已經把服務說明清楚、按鈕因此更容易被找到，不能推論成某個顏色比較會被按。就算按了，後面還有一整條會漏人的路，欄位太多、提示字一打字就消失、錯誤訊息看不懂、送出後只有一句感謝來信，都不是換顏色救得回來的。

表單該留幾個欄位？姓名、電話、想做什麼、方便聯絡的時間就夠

要求填的資料項目愈多，願意提供資料的人愈少，這個方向有一則學術研究可以支持，Hui、Teo 與 Lee 2007 年一份實地實驗在真實市調公司網站上進行，受試者不知情況下被隨機指派填寫四到二十三項不等的必填資料，結果項目數對「是否願意提供資料」有統計上顯著的負向影響，樣本只有一百零九人、是新加坡一所大學的商學院學生，能說明方向，不是精確幅度。同一份研究還有個反直覺發現，資料說明用途能提高提供意願，但貼隱私標章沒有顯著效果，讓人願意留資料的是說清楚用途，不是貼一枚圖示。

決定要問什麼，每一項先問自己為什麼需要它、會拿它做什麼，逐項寫下來，通常有一半欄位當場就會被刪掉。更直接的判準是「少了它，今天回不了這通電話嗎」，公司統編、預算區間這類多半留到第一次通話再問，第一次接觸只要姓名、聯絡方式、想做什麼、方便聯絡時間這幾格通常就夠。

欄位標籤要用固定的文字，不能只靠框內提示字充數，一打字提示字就消失，填到一半就忘了這格要填什麼。這件事全網做得極差，只有約三成多的輸入欄位有真正綁定的標籤，超過一半網站至少有一個欄位完全靠提示字撐著，這個比例是 HTTP Archive 長期追蹤全網頁面得到的結果。必填別只用一顆星號，選填欄位加上「（選填）」更清楚。錯誤訊息要說怎麼改，不是說你錯了，把「欄位格式錯誤」換成「請填寫可以聯絡到你的手機號碼，例如 0912345678」，送出失敗時也不能把已填內容清空。手機上能用選的就別用打的，電話與信箱欄位設定成對的鍵盤類型，才會跳出數字鍵盤或帶 @ 符號的鍵盤。

如何讓陌生人更容易留下電話

訪客留資料是一次風險換利益的判斷，好處是可能解決問題，風險是被推銷、被轉手、找不到人負責，信任訊號的作用就是把風險那一邊壓下去。案例要寫得出客戶產業、做了什麼、什麼時候做的，讓人容易查證，寫不出來的案例不如不放。網站背後要看得到真實存在的組織，最簡單是列出實體地址，加上團隊資歷與做過的案子類型，電話、地址、電子郵件一次到位，錯字與失效連結對可信度的傷害比多數人以為的更大。

網站的視覺呈現本身就是可信度判斷的一部分，史丹佛大學曾有研究請數千位參與者評論網站可不可信，提到「整體視覺設計」的比例是所有因素裡最高的一類。這不是說網站要多好看，是訪客真的會拿看得見的表層線索推斷可不可信，雜亂、過時、錯字連篇的畫面是真的在扣分。真實照片與圖庫照的取捨可以放心判斷：辦公室、團隊、實際完成的作品即使畫質普通也比一張到處都在用的握手照有用，因為它可以被查證。完整的公司資訊，名稱、負責人、電話、電子郵件、營業所地址，擺出來會讓人願意聯絡你。回覆時間的承諾本身就是信任訊號，及格線不是幾小時內這種外部標準，是自己寫的時間自己做得到。

表單送出之後只回一句「感謝來信」，人就去找下一家

多數網站按下送出後只有一行「感謝您的來信」，然後就沒了，訪客不知道有沒有送成功、誰會聯絡他、要等多久，只好再打電話問一次，或乾脆去找下一家。

確認畫面最少要有四件事到齊：需求已經收到；會在什麼時間內、用什麼方式聯絡；比較急的話這裡有電話；一封確認信已經寄到填的信箱，沒收到請看垃圾信匣。自動回信也要當成正式通知來做：內容原樣回貼一份、寫出回覆時間、附上真人聯絡方式，寄件者用公司名而不是不能回信的地址。

詢問到成交常斷在幾個節點：表單壞掉或驗證太嚴、通知信進垃圾信匣，看起來只是按了沒反應；通知信寄到沒人固定看的信箱或已離職的人；回得太慢或回覆內容跟承諾不一樣，例如寫一個工作天卻三天才回，承諾反而變成扣分；或者只有一條路可走，電話、LINE、實體地址要跟表單一樣好找。回覆時間先算自己實際做得到的最慢情況，再加一點餘裕寫成承諾，同一個時間寫進表單旁邊、確認畫面、自動回信三個地方，三處不一致，就是訪客開始不相信你的那一刻。

SEO 不是上線後才開始，有六件事在設計階段就定死了

一個網站找不找得到，很大一部分在設計階段就決定了；至於寫什麼內容、怎麼經營，是上線後慢慢調的事，這一章只講前面那一段，也就是網站的體質。Google 找一個網頁分三步：抓下來叫爬取、存進資料庫叫索引、搜尋時拿出來叫呈現，而就算完全符合建議做法，Google 也不保證抓取、收錄或呈現。「網站做好就會有人搜到」這個前提本身不成立，你要決定的是把體質打好。

上線那天就固定的六件事，網址規則排第一，改了等於搬家

第一件是網址結構，也就是每一頁在網路上唯一的門牌：用看得懂的字不用長編號，分隔詞用連字號不用底線，會區分大小寫，中文網址會展開成一長串亂碼。這些規則要在設計階段定死，換網址等於搬家，舊網址要全部設轉址（讓舊網址自動把人送到新網址）、連結全部改掉、重送清單檔，中型網站換完常要好幾週，轉址要留至少一年；網址塞關鍵字幾乎沒效果，規則只為了看得懂、以後不用再改。

第二件是標題階層，最大標題只能有一個，段落標題依邏輯往下排、不能跳級，這是頁面的目錄結構，不是字級樣式；從排名角度順序錯了不扣分，但跳級會讓人和機器都讀得卡，不扣分不代表可以隨便排。

第三件，內部連結要接得到每一頁，搜尋引擎靠已經抓過的連結才找得到新頁面，沒有任何一條路徑連得到的頁面，等於沒有上線過，就算網址本身存在也一樣。常見的情況是活動頁、舊分類頁做完後忘記從選單或內文連過去，變成只有直接輸入網址才進得去的孤兒頁。驗收時可以直接問一句「這一頁從哪裡點得到」，答不出來，就是這一件事沒做到。

第四件也是後果最大的一件，手機版與桌機版的內容要一致，這點前面談手機版時已經細講過，這裡只補一句：結構化資料與圖片替代文字，手機版也要跟桌機版一樣。

第五件，圖片的替代文字（前面無障礙那節講過怎麼寫），重點是它屬於交圖那一刻就該一起交的東西，不是上線後才補。

第六件，速度的先天體質，那三個數字前面已經細講過，這裡只講設計稿就鎖死的部分：首屏放大圖還是文字排版、全站用一套字體還是好幾套、進場動畫要不要，這幾個決定在視覺稿定案那天就把載入時間的上限畫好了。

這六件事共通點是上線那天就固定，事後要改就得動全站；文章標題主題隨時能調。問設計端兩句話，「網址規則是什麼」「手機版會不會把桌機版內容藏掉」，答不出來，現在正是唯一免費改的時候。

結構化資料是什麼？中小企業用得到的其實只有三種

結構化資料是一段寫給機器看的補充說明，不改變頁面外觀，訪客看不到，改變的是機器怎麼歸類這頁，它寫在原始碼裡、訪客看不到，是開發端的交付項，你只要拿到「做了哪幾種」的清單就好。

中小企業用得到的就三種：公司是誰在哪怎麼聯絡，交代地址電話網址標誌，放首頁或關於我們單頁就好；有實體據點再加名稱地址營業時間；「首頁、服務、網頁設計」那條路徑列也可以標記，但只出現在桌機搜尋結果，不是行動版一定有的紅利。

鐵則只有一句話：標記裡的內容必須是頁面上看得到的內容，標了頁面沒有的東西是違規，輕則無法顯示對應結果，重則被判定不符規範，驗收時把資料卡每一項回頁面找一次就好。

要說準一個現況，常見問答與一步一步教學形式的搜尋結果都已先後退場，做結構化資料的理由已經不是換版位，而是讓機器正確理解這頁在講什麼，也是往後被 AI 摘要引用的前提，頁面要被引用，前提是已被收錄且允許顯示摘要。標記再標準，Google 也不保證出現對應結果，驗收標準是正確一致，不是換到版位。

上線頭兩週先做三件事：查收錄、送 sitemap.xml、搜公司全名

上線後頭兩週先做三件事：查有沒有被收錄，搜 site: 加自己網域看有沒有結果，這方法不一定列出全部；確認清單檔送出，這裡要岔開一句，前面提過的「網站地圖」指規劃階段那張架構圖，是給人看的，這裡要送出的叫 sitemap.xml，是給機器看的另一份東西，兩者常被叫同一個名字，跟設計端說「XML 的那份」最不會搞混；搜自己公司全名，看第一筆是不是自家官網，搜不到通常是收錄出問題，跟排名夠不夠好是兩回事。Google 注意到新網站可能要幾週，兩週後連首頁都查不到才該找原因。

最常見的原因是個技術誤會，robots.txt 不是把網頁排除在 Google 之外的機制，它擋的是抓取不是搜尋結果顯示；真正要讓一頁不出現，靠頁面裡的 noindex 指令，但這個指令要生效，該頁不能同時被 robots.txt 擋住，兩個一起用反而互相抵銷。施工期常整站掛著 noindex，上線忘記拿掉，網站表面正常卻永遠不會出現在搜尋結果裡，交付前一定要確認這件事。

Google 說不用管的：關鍵字標籤、網址塞關鍵字、內容長度

有幾件事 Google 講得很清楚不必放在心上：關鍵字標籤沒作用、網址塞關鍵字幾乎沒效果、內容長度本身不影響排名，常聽到的「內容專業與可信度」不是排名分數而是評估品質的角度，標題階層順序排錯不扣分但仍影響讀螢幕軟體與機器理解的準確度。Google 說不用管的都是隨時能調、調了也沒差的事；前面六件設計決定和結構化資料，才是上線後改起來最貴的，趁著還能免費改，把它們一次改好。

錢和時間會花在哪裡？拆成六個變因就看得懂差距

這大概是每個人心裡第一個問題，做一個網站要花多少錢、要花多久。這一節不打算給價目表，不是不想講，是同一個規格擺進不同案子工作量本來就不一樣，講清楚錢花在哪、時間耗在哪，才有辦法看懂自己這個案子落在哪一檔。

工作量的差距，算的不是頁數，是有幾種不同長相的頁面

網站的成本主要不是一頁多少錢乘上頁數，而是多少人、花多少工時，拆成六個變因。

不是頁數，是有幾種不同長相的頁面，十頁若八頁結構一樣，只是內容不同，做的是一種版型加八筆內容；十頁各有各的長相，就是十次設計。客製程度分三檔：套版是填進現成版型的既有欄位，省下設計與前端時間，代價是結構要遷就模板；半客製以一套版型或元件為底改配色字體、重做首頁與少數重點頁，是中小企業最常見的一檔；全客製從架構圖到視覺稿都重畫。三檔差的不是好看程度，是要重畫幾次、重寫多少前端程式。

功能模組是第三個變因：金流，也就是讓訪客直接在網站上付錢的功能，成本不在按鈕，在對帳、退款這條錢的流程，且通常要另外申請審核，這段不在設計端手上，會獨立佔掉時程；線上預約難的是規則，時段、押金、取消改期怎麼算，規則沒定就做不完；會員一開就多出註冊登入權限分級一整組畫面，還開始保管個人資料；多語系不只是翻譯，每多一種語言就多一整套內容要維護，網址結構與選單也要重新設計，是少數建置與維護成本一起翻倍的功能。寫不出「誰、在什麼情況、要完成什麼」的功能，先不放進第一版。

內容由誰產出最容易被低估，文案不會自動變成網頁上的字；素材有沒有現成分三種，有原始檔直接用，只有網路小圖要重製，什麼都沒有要新拍，多出來的不只是拍攝那天，還有找攝影排時間清場選圖修圖，多半卡在自己這邊。法遵與制式頁面沒有設計難度，但有人要寫，卻幾乎總被漏算。

一個案子和另一個的差距，幾乎都能拆回這六項，先寫成一張表，再談預算，順序才對。

網站不是買斷，網域、主機、憑證每年都會再來一次

網站有兩種錢，做出來的錢，和讓它繼續活著的錢，第二種每年都會再來一次。網域是租用的使用權，一年一年續，通知只寄到註冊資料上的信箱，登記在誰名下誰才動得了它，掉了網址、信箱、既有排名會一起不見。主機按月或按年計費，網站在就要付。SSL 憑證現在幾乎是標配，效期正在一路縮短，目前最長只到 200 天，之後還會降到 100 天、47 天，靠人記得展延已經不夠用，要問清楚是不是自動續發。系統與外掛的授權各有更新週期，部分年費制，過期還能用但停止更新。內容維護不是修故障，是資訊還對不對，常常是某人每月固定要花的時間。備份要有人確認真的備到、也還原得回來，帳號要有人管權限與離職收回。

把這六項寫下來就是年度固定支出，建置費停了網站還在，這一份停了，網站會慢慢壞掉或直接不見。打開行事曆填進網域、主機、憑證、外掛的到期日，填不出來的格子就是目前不在掌握裡的東西。

做一個網站要多久？看的是兩邊來回幾次，不是畫圖快慢

沒有通用的天數，時程主要不是設計端的工作量決定的，是兩邊來回的次數決定的。素材齊、回覆快，跟素材缺、回覆慢，差的是好幾週。

文案沒到位最常見，動工前先把頁面清單寫出來，逐頁指定作者交期。圖片需新拍，多出來的是排期清場選圖修圖的來回，讓新拍跟設計平行進行。審稿回覆慢或意見分散，事先約定回覆時限、意見集中一份再回。決策者太多或拍板者沒參與前期，最傷的是返工，指定一個窗口和拍板者，讓他在架構階段就看過確認。中途加會員金流預約這類功能，等於重新拉線，記進第二版清單。法遵頁面沒人寫常拖到上線前才想起，開工就指定作者排交期；網域主機的取得（尤其要轉移時）、需要對外審核的功能，也要提早啟動。想縮短時程，能施力的地方幾乎都在自己這邊，來回次數才是真正的變數。

自己做花的是時間，交給設計端花的是預算，維護都躲不掉

差別不在省不省錢，在投入的是時間還是預算，以及後續由誰維護。自己做，投入學習時間、內容產出，加上上線後每次調整都自己處理；交給設計端，投入需求整理、素材文案交付、每階段審閱決策，這幾件事委外一樣免不了，差別只在實作與整合有人負責。

時間成本也是成本，把要自己做的事逐項估幾小時，乘上自己一小時的價值，通常比想像大，而且是已經在發生的成本。兩條路都躲不掉網域、主機、內容更新這三件年度支出，先把未來一年能穩定投入的時數寫下來，再回頭看上面的清單。

上線那天不是結束，是網站第一次被真人使用

網站上線那一刻，不是專案結束，是它第一次開始被真人使用。在那之前，你要收得對；在那之後，你要看得懂。

驗收要驗到什麼程度？每個表單都要親手送出一次

驗收，是在認可網站做完之前照清單一項一項確認，不是看一眼覺得漂亮就算，重點在確認該有的功能真的會動，每一項都要真的點下去、送一次、登入一次。上線日往前抓三到五個工作天，當天才驗只會先上了再說。

跨裝置排版看的是看不看得懂、按不按得到，用自己手機從頭捲到底，看有沒有哪頁要橫向捲，按鈕拇指按不按得到。每個表單都要親手送出一次，用真實資料填、按下送出，確認信有沒有到、有沒有進垃圾郵件匣、收件人是不是還有人在看的信箱；表單壞掉的網站外表跟正常網站一模一樣，一定要親手送過。追蹤碼，也就是貼在網頁裡、訪客每來一次就記一筆的那段小程式，要上線當天就裝好，晚裝的話前面的訪客就是永久空白，驗收時打開網站在 GA4 這類分析工具的即時畫面看見自己這次造訪就算過關。

其餘一次點過去：找不到的頁面要跟全站長得一樣、給得出下一步；換掉舊網站的話舊網址要設好轉址，隨機測五個；圖片壓縮可以關掉 Wi-Fi 用行動網路看首頁要等多久；法遵頁面在頁尾找得到、點得開、內容不是範本空格。最後，向設計端要一句確認，製作期常刻意擋著不讓搜尋引擎收錄，忘記關掉是新網站最常見的一次性重傷。

網域、主機、後台、DNS，四把鑰匙要在自己手上

盤點帳號不是為了防誰，這些東西是公司資產，哪天要換人維護、搬主機，手上有沒有這幾把鑰匙，決定那件事是一個下午還是一個月。

網域是網址本身，用租的按年繳費，要確認登記的擁有者是自己、聯絡信箱自己收得到；主機是放網站檔案的空間，要拿到主機商、控制台帳號、到期日；後台是改文字換圖片發文章的介面，要拿到後台網址、專屬的最高權限帳號、目前有誰有帳號；DNS 是網路上的電話簿，管理權可能在別的服務那裡要單獨問，電子郵件也靠它收信，換主機若沒把郵件一起搬，就是網站好好的、信卻收不到。

實務上也有另一種常見安排，網域、主機由設計端統一代管、統一續費，好處是到期不會忘、出事有人處理，省掉自己盯四個到期日的麻煩，很多人就是這樣運作的。要問清楚的不是該不該這樣做，是三件事：這個網域最後登記在誰名下、哪天要自己接手或換人維護時怎麼轉移、轉移要不要另外收費。把答案寫進合約或報價單，現在問是一句話的事，等到要搬的時候才問，就變成得先談條件。

不論自管還是代管，都請設計端整理成一份文件，寫清楚服務名稱、登入網址、帳號、到期日、誰有權限，交付當天當場登入試一次，能進去才算收到。

第一週看收錄，第一個月看來源，第三個月看有沒有人動作

不要每天盯數字看，前兩週數字每天在跳，大約每月看一次、或改動網站後看一次就夠，下面切成三個時間點，每個只回答一個問題。

第一週：Google 找得到我嗎。搜 site: 加網域看有沒有結果，或用 Search Console 查，再搜公司全名看首頁排不排得到。正常：頁面陸續出現。要處理：一週後完全查不到，通常就是前面驗收提過的那個設定忘了關。

第一個月：有沒有人來、從哪來，來源三種，直接輸入網址、搜東西點進來、從別的網站或社群連過來。正常：幾乎全是直接流量、搜尋佔比低，只要有一點是搜尋來的就代表管線通了。要處理：數字大得不合常理通常是自己人反覆整理頁面，每項數字剛好兩倍通常是追蹤碼裝了兩次，掛零超過一週是沒裝好。

第三個月：來的人有沒有做出動作，送出詢問單、點電話、下載、訂閱。正常：詢問量小是常態，要看的是有沒有從零變成有、品質好不好。要處理：有流量沒動作通常是首屏沒回答為什麼是你；詢問來了全是不對的對象是服務範圍沒講清楚；所有人都在同一頁離開，那頁就是漏水點。

速度也要這時候才看得準，PageSpeed Insights 這類測速工具分數隨時能測，真實訪客的數字要有足夠流量才看得到，剛上線的小網站多半查不到，這很正常；測速報告是體檢報告，不是排名分數。

上線多久會有搜尋流量沒人能保證天數，被收錄通常很快，Google 說有些變更幾小時生效、有些要好幾個月；被收錄不等於有流量，先看得到品牌名通常一到兩週，再看得到服務類的詞要以季計算。廣告今天付錢今天曝光、停掉隔天歸零，自然搜尋不必付費但也沒保證，新網站前三個月廣告買時間、內容累積長期最常見。

什麼時候該改版？不看年限，看五個訊號中了幾個

維護只有三件事，內容、系統、備份帳號，排進行事曆比記在心裡有用，建議每月一次內容、每季一次系統與權限、每月確認備份還原得了。

內容更新不是不更新會被處罰，而是過期內容會讓你不再是最好的答案，從最容易過期的服務項目、案例、聯絡資訊開始；系統外掛更新常在補安全漏洞，確認有人負責、說得出多久做一次；備份要有人確認真的備到還原得回來，帳號要有到職異動離職的習慣，權限名單每季看一次、離職當天停用。上線後的使用者回饋是下一輪調整的依據，不必等改版，同一個問題被問三次以上，代表沒講清楚，直接補在對應頁面。

改版看訊號不是看年限，五個訊號中兩個以上就該評估：手機體驗撐不住、內容結構塞不下新業務、後台改不動、速度長期不合格、品牌定位變了。改版還是重做看三個開關：網址動不動、內容還能不能用、後台維不維護得動，中兩個以上重做較划算；不論哪種都要一次只改一件事，常見的翻車是同時換網址內容主機系統，事後沒人說得出是哪項造成的。

把這一整趟走完，回到最初的問題。網頁設計最終要換來的是流量的品質，不是流量本身。所謂品質，是有人來，而且願意留下詢問、留下電話、願意再回來看一次。Google 給經營者的建議方向也一樣，與其只盯點擊次數，不如看銷售、訂閱、更願意投入的受眾這些指標，那才是真正說服到人的證據。走到這裡，你大概已經知道接下來要決定什麼、要準備什麼；真的要動手時，如果還需要有人幫忙，歡迎找我們聊聊。