リッチカード

リッチカードは、メディア、テキスト、候補を 1 つのメッセージにまとめたものです。1 つのトピックに焦点を当て、ユーザーに明確なアクションを提示します。

リッチカードには次のものを含めることができます。

  1. メディア(画像/GIF、動画、PDF ファイル)
  2. タイトルのテキスト
  3. 説明テキスト
  4. 返信文や操作の候補。

これらのフィールドはそれぞれ省略可能ですが、フィールド 1 ~ 3 のうち少なくとも 1 つはリッチカードに含める必要があります。

リッチカードのコンポーネント

リッチカードのコンポーネント

メディア

リッチカードには、画像、GIF、動画、PDF ファイルなど、さまざまなメディアを含めることができます。リッチカードはさまざまなメディア フォーマットをサポートしています。

サポートされている画像タイプ:

  • JPEG/JPG
  • GIF
  • PNG

サポートされている動画の種類:

  • H.263
  • M4V
  • MP4
  • MPEG
  • MPEG-4
  • WebM

サポートされているファイル形式(Google メッセージ クライアントでインドでのみ利用可能):

  • PDF

リッチカードのメディアの高さは、次の 3 つから選択できます。

メディアタイプ メディアの高さ
短いメディア 112 DP
中程度のメディア 168 DP
縦長メディア 264 DP

DP は密度非依存ピクセルの略で、ピクセル密度が異なる画面間で UI 要素の物理サイズを一定に保つように設計された単位です。

リッチカードの画像の高さ

メディアのサイズが選択した高さと一致しない場合、メディアは自動的にズームされ、中央で切り抜かれます。この切り抜きにより、望ましくないプレビューになることがあります。目的の画像を正確に表示するには、サムネイルを指定します。プレビューまたはサムネイルをクリックすると、メディア ファイルが全画面表示されます。

PDF ファイルには、サムネイルが提供されている場合でも、PDF ファイルの最初のページに基づくプレビュー画像が表示されます。プレビュー画像をクリックすると、PDF ビューアでファイルが開きます。プレビューを利用できない場合(ファイルがパスワードで保護されている場合など)、PDF ファイルにはサムネイル画像が表示されます。サムネイルが指定されていない場合は、デフォルトのアイコンが表示されます。

縦型のリッチカードで PDF ファイルをプレビューする。
縦型リッチカードの PDF ファイルのプレビュー
縦型リッチカードのデフォルトの PDF アイコン。
縦型リッチカードのデフォルトの PDF アイコン

URL を指定するか、ファイルを直接アップロードしてメディアをアップロードします。詳しくは、メッセージを送信するをご覧ください。

サムネイル

サムネイルの最大ファイルサイズは 100 KB です。最適なユーザー エクスペリエンスを実現するため、50 kB 以下にすることをおすすめします。サムネイルを指定しない場合は、代わりにデフォルトのアイコンが表示されます。サムネイルは、ダウンロードが失敗した場合でも、ファイルのダウンロード中に表示され続けます。また、ダウンロードした動画のプレビューとしても機能します。サムネイルまたはデフォルトのアイコンをタップすると、メディア ファイルの全画面表示が開きます。

画像ファイルのデフォルトのアイコンがリッチカードに表示されます。
画像ファイルのデフォルト アイコン
動画ファイルのデフォルトのアイコンがリッチカードに表示されます。
動画ファイルのデフォルト アイコン
リッチカードでブランドが提供するサムネイル。
カスタム サムネイル

タイトルのテキスト

リッチカードのタイトルは、ユーザーの注意を引き、メッセージの内容を明確に伝える見出しのようなものです。簡潔で有益なものにしてください。最大 200 文字まで入力できます。

説明

リッチカードの説明には、重要な補足情報が含まれています。ここでは、タイトルを詳しく説明し、主なメリットを強調し、明確な行動を促すフレーズでコンバージョンを促進します。説明の長さは 2,000 文字までです。

返信文と操作の候補

