リッチカード

リッチカードは、メディア、テキスト、候補を 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

最適な表示を行うため、縦型リッチカードで使用するメディアのアスペクト比は次のものをおすすめします。

  • 短い: 7:2
  • 中程度: 21:9
  • トールサイズ: 3:2

横型リッチカード

横型リッチカード

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

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

リッチカードのカルーセル

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

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

リッチカード カルーセル

カルーセルの最初のアイテムは最適な選択肢にする必要があり、その理由をユーザーに明確に伝える必要があります。リッチカードのカルーセルには最大 10 個のカードを含めることができます。リッチカードのカルーセルには、縦型リッチカードのみを含めることができます。

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

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

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

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

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

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

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

  1. 説明が 1 行に短縮されます。
  2. タイトルが 1 行に短縮されます。
  3. 候補が完全に削除されます。
  4. 説明が完全に削除されます。
  5. タイトルが完全に削除されます。

この切り捨ての問題を解決し、ユーザーが常に完全なコンテンツを表示できるようにするため、RCS for Business では、カルーセル内のカードの展開可能な全画面表示を提供しています。 この機能について詳しくは、 カルーセルの全画面表示をご覧ください。

カルーセルの全画面表示

テキストや候補が切り捨てられて表示されなくなるのを防ぐため、RCS for Business では、リッチカードのカルーセルの全画面表示を提供しています。これにより、デザイナーはテキストの制限を最大限に活用できます。ユーザーはカードを展開してメッセージ全体を表示できるためです。

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

  • 操作は不要です。 この機能は、すべてのリッチカードのカルーセルで自動的に有効になります。
  • スコープ: リッチカードのカルーセルにのみ適用されます。スタンドアロンのリッチカードには影響しません。
  • 上限: タイトル(200)、説明(2,000)、候補(4)の既存の文字数と候補の上限は変わりません。

全画面表示を開閉する

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

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

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

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

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

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

縦スクロール

横スワイプ

全画面表示の仕様

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

仕様 詳細
メディアの高さ 264 DP
全画面表示のメディアの高さには、常に [長いメディア] 設定が使用されます。
メディアの幅 screenwidth - 32 DP
メディアは、両側に 16 DP の余白を残して画面の幅いっぱいに拡大されます。中央の切り抜きルールは同じです。

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

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

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

上限

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

リッチカードまたはリッチカードのカルーセル内のメディアの高さは次のとおりです。

  • 短い: 112 DP
  • 中程度: 168 DP
  • 長い: 264 DP

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

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