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

パスキーを紹介する際にイラストやリッチなビジュアルを組み込むと、ユーザーの認知負荷を軽減し、コンテンツをサポートしながら、エクスペリエンスをより魅力的でわかりやすいものにすることができます。

コンポーネントを設計する

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

たとえば、Google アカウントがログイン時にパスキーをユーザーに紹介するのと同様に、サービスでユーザーに最新情報を伝えるためにインタースティシャルを使用している場合は、パスキーを紹介するためにインタースティシャル形式の使用を検討してください。

また、プラットフォームで通常、ポップアップ モーダル、通知バー、その他のアラート スタイルを使用してアカウントの変更をユーザーに通知している場合は、それらの使い慣れた通知方法を使用してパスキーの概念を紹介します。このアプローチにより、新しいパスキー機能をロールアウトする際に、一貫性のある使いやすいエクスペリエンスを確保できます。

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

パスキー関連のアクションでは、行動を促すフレーズを含むボタンだけでなく、ユーザーに多くの情報を伝えられるリッチな説明プロンプトを作成します。イラスト、見出し、メッセージ、行動を促すフレーズなどを含めることができます。

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

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

パスキーを表す際に使用すべき FIDO アライアンスが作成したパスキー アイコンがあります。一貫して使用することで、ユーザーがパスキーを認識しやすくなり、パスキー関連のアクションを効率化できます。

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

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

アイコンの色は、プロダクト、ブランド、ユーザー インターフェースの配色に合わせて変更できます。

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

文字、数字、記号の組み合わせであるパスワードとは異なり、パスキーはユーザーにはほとんど見えません。アカウント設定でパスキー カード用のスペースを確保します。カード内には、パスキー アイコン、パスキーに関する情報（作成日時、作成されたエコシステム、最終使用日時など）、パスキーを管理するためのオプションを含めます。パスキーが 2 つ以上ある場合は、パスキーごとにカードが必要です。