LINE NEWS風のメッセージデザイン例です。
下記テンプレートには【サンプル画像・サンプルURL】が使用されています。
実際に利用される際には、下記項目を差し替えの上、配信にご活用ください。
・メッセージ内の各種テキスト
・画像URL
・遷移先URL
{ "type": "bubble", "size": "giga", "body": { "type": "box", "layout": "vertical", "contents": [ { "type": "box", "layout": "vertical", "contents": [ { "type": "image", "url": "https://blog.socialplus.jp/wp-content/uploads/2024/09/image_1.jpeg", "size": "full", "aspectMode": "cover", "aspectRatio": "20:13", "position": "relative" }, { "type": "box", "layout": "vertical", "contents": [ { "type": "text", "text": "大型台風接近！高波警戒", "weight": "bold", "size": "26px", "wrap": true, "color": "#ffffff" }, { "type": "text", "text": "台風の接近により九州全域で大気の状態が不安定に", "size": "15px", "color": "#ffffff", "wrap": true, "margin": "sm" } ], "paddingAll": "12px", "position": "absolute", "background": { "type": "linearGradient", "angle": "0deg", "startColor": "#00000070", "endColor": "#00000000" }, "offsetBottom": "0px", "offsetStart": "0px", "offsetEnd": "0px" } ], "action": { "type": "uri", "label": "action", "uri": "https://example.com/main" } }, { "type": "box", "layout": "horizontal", "contents": [ { "type": "box", "layout": "vertical", "contents": [ { "type": "image", "url": "https://blog.socialplus.jp/wp-content/uploads/2024/09/image_2.png", "size": "full", "action": { "type": "uri", "label": "action", "uri": "https://example.com/image1" } }, { "type": "image", "url": "https://blog.socialplus.jp/wp-content/uploads/2024/09/image_3.png", "size": "full", "action": { "type": "uri", "label": "action", "uri": "https://example.com/image2" } } ], "width": "31%" }, { "type": "box", "layout": "vertical", "spacing": "sm", "contents": [ { "type": "box", "layout": "horizontal", "contents": [ { "type": "text", "text": "日本最速の紅葉が見られる！", "size": "md", "color": "#000000", "wrap": true } ], "action": { "type": "uri", "label": "action", "uri": "https://example.com/article1" }, "paddingTop": "14px", "paddingBottom": "10px", "paddingStart": "12px", "paddingEnd": "12px" }, { "type": "separator" }, { "type": "box", "layout": "horizontal", "contents": [ { "type": "text", "text": "停電により各路線で電車が大幅遅延", "size": "md", "color": "#000000", "wrap": true } ], "action": { "type": "uri", "label": "action", "uri": "https://example.com/article2" }, "paddingTop": "11px", "paddingBottom": "10px", "paddingStart": "12px", "paddingEnd": "12px" }, { "type": "separator" }, { "type": "box", "layout": "horizontal", "contents": [ { "type": "text", "text": "大型モニターで作業効率UP", "size": "md", "color": "#000000", "wrap": true } ], "action": { "type": "uri", "label": "action", "uri": "https://example.com/article3" }, "paddingTop": "11px", "paddingBottom": "10px", "paddingStart": "12px", "paddingEnd": "12px" }, { "type": "separator" }, { "type": "box", "layout": "horizontal", "contents": [ { "type": "text", "text": "初めてのスキンケアキットが登場", "size": "md", "color": "#000000", "wrap": true } ], "action": { "type": "uri", "label": "action", "uri": "https://example.com/article4" }, "paddingTop": "11px", "paddingBottom": "10px", "paddingStart": "12px", "paddingEnd": "12px" }, { "type": "separator" }, { "type": "box", "layout": "horizontal", "contents": [ { "type": "text", "text": "夏を乗り切る！お手軽レシピ", "size": "md", "color": "#000000", "wrap": true } ], "action": { "type": "uri", "label": "action", "uri": "https://example.com/article5" }, "paddingTop": "11px", "paddingBottom": "10px", "paddingStart": "12px", "paddingEnd": "12px" } ], "width": "69%" } ] } ], "paddingAll": "0px" }, "styles": { "body": { "separator": false } } }
カルーセルタイプのメッセージで、複数の商品を1つ1つ大きく紹介できるメッセージデザイン例です。
カルーセルタイプのメッセージで、誕生日クーポンとおすすめ商品を訴求できるメッセージデザイン例です。
カルーセルタイプのメッセージで、複数の求人情報を紹介できるメッセージデザイン例です。
.png)
.png)
.png)
.png)