UXガイドライン
k-ID APIを使用してカスタム年齢ゲートを構築する際は、このUXガイドラインに従って、コンプライアンスに準拠したユーザーフレンドリーな体験を作成してください。これらの推奨事項により、規制要件を満たしながら、プレイヤーが年齢確認をスムーズに完了できるようになります。
これらのガイドラインは、k-ID APIを直接使用してカスタム年齢ゲートを構築する場合に適用されます。k-IDの埋め込みウィジェットを使用している場合、UXはすでに処理されています。
年齢入力方法
実装では、プレイヤーの年齢を収集するための少なくとも2つの方法をサポートする必要があります：年齢スライダーまたは日付ピッカーです。/age-gate/get-requirementsエンドポイントのapprovedAgeCollectionMethodsフィールドを確認して、プレイヤーの管轄区域で許可されている収集方法を判断してください。
年齢スライダー
年齢スライダーは、プレイヤーが年齢を入力するためのシンプルで直感的な方法を提供します。これはほとんどの管轄区域で推奨されるアプローチです。
デザイン推奨事項：
- スライダーの範囲を0歳から35歳以上に設定（ESRBガイドラインに準拠）
- デフォルト位置を0にしてニュートラルな状態で開始
- プレイヤーがスライダーを操作するまで続行ボタンを非アクティブに維持
- プレイヤーがスライダーを調整すると選択された年齢を明確に表示
- アクセシビリティのためにキーボードナビゲーションをサポート
モバイル版：
日付ピッカー
日付ピッカーは、プレイヤーの完全な生年月日を収集します。この方法は特定の管轄区域で必要とされます。
デザイン推奨事項：
- ローカルの日付形式で日/月/年の入力をサポート
- 無効な日付に対して明確なバリデーションメッセージを表示
- 日付形式をローカルの慣習に合わせる（DD/MM/YYYYまたはMM/DD/YYYY）
年齢確認
プレイヤーの年齢を収集した後、続行する前に確認画面を表示します。このステップにより、誤入力を防ぎ、正確な年齢情報の重要性を強調できます。
デザイン推奨事項：
- 入力された年齢または生年月日を明確に要約
- 入力された年齢がプレイヤーの体験に影響することを説明
- 戻って年齢を修正するか、確認して続行するための明確なオプションを提供
保護者同意
プレイヤーがその地域のデジタル同意年齢未満の場合、保護者の承認が必要です。完了率を最大化するために、UIでは3つの同意方法すべてを表示する必要があります。
同意方法
保護者が同意を完了するための3つのオプションを提供します：
-
メール：プレイヤーが親または保護者のメールアドレスを入力できるようにします。
/challenge/send-emailを呼び出して同意リクエストを送信します。 -
QRコード：
challenge.urlフィールドからスキャン可能なQRコードを表示します。保護者は携帯電話でこれをスキャンして同意ポータルにアクセスします。 -
手動コード入力：
challenge.oneTimePasswordを表示し、保護者にasktoplay.comでコードを入力するよう案内します。
デザイン推奨事項
- 3つのオプションすべてを同等の視認性で表示
- 後で戻る必要があるプレイヤーのために「後で行う」オプションを含める
- 使いやすさを向上させるためにワンタイムコードのコピーボタンを追加
- プレイヤーが同意が許可される前に戻った場合にフローを再開できるよう
challengeIdを保存
QRコードとワンタイムパスワードは1時間後に有効期限が切れ、/challenge/generate-otp APIを使用して更新する必要があります。有効期限切れを適切に処理するために、更新オプションを提供するか、認証情報を自動的に再生成するようUIを設計してください。詳細については、チャレンジの有効期限と時間ベースの認証を参照してください。
データライトモード
ゲームがデータライトモードをサポートしている場合、デジタル同意年齢未満のプレイヤーは保護者の承認を待つ間、限定された機能にアクセスできます。
デザイン推奨事項：
- データライトモードで利用可能な機能を明確に伝える
- 同意が得られた後に利用可能になる追加機能を説明
- プレイヤーが同意ステータスを確認したり、同意リクエストを再送信できる方法を提供
アクセシビリティ
カスタム年齢ゲートUIがアクセシビリティ基準を満たすようにしてください：
| 要件 | 実装 |
|---|---|
| キーボードナビゲーション | すべてのインタラクティブ要素にキーボードでアクセス可能 |
| スクリーンリーダーサポート | 適切なARIAラベルとセマンティックHTML |
| 色のコントラスト | テキストとインタラクティブ要素に十分なコントラスト |
| タップターゲット | ボタンに最小44×44ピクセルのタップターゲット |
| エラーメッセージ | 問題の解決方法を説明する詳細なエラーメッセージ |
関連リソース
- カスタム年齢ゲートクイックスタート - ステップバイステップの実装ガイド
- 年齢ゲート - 年齢ゲートエンドポイントのAPIドキュメント
- ベストプラクティス - CDK統合の一般的なベストプラクティス