各リッチカードには、最大 4 つの候補の返信候補のアクションを含めることができます。また、テキスト メッセージに候補を追加するのと同様に、カードの下に最大 11 個の候補をチップリストに追加できます。チップリスト内の返信文の候補とアクションは、会話を進めるための手段です。リッチカード内にリストされているオプションを繰り返すことはできません。また、カルーセルで提示されているアイテムの選択ツールとしても使用できません。

提案の詳細については、こちらの記事をご覧ください。

返信文の候補

返信候補は、エージェントが簡単に応答できる方法でユーザーがエージェントとやり取りするのに役立ちます。自由形式の回答が必要なやり取りでない限り、候補の返信を使用します。自由形式のテキストよりも処理しやすく、エージェントが会話を最適な方向に導くことができます。

リッチカード内の返信の候補

候補の返信は 25 文字までです。

推奨される措置

提案アクションを使用すると、エージェントはネイティブ デバイス アクションにフックして、ユーザーに緊密に統合されたエクスペリエンスを提供できます。関連性のある提案アクションを使用すると、カスタマー サポートに電話をかけたり、地図で場所を見つけたりするのが簡単になります。

ただし、選択肢が多すぎてユーザーが困惑しないようにしてください。最新のメッセージに関連するアクションのみを提供し、必要な数のアクションのみを提供します。提案されたアクションと提案された返信の数を、特定のコンテキストでユーザーにとって有用なものに制限します。

リッチカード内の操作の候補

提案アクションの長さは 25 文字までです。

リッチカードのレイアウト

リッチカードには、縦向きまたは横向きのレイアウトを使用できます。

縦型リッチカード

縦型リッチカード

縦型のリッチカードでは、カードの上部に横型のメディアが表示されます。縦型リッチカードの最小の高さは 112 DP です。

縦型リッチカードで使用されるメディアの高さは次のいずれかになります。

  • 小: 112 DP
  • 中: 168 DP
  • 大: 264 DP

縦型リッチカードで使用されるメディアのアスペクト比は次のいずれかになります。

  • 2:1
  • 16:9
  • 7:3

横型リッチカード

横型リッチカード

水平方向のリッチカードでは、カードの左側または右側にメディアが表示されます。

横型リッチカードには固定メディア比率はありませんが、固定幅は 128 DP です。高さは、カード内のテキスト要素の高さに合わせて調整されます。

リッチカード カルーセル

スタンドアロンのリッチカードまたはリッチカードのカルーセルを送信できます。

リッチカード カルーセルは、データプランやデバイスなどの複数のアイテムを紹介するのに最適です。ユーザーは 1 つのメッセージ内でさまざまなオプションを閲覧して比較できます。カルーセルは、さまざまな選択肢を提示したり、関連コンテンツを探索できるようにしたりする場合に最適です。

リッチカード カルーセル

カルーセルの最初の項目は最適な選択肢であるべきで、その理由がユーザーに明確に伝わるようにする必要があります。リッチカード カルーセルには最大 10 枚のカードを設定できます。リッチカード カルーセルには、縦型のリッチカードのみを含めることができます。

スタンドアロンのリッチカード メッセージと同様に、会話を進めるためにカルーセルの下に候補ワードを追加できます。候補ワードは、カルーセル内に表示されている選択肢を繰り返すものではなく、カルーセルに表示されているアイテムの選択ツールでもありません。

候補ワード付きリッチカード カルーセル

仕様 詳細
タイトル 最大 200 文字
説明 最大 2,000 文字
高さ • 小さいカルーセル: 最大高さ 542 DP
• 中くらいのカルーセル: 最大高さ 592 DP

カルーセル内のすべてのカードは、最も高いカードの高さに合わせて拡大縮小されます。

この高さに合わせてコンテンツを調整する方法について詳しくは、コンテンツのサイズ変更と切り捨てをご覧ください。
次のいずれかのオプションを選択します。
• 小: 180 DP(固定幅)
• 中: 296 DP(固定幅)

コンテンツのサイズ設定と切り捨て

