LINE Flex Message で画像全面表示やアニメーションはどこまでできるか検証してみた

西田@リテールアプリ共創部マッハチームです。

LINE の Flex Message で以下がどこまでできるか検証し、結果を整理しました。

• 画像の全面表示
• 角丸の制御
• 背景透過
• APNG アニメーション

Flex Message でできること

画像の全面表示

Flex Message の Bubble で画像を枠いっぱいに表示するには、以下のプロパティを設定します。

• paddingAll: "0px" — Body の余白をゼロにして画像を枠いっぱいに表示
• size: "full" — 画像を最大幅で表示
• aspectMode: "cover" — アスペクト比を維持しつつ、領域全体を画像で埋める

最小構成の JSON は以下のとおりです。

{
  "type": "flex",
  "altText": "SALE スタンプ",
  "contents": {
    "type": "bubble",
    "size": "micro",
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "image",
          "url": "https://example.com/stamp-square-red.png",
          "size": "full",
          "aspectRatio": "1:1",
          "aspectMode": "cover",
          "action": {
            "type": "uri",
            "label": "詳細を見る",
            "uri": "https://example.com/sale"
          }
        }
      ],
      "paddingAll": "0px"
    }
  }
}

上から nano、micro、kilo の順に Bubble サイズを変えて送信した例です。いずれも paddingAll: "0px" で画像が枠いっぱいに表示されています。

タップアクションの種類

Image コンポーネントの action プロパティで、タップ時の挙動を設定できます。

Postback アクションでは displayText を指定すると、ユーザーのトーク画面にもテキストが表示されます。

{
  "type": "postback",
  "label": "タップ",
  "data": "action=stamp_tapped&stamp_id=new_001",
  "displayText": "NEW スタンプをタップしました！"
}

Bubble サイズの使い分け

Bubble の size プロパティで吹き出しの幅を制御できます。

アスペクト比の設定

aspectRatio プロパティで画像の縦横比を指定できます。1:1 で正方形、3:1 で横長など、用途に合わせて調整可能です。

APNG アニメーション

Image コンポーネントに "animated": true を指定すると、APNG 画像をアニメーション表示できます。

{
  "type": "image",
  "url": "https://example.com/stamp-apng-ball.png",
  "size": "full",
  "aspectRatio": "1:1",
  "aspectMode": "cover",
  "animated": true,
  "action": {
    "type": "uri",
    "label": "詳細を見る",
    "uri": "https://example.com/animated"
  }
}

APNG アニメーションには以下の制約があります。

出典: Messaging API リファレンス - Image コンポーネント

できないこと

検証の結果、以下の 3 点は Flex Message では実現できませんでした。

1. 角丸は消せない

Bubble の吹き出し枠には強制的に角丸がかかります。

Box の cornerRadius は Box 自身の角丸のみ制御します。上のスクリーンショットでは、cornerRadius: "none" と "xxl" で赤背景の角に差が出ていますが、Bubble の吹き出し枠の角丸は変わりません。

2. 背景透過は効かない

PNG の透過部分は白（Bubble の背景色）で埋められます。

Flex Message だけでなく Image Message でも同様の結果でした。吹き出しの背景を透過させることはできません。

3. 複数タップ領域は設定できない

イメージマップメッセージと違い、Flex Message の Image コンポーネントは画像全体で 1 つのアクションしか設定できません。画像の一部だけタップ領域にしたい場合はイメージマップを使う必要があります。

画像の仕様制約

まとめ

検証結果を整理すると以下のとおりです。

この記事が誰かの役に立てば幸いです。

参考

• Flex Message | LINE Developers
• Flex Message の要素 | LINE Developers
• Flex Message レイアウト | LINE Developers