LINE Flex Message 卡片製作完整教學：打造吸睛的互動訊息

Flex Message 是 LINE 官方帳號可以發送的進階訊息格式，可以包含圖片、按鈕、多欄排版等豐富的視覺元素。本文教你如何使用視覺化編輯器製作專業的 Flex Message。

LINE 是台灣最普及的通訊軟體，擁有超過 2,100 萬用戶。對於企業和品牌來說，LINE 官方帳號已經成為與客戶溝通的重要管道。而 Flex Message 是 LINE 提供的進階訊息格式，可以讓你製作出精美的卡片式訊息，大幅提升訊息的吸引力和互動率。

什麼是 Flex Message？

Flex Message 是 LINE 官方帳號可以發送的一種進階訊息格式。與一般的文字訊息不同，Flex Message 可以包含圖片、按鈕、多欄排版等豐富的視覺元素，讓訊息看起來就像一張精心設計的卡片。

Flex Message vs 一般訊息

特點	一般訊息	Flex Message
視覺呈現	純文字或單張圖片	豐富的卡片式排版
互動元素	無	可添加按鈕、連結
排版自由度	低	高，支援多欄、多層結構
點擊率	一般	較高
製作難度	簡單	需要 JSON 格式

Flex Message 的優勢

更高的點擊率：精美的視覺設計可以吸引用戶注意，提高訊息的點擊率。

更豐富的資訊呈現：可以在一則訊息中呈現更多資訊，如產品圖片、價格、購買按鈕等。

更好的品牌形象：專業的卡片設計可以提升品牌形象。

更強的互動性：可以添加多個按鈕，引導用戶進行不同的操作。

奧特 LINE Flex 製作器介紹

雖然 Flex Message 功能強大，但它需要使用 JSON 格式來定義訊息結構，這對於不熟悉程式的人來說是一大門檻。奧特線上工具的 LINE Flex 製作器提供了視覺化的編輯介面，讓你不需要寫任何程式碼，就能製作出專業的 Flex Message。

主要功能

功能	說明
視覺化編輯器	拖拉式操作，所見即所得
即時預覽	即時查看訊息在 LINE 中的呈現效果
範本庫	提供多種預設範本，快速開始
JSON 匯出	一鍵匯出 JSON 格式，直接使用
屬性編輯	詳細的屬性設定，自訂每個細節

快速開始：使用範本

如果你是第一次使用，建議從範本開始。我們提供了多種常見場景的範本：

可用範本

範本類型	適用場景	包含元素
電商產品卡	產品推廣、促銷活動	產品圖片、名稱、價格、購買按鈕
餐廳菜單	餐飲業、外送服務	餐點圖片、名稱、價格、訂餐按鈕
活動邀請	活動宣傳、講座報名	活動圖片、時間地點、報名按鈕
電子名片	個人品牌、業務推廣	頭像、姓名、職稱、聯絡方式
優惠券	促銷活動、會員優惠	優惠內容、使用期限、領取按鈕

使用範本的步驟

前往 LINE Flex 製作器
在範本區域選擇一個適合的範本
點擊範本，系統會載入範本內容
在編輯器中修改文字、圖片、連結等內容
即時預覽修改效果
完成後匯出 JSON

從零開始：自訂設計

如果範本無法滿足你的需求，也可以從零開始自訂設計。

Flex Message 結構

Flex Message 採用階層式的結構，由外到內分為：

層級	說明
Container	最外層容器，定義訊息類型（Bubble 或 Carousel）
Bubble	單一卡片，包含 Header、Hero、Body、Footer
Box	排版容器，可以水平或垂直排列子元素
Component	基本元素，如文字、圖片、按鈕等

基本元件介紹

文字 (Text)：顯示文字內容，可設定字體大小、顏色、粗細等。

圖片 (Image)：顯示圖片，可設定尺寸、圓角、點擊動作等。

按鈕 (Button)：可點擊的按鈕，可設定樣式和點擊動作。

分隔線 (Separator)：水平分隔線，用於區隔內容。

填充 (Filler)：彈性空間，用於調整排版。

設計步驟

規劃結構：先在紙上或腦中規劃卡片的結構和內容
建立容器：從 Container 開始，選擇 Bubble（單卡）或 Carousel（多卡輪播）
添加區塊：根據需要添加 Header、Hero、Body、Footer
放入元件：在各區塊中放入文字、圖片、按鈕等元件
調整樣式：設定顏色、間距、對齊方式等
測試預覽：在預覽區查看效果，調整到滿意為止

實戰範例：製作產品推廣卡

讓我們透過一個實際範例，學習如何製作一張產品推廣卡。

目標效果

