LINE Flex Message 避坑指南：解決圖片拉伸、標籤變形與按鈕文字換行的極致調優技巧

發布於 May 31, 2026 5 次閱讀

在進行 MarTech 行銷系統開發、電商裂變活動或遊戲社群（如 CS2 抽獎盲盒）的自動化通知推送時，LINE Flex Message 絕對是提升用戶轉換率的終極殺手鐧。一個滿版、精美、帶有硬核暗黑風（Dark Mode）的高質感卡片，往往能讓點擊率翻倍。

然而，許多前端與後端開發者（例如使用 Go 語言 line-bot-sdk-go 的架構師）在官方的 Flex Message Simulator 裡調好 JSON，一丟進生產環境實際推送後，手機端呈現的畫面卻讓人崩潰：去背的 3D 道具圖片左右被暴力拉伸、精心設計的圓角徽章標籤在寬螢幕手機上變成了肥胖的「香腸條」、按鈕文字直接斷行擠成兩行...

今天這篇文章，我們將像素級拆解這三大「視覺死穴」。

🛑 痛點一：Image 比例失衡（Object Distortion）

❌ 錯誤現場

當你引入一張接近 4:3 比例的炫彩去背武器箱圖片時，如果你的 JSON 寫法如下：

"aspectRatio": "16:9",
"aspectMode": "cover"

🔍 原因剖析與解法

底層邏輯： 16:9 會強制將圖片容器壓扁，而 cover 屬性會試圖強行切去邊緣以撐滿整個容器。這兩者在 LINE 渲染引擎中衝突的結果，就是你的圖片左右被極度拉伸。正確解法：解放圖片物理比例，將寬高比調整為更契合圖片原生的 4:3，並將 aspectMode 改為 fit。這能確保圖片在任何螢幕尺寸下都等比例縮放，絕不拉伸，並且能完整露出兩側的炫彩粒子特效！

🛑 痛點二：Flex 彈性扯長 Badge（香腸條魔咒）

❌ 錯誤現場

"type": "box",
"layout": "horizontal",
"contents": [
  { "type": "box", "layout": "vertical", "backgroundColor": "#F97316", "flex": 2 },
  { "type": "box", "layout": "vertical", "flex": 8 }
]

🔍 原因剖析與解法

底層邏輯：一旦卡片寬度設為大尺寸的 mega，這個標籤就會隨著總寬度按比例無限橫向拉伸。文字被稀釋，標籤直接長成了一條肥胖的肥皂塊。正確解法：唯一的合法解法是徹底砍掉 flex，直接給這個 Box 加上固定的物理寬度（例如 "width": "58px"），這樣無論卡片拉到多寬，小徽章都能精緻如初。

🛑 痛點三：多按鈕併排時的「多語言字元斷行」（Text Wrapping）

❌ 錯誤現場

橫向倂排三個按鈕在中文環境完美，切換到日文語系時：活動詳情 變成 イベント詳細 (5個字)、立即開箱 變成 🎁 今すぐ開封 (7個字)，按鈕文字瞬間被擠成兩行，原本大廠的高級感一瞬間就被這兩個突兀的換行給破壞了！

🔍 原因剖析與解法

底層邏輯：日文字元寬度大於中文，加上按鈕自帶內 padding。如果此時兩側還加了彈簧 Box 擠壓，可用空間會被壓縮到極致。正確解法：採用**「彈簧權重微調（4:25:25:25:4）」+「標籤文字精練化」**。將左右兩側的空 Box 權重極致調降到 4，中間 3 個按鈕放大到 25，並將日文精簡為詳細與 🎁 開封，文字即可在單行內完美對齊，排版質感直接拉滿！

🎯 最終像素對齊 JSON 程式碼（完美黑橘電玩風 - 日文版）

以下是經過實戰校驗、完美炸開 LINE 官方原生白色底邊、具備 100% 滿版暗黑賽博朋克質感的完整高階 JSON。你可以直接複製投入線上生產環境：

