形象官網案例 · 餐飲品牌數位化
每天都在換的菜單， 做成不用重做的網站
Monsieur Long 隆先生是大稻埕貴德街上的手工 Gelato 店，主廚出身法式甜點，口味每天現做、每天不同。這種店最難的不是把網站做漂亮，是「做完之後誰來維護」。我們把口味拆成兩層：插畫、色票與文案這種幾個月才動一次的東西留在設計資產裡，「今天櫃上有哪幾款」則交給店家自己在手機上勾選——勾完存檔，官網的跑馬燈、今日供應板與口味頁立刻跟著換。
每日更新
店家自己用手機勾選口味
16 款
程式生成的口味插畫
0 張圖檔
插畫全部是向量，免頻寬
2 張表單
合作邀請・伴手禮訂購
怎麼運作
店家早上勾一勾，官網就換好了
冰淇淋店的內容一天一變，如果每次都要找工程師，網站三個月後就會停在過期的資訊上。所以我們把「會變的」跟「不會變的」分開，讓店家只碰會變的那一半，而且不需要任何技術背景。
1→
開店前勾選
手機開後台，把今天做的口味打勾，順手寫一句「今日提早售完」
2→
按下儲存
純表單、沒有花俏介面，按一下就好——網站快取同時失效
3
官網立刻換
首頁跑馬燈、今日供應板、口味頁的「今日供應」標籤同時更新
內容架構
把「會變的」跟「不會變的」拆開
設計
口味目錄
插畫色票、風味文案、圖示母題。幾個月才動一次，屬於設計資產，走版控與部署
↓
營運
今日供應
今天賣哪幾款、臨時新口味、一句公告。每天都變，住在資料庫，店家自助維護
↓
自動
自動判定
期間限定填結束日期就會自己下架、新品自動掛 NEW，不用回頭手動清理
設計與技術
品牌自己的視覺語言，做成會動的
融化的邊緣
黃色跑馬燈下緣掛著會呼吸、偶爾滴落的水滴，滑鼠靠近還會被拉長。取自店家 IG 限動的構圖，用貝茲曲線畫形狀、只動 transform，手機也不掉幀。
灌滿的字
品牌名的第二行載入時由下往上被冰淇淋灌滿，微微溢出再落回。墨色描邊撐住字形，所以液面高低都讀得到字。
程式生成的口味插畫
16 款口味不是 16 張圖檔，是同一個元件依色票與母題生成的向量插畫。新增口味只要填一個顏色，插畫自動成立。
共享元素轉場
點口味卡，那球冰會直接變形成詳頁的大圖。用瀏覽器原生的 View Transitions，不支援的瀏覽器就是不動，不會壞。
兩張表單一個收件匣
合作邀請與伴手禮／客製蛋糕走同一支 API、進同一個後台，店家只要看一個地方。前後端雙重驗證＋防機器人。
手繪店舖地圖
不嵌第三方地圖：那會在頁面上戳出一塊別人的視覺，也受安全政策限制。改畫大稻埕街廓示意圖，導航按鈕直接開 Google 地圖。
營業狀態即時計算
以台北時區判斷現在是營業中、今日公休還是已打烊，週二週三公休的規則寫一次全站共用。
食安資訊不憑空填
過敏原、含酒、素食欄位在店家逐項確認前一律留空，前台顯示「以店內標示為準」。這條規則有自動測試在守。
效能與無障礙
動畫全部走 transform 與 opacity；中文用系統字堆疊，省下半 MB 的字體 CSS。支援減少動態效果、鍵盤操作與跳至主要內容。
為什麼是形象官網
餐飲品牌真正需要的不是漂亮，是活著
01
不會過期
菜單天天換的店，網站最怕停更。把維護權交回店家手上，網站才活得久。
02
接得到生意
品牌聯名、市集邀請、企業送禮的詢問都收進同一個後台，不靠私訊翻紀錄。
03
值得被記住
第一眼要讓人覺得這家店有個性——這件事沒有捷徑，只能從品牌自己的東西長出來。
你的品牌，也值得一個不會過期的官網
不論是餐飲、選物還是任何內容天天在變的品牌，我們都能把「維護」設計進去，而不是留給你。先看看 Monsieur Long 的實際成果。