橫幅設計要先分兩種：網站首頁或活動頁上方的主視覺橫幅，尺寸沒有統一標準，由網站版型的內容寬度與各裝置的顯示區域決定，手機與桌機可以準備不同裁切；數位廣告橫幅則依平台規格製作，例如 Google AdSense 廣告大小指南列出的中矩形 300×250、超級橫幅 728×90、行動裝置的 320×50，其他平台請依各平台當下規格。版面上，一張橫幅只講一件事：一個標題、一句補充說明、一個行動按鈕。網站橫幅的重要文字建議用網頁文字疊在圖片上，不要做死在圖片裡，上線前再檢查手機裁切、檔案大小與點擊追蹤。
網站橫幅和廣告橫幅：用途與規格來源不同
| 類型 | 出現位置 | 規格由誰決定 | 主要任務 |
|---|---|---|---|
| 網站主視覺橫幅 | 首頁、分類頁、活動頁上方 | 自家網站版型 | 讓訪客一眼知道這個網站或活動是什麼 |
| 站內活動橫幅 | 內文中、側欄、購物車頁 | 自家網站版型 | 把訪客帶到特定活動或商品 |
| 數位廣告橫幅 | 其他網站、應用程式的廣告版位 | 廣告平台 | 在別人的頁面上吸引點擊 |
網站橫幅可以依自己的版型調整，尺寸、比例、文字位置都由設計與工程一起決定；廣告橫幅則要符合平台規定的尺寸與素材格式，否則可能無法上傳或無法在某些版位顯示。兩者的設計原則相通，但交付規格完全不同，製作前先確認這張橫幅要放在哪裡。要印刷的海報、報紙或雜誌廣告屬於平面設計，版面與出血規格另有考量，可參考平面廣告設計的規劃重點。
網站主視覺橫幅的尺寸怎麼決定
首頁橫幅「要做多大」，答案在網站版型裡，可以依這個順序決定：
- 確認版型：橫幅是滿版還是放在內容寬度內，以及在桌機上佔首屏多少高度。
- 決定比例：依顯示區域的寬高決定橫幅比例，寬度以版型的顯示寬度上限為準。
- 準備不同裁切：寬幅畫面縮到手機上主體會變得很小。MDN 把「不同版面顯示不同裁切的圖片」稱為藝術指導問題，可以用 picture 元素搭配 source 的 media 條件，讓手機顯示另一張裁切過的圖。
- 提供多種解析度：同一張圖準備不同寬度的檔案，用 srcset 與 sizes 讓瀏覽器依螢幕挑選合適的版本。
- 預留安全區：主體與文字放在中間區域，避免不同螢幕寬度裁切時被切掉。
- 首屏圖片不要延遲載入：web.dev 的文章建議首屏內的圖片積極載入、其餘圖片再延遲載入，首頁主視覺若位在首屏，就不要設成延遲載入。
尺寸定案後，把寬高、安全區與檔案格式寫成規格表，之後換檔期都照同一份規格製作。
數位廣告橫幅的常見尺寸
Google AdSense 的廣告大小指南列出網站上常見的廣告尺寸，可作為製作廣告橫幅的參考：
- 300×250 中矩形廣告：適合嵌入文字內容中或顯示在文章結尾。
- 336×280 大矩形廣告：用途和中矩形相近。
- 728×90 超級橫幅廣告：適合放在主要內容上方。
- 300×600 半頁廣告：版面較大，可呈現較豐富的內容。
- 320×50 超級橫幅行動廣告與 320×100 大型行動橫幅廣告：行動裝置用的橫幅，後者高度是前者的兩倍。
在 Google Ads 投放時，回應式多媒體廣告的做法不同：上傳圖片、廣告標題、標誌與說明等素材後，Google Ads 會依可用的廣告空間調整廣告大小、外觀和格式，要準備的是符合規格的素材，而不是每個尺寸各做一張。上傳自製圖像廣告的尺寸、檔案格式與大小上限，以及 Meta、LINE 等其他平台的規格，請依各平台說明頁當下公布的內容製作。
橫幅版面的資訊層次
版面要讓人一瞥就抓到重點：
- 一張橫幅只講一件事：一個活動、一個商品或一個主張，不要把三個優惠擠在同一張。
- 由大到小排三層：標題字級放大，補充說明縮小一級，行動按鈕用對比色獨立出來，品牌標誌放在不干擾閱讀的位置。
- 文字區要乾淨：文字放在背景單純的區域，或在圖片上加一層底色。依 WCAG，一般文字與背景的對比至少要四點五比一，圖片中的文字也適用。
- 網站橫幅的文字用網頁文字：WCAG 的「文字圖片」準則要求能用文字呈現的資訊就用文字，標誌這類文字屬於例外。用網頁文字疊在圖片上，手機上可以重新排版，改文案也不用重新出圖。
- 給圖片替代文字：依 WCAG，非文字內容要有提供相同目的的文字替代，橫幅圖片的替代文字寫出它傳達的訊息。
橫幅文案怎麼寫
橫幅文案的篇幅很少，每個字都要有用途：
- 標題說出對訪客的好處或活動名稱：具體寫出是什麼，例如新品系列名稱、適用對象或可以解決的問題，避免只寫形容詞。
- 補充說明寫條件：活動期間、適用範圍、是否限量，條件要和活動規則一致，促銷規則的寫法可參考促銷活動方案的規則設計。
- 按鈕用動詞：說出點下去會得到什麼，例如查看新品、領取優惠、預約諮詢，寫法可參考CTA 按鈕的文案與位置。
- 和到達頁一致：橫幅上的標題、價格與條件，點進去的頁面要能馬上對到，否則訪客會以為點錯。
同一個活動要做好幾種尺寸時，先寫一份文案主版，小尺寸只留標題與按鈕，大尺寸才放補充說明。
輪播橫幅要注意的事
首頁常用輪播一次放好幾張橫幅，但後面幾張可能不會被看到，使用前先確認幾件事：
- 自動播放要能暫停：依 WCAG 的「暫停、停止、隱藏」準則，自動開始、持續超過五秒並與其他內容同時呈現的移動資訊，要提供暫停、停止或隱藏的方法，除非該動態是活動中必要的部分。
- 首張放主要訊息：重要的活動放在首張，其他張放次要內容。
- 每張都能獨立成立：每張有自己的標題、按鈕與替代文字，不依賴前後張才看得懂。
- 提供手動切換：上一張、下一張與指示點要夠大，手機上也點得到。
- 控制張數：張數越多，每張被看到的機會越分散，檔案總量也越大。
如果只有一個主要訊息，可以考慮改用單張橫幅，下方再放分類入口，讓訪客直接選擇要去的地方。
上線前的檢查清單與成效追蹤
- 裁切：在手機、平板、桌機實際檢查主體與文字是否被切到。
- 可讀性：在手機上不放大也看得清標題與按鈕，對比符合要求。
- 檔案：圖片已壓縮，格式與大小符合網站或廣告平台的規定。
- 連結：每張橫幅的連結正確，廣告連結加上廣告活動參數。
- 替代文字與載入：替代文字已填寫，首屏橫幅沒有被設成延遲載入。
站內的活動橫幅可以用 GA4 追蹤：Google 的電子商務評估說明指出，可以評估站內宣傳活動的曝光與點擊，例如宣傳特價活動的橫幅，顯示時送出 view_promotion、點擊時送出 select_promotion，再用 creative_name 與 creative_slot 分辨素材與版位。廣告橫幅的成效則以各廣告平台的報表為主，搭配網站上的轉換資料判斷。
常見問題
首頁橫幅要做多大的尺寸？
沒有統一尺寸。要依網站版型的內容寬度、是否滿版，以及在桌機與手機上預計佔多少高度決定，再分別準備桌機與手機的裁切版本，交給設計前先寫成規格表。
橫幅上的文字可以直接做在圖片裡嗎？
上傳的圖像廣告，文字就在圖片裡；網站橫幅則建議把標題與按鈕做成網頁文字疊在圖片上，手機上能重新排版，螢幕閱讀器讀得到，改文案也不必重新出圖。
輪播橫幅比單張橫幅好嗎？
要看內容。訊息只有一個時，單張比較清楚；確實有幾個同等重要的活動才考慮輪播，並提供暫停與手動切換，每張都要能獨立看懂。
Google 多媒體廣告一定要做好幾種尺寸嗎？
使用回應式多媒體廣告時，上傳圖片、標題、標誌與說明等素材，Google Ads 會依廣告空間調整大小與格式；上傳自製圖像廣告時，才需要依各尺寸分別製作。
橫幅圖片檔案要多小才夠？
網站橫幅沒有固定標準，原則是在畫質可接受的前提下盡量壓縮，並為不同螢幕提供不同寬度的檔案；廣告橫幅則以各平台說明頁公布的檔案大小上限為準。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
網站橫幅要能長期好維護，版型要先替它預留好位置。京采的網頁設計服務可以在規劃版型時一起訂出首頁與活動頁的橫幅規格，處理手機與桌機的不同裁切、圖片載入與可在後台自行更換的橫幅區塊，讓行銷人員換檔期時不必每次找工程師。歡迎帶著現有網站或新活動的需求與我們聯繫。
