リマインダー: また既存のアプリのアップデートについては、2021 年 11 月 1 日より Billing Library バージョン 3 以降の使用が必須となります。詳細

代替アプリ課金システム向けの暫定 UX ガイドライン

概要

ユーザー エクスペリエンスの一貫性を維持するため、そしてユーザーが情報に基づいた選択をできるようにするため、代替のアプリ内課金システムを Google Play に提供する場合には、情報画面と個別の課金選択画面を表示する必要があります。情報画面は、ユーザーが初めて購入を行う際にのみユーザーごとに表示する必要がありますが、課金選択画面は購入前に毎回表示する必要があります。両画面のユーザー向けメッセージと UI 仕様は、以下のガイドラインに沿って実装する必要があります。

ユーザー向け情報

情報画面は、ユーザーが変更のコンテキストを把握し、十分な情報に基づいて判断できるように追加の情報を提供するものです。

表示のタイミング

情報画面は、代替のアプリ内課金システムを追加した後、ユーザーが最初の購入を開始したときに表示します。このメッセージは、同じユーザーによる後続の購入で表示する必要はありません。ユーザーが購入を開始する操作を明示的に行った直後に、情報画面を表示します。

価格を表示するタイミング

購入価格は、情報画面と課金選択画面のいずれかが表示される前に、ユーザーに明確に表示する必要があります。

表示方法

情報画面はモーダル ボトムシートに表示する必要があります。モーダル ボトムシートは、画面下部からアニメーションで表示され、下部に固定されるモーダル ダイアログに似ています。ベースの画面上のすべての UI 要素よりも高いエレベーションが設定されます。ベースの画面は、ユーザー操作に応答しないことを示すために、暗いスクリムの背後に隠します。

モーダル ボトムシートの設計実装の詳細については、Google マテリアル デザインをご覧ください。

ユーザーの操作

ボトムシートは、購入を開始するアプリでユーザーがボタンや UI 要素をタップするとトリガーされます。情報画面から行うことができる操作には、次の 3 つがあります。

続行

[続行] ボタンをタップすると、情報画面を閉じて課金選択画面が表示されます。

詳細

[詳細] ボタンをタップすると、ウェブブラウザで Google ヘルプセンターの記事が表示されます。

閉じる

ボトムシートを閉じて元の画面に戻るには、以下のように操作します。

  • ボトムシートのコンテナの外側をタップする
  • Android システムの [戻る] ボタンをタップする

情報画面が閉じられた後と、[続行] がタップされた後は、情報画面を再度表示する必要はありません。

例: ユーザーが購入を開始する前に購入価格がはっきりと表示されている。[今すぐ参加] ボタンをタップすると、情報画面が表示される。

ユーザー情報画面

デザインの仕様

情報画面は、タイトル、メッセージ、ボタンという 3 つのコンポーネントに分割されます。3 つのコンポーネントはすべて必須であり、このガイドラインで定義されているとおりのテキストと UI 要素を含んでいる必要があります。この画面には、他のテキストや画像を追加しないでください。ただし、他の画面には自由に追加できます。

必須のコンポーネントの位置を表示している購入手続きオプション画面

  1. タイトル
  2. メッセージ
  3. ボタン
  4. ボトムシート
  5. 背景のスクリム

タイトル

テキスト ご自分の購入手続きオプションに変更
フォント Roboto(すべてのフォントに適用)
フォントサイズ 18 sp
フォントの色 #202124

メッセージ

テキスト 1 韓国における最近の規制の変化により、購入手続きの際の選択肢が増えました。この選択によって、次のことが決定されます。
  • 購入のセキュリティ保護、支払いの処理、支払い情報の保存を誰が行うのか
  • 購入に関するカスタマー サポートを誰が提供するのか
  • 使用できるお支払い方法
  • 購入時の特典
フォントサイズ 14 sp
行の間隔 20
フォントの色 #5F6368
テキスト 2 Google が保護しているのは、Google Play での購入のみです。Play ギフトカード、Play ポイント、購入管理機能、定期購入の管理などの Play 機能が利用できるのは、購入手続き時に Google Play を選択した場合のみです。
フォントサイズ 12 sp
行の間隔 16
フォントの色 #5F6368

ボタン 1

テキスト 詳細
行揃え 中央揃え
フォントサイズ 14 sp
フォントの太さ
フォントの色 #01875F
背景の色 #FFFFFF
サイズ 高さ: 36、幅: コンテナに合わせる
角の丸み 4 dp
アウトライン 1 dp、#DADCE0
リンク Google Play ヘルプ記事へのリンク

ボタン 2

テキスト 続行
行揃え 中央揃え
フォントサイズ 14 sp
フォントの太さ
フォントの色 #FFFFFF
背景の色 #01875F
サイズ 高さ: 36、幅: コンテナに合わせる
角の丸み 4 dp
リンク 課金選択画面へのリンク

ボトムシート

