Banner 設計怎麼做？網站與廣告橫幅的訊息、裁切與多尺寸交付

Banner 是放在特定網站或廣告版位中的單一入口。開始設計前，先確認它會出現在哪裡、主要要讓人理解什麼，以及點擊或閱讀後要前往哪一步；沒有這三項，畫面再完整也難以驗收。

網站橫幅、手機橫幅與自行上傳的廣告圖，可能使用相同主題，卻有不同容器、文字形式和檔案限制。可交付的做法是先收斂訊息，再依真實版位重排，而不是完成一張桌機稿後才把四周裁掉。

一、文章重點

二、先分工：Banner 與相鄰工作各管什麼？

同一個活動可能從核心畫面延伸網站、廣告和實體素材。本篇只處理「單一數位橫幅」如何進入確定版位，其餘工作依下表分流。

如果 Banner 是電商首頁的一部分，頁型、商品卡、促銷欄位和共用元件由 電商視覺系統指南 承接；若成品要進入實體輸出，閱讀距離與紙張完稿請分別查看 海報設計與印前檢查及 帆布設計指南。本篇不把螢幕像素直接換算成印刷規格。

三、先寫版位單，不要先猜一組尺寸

「首頁 Banner」仍不夠具體。全寬首屏、內容欄上方或活動卡片的容器與點擊方式不同。發包時應附頁面網址或線框、出現位置、裝置截圖，以及可能遮住畫面的導覽列、浮動按鈕或輪播控制。

版位單還要記錄正式尺寸或比例、預計顯示大小、是否由前端疊上標題和按鈕、點擊後的目的頁、上線與下架日、必須揭露的條件，以及誰負責核准內容。若規格尚未確定，先向網站或投放負責人取得當期需求，不以過往檔案名稱反推。

Logo、標準色、字體、照片和圖示應來自核准資產，不因舊檔「看起來一樣」就沿用。需要建立版本責任時，可回到 品牌規範導入指南整理。

四、一張 Banner 的訊息層級怎麼排？

先把需求改寫成一句內部任務，例如「讓已進入服務頁的人知道可以查看案例」，或「讓活動頁訪客辨認報名期限並找到入口」。這句話不是對外標題，而是用來判斷哪些資訊必須出現、哪些應留在下一頁。若一張圖同時要介紹品牌、說明產品、列完整辦法和收集聯絡資料，應先拆分頁面責任。

主標、副標、圖像、Logo 和行動入口不必每個都很大，但要有清楚先後。用最長核准文字和較複雜照片測試，才能知道版型在真實更新時是否仍成立。

五、網站 Banner 的文字，先決定要不要留在 HTML

網站橫幅可以是一張含字圖片，也可以由背景圖搭配頁面上的即時標題、說明與按鈕。後者較容易在窄螢幕重排、調整文字大小及更新內容，也能讓按鈕維持真正的互動元件；但實際做法仍要看網站架構、字型權利和視覺是否必須保留。

W3C 對 WCAG 2.2 成功準則 1.4.5 的 Images of Text 說明 指出，技術能達成相同呈現時，資訊應以文字而不是文字圖片傳達；可自訂或呈現本身屬必要時有例外，Logo 也被視為必要呈現。這項原則適用於網站內容，不代表所有廣告圖都不能含字。

因此交付前要標示哪些字是圖片的一部分、哪些由前端輸入。若受限於系統而必須上傳含字圖，頁面仍應在相鄰位置提供等值資訊；圖片替代文字則描述畫面的用途與關鍵內容，不用承擔整份活動辦法。

六、響應式裁切不是縮小桌機稿

桌機橫幅常有寬廣留白，手機容器卻可能接近方形或直式。只設定中央安全區，有時會保住 Logo，卻讓人物、產品或閱讀方向失去意義。設計端應先標出不可裁掉的主體、可以犧牲的背景，以及文字與主體在窄版要如何換位。

WHATWG 的 HTML Standard 回應式圖片章節 將同一內容依顯示寬度選擇不同解析度，與依窄、寬畫面改變內容裁切的 art direction 分開說明；後者可透過 HTML 的 picture、source 元素和媒體條件提供不同圖片。這表示設計交付也要說清楚是「同圖不同解析度」還是「不同構圖」，不能只交一個模糊的 RWD 資料夾。

Breakpoint 應由實際內容和容器決定，不照搬別站數值。從寬畫面逐步縮窄，觀察主體、留白和按鈕何時失去層級，再決定換圖或重排區間；若只支援單圖，則先約定裁切焦點。

七、廣告 Banner 規格要標明平台、格式與查核日期

網站 Banner 的尺寸由自家容器決定；廣告版位則由平台、活動類型和素材格式決定。以 Google Ads 為例，官方目前的 自行上傳多媒體廣告規格 對圖像廣告列出 GIF、JPG、PNG 與 150 KB 上限，並包含 300×250、728×90、320×50 等多種固定尺寸。

