LINE の Flex Message で作った承認カードが、ボタンを押した瞬間にレイアウトごとズレる。トーク一覧へ戻って開き直すと、何事もなかったように元へ戻る。そんな挙動に遭遇しました。
結論から言うと、引き金は LINE の有料プランで提供されるカスタムフォントでした。そして 2026 年 8 月現在、仕様の中にこれを防ぐ決定打を見つけられていません。
同じ症状を追いかけている人の、切り分けの時短になれば嬉しいです。あわせて、対処をご存じの方がいたらコメントで教えてください。
つくっていたもの
LINE 上で完結する、社内の申請承認ワークフローです。申請者が LINE から申請すると、承認者に Flex Message でカードが届き、その場で「承認する」「却下する」を押せます。
見切れと 7 連敗した経緯は姉妹記事にまとめました。本記事はその後日談で、症状の全体像と現時点の落とし所を整理します。
症状はひとつではなかった
該当端末で確認できた症状は 2 種類あります。
1. 恒常的な見切れ。 バブルの下端が切れ、最下段のボタンが画面に出ません。Flex のバブルはスクロールしないので、切れた先は指でも引っぱり出せません。開き直しても直りません。
2. 押した瞬間のズレ。 カードのボタンをタップした瞬間、レイアウトが崩れます。トーク一覧へ戻ってから開き直すと元に戻ります。
2 は特に示唆的でした。JSON は 1 バイトも変わっていないのに、表示だけが崩れ、再描画で復元する。データ側ではなく、LINE アプリの描画側で起きている問題だと切り分けられます。
引き金はカスタムフォント
症状が出たのは、LINE の有料プランで提供されるカスタムフォントを設定した端末だけでした。手元の標準フォント端末では、同じ JSON がきれいに表示されます。
考えてみれば当然で、フォントが変われば 1 行の高さも折り返し位置も変わります。ただし Flex Message は HTML と違って、あふれてもスクロールが生えません。あふれたぶんは、ただ消えます。
公式ドキュメントの立場
公式ドキュメントに書いてあるのはこのあたりです。
- 描画は端末の環境（OS・LINE バージョン・画面の解像度・言語設定・フォント）によって変わりうる
-
scalingは、アプリのフォントサイズ設定にサイズを追従させるためのオプトイン -
adjustMode: "shrink-to-fit"はベストエフォート
The
adjustModeproperty takes a "best-effort" approach that may work differently—or not at all!—on some platforms.
一方で、次のことは見つけられませんでした。
- バブルの最大高さ
- 高さの上限を超えたときの挙動
- カスタムフォントで高さが変わる場合の対処
つまり「フォントで表示が変わる」ことは公式も明記したうえで、変わった結果をどう守るかは開発者に委ねられています。
効かなかったもの
姉妹記事で実測した要点だけ再掲します。
| 対処 | 結果 |
|---|---|
| 本文を短くする | 短くした構成のほうが切れるケースがあった |
| パディングを増やす | バブルが高くなる方向。3 回試して全て空振り |
scaling: true |
フォント設定に追従してさらに高くなり逆効果 |
adjustMode |
幅方向にしか効かない |
プロパティで押さえ込む方向は、全滅でした。
現時点の現実解
再現性があったのは、構造を変えることだけでした。
- ボタンを本文と別のバブルに分ける。 本文がどれだけ伸びても、操作系が巻き添えを食いません
- 行数の予算で分割する。 推定行数が予算を超えたら、本文バブルをさらに分割します
- 再現端末へ直接テスト送信する。 Flex Message Simulator のテスト送信を使うと、デプロイなしで確認できます
押した瞬間のズレ（症状 2）については、正直に書くと防ぐ手立てを見つけられていません。開き直せば直るため実害は見切れより小さいものの、利用者に「開き直してください」と案内するのは敗北感があります。
みなさんはどうしていますか
自分の観測範囲では、この問題に決定打がありません。知りたいのはこのあたりです。
- カスタムフォント端末での崩れを、プロパティ側で防げた事例
- 押した瞬間のズレの回避策
- 公式のロードマップや既知の issue の情報
ご存じの方がいたら、コメントで教えてもらえると嬉しいです。分かったことはこの記事に追記していきます。
おわりに
「フォントで描画が変わる」と仕様が言っている以上、ピクセル単位でレイアウトを守るのは最初から分の悪い勝負です。守るべきは見た目の再現ではなく、操作が必ず届くことでした。
同じカードを磨き続けるより、ボタンを独立させて小さく保つ。現時点の私の答えはこれです。
Discussion