概要
ユーザー選択型決済の試験運用プログラムに参加しているデベロッパーは、Google Play の決済システムとは別の決済オプションをテストできます。本プログラムは、新しいオプションをユーザーに提供するにあたり、Google が詳細に吟味するために実施されています。この UX ガイドラインは、一貫したユーザー エクスペリエンスを確保し、ユーザーが情報に基づいて判断できるようにすることを目的としています。
試験運用プログラムに参加している場合は、情報画面および別の決済方法選択画面を表示する必要があります。情報画面は、各ユーザーが初めて購入を行う際にのみ表示すればかまいませんが、決済方法選択画面は、購入前に毎回表示する必要があります。両画面のユーザー向けメッセージと UI 仕様は、以下のガイドラインに沿って実装する必要があります。
デベロッパー アプリ |
ユーザー向け情報画面 |
決済方法選択画面 |
国と言語を選択
ユーザーの国と言語を選択すると、対応した UI テキスト文字列が、下のデザイン仕様の欄に表示されます。
- すべての国を表示
- 国を選択
- 欧州経済領域（EEA）
- オーストラリア
- ブラジル
- インド
- インドネシア
- 日本
- 南アフリカ
- 米国
- すべての言語を表示
- 言語を選択
- アフリカーンス語
- アッサム語
- ベンガル語
- ブルガリア語
- カタロニア語
- クロアチア語
- チェコ語
- デンマーク語
- オランダ語
- 英語
- エストニア語
- フィンランド語
- フランス語
- ドイツ語
- ギリシャ語
- グジャラート語
- ヒンディー語
- ハンガリー語
- アイスランド語
- インドネシア語
- イタリア語
- 日本語
- カンナダ語
- ラトビア語
- リトアニア語
- マラヤーラム語
- マラーティー語
- ノルウェー語
- オリヤ語
- ポーランド語
- ポルトガル語（ブラジル）
- ポルトガル語（ヨーロッパ）
- パンジャブ語
- ルーマニア語
- スロバキア語
- スロベニア語
- スペイン語
- スウェーデン語
- タミル語
- テルグ語
- ズールー語
ユーザー向け情報
情報画面は、ユーザーが変更のコンテキストを把握し、十分な情報に基づいて判断できるように追加の情報を提供するものです。
表示のタイミング
情報画面は、別の決済システムを追加した後に初めてユーザーが購入を開始したときに表示しなければなりません。このメッセージは、同じユーザーによる後続の購入で表示する必要はありません。ユーザーが購入を開始する操作を明示的に行った直後に、情報画面を表示します。
価格を表示するタイミング
購入価格は、情報画面と決済方法選択画面のいずれかが表示される前に、ユーザーに明確に表示する必要があります。
表示方法
情報画面はモーダル ボトムシートに表示する必要があります。モーダル ボトムシートは、画面下部からアニメーションで表示され、下部に固定されるモーダル ダイアログに似ています。ベースの画面上のすべての UI 要素よりも高いエレベーションが設定されます。ベースの画面は、ユーザー操作に応答しないことを示すために、暗いスクリムの背後に隠します。
モーダル ボトムシートの設計と実装の詳細については、Google マテリアル デザインをご覧ください。
ユーザーの操作
ボトムシートは、購入を開始するアプリでユーザーがボタンや UI 要素をタップするとトリガーされます。情報画面から行うことができる操作には、次の 3 つがあります。
続行
[続行] ボタンをタップすると、情報画面が閉じて決済方法選択画面が表示されます。
詳細
[詳細] ボタンをタップすると、ウェブブラウザで Google ヘルプセンターの記事が表示されます。
閉じる
ボトムシートを閉じて元の画面に戻るには、以下のように操作します。
- ボトムシートのコンテナの外側をタップする
- Android システムの [戻る] ボタンをタップする
情報画面が閉じられた後と、[続行] がタップされた後は、情報画面を再度表示する必要はありません。
例: ユーザーがアプリ内で [購入] をタップすると、情報画面がトリガーされます。
デザインの仕様
情報画面は、タイトル、メッセージ、ボタンという 3 つのコンポーネントに分割されます。3 つのコンポーネントはすべて必須であり、このガイドラインで定義されているとおりのテキストと UI 要素を含んでいる必要があります。この画面には、他のテキストや画像を追加しないでください。ただし、他の画面には自由に追加できます。
- タイトル
- テキスト 1
- テキスト 2
- ボタン
- ボトムシート
- 背景のスクリム
タイトル
| テキスト |
国と言語を選択
|
| フォント | Roboto（すべてのフォントに適用） |
| フォントサイズ | 18 sp |
| フォントの色 | #202124 |
テキスト 1
重要な情報を強調するために使用します。
| テキスト |
国と言語を選択
|
| フォントサイズ | 14 sp |
| 行の間隔 | 20 |
| フォントの色 | #5F6368 |
テキスト 2
優先度の低い補足情報に使用します。
| テキスト |
国と言語を選択
|
| フォントサイズ | 12 sp |
| 行の間隔 | 16 |
| フォントの色 | #5F6368 |
ボタン 1
| テキスト |
国と言語を選択
|
| 行揃え | 中央揃え |
| フォントサイズ | 14 sp |
| フォントの太さ | Medium |
| フォントの色 | #01875F |
| 背景の色 | #FFFFFF |
| サイズ | 高さ: 36、幅: コンテナに合わせる |
| 角の丸み | 4 dp |
| 輪郭 | 1 dp、#DADCE0 |
| リンク | Google Play ヘルプ記事へのリンク |
ボタン 2
| テキスト |
国と言語を選択
|
| 行揃え | 中央揃え |
| フォントサイズ | 14 sp |
| フォントの太さ | Medium |
| フォントの色 | #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 のビジュアル アセットと支払いアイコンは、以下のリンクから入手できます。
例: 縦画面では、ボトムシートは画面全体の幅と同じにします。
- タイトル
- 説明
- デベロッパー ボタン
- Google Play ボタン
- ボトムシート
- 背景のスクリム
タイトル
| テキスト |
国と言語を選択
|
| フォント | Roboto（すべてのフォントに適用） |
| フォントサイズ | 18 sp |
| フォントの色 | #202124 |
説明
| テキスト |
国と言語を選択
|
| フォントサイズ | 14 sp |
| フォントの色 | #5F6368 |
| テキストリンク |
国と言語を選択
|
| リンク先 | Google Play ヘルプへのリンク |
| フォントサイズ | 14 sp |
| 装飾 | 下線 |
| フォントの色 | #5F6368 |
デベロッパー ボタン
- アプリのアイコン
- アプリ名
- お支払い方法のアイコン
- 追加のインジケーター
- お支払い方法のアイコンの最大数
- 幅 360 dp
- 幅 480 dp
お支払い方法のアイコン
画面の幅に合わせる
ボタンのコンテナ
| 輪郭 | 1 pt、#DADCE0 |
| 角の丸み | 4 dp |
| 内側のパディング | 16 dp、16 dp、16 dp、16 dp |
アプリのアイコン
| サイズ | 高さ: 24 dp、幅: 可変 |
タイトル
| テキスト | {App Name} |
| フォントサイズ | 14 sp |
| フォントの色 | #202124 |
お支払い方法
| サイズ | 高さ: 32 dp、幅: 20 dp |
| 角の丸み | 2 dp |
| 数量 | 最大 5 個（5 個を超える場合はインジケーターを表示） |
| 追加のインジケーター |
国と言語を選択
|
| フォントサイズ | 12 sp |
| フォントの色 | #5F6368 |
Google Play ボタン
- アイコン
- タイトル
- 利用できるお支払い方法
- 追加のインジケーター
ボタンのコンテナ
| 輪郭 | 1 pt、#DADCE0 |
| 角の丸み | 4 dp |
| 内側のパディング | 16 dp、16 dp、16 dp、16 dp |
アプリのアイコン
| 画像アセット | Google Play プリズム |
| サイズ | 高さ: 24 dp、幅: 24 dp |
タイトル
| テキスト | Google Play |
| フォントサイズ | 14 sp |
| フォントの色 | #202124 |
お支払い方法
横向き
例: 横表示の場合、ボトムシートは縦表示より幅が広くなりますが、デザイン仕様と機能は同じです。
| ボトムシート | 幅: 最大 500 dp、内側のパディング: 24 dp |
| タイトル | 縦表示と同じ |
| メッセージ | 縦表示と同じ |
| ボタン | 縦表示と同じ |
ユーザー選択型決済の試験運用の詳細とよくある質問については、ヘルプセンターをご覧ください。