リッチカード カルーセルのコンテンツが最小の高さを満たすのに十分な大きさでない場合、下部に余白が追加されます。コンテンツが最大高を超えると、次の順序で切り捨てられます。

  1. 説明(1 行に短縮)。
  2. タイトル(1 行に縮小)。
  3. 候補を完全に削除しました。
  4. 説明文を完全に削除しました。
  5. タイトルを完全に削除しました。

この切り捨ての問題を解決し、ユーザーが常にコンテンツ全体を確認できるようにするため、RBM ではカルーセルのカードに展開可能な全画面表示が用意されています。この機能の詳細については、カルーセルの全画面表示をご覧ください。

カルーセルの全画面表示

テキストや候補が切り捨てられてしまうのを防ぐため、RBM ではリッチカード カルーセルの全画面ビューが用意されています。これにより、デザイナーはユーザーがカードを開いてメッセージ全体を確認できることを前提に、テキストの制限を最大限に活用できます。

デベロッパー向けの重要な詳細

  • ご対応は不要です: この機能は、すべてのリッチカード カルーセルで自動的に有効になります。
  • 範囲: リッチカード カルーセルにのみ適用されます。スタンドアロン リッチカードは影響を受けません。
  • 制限: タイトル(200)、説明(2,000)、候補(4)の既存の文字数制限と候補数の制限は変更されません。

全画面表示を開閉する

開くには: カードのコンテンツが切り捨てられると、表示されているテキストの末尾に [もっと見る] ボタンが表示されます。カードのテキスト領域または [詳細] ボタンの任意の場所をタップすると、全画面表示が開きます。

閉じるには: ユーザーは次の方法で全画面表示を終了できます。

  1. 左上にある [X] ボタンをタップします。
  2. システムの [戻る] ボタンまたは [戻る] ジェスチャー ナビゲーションを使用します。
  3. 会話を継続する候補をタップします。

全画面表示でのナビゲーション

全画面表示では、カード内の垂直スクロールとカード間の水平スワイプの両方が可能です。

  • 縦方向のスクロール: カードのテキストが全画面表示よりも長い場合、テキストとメディアの領域が縦方向にスクロール可能になります。候補は「フローティング」のままで、常に画面の下部に表示されます。
  • 水平スワイプ: 全画面表示では、水平方向にスワイプしてカルーセルの次のカードまたは前のカードに移動できます。

縦スクロール

左右のスワイプ

全画面表示の仕様

カードが展開されると、標準化された全画面レイアウトが使用されます。

仕様 詳細
メディアの高さ 264 DP
全画面表示のメディアの高さは、常に Tall メディアの設定を使用します。
メディアの幅 screenwidth - 32 DP
メディアは、左右に 16 DP のマージンを設けて画面幅いっぱいに拡大されます。同じ中央クロップ ルールが適用されます。

全画面表示での候補の仕組み

全画面表示でユーザーが候補をタップした場合、結果として生じる動作は候補の種類によって異なります。

候補のタイプ 動作
URL を開くアクション URL はデフォルトのブラウザまたはウェブビュー オーバーレイで開きます。ユーザーが Google メッセージに戻ると、全画面表示が復元されます。
[電話をかける]、[位置情報を表示]、[カレンダーの予定を作成] アクション 対応するアプリが開きます。Google メッセージに戻ると、全画面表示が復元されます。
現在地を共有するアクション 全画面表示が閉じ、Google マップが開きます。ユーザーが位置情報を送信すると、自動的に標準のチャットビューに戻ります。
返信の候補 全画面表示が閉じ、標準のチャットビューで返信が送信され、会話が続行されます。

上限

リッチカードのタイトルは 200 文字まで、説明は 2, 000 文字までです。絵文字やマルチバイト文字セットなどの特殊文字は、2 ~ 4 文字以上としてカウントされます。

リッチカードまたはリッチカード カルーセルのメディアの高さは次のいずれかにできます。

  • 小: 112 DP
  • 中: 168 DP
  • 大: 264 DP

リッチカードまたはカルーセル内のすべての要素(メディア、タイトル、説明、ボタン)を正しく表示するには、指定された文字数とサイズの上限に準拠する必要があります。

リッチカードのペイロードの最大サイズは 250 KB です。