食在烤肉官網：幫代烤品牌做成可轉換的單頁體驗

這是幫 食在烤肉（宜蘭在地代烤／備料／活動餐飲品牌）做的官方形象網站。定位很清楚：把「看懂服務 → 看到菜單與套餐 → 確認服務地區 → 用 LINE／電話報名」串成一條路徑。

正式網站

• 線上連結：https://real-bbq-vibes.netlify.app/
• 服務範圍涵蓋宜蘭、台北、羅東等地的代烤、家庭烤肉、公司活動與尾牙等場景

網站目標

1. 30 秒內說明品牌在做什麼
2. 菜單與套餐圖清楚可看
3. 服務區域透明，減少無效詢問
4. CTA 直接導向 LINE、電話、社群

部署在 Netlify（單頁錨點導覽），對小型店家維護成本較低。

技術選擇

頁面區塊大致是：Hero → 關於我們 → 菜單 → 服務地區 → FAQ → 聯絡報名。右下角有社群／回到頂端的快捷入口，方便手機單手操作。

做得比較用心的互動

• Hero：背景影片＋打字機標題，先建立氣氛再給「馬上報名」。
• 菜單：分類切換、套餐圖可放大預覽（自製 lightbox，含鍵盤操作）。
• 聯絡：3D 翻轉名片效果，把聯絡資訊做成「像真的遞出名片」。
• 進場動畫：用 IntersectionObserver 自訂指令，區塊進到可視範圍再浮現。
• SEO：標題、OG、結構化資料、sitemap／robots 都有補，方便被搜尋與分享。

實作心得

很多官網專案會先裝一堆輪播、燈箱套件。這次我反而多數互動自己寫——依賴少、行為可控，也比較好符合品牌主視覺。

對小型品牌來說，轉換路徑比頁數重要。寧可單一長頁把報名按鈕放對位置，也不要七個子頁讓人點到迷路。

結語

這案子讓我更確定：前端不只有「把設計稿還原」，還要幫業主想清楚訪客下一步會按哪裡。品牌故事、菜單照片、LINE 按鈕——三者對齊，官網才真的是業績工具。

若你在找宜蘭／北部代烤，歡迎直接逛逛正式站：食在烤肉。