客人打開你的餐廳網站，他在找什麼

在開始談設計之前，先搞清楚訪客的行為模式。

大多數潛在客人打開餐廳官網，不是要深入了解你的品牌故事，而是在找三件事：

  1. 位置和交通（你在哪裡，怎麼去）
  2. 營業時間（今天有沒有開、幾點關）
  3. 菜單和大概價位（值不值得去、吃什麼）

這三件事，如果訪客在 10 秒內找不到，很可能就去 Google Maps 或其他平台找了。

好的餐廳官網設計，是讓這三件事極度容易被找到，然後再傳遞品牌氛圍。不是反過來——先說品牌，再讓人翻到最底下才看到地址。

七個讓餐廳官網真正有效的設計原則

原則一：Hero 區塊傳遞的是氛圍，不是資訊量

餐廳官網的首頁 Hero（最上方的大圖區塊），最常見的設計錯誤是：塞太多文字。

店名、口號、電話、立即訂位按鈕、今日特餐、滿額折扣——全部擠在一起。

好的 Hero 應該做一件事：讓人在 3 秒內感受到「這個地方的氛圍是什麼」。

  • 如果你是精緻日式料理，就用一張乾淨的和食特寫照片，配上 Noto Serif 字型的簡單店名。
  • 如果你是熱鬧台式小吃，就用明亮的用餐場景照片，配上活潑的字體和橘紅的 CTA 按鈕。
  • 如果你是工業風咖啡廳，就黑白色調、大留白、極簡。

氛圍一致性比資訊量重要。

原則二：菜單要直接可看，不要只放 PDF

很多餐廳官網的「菜單」點進去是一個 PDF 連結——這是糟糕的使用者體驗。

原因：

  • 手機上打開 PDF 通常很慢，而且不好縮放閱讀
  • Google 爬蟲索引 PDF 菜單的效果遠不如 HTML 頁面
  • 更新菜單時，PDF 需要重新上傳，而 HTML 直接編輯即可

建議做法：把主要菜單品項直接展示在網頁上，分類清楚（前菜、主食、飲品等），每個品項有名稱、簡短描述、價格。特殊需求（素食/不辣/無麩質）用圖示標記。

這個修改對 SEO 也有直接幫助——搜尋「信義區義式料理推薦」的人，能透過菜單頁面的內容找到你。

原則三：照片是轉換率的一號決定因素

餐廳官網的設計，沒有任何元素比圖片更重要。

規則很簡單：真實的食物照片 + 真實的用餐環境照片，遠比美麗但假感的圖庫照有效。

如果你沒有專業攝影，退而求其次的建議：

  • 用手機的肖像模式（iPhone 或 Android 都有）在自然光下拍食物
  • 選擇店內最漂亮的角落，在午後自然光時拍一張空間照
  • 不要用閃光燈，不要用廚房白熾燈的角度

不完美但真實的照片，比完美但假感的 Stock 照片更能讓客人產生「我想去這裡」的感受。

原則四：訂位 CTA 要在頁面的三個位置出現

訂位 CTA（Call to Action，行動號召按鈕）的位置：

  1. Hero 區塊：第一個畫面就要有「立即訂位」
  2. 菜單頁面下方：看完菜單想去了，立刻可以訂
  3. 網站底部（Footer）：永遠在那裡，當訪客看完整個頁面還沒行動時

CTA 文字建議用「立即訂位」或「預約座位」，而不是「聯絡我們」——前者明確告訴人要做什麼。

如果你用 LINE 或電話訂位，放 LINE 的快速加入按鈕，比表單更符合台灣消費者的習慣。

原則五：Google Maps 嵌入是必須的

很多客人決定「我要去這家」之後，下一動是「那怎麼去」。

在網站上嵌入 Google Maps（google.com/maps 提供免費嵌入碼），比只放地址要好得多——因為客人可以直接點開導航，而不需要複製地址再去 Maps 搜尋。

同時確認你的 Google 商家檔案（Google My Business）是完整且更新的，因為很多手機用戶會從地圖搜尋直接找到你，不一定會進到你的官網。

原則六：行動版的體驗要優先設計

台灣餐廳的訪客中，有超過 70% 是用手機瀏覽的——特別是那些在捷運上查「晚餐去哪吃」的人。

行動版設計的三個重點：

  • 菜單文字要夠大，不要需要放大才看得到
  • 電話號碼要是可點擊的 tel: 連結，點一下就能撥
  • 地圖連結要對應到行動版 Google Maps（maps.google.com）

原則七：讓 Google 看得懂你是一家餐廳

搜尋引擎在判斷一個網站是什麼行業時，除了關鍵字，還看你有沒有使用結構化資料（Schema Markup）。

在 Next.js 的 app/layout.tsx 或 app/page.tsx 加入 JSON-LD 的 Restaurant Schema：

{
  "@context": "https://schema.org",
  "@type": "Restaurant",
  "name": "你的餐廳名稱",
  "address": { "@type": "PostalAddress", "streetAddress": "地址", "addressLocality": "台北市" },
  "telephone": "+886-2-XXXX-XXXX",
  "openingHours": ["Mo-Fr 11:30-21:00", "Sa-Su 11:00-21:30"],
  "priceRange": "$",
  "servesCuisine": ["台灣料理", "義式料理"]
}

這讓 Google 在顯示搜尋結果時，可能直接顯示你的營業時間和星評，大幅提升點擊率。

最後：一個餐廳官網的最低門檻清單

不管你的預算和規模，以下幾項是餐廳官網的最低門檻：

  • [ ] 明確的店名和幾句話介紹（你是什麼類型的餐廳、給什麼樣的人）
  • [ ] 至少 3-5 張真實食物照片
  • [ ] 完整菜單（或至少主要品項）
  • [ ] 營業時間（含例休日說明）
  • [ ] 地址 + Google Maps 嵌入
  • [ ] 訂位方式（電話/LINE/訂位表單，明確說明）
  • [ ] 手機瀏覽正常

這七件事做到，你的官網就已經比台灣 60% 的餐廳網站做得好了。