做網站時，首頁通常是討論最久的一頁。每個人都有想放的東西：老闆想放品牌理念，業務想放熱賣商品，行銷想放最新活動。全部放上去，首頁就變成一條很長、什麼都有、但看不出重點的頁面。
首頁不是網站的濃縮版，而是網站的入口和分流站。這篇整理品牌官網首頁常見的 7 個區塊、建議的排列順序、每個區塊怎麼寫，以及上線前可以用來檢查的 5 個問題。
如果你還在決定整個網站要有哪些頁面，可以先看〈網站要有哪些頁面？〉，這篇專門處理首頁這一頁。
首頁的任務：說清楚、分流、推下一步
Nielsen Norman Group 在〈Homepage Design: 5 Fundamental Principles〉（2024 年 3 月）整理了首頁設計的原則，其中幾點特別適合中小品牌對照：
- 說清楚你是誰、做什麼：用一句簡短的標語說明，取代「歡迎光臨」這類沒有資訊的招呼語。
- 用實例呈現內容：放具體的服務、商品或作品，而不是只放分類名稱。
- 引導行動與瀏覽：重要的任務在視覺上要最明顯，連結文字要寫清楚點下去會看到什麼。
- 保持簡單：用使用者熟悉的版面，減少動態效果，避免自動輪播和自動播放影片。
另外，首頁對搜尋結果也有影響。Google〈搜尋結果中的網站名稱〉（2025-12-10 更新）說明，Google 在搜尋結果顯示的網站名稱，是依據首頁的內容和網路上對網站的引用自動產生的，參考的訊號包含首頁的結構化資料、網頁標題和標題文字。首頁上的品牌名稱寫得一致、清楚，也有助於讓搜尋結果顯示正確的名稱。
首頁 7 個區塊的建議順序
下面是多數形象官網適用的順序，可以依你的生意調整：
| 順序 | 區塊 | 回答客人的問題 |
|---|---|---|
| 1 | 第一屏：一句話定位與主要按鈕 | 這是不是我要找的？ |
| 2 | 服務或商品入口 | 你們有哪些東西可以選？ |
| 3 | 信任證據 | 別人用過覺得怎樣？ |
| 4 | 代表作品或熱門商品 | 做出來的東西長什麼樣子？ |
| 5 | 合作流程或品牌特色 | 怎麼進行？跟別家差在哪？ |
| 6 | 常見問題 | 我心裡還有幾個疑問 |
| 7 | 聯絡行動區 | 好，我要怎麼開始？ |
這個順序背後的邏輯，是客人做決定的過程：先確認找對地方，再看有什麼選擇，接著需要證據讓自己放心，最後解決剩下的疑問、採取行動。每個區塊都是在回答一個問題，回答完就往下一個。
第一屏：一句話定位、一個主要按鈕
第一屏是打開網頁、還沒往下捲時看到的畫面。這一屏要完成三件事：
主標語：說你做什麼、為誰做。 避免「用心打造每一個細節」這類每家都能用的句子。比較好的寫法是具體說出服務和對象，例如「台中的手工皮件工作室，接受刻字客製」「幫中小企業做品牌網站」。看的人三秒內知道這是不是他要找的。還寫不出來的話，可以先用〈品牌官網怎麼做？〉裡「我們是誰、為誰而做、為什麼選我們」三句話整理定位，再濃縮成一句。
副標或一句補充：給一個選你的理由。 例如「三天出貨」「全台遠端合作」「十年木作經驗」，挑一個最有力的就好。
主要按鈕：只放一到兩個。 一個主要行動（預約、詢價、選購），最多再加一個次要行動（看作品、看服務）。按鈕文字寫清楚動作，「預約諮詢」比「了解更多」明確。
主視覺：一張說明你在做什麼的圖。 商品、作品、門市空間或工作中的照片，都比抽象的意境圖好。要注意這張圖往往是第一屏最大的元素，web.dev 的〈Largest Contentful Paint (LCP)〉（2025 年 9 月更新）建議最大內容在 2.5 秒內顯示完成，主視覺的檔案大小要控制好。
如果想用輪播放好幾張主視覺，建議先想清楚：NN/g 的同一篇文章提醒，自動輪播可能讓使用者混亂，也有無障礙的問題。與其讓三個訊息輪流出現，不如挑一個最重要的。
中段區塊：每一塊回答一個疑問
服務或商品入口。 用 3～6 張卡片列出主要服務或商品分類，每張卡片一個標題、一句說明、一個連到內頁的連結。不要在首頁把每項服務寫完，首頁負責介紹，詳細內容留給內頁。
信任證據。 客戶評價、合作品牌、媒體報導、實績數字（例如服務過的客戶數、成立年份）。評價要寫出具體的內容，「溝通很順，兩週就上線」比「非常推薦」有說服力。
代表作品或熱門商品。 挑 3～6 件，每件都能點進去看完整內容。有新作品時替換這一區，首頁就會一直保持新鮮。
合作流程或品牌特色。 客製服務適合放流程，例如「諮詢、提案、製作、交付」四步，讓人知道找你之後會發生什麼事；商品品牌適合放特色，例如原料、產地、做法。
常見問題。 挑 3～5 個最常被問、會影響決定的問題，例如價格範圍、需要多久、服務地區。答案寫短，需要詳細說明就連到完整的常見問題頁。
結尾與頁尾：最後再推一次
很多人看到首頁最下面，已經大致決定了。這時候如果沒有按鈕，就要捲回最上面找。所以首頁最後一個區塊，建議放一個清楚的聯絡行動區：一句話邀請加一個按鈕，例如「有想法了嗎？預約 30 分鐘的線上諮詢」。
聯絡行動區下面是頁尾，每一頁都會出現，適合放這些資訊：
- 聯絡方式：電話、Email、LINE、地址
- 營業時間或回覆時間
- 社群連結
- 次要頁面：常見問題、徵才、隱私權政策
- 公司名稱與網站名稱
不同類型網站，首頁順序怎麼調
7 個區塊是一個起點，不同生意型態可以這樣調整：
| 網站類型 | 第一屏重點 | 順序調整 |
|---|---|---|
| 專業服務（設計、顧問、教學） | 專長與服務對象、預約諮詢 | 作品案例往前，流程不可少 |
| 實體門市（餐廳、美容、工作室） | 門市照片、營業時間、訂位或預約 | 地址與交通提早出現，常見問題放用餐或預約須知 |
| 電商品牌 | 主力商品與購買按鈕 | 熱門商品往前，信任證據放評價和出貨說明 |
| 一頁式網站 | 單一服務或活動 | 7 個區塊就是整個網站，每區內容寫完整 |
不管哪一種，原則都一樣：客人最在意什麼，就往前放。
首頁上線前，用這 5 個問題檢查
- 三秒測試：請一個不熟你生意的朋友看第一屏三秒，再問他「這家在做什麼？」答不出來，主標語要再改。
- 手機上看得清楚嗎：很多人是用手機看網站，第一屏的字會不會太小、按鈕好不好按、主視覺有沒有被裁掉，細節可以參考〈RWD 響應式網站是什麼？〉。
- 每個區塊都有下一步嗎：服務卡片能點進內頁、作品能點進案例、最後有聯絡按鈕。
- 有沒有過期的內容：結束的活動、去年的公告、停賣的商品，都要拿掉。
- 載入快不快：主視覺、作品圖都經過壓縮，手機網路下打開也不用等太久。
如果首頁有人看、卻很少人往下點或聯絡，問題可能不只在首頁，可以對照〈網站有流量卻沒詢問？轉換率低的 7 個原因〉逐項檢查。
首頁設計常見問題
首頁要多長？
沒有固定長度，看每個區塊是不是都在回答客人的問題。7 個區塊、每區精簡呈現，在手機上大約捲幾次就到底。如果某個區塊說不出它在回答什麼，就可以拿掉。
首頁一定要放最新消息嗎？
不一定。更新頻率高、消息對客人有用（例如新品、課程開班）才放；一年只更新幾次的話，放在首頁反而讓人看到很舊的日期。可以改成有活動時才出現的公告列。
首頁可以用影片當背景嗎？
可以，但要注意檔案大小和載入速度，也要確認沒有影片時畫面一樣看得懂。NN/g 建議避免自動播放影片，如果要用，至少讓重要的標語和按鈕不受影片影響、一打開就看得到。
首頁多久要改一次？
主標語和區塊順序確定後，不用常改。比較需要定期更新的是代表作品、熱門商品、評價這些區塊。basedot 做的網站有中文後台，這些內容都能自己替換，也可以接上 AI 用對話更新。關於頁怎麼搭配首頁一起建立信任，可以參考〈關於我們頁面怎麼寫？〉。
結論：首頁的每一區，都在回答一個問題
首頁要放什麼，可以從客人做決定的順序來想：先確認找對地方，再看選擇、看證據、解決疑問，最後採取行動。照這個順序排出第一屏、服務入口、信任證據、代表作品、流程或特色、常見問題和聯絡行動區，首頁自然會清楚好讀。
動手之前，先寫下首頁第一屏那一句話。這句話寫清楚了，後面的區塊都會比較好排。
有架設網站的需求，歡迎跟 basedot 網頁設計聯繫。