檔案名稱	驗證狀態
`template.json`	🟢 LINE Flex Schema 合規

{
  "type": "bubble",
  "size": "mega",
  "body": {
    "type": "box",
    "layout": "vertical",
    "backgroundColor": "#0F172A",
    "paddingAll": "0px",
    "contents": [
      {
        "type": "image",
        "url": "https://im.gurl.eu.org/file/AgACAgEAAxkDAAEBjBBqGjwpp3adBiz1fvi032gaf_FJbgACvQtrG82J2UQraRTtROGx1wEAAwIAA3kAAzsE.png",
        "size": "full",
        "aspectRatio": "4:3",
        "aspectMode": "cover"
      },
      {
        "type": "box",
        "layout": "vertical",
        "paddingStart": "20px",
        "paddingEnd": "20px",
        "paddingTop": "16px",
        "paddingBottom": "20px",
        "spacing": "8px",
        "contents": [
          {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "box",
                "layout": "vertical",
                "backgroundColor": "#F97316",
                "cornerRadius": "8px",
                "paddingAll": "4px",
                "width": "58px",
                "contents": [
                  {
                    "type": "text",
                    "text": "LIMITED",
                    "color": "#FFFFFF",
                    "size": "xxs",
                    "align": "center",
                    "weight": "bold"
                  }
                ]
              }
            ]
          },
          {
            "type": "text",
            "text": "🎉 おめでとうございます！「エアドロップ武器箱」の抽選権を獲得しました！",
            "weight": "bold",
            "color": "#FFFFFF",
            "size": "md",
            "wrap": true,
            "margin": "md"
          },
          {
            "type": "text",
            "text": "FlexCraft トレンドフェスティバルへの参加資格がアンロックされました。限定スキンや豪華周辺機器が手に入るチャンス！今すぐ下のボタンからシェア、またはガチャを引いて開封しましょう！",
            "color": "#CBD5E1",
            "size": "sm",
            "wrap": true,
            "lineHeight": "md",
            "margin": "xs"
          }
        ]
      },
      {
        "type": "box",
        "layout": "horizontal",
        "spacing": "6px",
        "paddingStart": "16px",
        "paddingEnd": "16px",
        "paddingBottom": "20px",
        "contents": [
          {
            "type": "box",
            "layout": "vertical",
            "flex": 4
          },
          {
            "type": "button",
            "style": "primary",
            "color": "#22C55E",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "シェア",
              "uri": "https://liming.me"
            },
            "flex": 25
          },
          {
            "type": "button",
            "style": "secondary",
            "color": "#475569",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "詳細",
              "uri": "https://liming.me"
            },
            "flex": 25
          },
          {
            "type": "button",
            "style": "primary",
            "color": "#F97316",
            "height": "sm",
            "action": {
              "type": "uri",
              "label": "🎁 開封",
              "uri": "https://liming.me"
            },
            "flex": 25
          },
          {
            "type": "box",
            "layout": "vertical",
            "flex": 4
          }
        ]
      }
    ]
  }
}

🛠️ 工欲善其事，必先利其器

手寫 LINE Flex Message JSON 就像是在沒有編譯器的時代寫組合語言，一次微小的 padding 越界或屬性誤用（例如把網頁的 lineHeight: 1.5 塞給 LINE），就會引發崩潰的 APIError 400。

這也是為什麼我開發了 [FlexCraft] 視覺化平台，內建三層 Schema 沙盒驗證與 customViewHtml 原始碼雙向同步模式，能幫你提前攔截所有非法屬性，讓開發速度提升 10 倍以上！

👉 前往 GitHub 下載雙語模板倉庫 https://github.com/arieslee/line-flex-message-templates

標題上方做一個精緻的 LIMITED 限量橘色小徽章，為了讓它靠左，我們通常習慣用 flex 權重來分發空間：