【5分でわかる】LINE Flex Message 初心者向け入門ガイド：レイアウト崩れを防ぐ基本ノウハウ
LINE Botの開発を始めたばかりの頃、綺麗なカード型メッセージをユーザーに配信しようとして、公式の「Flex Message Simulator」の複雑なツリーノードや大量の属性（box, spacer, baseline...）に圧倒された経験はありませんか？手書きでJSONを組み立てると、カンマを一つ忘れたり、Web用の lineHeight: 1.5 などの数値をそのまま渡すだけで、即座に送信エラー（APIError 400）が発生してしまいます。
本チュートリアル（Tutorial）では、複雑な底層の仕様はいったん脇に置いて、「5分・4つのステップ」で、プロ（ゲームコミュニティのガチャやECの限定抽選など）が作成するような洗練されたサイバーパンク風（ブラック＆オレンジ）のカードをゼロから構築する手法を解説します。
🛠️ クイックマスター：LINE ボックスモデルの3大要素
手を動かす前に、Webの CSS Flexbox とほぼ同じ動きをする3つのコアコンポーネントだけ理解しておきましょう：
- Vertical Box (vertical)：内部のコンポーネントが上から下へ垂直に並びます。カードの「メイン画像 ➔ タイトル ➔ 説明文」という標準構造に最適です。
- Horizontal Box (horizontal)：内部のコンポーネントが左から右へ水平に並びます。「アイコン ＋ テキスト」や「横並びの複数ボタン」に使用します。
- Flex 権重（比率）と Width（固定幅）：flex はバネのように空間を伸縮させ、width はサイズをロックします。バッジなどがワイド画面で歪むのを防ぐには、width での固定が必須です。
🚀 実践：4ステップでガチャカードをデザインする
🎨 ステップ1：デフォルトの白枠を破壊し、ダークキャンバスを作る
LINEのカードは初期状態で内部に余白（Padding）があります。全面に画像や色を敷き詰める「フルスクリーン感」を出すには、最初の境界の処理が肝心です。
💡 秘訣： 外側の body の paddingAll を 0px に設定し、背景色（backgroundColor）に重厚感のある #0F172A を指定します。
📸 ステップ2：メイン画像を配置する（歪み防止）
カードの上半部に、透過背景の3D武器ボックス画像を配置します。
⚠️ 初心者の罠： 多くの人が 16:9 に cover を組み合わせてしまい、スマホ実機で画像が横に潰れてしまいます。画像本来の比率に合わせた aspectRatio: "4:3" を設定し、aspectMode: "fit"（CSSの contain に相当）を指定することで、どんな画面補正でも歪まずに美しく表示されます。
📝 ステップ3：テキスト層の配置と「ソーセージ化」の防御
画像の下部にマーケティングテキストを配置します。
- 限定バッジ (Badge)： LIMITED と書かれた小さなボックスを配置します。このとき、外側を horizontal で囲み、ボックス自体に "width": "58px" を直接指定します。flex による自動伸縮を使わないことで、バッジが横に広がりすぎる「ソーセージ化」を防ぎます。
- タイトルと説明文： Text コンポーネントを追加します。文字が長くなったときに途中でカットされないよう、必ず "wrap": true を設定してください。
🎛️ ステップ4：底部ボタンの横並び（多言語対応・改行防止）
カードの最下部に「シェア」、「詳細」、「🎁 開封」の3つのボタンを横並びで配置します。
💡 高度な調優： 日本語や英語に翻訳した際に文字幅でボタン内のテキストが2行に改行されてしまうのを防ぐため、「4 : 25 : 25 : 25 : 4」の黄金バネ比率を採用します。ボタンの左右に最小限の空ボックス（flex: 4）を配置して中央寄せにし、ボタン自体の領域（flex: 25）を広く確保することで、文字を単行の中に綺麗に整列させます。
🎯 5分間の成果確認：完成版の黄金 JSON コード
以下のピクセル単位で最適化された、LINEの公式スキーマに完全準拠したコードをそのままコピーしてご利用いただけます：
{
"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 }
]
}
]
}
}🛠️ 職人は器を厳選する（工欲善其事，必先利其器）
手書きでの JSON 組み立ては柔軟な反面、記述ミスがエラーに直結し、バックエンドのログから原因を探すのは非常に時間がかかります。
そこで、私は LINE Flex Message 開発を圧倒的に効率化するビジュアルプラットフォーム [FlexCraft] を開発しました。厳格なスキーマ検証をリアルタイムで行うサンドボックスを搭載し、GUI 操作と customViewHtml（ソースコード双方向同期）に対応しています。手動のミスを未然に防ぎ、開発速度を10倍以上に高めることが可能です！