アプリ内課金(IAP)のユーザーエクスペリエンス(UX)に関するデザインガイドライン
アプリ内課金(IAP)のユーザーエクスペリエンス(UX)に関するデザインガイドライン
このページでは、アプリに組み込むユーザーエクスペリエンス(UX)のデザインに関する推奨事項を説明します。このガイドラインに従うと、アプリの外観や操作性をAmazonアプリストアと一貫性のあるものにすることができます。
ユーザーインターフェイス(UI)のデザインガイドライン
Amazonとのデザイン上の一貫性を保つために、アプリ内課金(IAP)を取り扱うアプリのUI要素には、Amazonアプリストアと同じカラーパレットおよびスタイルを使用してください。このセクションでは、Amazonアプリストアで使用されている値をまとめています。
共通のカラーパレット
次の表は、AmazonアプリストアのUI要素で使用されている色とそのカラーコードの一覧です。
カラー名 | 16進数カラーコード | 例 |
---|---|---|
Black | #000000 | |
Background Grey | #333333 | |
Secondary Background Grey | #4d4d4d | |
Light Grey | #999997 | |
Very Light Grey | #bcbcbc | |
White | #ffffff | |
Error Text Orange | #ff9900 | |
Hyperlink Text | #448ccb |
推奨フォントスタイル
フォントは標準のAndroidフォント(Droid Sans、Droid Serif、Sans Mono)です。
名前 | サイズ | 太さ | カラー名 | 16進数カラーコード | カラーサンプル |
---|---|---|---|---|---|
Body block header | 24sp | 標準 | White | #ffffff | |
Body copy | 16sp | 標準 | Light Grey | #999997 | |
Sub-heading | 15sp | 標準 | Light Grey | #999997 | |
Text input | 21sp | 標準 | Black | #000000 | |
Text input hint | 21sp | 標準 | Very Light Grey | #bcbcbc | |
Button label | 18sp | 標準 | White | #ffffff | |
Error Text | 18sp | 標準 | Error Text Orange | #ff9900 | |
Hyperlink | 16sp | 標準 | Hyperlink Text | #448ccb |
ユーザーエクスペリエンス(UX)のデザインガイドライン
Amazonアプリストアと一貫性があるユーザーエクスペリエンス(UX)をデザインするための推奨事項と禁止事項を以下に挙げます。
推奨事項
- 購入したアイテムが利用できる状態にあることを常に視覚的に明示します。必要に応じて、アプリ内でそのアイテムにアクセスする方法も示します。
- IAPを完了するためにアカウントが必要となるアプリでは、ユーザーが購入を始める前にアカウントの作成を促します。
- IAP APIを使用して、価格と商品情報を取得して表示します。
- IAPのドキュメントを参照して、すべての購入レスポンスを処理する方法を理解します。
禁止事項
-
トランザクション状態に関する情報やステータスメッセージをアプリのユーザーに表示しないでください(エンドユーザーへの確認やメッセージの表示は、トランザクションの成功と失敗の通知も含めて、IAP APIが処理します)。
注: このガイドラインの例外として、ユーザーがIAPのトランザクションをキャンセルしたときは、ステータスメッセージを表示してもかまいません。このようなメッセージはフローを中断させるものではなく、ユーザーにとって有用な情報を提供していると言えます。 - 以前に購入したコンテンツや現在定期購入しているコンテンツに、ユーザーがアクセスできなくなることは避けてください。
- 無関係なステップや確認を追加しないでください。たとえば、購入エクスペリエンスが始まる前に余計なダイアログボックスを表示しないでください。
例
以下のUIモックアップは、ユーザーがIAPを行おうとしたときの動作として、不適切な例と適切な例を示しています。