我們要製作一張包含以下元素的產品卡：

產品圖片
產品名稱
原價和特價
「立即購買」按鈕
「了解更多」按鈕

步驟一：建立基本結構

開啟 LINE Flex 製作器
選擇「Bubble」類型
添加 Hero 區塊（用於放置產品圖片）
添加 Body 區塊（用於放置產品資訊）
添加 Footer 區塊（用於放置按鈕）

步驟二：設定 Hero 區塊

在 Hero 區塊中添加 Image 元件
設定圖片 URL（你的產品圖片網址）
設定圖片尺寸為 full
設定圖片高度為 200px
設定圖片顯示模式為 cover

步驟三：設定 Body 區塊

在 Body 區塊中添加 Box（垂直排列）
在 Box 中添加 Text 元件（產品名稱）
- 設定文字內容
- 設定字體大小為 xl
- 設定字體粗細為 bold
添加另一個 Box（水平排列）用於價格
在價格 Box 中添加兩個 Text 元件
- 原價：設定刪除線樣式
- 特價：設定紅色、粗體

步驟四：設定 Footer 區塊

在 Footer 區塊中添加 Box（垂直排列）
添加 Button 元件（立即購買）
- 設定按鈕樣式為 primary
- 設定點擊動作為 uri（連結到購買頁面）
添加 Button 元件（了解更多）
- 設定按鈕樣式為 secondary
- 設定點擊動作為 uri（連結到產品頁面）

步驟五：匯出使用

點擊「匯出 JSON」按鈕
複製產生的 JSON 程式碼
在 LINE 官方帳號後台或 API 中使用

進階技巧

使用 Carousel 製作多卡輪播

如果你有多個產品或內容要展示，可以使用 Carousel 類型，讓用戶可以左右滑動查看。

選擇 Container 類型為 Carousel
添加多個 Bubble
每個 Bubble 可以有不同的內容
最多可以添加 12 個 Bubble

設定點擊動作

Flex Message 支援多種點擊動作：

動作類型	說明	使用場景
uri	開啟網頁連結	導向產品頁面、活動頁面
message	發送訊息	觸發聊天機器人回應
postback	發送 postback	進階互動，需要後端處理
datetimepicker	選擇日期時間	預約、訂位功能

響應式設計

Flex Message 會自動適應不同的螢幕寬度，但你可以透過以下設定優化顯示效果：

使用百分比寬度：設定元件寬度時使用百分比而非固定像素。

設定最大寬度：為圖片設定 maxWidth 避免過大。

使用 flex 屬性：利用 flex 屬性控制元件的相對大小。

常見問題

Q：JSON 匯出後要如何使用？

A：你可以透過以下方式使用匯出的 JSON：

LINE 官方帳號後台：在「訊息」功能中選擇「Flex Message」，貼上 JSON
LINE Messaging API：在程式碼中使用 Push Message 或 Reply Message API 發送
n8n 自動化：在 n8n 工作流程中使用 LINE 節點發送

Q：圖片要放在哪裡？

A：Flex Message 中的圖片需要使用公開的網址（URL）。你可以：

上傳到你的網站伺服器
使用圖床服務（如 Imgur、Cloudinary）
使用 LINE 官方帳號的素材庫

Q：為什麼預覽和實際發送的效果不同？

A：可能的原因包括：

圖片網址無法存取
JSON 格式有誤
LINE App 版本差異

建議在正式發送前，先發送測試訊息到自己的 LINE 帳號確認效果。

Q：可以儲存我的設計嗎？

A：登入會員後，你可以將設計儲存到帳號中，方便日後修改或重複使用。前往會員後台 - Flex 設計管理你的設計。

搭配 n8n 自動化發送

如果你想要自動化發送 Flex Message，可以搭配 n8n 自動化工具使用。我們有提供相關的 n8n 模板：

LINE 官方帳號 AI 智能客服系統

這個模板可以讓你的 LINE 官方帳號自動回覆 Flex Message，提升客戶體驗。

結語

Flex Message 是提升 LINE 行銷效果的利器，而奧特線上工具的 LINE Flex 製作器讓你不需要學習程式，就能製作出專業的 Flex Message。無論你是要推廣產品、宣傳活動還是提供客戶服務，都能透過精美的 Flex Message 提升互動率。

現在就前往 LINE Flex 製作器開始製作你的第一張 Flex Message 吧！

延伸閱讀：

工具	用途	連結
圖片壓縮	壓縮圖片減少載入時間	前往使用
短網址產生器	縮短按鈕連結	前往使用
QR Code 製作器	產生 LINE 官方帳號 QR Code	前往使用
UTM 追蹤產生器	追蹤按鈕點擊來源	前往使用