【LINE Bot 實戰篇】讓查詢更直覺！利用 AI 與圖文選單（Rich Menu）升級你的 LINE 機器人

先前在 《使用 Cloud Run 部署 LINE Bot Webhook 指南》 中，我們成功打造了基礎的 LINE Bot 骨架。

隨著功能越來越豐富，單靠「使用者輸入關鍵字」的查詢方式已經不夠直覺。為了讓 Ubike 的查詢功能更簡易、體驗更流暢，我決定為專案加入 LINE 圖文選單（Rich Menu） 功能！現在，使用者一進到聊天室，就能直接點擊下方的精美圖示進行快速查詢。

這篇文章將不談深奧的程式碼改動，而是專注在分享我是如何利用 AI 生成素材、線上調整尺寸，並一步步完美設定出 LINE 圖文選單的實戰過程。

💡 為什麼要使用圖文選單？¶

傳統的 LINE Bot 需要使用者自行輸入「查詢 O3」、「MTB」等關鍵字，不僅考驗使用者的記憶力，也容易因為錯字而導致查詢失敗。

透過圖文選單，我們可以將高頻率使用的功能（例如：腳踏車、O3、MTB 查詢）直接做成聊天室底部的固定按鈕。使用者「看得到就點得到」，大大提升了查詢的便利性。

🎨 第一步：利用 AI 快速生成選單圖片¶

市面上有許多精美的 UI 模板，但要找到完全符合自己需求的icon並不容易。這次我直接請 AI 協助，依據 LINE 官方的版型比例，生成了左到右分別代表「腳踏車」、「O3」、「MTB」的三格橫向選單圖片。

透過 AI 生成的好處是：風格統一、文字精準，且能完全依照功能客製化。

📐 第二步：符合 LINE 官方規範的「圖片尺寸調整」¶

AI 生成的圖片雖然好看，但往往解析度或比例不符合 LINE 官方的嚴格限制。如果直接上傳，系統會跳出錯誤。

LINE 圖文選單的尺寸限制：¶

• 大型選單： 2500 × 1686 或 1200 × 810 像素
• 小型選單： 2500 × 843 或 1200 × 405 像素（本次我們使用的是這種三格橫向的版型）
• 檔案格式： JPG 或 PNG，檔案大小需在 1MB 以下。

我的解決方案：¶

因為 AI 產出的圖片尺寸有些許落差，我透過網路上的線上圖片尺寸調整工具（Image Resizer），將圖片的寬高精準裁切並縮放到官方指定的 2500 × 843 像素，並壓縮檔案大小確保順利上傳。

💡 小撇步： 搜尋「線上修改圖片解析度」或「Image Resizer」，有很多免費工具可以免安裝直接調整像素（Pixel）寬高，非常方便！

⚙️ 第三步：LINE Developer 與後台關鍵設定¶

圖片準備好後，接下來就是讓它出現在聊天室的關鍵了。無論你是透過 LINE 官方帳號管理後台，還是透過 Messaging API 控制，都有一個最重要、但也最容易被忽略的隱藏設定！

1. 透過 LINE 官方帳號管理後台設定（推薦，最簡單）¶

1. 登入 LINE Official Account Manager。
2. 進入左側選單的 「聊天室相關」 ＞ 「圖文選單」，點擊建立。
3. 選擇對應的三格橫向版型，並上傳我們調整好尺寸的圖片。
4. 設定 A、B、C 三個區塊的動作（例如：點擊後自動發送「查詢腳踏車」、「查詢 O3」、「查詢 MTB」等文字）。
5. ✨ 【最關鍵的一步】：在頁面最下方的「高級設定」中，找到 「選單預設顯示方式」，務必勾選 「顯示」。

2. 透過 Messaging API 程式控制¶

如果你跟我一樣，喜歡將選單的控制權寫在程式裡，請注意建立 Rich Menu 的 JSON 結構：

• 請確保將 selected 屬性設定為 true（即 "selected": true）。
• 建立完成後，記得發送 POST 請求將該 richMenuId 綁定為全域預設（Default）：

[https://api.line.me/v2/bot/user/all/richmenu/](https://api.line.me/v2/bot/user/all/richmenu/){richMenuId}

為什麼這點很重要？ 如果沒有將預設顯示開啟（或 selected 設為 false），選單預設會是「收合」的。使用者進來只會看到空空的聊天室，必須自己手動點擊底部的「開啟選單」才會跳出來，這樣就失去自動導引的貼心體驗了！

🚀 成果展現¶

設定完成後，現在使用者只要一加入或點進我的 LINE 官方帳號，底部就會立刻彈出精美且對齊完美的圖文選單。左邊點擊查腳踏車、中間查 O3、右邊查 MTB，再也不需要手動打字，體驗直接提升好幾個檔次！

如果你也有在經營 LINE Bot，不妨也試試看用 AI 幫自己的機器人換上漂亮的新衣服吧！