Web 活動頁 2026

暑期活動頁

Summer Activity Page

與行銷團隊合作操刀一檔品牌轉型暑假活動頁,把「缺錢才上工」翻轉為「填補生活的空」,並嘗試使用 AI 工具加速從發想到落地的設計流程。

Role
Web Designer
Team
我 + 行銷團隊 + 工程師
Year
2026
Tools
Figma、Miro、VS Code、Claude
Work Life Balance 暑假活動封面

背景與目標

這是一檔以「Work Life Balance」為核心的暑假行銷活動,背後是一次品牌定位的轉型:人們對打工的定義已經改變,不再只是為了賺錢,而是追求生活感與自由度,所以這次我們把品牌訴求從「缺錢才找打工」翻轉為「填補生活的空」,並透過抽獎機制引導使用者完成註冊、履歷與應徵,帶動會員成長。

這次與以往最大的差異是第一次與藝人合作。行銷團隊負責洽談並提供代言人相關素材,我的任務則是把素材整合進一個同時承載品牌訴求、活動機制與轉換目標的活動頁中

在這次專案中,我想要達成三個目標:

目標 1

最大化代言人的價值

代言人是這次開銷最大、也最強的素材。如何讓他不只是「貼在頁面上的明星照」,而是真正承接品牌訴求、貫穿整頁體驗的主角,是設計的第一個目標。

目標 2

把活動機制包裝得有吸引力

抽獎券規則多步驟、獎品種類也多。如何在不墊高理解成本的前提下,把「任務」包裝成讓人想參與的內容,順順地引導使用者一路完成轉換。

目標 3

用 AI 工具提升團隊溝通效率

活動頁牽涉行銷、設計、工程多方協作,時程又緊。我嘗試把 AI 工具帶進流程,用來加速對齊、把抽象想法快速變成可被討論的具體樣子。

目標 1:最大化代言人的價值

盧廣仲給人的感覺是陽光、充滿能量的感覺,我的目標是讓盧廣仲像夥伴一樣,陪著使用者一路走完整個活動,我刻意讓這份特質和網站明亮的黃色主調、馬卡龍色點綴搭在一起,讓使用者一進站就接收到輕鬆、正向的氛圍,並在一些版位加入動態效果,讓代言人從一張照片變成會動、有情緒的角色

透過主視覺吸為網站定調

主視覺的目的是抓住眼球並為網站的定調,所以我以盧廣仲「破殼而出、握拳舉大聲公」的姿勢為主角,搭配周圍漂浮的生活與工作道具,設計了一組進場動畫,讓元素依序進場、最後再讓生活中的各種物件填滿整個畫面,把「填滿你的空」的活潑氛圍,在最開頭就一次傳達出去。

Hero 主視覺動畫示意(破殼而出 + 道具漂浮進場)

透過引導提高互動

在活動任務區,目標從「吸睛」轉成「引導互動」,這裡我用了 GIF 素材,讓盧廣仲從「低頭滑手機」變成「展示手機畫面」的動作,表現出他正在操作的樣子,帶動使用者跟著完成註冊、領抽獎券這些任務。比起靜態插圖,動起來的代言人更像在「現場陪你一起做」,也讓這個轉換步驟看起來更輕鬆、不像在被要求填表。

活動任務區 GIF 示意(滑手機動作引導使用者領券)

目標 2:把活動機制包裝得有吸引力

這個活動要傳遞的內容很多,從抽獎券任務、填寫表單抽獎品,到導外的社群留言活動。我必須整合這些步驟與規則,包裝成好理解的資訊,並且要有吸引力

我將任務拆解成三個關鍵問題處理:

三個關鍵問題與我的解法

問題一:獎品太多、每項數量不一

行銷的需求是希望能夠營造出獎品豐富且要露出獎品照片,設計上如果我全部攤開,版面會被拉得長,且如果要一次看到所有獎品,那麼圖片也不能放太大。

和行銷討論後,我決定犧牲既要且要的心態,選出最具吸引力的獎品放在最前面,並將收和元件預設為展開,讓用戶一進到獎品區就先看到最誘人的獎品,增加他看下去的意願。搭配照片與 emoji,讓整個區塊視覺上增添豐富與熱鬧感。

獎品區:主打類別預設展開、產品圖具象化 + emoji 點綴

問題二:用戶要到 APP 完成三階段任務

活動一的任務要跳到 APP 分三個階段完成註冊會員、填寫履歷、應徵職缺,每完成一階段就拿到數量不等的抽獎券。這三件事剛好是平台最在意的轉換(衝註冊數、履歷數、應徵數),我的設計目標不是教用戶如何註冊會員,一來是並非所有會員都是新用戶,二來是太多教學內容會讓活動的目的失焦,要做的是「讓用戶有動力把任務做完」

我把整個版位用票券意象包裝:任務卡做成票券造型的容器、周圍灑落飄落的抽獎券當裝飾,連下方的盧廣仲都擺出呼籲「快來拿抽獎券」的姿態。讓畫面到處都是票券,增加獎勵感,暗示用戶「再做一步就能多拿幾張」

活動一:票券造型容器 + 灑落飄券 + 代言人呼籲(三階段任務)

問題三:大賽辦在站外 Threads 平台

第二個活動需要在 Threads 上留言,最大的阻力是用戶要跳到另一個平台操作但又不確定要做到什麼程度才能參加活動,很容易在這裡卡住或放棄,我從幾個方向改善這個問題:

活動二:操作示意圖 + 一鍵複製 +「空/工」重複背景(導去 Threads)

目標 3:用 AI 工具提升團隊溝通效率

以往不管是對需求方還是對工程師,我都是用靜態稿件來溝通;偶爾會用 Figma Prototype 功能來模擬一些反饋,但要花許多時間設定節點與參數,比較複雜的互動也很難實現,最後常常得靠溝通和大家的想像力把細節補完,而想像不一致,正是後續來回修改的根源

在這個專案桌中我嘗試使用 Claude Code 直接做了一個簡化版的原型網站,拿來和行銷、工程師溝通。它的完成度大約落在 wireframe 與精稿之間。比起靜態稿或 Figma Prototype,它有兩個關鍵差別:

用 Claude Code 做的可互動原型網站(完成度介於 wireframe 與精稿之間)

總結

收穫 1

代言人是最強而有力的素材

好的素材值得花時間好好對待。把盧廣仲拆成不同姿態並搭配動畫,讓他從「一張明星照」變成貫穿全頁的主角,把最貴的資產用到最滿。

收穫 2

方向不明確時,不要急於動工

沒先對齊就動工,白做了一堆用不上的方向。設計的效率不在做得多快,而在有沒有在對的時間點問對問題。

收穫 3

AI 工具的初次使用

第一次用 Claude Code 做出真程式碼的可互動原型,讓行銷與工程一次對齊。設計師的價值不只在畫得好,更在願意用新工具把問題解得更快、更準。