サイズ 高さ: 可変、幅: 100%
角の丸み 8 dp、8 dp、0、0
背景 #FFFFFF
内側のパディング 左: 24 dp、右: 24 dp、上: 32 dp、下: 24 dp
エレベーション 8 dp

横向き

横表示の場合、ボトムシートは縦表示より幅が広くなりますが、デザイン仕様と機能は同じです。

横表示の購入手続きオプション画面

ボトムシート 幅: 最大 500 dp、内側のパディング: 24 dp
タイトル 縦表示と同じ
メッセージ 縦表示と同じ
ボタン 高さ: 36、幅: コンテナに合わせる

課金選択画面

課金選択画面では、2 つの購入手続きオプションを表示して購入を完了できます。ユーザーが情報に基づいて判断できるよう、各課金サービス オプションには利用可能な支払い方法も表示されます。ユーザーは選択を行った後、その課金サービスでの購入を完了できます。

表示のタイミング

ユーザーが情報画面を確認済みの場合は、ユーザーが購入を開始するための明確な操作を行った直後に課金選択画面が表示されます。

表示方法

課金選択画面はモーダル ボトムシートに表示され、その仕様は情報画面と同じです。

同等な視覚的表現

その他のアプリ内課金サービスのボタンと Google Play の課金サービスのボタンは、適正かつ同等の方法で表示する必要があります。これには、ボタンサイズ、テキストサイズやスタイル、タップ ターゲット、アイコンサイズなどが同等であることが含まれますが、これらには限定されません。このガイドラインで定義されていない追加のテキスト、画像、スタイルの変更は行わないでください。

例: [今すぐ参加] ボタンをタップして、課金選択画面が表示される。

課金選択画面(各課金オプションで同等な表現)

デザインの仕様

課金選択画面には、タイトル、説明、デベロッパー ボタン、Google Play ボタンの 4 つのコンポーネントがあります。すべてのコンポーネントは必須であり、このガイドラインで定義されているとおりのテキストと UI 要素を含んでいる必要があります。この画面には、他のテキストや画像を追加しないでください。ただし、自身が所有する他の画面には自由に追加できます。

Google Play のビジュアル アセットと支払いアイコンは、以下のリンクから入手できます。

例: 縦画面では、ボトムシートは画面全体の 100% の幅にする。

必須要素の位置を表示しているボトムシート

  1. タイトル
  2. 説明
  3. デベロッパー ボタン
  4. Google Play ボタン
  5. ボトムシート
  6. 背景のスクリム

タイトル

テキスト 購入方法の選択
フォント Roboto(すべてのフォントに適用)
フォントサイズ 18 sp
フォントの色 #202124

説明

テキスト 支払いのセキュリティ保護と処理、カスタマー サービスの提供を誰が行うかを選んでください。特典や利用可能なお支払い方法は異なる場合があります。
フォントサイズ 14 sp
フォントの色 #5F6368
テキストリンク 詳細
リンク先 リンク
フォントサイズ 14 sp
装飾 下線
フォントの色 #5F6368

デベロッパー ボタン

デベロッパー ボタンの UI 要件

  1. アプリのアイコン
  2. アプリ名
  3. お支払い方法のアイコン

デベロッパー ボタンのその他のオプション

    お支払い方法のアイコン

  1. お支払い方法のアイコンの最大数
  2. お支払い方法のアイコンではなく、その名前を表示
  3. 画面の幅に合わせる

  4. 幅 360 dp
  5. 幅 480 dp

ボタンのコンテナ

アウトライン 1 pt、#DADCE0
角の丸み 4 dp
内側のパディング 16 dp、16 dp、16 dp、16 dp

アプリのアイコン

サイズ 高さ: 24 dp、幅: 可変

タイトル

テキスト {App Name}
フォントサイズ 14 sp
フォントの色 #202124

お支払い方法

サイズ 32 dp x 20 dp
角の丸み 2
数量 最大 5 個(5 個を超える場合はインジケーターを表示)
追加のインジケーター その他(狭い画面では次の行に折り返す)
フォントサイズ 12 sp
フォントの色 #5F6368

Google Play ボタン

Google Play ボタン

  1. アイコン
  2. タイトル
  3. ご利用いただけるお支払い方法
  4. 追加のインジケーター

ボタンのコンテナ

アウトライン 1 pt、#DADCE0
角の丸み 4 dp
内側のパディング 16 dp、16 dp、16 dp、16 dp

アプリのアイコン

画像アセット Google Play プリズム
サイズ 24 dp x 24 dp

タイトル

テキスト Google Play
フォントサイズ 14 sp
フォントの色 #202124

お支払い方法

画像アセット リンク
追加のインジケーター その他
フォントサイズ 12 sp
フォントの色 #5F6368

横向き

例: 横表示の場合、ボトムシートは縦表示より幅が広くなりますが、デザイン仕様と機能は同じです。

横表示のボトムシート

ボトムシート 幅: 最大 500 dp、内側のパディング: 24 dp
タイトル 縦表示と同じ
メッセージ 縦表示と同じ
ボタン 縦表示と同じ