設計師為什麼要懂廣告？
你可能覺得「我是設計師，廣告投放是行銷的事」。這個想法沒有錯，但如果你多懂一點 Google Ads 的運作方式，你做出來的網站品質會直接往上跳一個等級。
原因很簡單：客戶花錢投廣告，廣告把流量帶到你設計的網站上。如果網站設計得好，訪客會轉換成客戶；如果設計得不好，廣告費就白花了。客戶到時候怪的不是廣告，而是「網站做得不好」。
根據 WordStream 的研究，Google Ads 的平均轉換率大約在 4.4% 左右，但表現好的到達頁面可以達到 11% 以上。這中間的差距，很大一部分來自頁面的設計品質。
所以懂廣告不是要你搶行銷人的工作，而是讓你在設計時就把廣告投放的需求考慮進去。客戶會覺得你更專業，你也能收更高的設計費。雙贏。
Google Ads 的基本運作邏輯
在開始談設計之前，你需要知道 Google Ads 是怎麼運作的。不用很深入，但基本邏輯一定要懂。
搜尋廣告的流程
使用者在 Google 搜尋一個關鍵字，比如「台北室內設計」。Google 會根據廣告主設定的關鍵字、出價金額和廣告品質分數，決定哪些廣告會出現在搜尋結果的頂端。
使用者點了廣告之後，會被帶到一個頁面——這個頁面就是你設計的到達頁面（Landing Page）。使用者在這個頁面上的行為（填表單、打電話、買東西）就是「轉換」。
品質分數很重要
Google 不是只看誰出價最高就讓誰的廣告排在最上面。Google 還會評估你的「品質分數」，這個分數跟三件事有關：
- 廣告的點擊率（廣告文案寫得好不好）
- 廣告跟搜尋關鍵字的相關性
- 到達頁面的體驗
第三點就是你設計師的領域了。如果你設計的到達頁面載入很慢、手機版看起來很爛、內容跟廣告文案對不上，品質分數就會很低。品質分數低的後果是——客戶要花更多錢才能讓廣告出現在同樣的位置。
換句話說，你的設計品質直接影響客戶的廣告費用。
到達頁面設計的核心原則
到達頁面跟一般網站頁面不一樣。一般頁面的目標可能是讓訪客「逛逛看看」，但到達頁面只有一個目標：讓訪客執行你想要的動作。
訊息一致性
這是最重要的原則。廣告上寫了什麼，到達頁面就要呼應什麼。
如果廣告文案是「台北室內設計 免費諮詢」，訪客點進來之後第一眼看到的標題就應該是關於免費諮詢的內容，而不是公司的歷史介紹。
很多設計師會把客戶的官網首頁當成到達頁面來用。這是很常見的錯誤——首頁有太多不同的訊息和連結，訪客不知道該往哪裡看，最後就離開了。
單一行動呼籲
到達頁面上應該只有一個 CTA（Call to Action）。不是「免費諮詢」+「加 LINE」+「下載型錄」+「看作品集」全部堆在一起。
每多一個選擇，訪客的決策壓力就大一分。當選擇太多的時候，最常見的決策就是——什麼都不做。
移除導航列
對，你沒看錯。好的到達頁面是沒有網站導航列的。因為導航列等於是在跟訪客說「你可以去逛別的頁面」。但你花了廣告費把人帶到這裡，你不希望他們去逛別的頁面，你希望他們在這裡完成轉換。
這個觀念對很多設計師來說很反直覺，但數據不會說謊。HubSpot 的測試發現，移除導航列的到達頁面轉換率比有導航列的高出 28%。
設計師必須知道的載入速度標準
Google Ads 的品質分數會直接看你的頁面載入速度。而且不只是 Google 的演算法在意，訪客也在意——每多一秒的載入時間，轉換率就會掉 7%。
Core Web Vitals 的三個指標
- LCP（Largest Contentful Paint）：最大內容繪製，要在 2.5 秒內完成
- INP（Interaction to Next Paint）：互動到下一次繪製，要在 200 毫秒內
- CLS（Cumulative Layout Shift）：累積版面位移，要低於 0.1
作為設計師，你能控制的主要是 LCP 和 CLS。
LCP 的設計影響
首屏的大圖片往往是 LCP 的元素。如果你設計了一張 3000px 寬的 Hero 圖片，沒有做任何壓縮就上線，LCP 會很慘。解決方法：
- 設計時就考慮圖片的尺寸和格式，優先使用 WebP
- Hero 圖片控制在 200KB 以內
- 如果是裝飾性背景，考慮用 CSS 漸層取代圖片
CLS 的設計影響
CLS 跟版面跳動有關。最常見的問題是圖片和廣告版位沒有預留空間，載入時畫面會「抖」一下。設計稿上就應該標示每個元素的固定尺寸，讓前端工程師可以提前保留空間。
轉換追蹤：幫客戶把追蹤代碼考慮進去
很多設計師在做網站時完全沒有考慮到追蹤代碼的需求。等網站做完了，客戶找行銷公司投廣告，才發現追蹤代碼沒地方放，或者放了之後功能不正常。
表單提交的追蹤
如果你的設計裡有表單（聯絡表單、報價表單、註冊表單），你需要在表單成功提交後跳轉到一個「感謝頁面」。這個感謝頁面的存在不只是為了禮貌——Google Ads 的轉換追蹤是靠這個頁面來偵測轉換的。
很多現代設計喜歡用 AJAX 提交表單，提交後直接在原頁面顯示成功訊息，不跳轉頁面。這在 UX 上是好的，但對轉換追蹤來說就比較麻煩。如果客戶有投 Google Ads 的計畫，你需要跟客戶討論要用哪種方式。
電話追蹤
如果網站上有電話號碼，記得用 tel: 連結。這不只是讓手機使用者方便撥打，也是讓 Google Ads 的電話轉換追蹤能正常運作。
GTM 預留
在網站的 <head> 和 <body> 標籤中預留 Google Tag Manager 的安裝位置。交付網站時順手裝好 GTM，客戶之後要加任何追蹤代碼都不需要再修改網站程式碼。
手機版設計決定廣告成敗
根據 Google 的數據，超過 60% 的搜尋廣告點擊來自手機。這表示如果你的到達頁面在手機上的體驗不好，你等於在浪費客戶 60% 以上的廣告預算。
手機版的設計重點
- CTA 按鈕要大到拇指能輕鬆點到（最小 48x48px）
- 表單欄位不要太多，手機上填 10 個欄位會讓人崩潰
- 電話號碼一定要可以直接點擊撥打
- 文字大小至少 16px，不要讓手機使用者瞇著眼睛看
不要做假 RWD
有些設計師的「響應式設計」只是把桌面版的東西縮小塞進手機螢幕。這不是 RWD，這是虐待手機使用者。真正的 RWD 是為不同螢幕尺寸設計不同的版面配置和互動方式。
一個我們之前協助的案例：一家新竹的牙醫診所，原本的到達頁面在手機上載入需要 6 秒，表單有 8 個欄位。我們重新設計手機版頁面，載入時間降到 2.2 秒，表單精簡到 3 個欄位（姓名、電話、想諮詢的項目）。結果手機的轉換率從 1.8% 提升到 5.2%，幾乎是三倍的成長。
設計師如何跟廣告投放團隊協作
知道了這些基礎知識之後，你還需要知道怎麼跟廣告團隊有效地合作。
在設計階段就拉廣告團隊進來
不要等設計稿都定案了才讓廣告團隊看。他們可能會提出一些你沒想到的需求，比如：
- 需要多個版本的到達頁面來做 A/B 測試
- 某些廣告群組需要不同的頁面
- 需要在頁面上放動態關鍵字插入
提供可編輯的模板
到達頁面不是做一次就完事的。廣告投放過程中會不斷測試和調整。如果每次改文案都要找設計師，效率太低了。設計一個好改的頁面模板，讓行銷團隊可以自己調整文案和圖片。
建立設計規範文件
把字體、顏色、按鈕樣式、間距等設計規範整理成一份文件。這樣廣告團隊在建立新的到達頁面時，即使沒有找你設計，至少能維持品牌的一致性。
結語：多懂一點，價值就多一點
作為網頁設計師，你不需要變成 Google Ads 專家。但如果你懂得品質分數的運作方式、到達頁面的設計原則、轉換追蹤的基本需求，你就能在設計階段就幫客戶考慮到這些面向。
客戶會發現你設計的網站「廣告投起來特別有效」，口碑自然就傳開了。而你也可以把「廣告效果導向的網站設計」當成一個服務項目來銷售，把你跟其他設計師區隔開來。
設計和行銷從來就不該是各做各的。把這兩件事接起來，才是真正的全方位網頁設計。