アプリ内課金(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を行おうとしたときの動作として、不適切な例と適切な例を示しています。