很多人開始做網站時，第一個動作是找範本。
看別人的首頁怎麼排、主視覺要放照片還是插圖、按鈕用什麼顏色、區塊要不要做動畫。這些事情很直覺，因為一改馬上看得到。
真正困難的問題通常晚一點才出現：
- 首頁到底要先講什麼？
- 這個網站主要是寫給誰看？
- 服務很多，要把哪一個放前面？
- 訪客看完第一屏之後，下一步要去哪裡？
- 為什麼網站做得很完整，別人還是看不懂你到底在賣什麼？
這些其實不是「設計完成後再補文案」的小問題，而是網站的骨架。骨架還沒定，就先把畫面做漂亮，後面很容易為了塞內容一直改版。
做網站前，先決定這一頁要完成什麼
一個網站可以同時介紹品牌、累積名單、展示專業、銷售商品、接受預約、交付課程，但每一個重要頁面最好有一個主要工作。
例如首頁的工作，通常不是把公司所有資訊一次講完，而是讓第一次來的人快速知道：這裡是不是和我有關、你能幫我什麼、接下來應該去哪裡。
免費資源頁的主要工作可能是完成報名；方案頁的工作則可能是幫助已經有興趣的人理解內容、適合度與購買方式。
如果一頁同時要訪客看文章、加入社群、下載電子書、預約、購買、訂閱，而且每個按鈕都一樣醒目，訪客就得自己替你決定哪一件事最重要。
所以開始設計之前，先回答一句話：
這一頁最希望哪一種人，完成哪一個主要行動？
為什麼要先把訊息說清楚？因為設計很難替模糊的內容補答案
如果訊息清楚，設計可以讓它更容易被看見、更容易閱讀、更容易行動。
如果訊息模糊，設計也會把模糊放大。
一個很漂亮的首屏，如果只寫「開啟無限可能」「與你共創未來」「專業整合解決方案」，訪客可能覺得質感不錯，卻還是不知道這個網站到底能幫他什麼。
StoryBrand 很重視一個基本觀念：客戶才是故事主角，品牌比較像帶路的人。放到網站上，就是先讓訪客看見自己的問題與想要的結果，再說明你怎麼協助，而不是一打開就要求他先讀你的品牌歷史。
如果想完整理解這個框架，可以延伸閱讀 StoryBrand：品牌不是故事主角，客戶才是。
先別急著想標語，先把這 5 個問題回答清楚
很多人聽到「先做訊息」，會以為只是先想一句首頁標題。其實要先弄清楚的，是下面這 5 個問題。
- 你主要在幫誰？不要只寫「適合所有想成長的人」，要能看出主要對象。
- 他現在卡在哪裡？是沒有穩定詢問、課程一直做不完，還是服務很專業卻說不清楚價值？
- 他想得到什麼結果？結果要比「提升效率」「創造價值」更具體。
- 你用什麼方法幫他？這裡不是把所有功能列出來，而是讓人理解你提供的解法。
- 下一步是什麼？訪客看懂之後，要知道接下來應該閱讀、報名、查看方案，還是完成其他主要行動。
這 5 個答案如果還一直變，代表網站其實還沒進入「該挑版型」的階段。
用 5 秒測試檢查：陌生人到底看懂了多少？
網站訊息是否清楚，不一定要靠複雜工具才能先做第一輪判斷。可以找一個不熟悉你業務的人，只讓他看首頁第一屏幾秒，再把畫面關掉。
接著問他三件事：
- 這個網站大概在提供什麼？
- 它主要是在幫哪一類人？
- 如果有興趣，下一步可以做什麼？
如果對方只能回答「看起來很專業」「好像跟顧問有關」「應該是在做 AI 或網站」，卻說不出具體價值，代表畫面可能有質感，但訊息還不夠清楚。
這個測試的重點不是要求陌生人背出你的完整商業模式，而是檢查網站有沒有在第一時間完成最基本的定向。
首頁第一屏至少要讓陌生訪客快速看懂 3 件事
第一屏不用把所有內容一次講完，但第一次進來的人，最好很快就能看懂這三件事：
- 這個網站大概是給誰的。
- 這裡能幫我得到什麼結果。
- 我下一步可以做什麼。
例如「協助講師把專業整理成可銷售與交付的線上課程事業」，就比「實現你的知識影響力」更容易理解。
後者聽起來漂亮，但讀者還得自己猜這句話跟他有什麼關係；前者則直接說清楚對象、方向和結果。
品牌語氣當然可以有，但前提是先讓人看懂，再談風格和個性。
先排內容層級，再決定版面長什麼樣
訊息確定之後，下一步不是立刻選顏色，而是決定訪客需要按照什麼順序理解。
以服務型首頁為例，常見順序可以是：
- 先確認對象與主要結果。
- 讓訪客看見目前問題。
- 說明你的方法或服務。
- 補上為什麼值得相信的證據。
- 處理適合度、常見疑慮與風險。
- 給出清楚的下一步。
這不是固定模板。真正重要的是每一區都有明確任務，而且前一區回答完，下一區才接著處理新的問題。
如果內容層級還沒有建立，版面就很容易變成「這裡空一塊，所以再補三張卡片」。最後看起來很滿，卻沒有閱讀順序。
模板可以用，但要讓模板配內容，不是內容配模板
模板最大的價值，是節省版面、元件與響應式設計的時間，不是替你決定網站應該說什麼。
常見問題是：模板有 4 個功能卡，就硬想 4 個功能；模板有 3 個價格欄，就把服務硬拆成 3 種；模板有一整排客戶 Logo，但現在沒有足夠證據，也想找東西把它填滿。
這時候順序已經反過來了。
比較好的做法是先決定這一頁需要哪些內容，再選能承接這些內容的版型。模板不合，就改模板；不要為了保留範本，把訊息改得四不像。
訊息先做，不代表網站只靠文案就能成交
「訊息先於設計」不是在說設計、速度、功能或使用體驗不重要，也不是說只要文案寫得好，其他問題都能忽略。
可以這樣看：訊息決定訪客要理解什麼；設計讓重點更容易被看見；功能讓他能完成操作；速度和穩定性則決定整個流程會不會被技術問題打斷。
這幾層都重要，但如果最前面的「你到底要對誰說什麼」沒有答案，後面的每一層都會缺少判斷標準。
所以訊息先做是一個排序原則，不是一個「只要文案、不要其他」的主張。
訊息清楚之後，設計才知道該強調什麼
這時候視覺設計要做的，不只是「變好看」，而是建立閱讀層級。
設計應該幫助訪客知道：
- 第一眼先看哪裡。
- 哪個標題最重要。
- 主要按鈕是哪一個。
- 哪些內容屬於同一組。
- 哪些資訊可以快速掃讀。
字級、粗細、留白、對齊、顏色、圖片與區塊節奏，都應該服務這個理解順序。
如果每一區都用大標題、亮色背景、陰影、動畫和強烈按鈕，最後不是「每一區都重要」，而是沒有真正的重點。
網站好不好用，也不能等到最後才檢查
訊息清楚、畫面漂亮之後，還要確認第一次來的人真的知道怎麼操作。
例如表單送出後有沒有明確回饋、手機版按鈕是否好點、選單用的是客戶看得懂的文字，還是公司內部術語；付款失敗時，使用者知不知道接下來怎麼辦。
Nielsen Norman Group 的可用性原則一直強調系統狀態、熟悉語言、錯誤預防與清楚回饋。這些聽起來不像華麗設計，卻直接影響人能不能順利完成任務。
如果網站已經存在、但不知道應該先修訊息、UX、速度還是轉換，可以看 網站不好看只是表面：真正的網站改善要同時看轉換、UX、訊息與速度。
轉換率優化放在後面，不代表上線前不用思考轉換
這裡很容易被誤解。
「最後才談轉換」不是說網站做好後才第一次想行動呼籲（CTA）、表單或購買流程。主要行動從一開始就要定義，追蹤也應該從上線時就準備好。
真正要放在後面的，是根據實際資料做的轉換率優化（Conversion Rate Optimization，CRO）。
因為如果訊息還沒定、頁面結構一直改、方案也一直變，這時候測按鈕文字或顏色，通常很難知道結果代表什麼。
比較合理的順序是：先把核心訊息與主要流程做穩，上線後蒐集資料，再找出真正流失的位置，接著用訪談、客服紀錄、使用行為或其他研究理解原因，最後才提出可驗證的修改。
完整方法可以延伸閱讀 轉換率優化不是改按鈕顏色：一套完整的轉換流程診斷方法。
以講師網站為例：先裝滿功能，不一定比較接近成交
假設一位講師想建立自己的線上課程網站，很容易一開始就問：
- 要不要會員系統？
- 要不要購物車？
- 要不要課程進度？
- 要不要預約功能？
- 要不要自動寄信？
這些功能最後都可能需要，但它們不能替代前端最重要的問題：適合的客戶進來之後，能不能理解「這個課程是在幫我解決什麼、為什麼值得繼續看、下一步怎麼走」。
如果答案還很模糊，先增加功能只會讓網站變得更複雜。
所以網站系統與訊息都重要，只是順序要先把人看得到、看得懂的價值釐清，再決定需要什麼功能承接。
從零建立網站，可以照這 7 步往下做
- 決定主要客群：這個網站最優先服務誰。
- 決定頁面任務：每一個重要頁面最希望完成什麼。
- 寫出核心訊息：問題、結果、方法與下一步。
- 排內容層級：訪客需要先理解什麼，再理解什麼。
- 做視覺設計：用排版、色彩與留白建立閱讀順序。
- 檢查使用體驗：手機、表單、導航、回饋與錯誤狀態都能正常操作。
- 上線後再優化：追蹤資料，找出真正流失點，再做轉換實驗。
這個流程不代表每一步只能做一次。文案與設計一定會互相調整，網站上線後也會持續改。
真正的差別是：你是在一個清楚的方向上持續調整，還是每次看到新模板、新工具、新做法，就把整站重新來一次。
常見問題
從零做網站，一定要先把所有文案寫完才能設計嗎？
不用。先確定核心訊息、主要內容層級與主要行動即可。細部文案可以在設計過程中調整，但如果連網站要對誰說什麼、希望他做什麼都還沒定，就不適合先把版面完全定死。
網站設計不重要嗎？
很重要。只是設計最有價值的時候，是它有清楚內容可以服務。好的設計能強化層級、信任、閱讀與操作；但它很難替一個模糊的定位或訊息補上答案。
使用模板會不會讓網站看起來不專業？
不一定。模板是工具，問題通常出在直接沿用範本邏輯，而沒有依自己的內容重新安排。只要訊息、內容層級與品牌視覺有重新整理，使用模板仍然可以做出清楚而專業的網站。
網站上線多久後才能開始做轉換率優化？
上線後就可以開始蒐集資料，但不一定要立刻做正式 A/B 測試。先確認追蹤正常、主要流程可用，累積足夠的行為與回饋資料，再針對真正的流失點提出假設，通常比一開始就測小細節更有意義。
結論：先把要說什麼想清楚，再決定網站要怎麼呈現
從零建立網站，最容易重做的原因不是技術不夠，而是順序顛倒。
先看到漂亮模板，就開始做畫面；畫面做完才發現內容塞不進去；內容勉強塞完，又發現訪客不知道下一步；最後再用更多區塊、按鈕與功能補洞。
比較穩定的做法，是先確定客群、頁面任務與核心訊息，再建立內容層級，接著才讓設計把重點放大，讓使用體驗把摩擦降低。
網站上線之後，再用真實資料告訴你下一個最值得改善的地方。
先把內容說清楚，設計才知道該強調什麼。
參考資料
StoryBrand｜StoryBrand Framework／Clarify Your Message｜2026年查閱
Donald Miller｜Building a StoryBrand: Clarify Your Message So Customers Will Listen
Nielsen Norman Group｜10 Usability Heuristics for User Interface Design｜2026年查閱
Google Search Central｜Understanding Google Page Experience｜2026年查閱
Adam Wathan、Steve Schoger｜Refactoring UI