這些數值只代表該頁面在本篇查核日所列的 Google 自行上傳格式，不是網站、LINE、Meta 或所有廣告的共同標準；官方頁面也提醒部分尺寸有區域差異，並另有回應式多媒體廣告。若需求涉及 LINE 與 Facebook 的封面、圖文選單或廣告比例，應直接查閱 LINE 與 Facebook 圖片尺寸指南 ，不要把名稱相似的版位混在一起。

交付表應留下平台、活動類型、素材類型、規格連結和查核日期。上線前由帳號操作人員確認後台版位與預覽，不把舊數值固化成品牌規範。

八、多尺寸延伸，要分成縮放、藝術裁切與重新編排

多尺寸不是愈多愈好，而是覆蓋已確認會使用的版位。開始前先建立矩陣，列出每一版的用途、比例或像素、顯示裝置、介面遮擋、文字由圖片或系統提供、目的網址、檔案格式及大小限制。沒有出現在媒體或頁面計畫中的尺寸，可以先不製作。

1. 縮放：比例相同、構圖和文字層級不變，只需依顯示需求輸出不同解析度；仍要檢查壓縮後的小字和細線。
2. 藝術裁切：主題和層級相同，但窄版要移動焦點、減少次要背景或換一張取景較近的照片。
3. 重新編排：從橫式進入方形、直式或極窄廣告時，重新安排文字、圖像與識別，必要時縮短經核准的顯示文案。

跨尺寸一致指的是主題、承諾、品牌資產和下一步一致，不是座標完全相同。設計師應保留各版的共同命名，並在索引中標明哪些版本共用內容；其中一項期限或條件修改時，團隊才找得到所有受影響檔案。

九、法西納案例：查詢主題如何形成單一焦點

法西納為國民法官網站完成的圖片設計專案 收錄 14 張不同主題的網站 Banner。本篇封面這一張以「備選國民法官身分查詢」為主要文字，將放大鏡、搜尋欄和滑鼠游標放進同一閱讀方向；藍色層次及小人物則補足網站查詢情境。

這個畫面讓「查詢」同時出現在文字與圖像裡，不需要多一個不相關的裝飾主題。下方公假權益 Banner 則用手勢與核准圖章支援另一個主張；同屬網站素材家族，視覺入口仍隨內容而變。這裡分析法西納的視覺設計，響應式交付另以下列教學圖說明。

第一張圖為教學示例／非客戶交付，假設一個網站活動入口採用 HTML 標題與按鈕。寬版左右分工，窄版改成上下閱讀；它不是把桌機畫面整張縮小，也不是將兩側直接切掉。文字與按鈕應由前端建立，圖內呈現的只是版面位置。

十、交付不只是一包圖片檔

完整交付應包含核准母檔、各版位輸出、版本索引、即時文字清單、目的網址、圖片替代文字草案、裁切或焦點說明，以及素材來源與使用權利。若前端需要疊字，另提供字級關係、最大文字狀態與背景對比處理，不把重要資訊只留在設計稿註解。

檔名可包含活動或頁面、版位、比例、語言、版號與日期，但命名方式由團隊現有流程決定。關鍵是正式版、待核版與停用版能分辨，修改原因和核准人可回查。平台廣告還要附素材類型、規格查核紀錄與最終網址，網站版則附容器和 breakpoint 說明。

交接時讓實際上稿者從索引找到正確檔案、上傳預覽並回報異常。若只有設計者知道哪張能用，仍未完成交付。

十一、在真實容器與平台預覽中驗收

• 桌機、平板與手機的實際容器沒有裁掉主體、條件或品牌識別。
• 導覽列、輪播控制、浮動元件與廣告介面沒有遮住重要內容。
• 即時文字能在長標題、換行、放大與缺少副標的狀態下維持閱讀順序。
• 行動文字、可點擊範圍與目的頁一致，測試環境沒有留下錯誤網址。
• 輸出尺寸、格式、色彩、檔案大小及平台預覽符合本次規格。
• 檔名、版號、核准狀態、上線日與下架日能由下一位工作者辨認。

以上檢查回答的是素材能否正確使用，不用點擊或轉換數字替代。若要比較不同文案或圖像，應另外建立測試假設、控制變因和判讀條件；不要從單張 Banner 的外觀推定結果。

十二、Banner 設計常見問題

十三、先確認版位與下一步，再開始排畫面

Banner 設計的交付品質，來自版位、訊息、文字形式、裁切和版本責任都能被核對。若正在整理網站橫幅、活動廣告與多尺寸素材，可先查看法西納的 設計服務範圍；已有頁面截圖、平台規格與正式文案，也可直接 聯絡法西納，從實際版位盤點需要的版本與交付方式。