官網 Hero Section（主視覺區塊）設計完整攻略：中小企業如何用首頁第一屏在 3 秒內讓訪客決定要不要繼續往下滑
首頁第一屏（Hero Section）決定訪客留不留。中小企業老闆必學的標語、視覺、CTA 三大設計法則，附實戰檢查清單與常見地雷。
為什麼 Hero Section 這麼重要？因為訪客只給你 3 秒
幫客戶規劃官網時，最先要想清楚的就是「首頁第一屏」——也就是訪客打開網頁、還沒滾動之前看到的那一整塊畫面。設計圈習慣叫它 Hero Section（主視覺區塊），它通常包含：一句主標語、一句副標語、一張背景圖或產品圖、加上一顆主要的行動按鈕（CTA）。
聽起來很簡單對吧？但根據 Nielsen Norman Group 多年的眼動追蹤研究，使用者第一眼花在頁面上的時間只有 2.6 秒，而決定要不要繼續看下去的關鍵時間是 10 秒以內。換句話說，你的 Hero Section 不只是「好看就好」，它是訪客判斷「這家公司有沒有解決我的問題」的第一道關卡。
很多中小企業老闆的官網第一屏，常見三種地雷：第一種放一張很美但跟業務無關的素材圖；第二種寫「歡迎光臨 XX 公司」這種對訪客毫無意義的廢話；第三種放滿了輪播 Banner，每張都很想說，結果什麼都沒說清楚。這篇文章就是要把這塊版位拆解開來，讓你知道每個元素該怎麼擺、怎麼寫。
Photo by Eftakher Alam on Unsplash
Hero Section 的四個核心元素，缺一不可
1. 主標語（H1）：用一句話講清楚「你能幫客戶解決什麼問題」
主標語是 Hero Section 裡字最大的那行字，也是 SEO 上的 H1 標籤。它的任務不是炫耀公司多厲害，而是讓訪客在 1 秒內知道「我來對地方了」。
很多公司喜歡寫成這樣：「專業、創新、值得信賴的解決方案夥伴」——這句話放在任何公司官網都成立，等於什麼都沒說。比較好的寫法是把「目標客群 + 痛點 + 結果」三件事壓成一句話。例如（以下為示範文案）：
- ❌ 廢話版：「打造卓越的數位體驗」
- ✅ 具體版：「幫台灣中小企業做出 3 個月內回本的官網」
- ❌ 廢話版：「您的最佳清潔夥伴」
- ✅ 具體版：「桃園商辦清潔，下班後完成、隔天早上像新的一樣」
具體版的好處有兩個：一是訪客一看就知道是不是自己要的；二是 Google 在抓取 H1 時，也能準確判斷你這家公司是做什麼的，對 SEO 直接加分。
2. 副標語：補一句「為什麼選你不選別人」
主標語講「做什麼」，副標語就講「憑什麼」。這通常是字小一點、放在主標語下方的一兩句話。它的功能是把主標語的承諾再具體化，可以是：年資、服務件數、技術背景、合作客戶數量等可驗證的事實。
舉個示範寫法對照：
- 主標語（示範）：「幫台灣中小企業做出 3 個月內回本的官網」
- 副標語（示範）：「累積服務 OO 家客戶，從一頁式到完整 CMS，明碼標價、不綁約。」
注意副標語要避免空泛形容詞，「優質」「卓越」「專業」這些字眼放上去，跟沒寫一樣。改成數字、客戶數、年資，可信度立刻不同。如果公司剛起步沒有亮眼數字，可以講方法論或承諾，例如「不滿意全額退款」「30 天免費試用」。
3. CTA 按鈕：給訪客一個「現在馬上可以做的事」
Hero Section 一定要有一顆主要的行動按鈕（Call To Action），最好還要有一個次要按鈕。主要 CTA 通常是「免費諮詢」「立即報價」「預約 Demo」這類強度高的動作；次要 CTA 則是「看作品集」「了解更多」這種給還在觀望的訪客用的。
按鈕文案的小撇步：用第一人稱寫，往往比第二人稱有效。例如「立即諮詢」改成「幫我估價」、「免費試用」改成「我要試試看」，根據 Unbounce、HubSpot 等海外平台公開的轉換率測試報告，第一人稱按鈕的點擊率通常會提升 10-20%。這個方向值得做為自家網站 A/B 測試的起點。
4. 視覺元素：用對的圖把抽象服務變具體
Hero Section 的視覺有三種主流做法：
- 產品實拍或服務情境照：適合有實體產品或服務場景的公司，例如餐廳放招牌菜、清潔公司放清潔過程、機械業放廠房或產品。
- 產品介面截圖：適合做 SaaS 或軟體工具的公司，直接讓訪客看到你的產品長什麼樣。
- 插畫或抽象視覺：適合服務本身難拍照的行業，例如行銷顧問、法律服務、財務顧問。但要小心，太通用的素材圖會讓網站看起來像模板。
最常見的地雷是用免費圖庫隨手抓一張西裝筆挺的握手照，這種圖在台灣中小企業官網上重複到爆，反而會降低信任感。寧可花錢請攝影師拍真實員工或案場，效果好十倍。
Photo by Amélie Mourichon on Unsplash
四個 Hero Section 設計常見地雷，看看你中了幾個
地雷一：自動播放的大型輪播 Banner
很多老闆很愛輪播——可以放 5 張圖、講 5 個重點。但實務上，絕大多數訪客只會看到第一張，根據 ConversionXL、Notre Dame 大學等公開的研究，第二張之後的點擊率往往掉到 1% 以下。更慘的是，自動播放會干擾閱讀，使用者還沒看完就被切換掉，反而留下「這網站好亂」的印象。
建議：除非你有強烈的活動主打（例如電商週年慶），否則 Hero 只放一張靜態圖，把訊息聚焦在「一件事」上。
地雷二：第一屏被滿版影片塞滿，沒留半點文字
近幾年流行用全頁面背景影片，畫面很有感、很潮，但問題是手機開啟時要載半天，而且很多客戶滑進來時只看到一片動來動去的影像，搞不清楚這家公司在做什麼。如果一定要用影片，請務必：影片設靜音自動播放、檔案壓縮到 3MB 以下、上面一定要疊文字標語和 CTA 按鈕。
地雷三：CTA 按鈕跟背景融在一起，看不到
常見的問題之一是「按鈕跟背景同色系」。例如背景是淺灰，按鈕也是淺灰；或是按鈕完全透明只有外框。這會讓 Hero 區看起來「沒有可以點的地方」，訪客自然不會行動。
解法很簡單：CTA 按鈕的顏色要跟整體配色系形成對比。如果你的網站是藍色系，CTA 用橘色或黃色就很跳；如果整體偏白，CTA 用深色實心按鈕就很明確。
地雷四：手機版完全沒測試
根據資策會與多家分析平台的統計，台灣的網站流量超過七成來自手機，但很多客戶的 Hero Section 是「在電腦上設計、忘記檢查手機」的狀態。常見問題包括：文字大小在手機上變得很小、CTA 按鈕被切到、背景圖在手機上構圖完全跑掉只看到一片藍天或一片地板。
務必在 iPhone 跟 Android 都實機測試一次，特別是 H1 標題的斷行位置和按鈕的觸碰範圍（Apple HIG 建議至少 44×44 點）。
Photo by Domenico Loia on Unsplash
實戰檢查清單：上線前對照這 8 個項目
準備好你的官網第一屏，依序對照下面 8 項，全部過關再上線：
- 主標語是否在 1 秒內讓人知道「你是做什麼的、幫誰解決問題」？
- 副標語是否用具體數字或可驗證事實，而不是「專業、卓越、值得信賴」？
- 是否有一顆明確的主 CTA 按鈕？按鈕文案是不是「動詞 + 第一人稱」？
- 主 CTA 按鈕的顏色是否與背景形成強對比，視覺上一眼看到？
- 視覺主圖是否跟業務直接相關？避免用通用的握手照、團隊合照素材圖？
- 手機版的 H1 標題不會被切斷？CTA 按鈕在拇指可觸範圍？
- 第一屏載入時間是否在 2.5 秒以內？（用 PageSpeed Insights 測 LCP 指標）
- 是否有「次要 CTA」給還在觀望的訪客？例如「看作品」「了解服務內容」？
結語：Hero Section 不是設計師的事，是老闆的事
Hero Section 的本質不是「設計好不好看」，而是「你有沒有想清楚要對誰、講什麼、希望他做什麼」。這三件事其實是商業策略，不是視覺設計——所以老闆必須自己參與決策，不能全丟給設計師。
如果你現在的官網第一屏，連你自己都講不出「主要客群是誰、最大的差異化是什麼、希望訪客第一個動作是什麼」，那不管設計師再會做圖，這塊版位都不會幫你帶來詢問單。建議從本週開始，拿著上面的 8 項檢查清單，先把自己官網的 Hero 對照一遍。
下一步若需要進一步把整個首頁、服務頁、聯絡頁串成一條完整的轉換動線，歡迎聯絡奧隆（ORON）聊聊你的需求。