🙋♂️ はじめに
こんにちは！フルスタックアーキテクトの李明（リ・ミン）と申します。
LINE Bot（Messaging API）の開発において、ユーザーの目を引くスタイリッシュなカード型メッセージ（Flex Message）を配信したいシーンは多いと思います。特に昨今、社内ツールや社外のプライベートトラフィック（私域流量）運営において、「リファラル採用（社員紹介）や求人情報の共有カード」の需要が急増しています。
しかし、公式の「Flex Message Simulator」で複雑なツリーノードをいじりながら手書きでJSONを組み立てると、実機（特に画面幅の異なるAndroidやiOS）でバッジが横にびよーんと伸びてしまったり、英語や日本語に翻訳した際に文字幅のせいでボタンが強制改行されて崩壊するという「レイアウト崩れの罠」に直面しがちです。
本記事では、新しくデザインしたプレミアムな「キャリア採用カード」を例に、レイアウト崩れを未然に防ぐためのプロのボックスモデル調優テクニックを解説します。
🛠️ コア・テクニック：レイアウト崩れを防ぐ2つの防護策
-
物理幅の固定（Width Lock）でバッジの変形を防ぐ
カード上部にある HOT JOB のようなステータスバッジには、絶対に flex（自動伸縮）を与えてはいけません。
外側を horizontal で括った上で、直接属性に "width": "68px" を指定してサイズをロックします。これにより、どんなワイド画面のスマホで見ても、バッジが「太ったソーセージ」のように歪むのを完全に防げます。 -
非等比バネ（flex）によるテキストの折り返し制御
「部署」「勤務地」「必須要件」などのデータを並べる際、前項のタイトル部分には固定の flex: 3、後方の動的テキストには flex: 7 を割り当て、同時に "wrap": true を有効化します。こうすることで、必須要件などのテキストがどれほど長くなっても、左側のヘッダーが押し潰されることなく、右側だけで美しくテキストが自動改行されます。
🎯 5分でデプロイ可能：LINE公式スキーマ完全準拠のJSON
ピクセル単位で最適化を施した、重厚感のあるダークテック調（#0F172A）のキャリア採用カードのJSONコードです。バックエンドの配信システムにそのままコピー＆ペーストしてご利用いただけます。
{
"type": "bubble",
"size": "mega",
"body": {
"type": "box",
"layout": "vertical",
"backgroundColor": "#0F172A",
"paddingAll": "0px",
"contents": [
{
"type": "box",
"layout": "vertical",
"paddingAll": "20px",
"backgroundColor": "#1E293B",
"contents": [
{
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "box",
"layout": "vertical",
"backgroundColor": "#10B981",
"cornerRadius": "4px",
"paddingAll": "4px",
"width": "68px",
"contents": [
{ "type": "text", "text": "HOT JOB", "color": "#FFFFFF", "size": "xxs", "align": "center", "weight": "bold" }
]
}
]
},
{ "type": "text", "text": "シニアフルスタックアーキテクト (Senior Full-Stack Architect)", "weight": "bold", "color": "#FFFFFF", "size": "md", "wrap": true, "margin": "md" },
{ "type": "text", "text": "💰 想定年俸：800万 - 1,200万円", "color": "#F59E0B", "size": "sm", "weight": "bold", "margin": "sm" }
]
},
{
"type": "box",
"layout": "vertical",
"paddingAll": "20px",
"spacing": "sm",
"contents": [
{
"type": "box",
"layout": "horizontal",
"contents": [
{ "type": "text", "text": "🏢 部署", "color": "#64748B", "size": "sm", "flex": 3 },
{ "type": "text", "text": "技術開発センター - 自動化プラットフォーム開発G", "color": "#CBD5E1", "size": "sm", "flex": 7, "wrap": true }
]
},
{
"type": "box",
"layout": "horizontal",
"contents": [
{ "type": "text", "text": "📍 勤務地", "color": "#64748B", "size": "sm", "flex": 3 },
{ "type": "text", "text": "東京都港区 (リモートワーク相談可)", "color": "#CBD5E1", "size": "sm", "flex": 7, "wrap": true }
]
},
{
"type": "box",
"layout": "horizontal",
"contents": [
{ "type": "text", "text": "🎓 要件", "color": "#64748B", "size": "sm", "flex": 3 },
{ "type": "text", "text": "Node.js / Go 開発実務5年以上、大規模な高並行クラウド基盤の設計経験必須。", "color": "#CBD5E1", "size": "sm", "flex": 7, "wrap": true }
]
}
]
},
{
"type": "box",
"horizontal": "horizontal",
"spacing": "md",
"paddingStart": "20px",
"paddingEnd": "20px",
"paddingBottom": "24px",
"contents": [
{ "type": "box", "layout": "vertical", "flex": 4 },
{ "type": "button", "style": "secondary", "color": "#334155", "height": "sm", "action": { "type": "uri", "label": "詳細を見る", "uri": "https://liming.me" }, "flex": 46 },
{ "type": "button", "style": "primary", "color": "#10B981", "height": "sm", "action": { "type": "uri", "label": "💼 今すぐ応募", "uri": "https://liming.me" }, "flex": 46 },
{ "type": "box", "layout": "vertical", "flex": 4 }
]
}
]
}
}
🚀 開発の効率化：手書きJSONの苦痛からの解放
手書きでのJSON構築は柔軟な反面、カンマひとつ忘れたり、Web用の CSSプロパティ を誤って渡しただけで、LINE側から APIError 400 が返され、デバッグに多くの時間を奪われてしまいます。
この開発者の痛みを解決するために、私は LINE Flex Message の開発速度を10倍にするビジュアルプラットフォーム [FlexCraft] を開発しました！
FigmaのようにGUI上で直感的にドラッグ＆ドロップしながら、リアルタイムのスキーマ検証サンドボックス内で安全に調整が可能です。
今回のHRリファラルカード以外にも、私のGitHubリポジトリでは、SaaSプラン更新案内、ウェビナー参加チケット、DevOpsシステム監視アラートなど、実戦から生まれた90種類以上の高品質な日英・日中双方向対応テンプレートを無料のオープンソースとして公開しています。
👉 無料テンプレートリポジトリ（GitHub）：GitHub: line-flex-message-templates
皆さんがLINEのUI構築で苦労した点や、直面したレンダリングのバグなどがあれば、ぜひコメント欄で教えてください！一緒にピクセル単位でハックしていきましょう！