パスキーのユーザー インターフェースのデザイン

パスキーを導入する際にイラストやリッチなビジュアルを追加することで、ユーザーの認知負荷を軽減し、コンテンツをより魅力的でわかりやすいものにできます。

設計コンポーネント

パスキーは既存のプロダクトやサービスの機能強化を目的としているため、ユーザーがプラットフォームですでに使い慣れている形式でパスキーを導入する必要があります。

たとえば、Google アカウントでログイン時にパスキーをユーザーに紹介するのと同じように、インタースティシャルを使用してユーザーに最新情報を伝えるサービスの場合は、インタースティシャル フォーマットを使用してパスキーを導入することを検討してください。

または、プラットフォームがポップアップ モーダル、通知バー、またはその他のアラート スタイルによってアカウントの変更についてユーザーに通知する場合は、そのような使い慣れた通知方法を採用して、パスキーの概念を導入します。このアプローチにより、新しいパスキー機能をロールアウトする際に、一貫性がありユーザー フレンドリーなエクスペリエンスを実現できます。

わかりやすいパスキー プロンプトを作成する

パスキー関連のアクションの場合は、行動を促すフレーズ付きのボタンだけではなく、リッチでわかりやすいプロンプトを作成して、ユーザーに詳しい情報を伝えましょう。これには、イラスト、見出し、メッセージ、行動を促すフレーズが含まれます。

たとえば、Google アカウントのパスキーを作成する場合、[パスキーを作成] ボタンの代わりに、[ログインを簡素化する] という行動を促すフレーズが表示されたインタースティシャル、パスキーの簡単な説明、パスキーのアイコンやデバイス画面のロック解除のさまざまな方法を含むイラストが表示されます。

正規のパスキー アイコンを使用する

パスキーを表す際に使用する FIDO アライアンスにより、パスキー アイコンが作成されました。一貫して使用することで、ユーザーはパスキーを認識し、パスキーに関連する操作を効率化できます。

UI でパスキー アイコンを使用します。

• オンボーディングやその他のプロンプトでパスキーのコンセプトを表現し、より安全なログインのためにパスキーの作成またはパスキーへのアップグレードをユーザーに促す。
• ユーザーがパスキーによるログインを可能にするボタンまたはリンク。
• 編集または削除可能なパスキーの特定に役立つ設定内。

アイコンの色は、商品、ブランド、ユーザー インターフェースのカラーパターンに合わせて変更できます。

アカウント設定内に「パスキーカード」を表示する

文字、数字、記号からなる具体的な組み合わせで表されるパスワードとは異なり、パスキーはほとんどの人の目に触れません。アカウント設定にパスキーカード用の専用スペースを設けます。カード内には、パスキーのアイコン、パスキーに関する情報（作成された日時やエコシステム、最後に使用された日時など）、パスキーを管理するためのオプションなどがあります。ユーザーが複数のパスキーを持っている場合は、パスキーごとに専用のカードが必要です。

次回

パスキーのユーザー ジャーニー