LAMPテンプレートフレックスメッセージを作成したい

フレックスメッセージを作成したい

このガイドでは、以下の方法をご紹介します

  • フレックスメッセージの作成手順
  • 6 種類のブロックの並べ方
  • 文字単位の装飾とデザイン設定
  • パネルの追加と複製

フレックスメッセージとは

画像・見出し・本文・ボタンなどの「ブロック」を上から積み上げて、独自のレイアウトを組み立てられるメッセージタイプです。

カードメッセージでは決まった位置にしか置けない要素を、好きな順番で並べられます。文字を部分的に太字にしたり色を変えたりすることもできます。

JSON を書く必要はありません。ビジュアルエディタで組み立てます。

フレックスメッセージのプレビュー(クリックで拡大)

作成手順

メッセージタイプ」で「フレックス」を選んでテンプレートメッセージを作成し、開いたレコードページから続けます。

右側の「フレックス」タブがビジュアルエディタです。ヘッダーには「デザイン」(全体の設定)、「」(元に戻す)、「」(やり直す)、「保存」が並びます。

その下がパネルのチップです。「」でパネルを追加、「」で複製、「🗑」で削除できます。

フレックスタブの初期状態(クリックで拡大)


パネルの中に、下のパレットからブロックを追加していきます。追加できるブロックは 6 種類です。

追加したブロックは上から順に並びます。行の左端のドラッグハンドルで順番を入れ替え、右端のアイコンで複製・削除ができます。

ブロック追加パレット(クリックで拡大)

ブロック内容
画像画像を配置します。比率とタップ時のアクションを設定できます
タイトル見出しになるテキストです
テキスト本文です。文字単位で装飾できます
ボタンタップできるボタンです。色とアクションを設定できます
区切り線横線を引きます
動画動画を配置します。1 パネルにつき 1 つだけです

組み終わったら「保存」をクリックします。保存すると上部の「有効」にチェックが付きます。

保存ボタンの左には、作成した内容の JSON サイズ(例: 1.1KB)が表示されます。

保存後のフレックスタブ(クリックで拡大)

ブロックの設定

画像

⇪ 画像を選択」でアップロードするか、画像の URL を直接入力します。

比率」では 1:1 4:3 1.51:1 16:9 1.91:1 20:13 から選べます。

タップした時」で、画像をタップしたときのアクションを設定できます。既定は「なし」です。

画像ブロックのフォーム(クリックで拡大)

テキスト

テキストブロックでは、選んだ文字だけを装飾できます。ツールバーは左から「B」(太字)「I」(斜体)「U」(下線)「S」(取り消し線)、色、「Aa」(文字サイズ)、「」(装飾を解除)です。

下部の「」「」「」で行の配置を変えられます。右下の色見本はブロック全体の文字色です。

右上の「{!} 差し込み」から、友だち項目の差し込みを挿入できます。

テキストブロックの装飾(クリックで拡大)

ボタン

ボタンの文字」は上限 40 文字です。

見た目は「塗り」「淡色」「リンク」から選べます。色見本をクリックすると個別に色を変えられ、「テーマ色」をクリックするとデザイン設定のテーマカラーに戻ります。

タップした時」でアクションを設定します。URL は上限 1000 文字です。

ボタンブロックのフォーム(クリックで拡大)

タップした時のアクション

画像ブロックとボタンブロックには、次のアクションを設定できます。

アクション種類ユーザーがタップしたときの動作
なし何も起きません(画像ブロックのみ)
リンクを開くLINE 内でブラウザが開き、リンク先が表示されます
メッセージ送信ユーザーに代わってメッセージを送信します
テンプレート呼出指定したテンプレートが送信されます
AIエージェント呼出指定した AI エージェントが呼び出されます
電話をかける指定した電話番号への発信画面が開きます
💡

フレックスでは、文字数の上限がほかのタイプより大きくなっています。

URL は 1000 文字、送信するテキストやタップ時に表示するテキストは 300 文字まで入力できます。他のタイプでは Salesforce の項目長に合わせて 255 文字が上限です。

デザイン設定

ヘッダーの「デザイン」をクリックすると、パネル全体の設定パネルが開きます。

項目内容
パネルの幅SS / S / 標準 / L
テーマカラー(ボタン)ボタンの既定色
背景色パネルの背景色

デザイン設定パネル(クリックで拡大)

パネルを増やす

チップの「」でパネルを増やすと、カードメッセージのように横に並ぶカルーセルになります。「」を使うと、いま編集中のパネルをそのまま複製できるので、同じデザインで内容だけ変えたいときに便利です。

保存ボタンが押せないときは

必須項目が足りないあいだは、黄色い帯に理由が並び「保存」がグレーのままになります。ブロックが 1 つもないパネルがある場合や、ボタンにアクションが設定されていない場合が主な原因です。

  • ボタンの文字を入力してください
  • URLを入力してください
  • 送信するテキストを入力してください
  • 呼び出すテンプレートを選択してください
  • AIエージェント応答を選択してください
  • 電話番号を入力してください

入力を取り消したいときは「破棄」、直前の操作だけ戻したいときはヘッダーの「」を使ってください。