API 400 エラーのトラブルシューティング

公開日 May 29, 2026 2 回閲覧

LINE Botの構築や社内システムとの連携を進める中で、誰もが一度は直面する最も厄介なエラー、それがAPI Error 400です。返ってくるレスポンスは一言、"A message in the request body is invalid" という非常に曖昧なメッセージのみです。

HTML/CSSを使用した通常のWeb開発とは異なり、LINE Flex Messageのレンダリングエンジンは、厳格なSchema（スキーマ）検証を強制します。プロパティのわずかなタイポ、仕様外のフォントサイズ、あるいは動的パラメータ付きの画像URLが含まれているだけで、LINEサーバーはリクエスト全体を即座に拒否します。

本記事では、商用環境での実例である「企業の月次給与明細通知」と「自動車のOMO整備報告書」の2つのユースケースを元に、開発者が陥りがちなレイアウトの罠と、100%仕様に準拠したピクセルパーフェクトなFlex Messageの構築手法を解説します。

1. 給与明細通知：ネストされたグリッドのマスターと文字サイズの限界値

人事システムをペーパーレス化し、LINEでの給与明細通知に移行する際、Excelのような綺麗なグリッド配置は必須要件です。しかし、LINE Flex Messageは標準の <table> タグをサポートしていないため、horizontal と vertical のボックス（Box）を高度にネスト（入れ子）させる必要があります。

レイアウト崩れを防ぐアライメントの技

左右の項目（例：左側に「基本給」、右側に「金額」）を美しく揃える際、テキストコンポーネントに盲目的に flex の重みを設定してはいけません。左側の項目は可変（Flexible）にし、右側の金額項目には "align": "end" を明示的に指定します。これにより、金額の桁数が変動しても、右側の列がクリッピングされることなく綺麗に右揃えになります。

「xxxxs」サイズの罠（400エラーの主犯）

画面最下部のプライバシーポリシーや注記文をできるだけ目立たなくさせるため、多くの開発者が直感的に "size": "xxxxs" とコーディングしてしまいがちです。

これは今すぐやめてください。 LINE Flex Messageの仕様において、許容される最小のフォントサイズは "xxs" です。これより小さい値を渡すと、即座に APIError 400 (invalid property) が発生します。

仕様に準拠した解決策

フォントサイズは仕様内の最小値である "xxs" に留め、代わりに色彩心理学を利用してテキストを薄くします。 "color": "#9CA3AF"（ライトグレー）を設定することで、バリデーターを通過させつつ、デザイン上の理想的な視覚的階層（ローキーデザイン）を実現できます。

{
  "type": "box",
  "layout": "horizontal",
  "contents": [
    { "type": "text", "text": "➕ 基本給", "size": "xs", "color": "#4B5563" },
    { "type": "text", "text": "¥350,000", "size": "xs", "color": "#1F2937", "align": "end" }
  ]
}

2. 自動車整備報告書：モバイル端末での画像ブロック回避と動的ステータスマッピング

自動車整備工場やディーラーにおいて、Flex Messageでの整備報告は、顧客を次の来店（OMO - Online Merges with Offline）へと繋げる強力なマーケティングツールです。しかし、ここには「スマホで画像が表示されない / リンク切れになる」という有名なバグが潜んでいます。

なぜPCのブラウザで見える画像が、スマホのLINEで消えるのか？

デスクトップのブラウザで検証した時は正常に表示される画像URLが、モバイル版LINEアプリ内では真っ白になることがあります。これは、LINEのプロキシサーバーによる以下の2つの厳格な挙動が原因です。

動的クエリパラメータによる解析エラー：LINEのレンダリングエンジンは、URL内に「?」が含まれる動的なクエリ文字列（例：Unsplash等の ?auto=format&fit=crop... ）の解析に失敗することがあります。
リファラ（Referrer）およびUser-Agentブロック：一部のフリー画像ホスティングサイトは、帯域節約のため、LINE等のプロキシサーバーからのホットリンクを遮断しています。

商用環境での解決策：Cloudflare R2への移行

本番環境では、アセットを安全でクエリパラメータのない独自CDNに配置してください。おすすめは **Cloudflare R2** です。毎月10GBまで無料で利用でき、データ転送量（帯域幅）が完全に無料（Egress料金ゼロ）です。 "url" プロパティには、末尾が .jpg や .png のような静的拡張子で終わるクリーンなエンドポイントを指定してください。

動的なUIステータス制御

Go言語などのバックエンドフレームワーク側で、車両の診断データを直接JSONレイアウトにマッピングします。正常な項目には緑色の ✓ 整備完了 (#16A34A)、要交換の項目には赤色の ⚠ 部品交換を推奨 (#DC2626) を動的に割り当て、強いコントラストによってユーザーをフッターのCTAボタン（例：「オンラインで次回車検を予約」）へとスムーズに誘導します。

結論

企業の機密データを取り扱う社内通知であれ、高トラフィックなB2CのOMOキャンペーンであれ、LINE Flex Message Schemaの厳格な境界線を理解することはシステムの安定稼働に不可欠です。

皆様の開発スピードを加速させるため、商用利用可能な100%仕様準拠のFlex Messageテンプレート集をオープンソースとして公開しています。ぜひコピー、カスタマイズして、Starをお願いします！

👉 オープンソースのJSONテンプレートはこちら

JSONスキーマの手動修正に疲れ、直感的なビジュアルドラッグ＆ドロップ編集を行いたい方は、私たちのコアプロジェクトである FlexCraft をぜひお試しください。LINE Flex & Rich Message専用のプロフェッショナルなビジュアルファクトリーをご提供します。