LINE Flex Message 完整教學：從零開始製作精美卡片訊息

LINE Flex Message 是 LINE 提供的進階訊息格式，讓你可以設計出比一般文字訊息更豐富、更吸引人的卡片式訊息。無論你是行銷人員、電商經營者，還是 LINE Bot 開發者，學會製作 Flex Message 都能大幅提升訊息的點擊率和轉換率。

什麼是 LINE Flex Message？

Flex Message 是一種高度客製化的訊息格式，具有以下特點：

• 彈性佈局：可以自由排列文字、圖片、按鈕
• 互動元素：支援按鈕、連結、電話撥打等動作
• 精美設計：可以設計出接近網頁的視覺效果
• 跨平台：在 iOS 和 Android 上都能正確顯示

Flex Message 的應用場景

1. 電商促銷

展示商品圖片、價格、折扣資訊，配合「立即購買」按鈕：

• 新品上市通知
• 限時特賣活動
• 購物車提醒

2. 餐廳菜單

設計精美的菜單卡片，讓顧客一目了然：

• 每日特餐
• 套餐組合
• 外送訂餐

3. 活動邀請

製作活動邀請函，包含時間、地點、報名按鈕：

• 講座活動
• 會員專屬活動
• 節慶活動

4. 數位名片

設計個人或公司名片，包含聯絡資訊和社群連結：

• 業務名片
• 公司介紹
• 服務項目

如何使用我們的 Flex Message 製作器

步驟 1：選擇範本或從空白開始

前往 LINE Flex Message 製作器 [blocked]，你可以：

• 選擇範本：從電商、餐廳、活動、名片等分類中選擇適合的範本
• 從空白開始：如果你有特定的設計想法

步驟 2：編輯內容

使用視覺化編輯器修改內容：

• 文字：點擊文字區塊直接編輯
• 圖片：上傳或輸入圖片網址
• 按鈕：設定按鈕文字和連結
• 顏色：調整背景色、文字色

步驟 3：即時預覽

右側的預覽區會模擬 LINE 聊天室的效果，讓你確認訊息在手機上的呈現。

步驟 4：匯出 JSON

完成設計後，點擊「複製 JSON」按鈕，即可取得 Flex Message 的 JSON 代碼。

Flex Message 的基本結構

了解基本結構有助於你進行更進階的客製化：

{
  "type": "flex",
  "altText": "這是替代文字",
  "contents": {
    "type": "bubble",
    "hero": {
      "type": "image",
      "url": "圖片網址",
      "size": "full"
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "標題文字",
          "weight": "bold",
          "size": "xl"
        }
      ]
    },
    "footer": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "button",
          "action": {
            "type": "uri",
            "label": "按鈕文字",
            "uri": "連結網址"
          }
        }
      ]
    }
  }
}

{
  "type": "flex",
  "altText": "這是替代文字",
  "contents": {
    "type": "bubble",
    "hero": {
      "type": "image",
      "url": "圖片網址",
      "size": "full"
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "標題文字",
          "weight": "bold",
          "size": "xl"
        }
      ]
    },
    "footer": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "button",
          "action": {
            "type": "uri",
            "label": "按鈕文字",
            "uri": "連結網址"
          }
        }
      ]
    }
  }
}

主要區塊說明

設計技巧

1. 保持簡潔

• 不要塞太多資訊
• 重點突出
• 留白適當

2. 視覺層次

• 標題要醒目
• 使用不同字體大小區分層級
• 善用顏色引導視線

3. 行動呼籲

• 按鈕文字要明確
• 顏色要突出
• 位置要顯眼

4. 圖片品質

• 使用高解析度圖片
• 注意圖片比例
• 壓縮檔案大小

如何在 LINE Bot 中使用

如果你是開發者，取得 JSON 後可以這樣使用：

Node.js 範例

const flexMessage = {
  type: 'flex',
  altText: '這是 Flex Message',
  contents: { /* 你的 JSON 內容 */ }
};

client.pushMessage(userId, flexMessage);

const flexMessage = {
  type: 'flex',
  altText: '這是 Flex Message',
  contents: { /* 你的 JSON 內容 */ }
};

client.pushMessage(userId, flexMessage);

Python 範例

from linebot.models import FlexSendMessage

flex_message = FlexSendMessage(
    alt_text='這是 Flex Message',
    contents={ # 你的 JSON 內容 }
)

line_bot_api.push_message(user_id, flex_message)

from linebot.models import FlexSendMessage

flex_message = FlexSendMessage(
    alt_text='這是 Flex Message',
    contents={ # 你的 JSON 內容 }
)

line_bot_api.push_message(user_id, flex_message)

會員功能

登入會員後，你可以享有以下功能：

• 保存作品：將設計好的 Flex Message 保存到雲端
• 管理作品：在會員後台查看、編輯、刪除作品
• 快速載入：下次使用時可以快速載入之前的設計

常見問題

Q: Flex Message 有字數限制嗎？ A: 整個 JSON 大小不能超過 50KB。

Q: 圖片有什麼限制？ A: 建議使用 HTTPS 網址，圖片大小建議不超過 1MB。

Q: 可以使用動態內容嗎？ A: 可以，在 LINE Bot 中可以動態生成 JSON 內容。

Q: 如何測試 Flex Message？ A: 可以使用 LINE 官方的 Flex Message Simulator，或直接在我們的工具中預覽。

結語

LINE Flex Message 是提升 LINE 行銷效果的利器。透過我們的視覺化編輯器，即使不會寫程式也能輕鬆製作精美的卡片訊息。

立即開始設計你的第一個 Flex Message 吧！

相關連結

• LINE Flex Message 官方文件
• LINE Flex Message 製作器 [blocked]