Flex Messageの文字が途中で切れるときは？｜wrap・maxLinesとスマホ表示の直し方

Flex Messageの文字が切れる場合、文字を小さくする前に、折り返し、表示行数、横並びの幅、端末のフォント設定を確認します。maxLines: 2は2行に制限する指定であり、どの端末でも同じ文字数を表示する保証ではありません。

テンプレートの種類や用途はFlex Messageの作成例で扱っています。本稿は、同じJSONでも端末で表示が違うときに、どこから直し、何をもって確認完了とするかに絞ります。通知欄に出るaltTextとは別に、トーク内の本文の問題です。

まず、切れたテキストの指定を見る

公式のFlex Messageの解説では、長さが変わる商品名・店舗名・イベント名などを、短いサンプルだけで確認しないよう説明しています。

テキストコンポーネントのwrapをtrueにすると折り返せます。ただし、maxLinesで行数を制限していれば、収まらない部分が省略される可能性があります。折り返しを有効にしたことだけで、末尾まで読めると判断しないでください。

以下は指定を見るための部分的なJSON例です。実際に送る場合は、bubbleやboxなど必要な構造へ組み込みます。

{
  "type": "text",
  "text": "店頭受け取りのご案内",
  "wrap": true,
  "maxLines": 2
}

例の短い文字が収まっても、長い商品名へ差し替えたときは別に確認します。末尾に「対象外」「別途料金」などの条件が続く場合、省略位置によっては意味が変わります。条件を削って見た目だけをそろえる直し方は避けてください。

横並びの固定要素が、本文の幅を奪っていないか

ラベル、長い番号、本文を横に並べると、本文に残る幅が端末によって変わります。公式のレイアウト説明と合わせて、親boxの向き、子要素のflex、幅の指定を確認します。

短く固定できるラベルと、長さが変わる本文を同じ扱いにしないことがポイントです。本文を折り返しても読みにくい場合は、ラベルと本文を縦に分けます。横並びを残すこと自体を完成条件にせず、読み順と必要な幅を優先してください。

たとえば「受付状況」と長い受付番号を一段に詰める架空の例では、受付番号を別の行にすると、状況の説明が押し出されにくくなります。実データを使う必要はありません。公開してよい架空の長い文言で、どの情報が切れるかを確認できます。

Flexの文字切れを直す確認順。wrapとmaxLinesを確認し、横並びで本文に幅が残るかを見る。重要な料金や対象条件は省略される長文と別の要素へ分ける。最後に長い文言、狭い画面、大きなフォントで読み、行数が同じでも表示文字数が違うことを確認する。

図：見た目を小さくする前に、原因と残す情報を確認する手順です。画面は説明用の図で、LINEの実際の表示を再現したものではありません。

図解画像を開く（保存用）

重要な条件は、長文の末尾へ埋めない

商品説明の末尾に、期限・追加費用・申込対象をまとめて書くと、文字切れの影響を受けます。公式の解説でも、重要な情報を別のコンポーネントへ分ける考え方が示されています。

修正するときは、最初に「読み落とすと判断を誤る情報」を決めます。見出し、説明、条件、操作ボタンを分け、長い説明が変わっても条件を読める形へ組み直します。詳しい条件をWebページへ載せる場合も、そのページへ進む必要があることと、リンクの行き先が分かる文言を残します。

「詳しくはこちら」だけを増やし、確認のために何画面も行き来させる構成は見直します。短いメッセージの中で判断できる情報と、詳細ページで読む情報の分担を決めてください。

自動縮小を、読めることの保証にしない

adjustModeのshrink-to-fitは、文字を収めるための自動縮小指定です。ただし、公式資料ではベストエフォートであり、環境によって異なる動作や、動作しない場合があるとされています。

scalingをtrueにすると、対応するLINE環境では利用者の文字サイズ設定に応じた拡大ができます。自動縮小と併用すると、拡大した文字を再び縮める場合もあります。大きな文字を必要とする利用者の読みやすさまで、収まったという見た目だけで判断しないでください。利用可能なLINEバージョンの条件も公式の動作環境で確認します。

公開前の確認用文言は、短い名前・長い名前・長い数字・改行を含む説明を用意します。端末の幅、OS、LINEバージョン、言語やフォント設定を残し、重要な条件とボタンが読めるかを比べます。

シミュレーターで形を整えた後は、承認されたテスト先で実機表示を確認してください。メッセージ定義の検証APIが成功しても、すべての端末で同じ改行になる証拠ではありません。今回の記事表示の検査と、読者が作るFlexの実機合格も区別します。

※仕様確認日：2026年10月20日。Flexの仕様はLINE Developers公式資料、修正の優先順は設計提案です。実顧客のデータ利用やメッセージ送信は行っていません。