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

概要

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

ユーザー向け情報

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

表示のタイミング

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

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

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

表示方法

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

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

ユーザーの操作

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

続行

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

詳細

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

閉じる

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

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

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

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

デザインの仕様

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

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

タイトル

メッセージ

ボタン 1

ボタン 2

ボトムシート

横向き

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

課金選択画面

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

表示のタイミング

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

表示方法

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

同等な視覚的表現

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

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

デザインの仕様

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

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

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

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

タイトル

説明

デベロッパー ボタン

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

お支払い方法のアイコン

1. お支払い方法のアイコンの最大数
2. お支払い方法のアイコンではなく、その名前を表示

画面の幅に合わせる

3. 幅 360 dp
4. 幅 480 dp

ボタンのコンテナ

アプリのアイコン

タイトル

お支払い方法

Google Play ボタン

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

ボタンのコンテナ

アプリのアイコン

タイトル

お支払い方法

横向き

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