公開日: 2026 年 9 月 30 日、最終更新日: 2026 年 10 月 7 日
概要
即時 UI モードでは、専用のログインページに移動することで発生するコンテキストの喪失とユーザーの離脱を解決します。これにより、ユーザーはコンテキストを離れることなく、表示または作業中のページでパスキーまたは保存したパスワードを使用してサインインを完了できます。
ユーザーがテキスト入力フィールドにフォーカスしたときに自動入力候補を表示する条件付き UI とは異なり、即時 UI モードでは、ボタンまたはリンクのクリックに応じてブラウザの認証ダイアログがすぐに呼び出されます（現時点では uiMode は "immediate" のみを受け入れますが、今後変更される可能性があります）。
即時 UI モードが迅速なログインに効果的なのは、次の 3 つの特性があるためです。
- クロスデバイス QR コードをスキップする: デバイスにすぐに使用できるパスキーまたは保存済みのパスワードがある場合、ブラウザはすぐに認証ダイアログを表示します。存在しない場合は、スマートフォン用のクロスデバイス QR コード画面を表示せずにすぐに終了します。これにより、サイトは通常のフォールバック ナビゲーション（ログインページへの移動など）に自然に移行できます。
- 直感的なアカウント中心の選択 UI: 混合タイプの認証情報を個別に一覧表示するのではなく、パスキーとパスワードの根本的な違いを隠し、ユーザーがログインしたいアカウントに焦点を当てた直感的なアカウント選択ツールを表示します。
- 安全なプログレッシブ エンハンスメント: Google Chrome と Chromium ブラウザでのみサポートされていますが、機能検出を使用すると、サポートされている環境のユーザーに迅速なログインを提供できます。また、サポートされていないブラウザ（Safari や Firefox など）やシークレット モードのユーザーの既存のログインフローを中断することはありません。
API の内部動作と機能検出の実装方法について詳しくは、ログインの即時 UI モードを参照してください。このドキュメントでは、Immediate UI モードでコンバージョンを増やすための推奨 UX パターンと、避けるべきデザイン アンチパターンについて説明します。
推奨される UX パターン
Immediate UI モードを最も効果的に使用できるのは、ページ ナビゲーションの直前のインターセプトです。認証されていない（またはセッションが期限切れの）ユーザーが、通常はログインページに移動するリンクまたは操作ボタンをクリックするたびに、その瞬間に Immediate UI モードを呼び出すことで、ワークフローを中断しないシームレスな UX が実現します。
ヘッダーのログインリンクのインターセプト
ほとんどのウェブサイトでは、画面上部のグローバル ヘッダーに [ログイン] リンクを配置し、専用のログインページに移動できるようにしています。ユーザーが閲覧中のページでこのリンクをクリックすると、ナビゲーションが一時停止され、Immediate UI モードが呼び出されます。これにより、デバイスに認証情報が存在する場合、ブラウザは現在表示されているページの上にアカウント選択ダイアログを表示できます。
ユーザーがアカウントを選択して認証を完了すると、ヘッダーがページ ナビゲーションなしでログイン状態に更新され、ユーザーは表示していたページから移動することなく、引き続き閲覧できます。逆に、デバイスに認証情報が存在しない場合は、ブラウザ UI は表示されず、ユーザーは当初の意図どおりにログインページにスムーズに移動します。
購入手続き時の動的なログイン（e コマース）
e コマース サイトでは、ショッピング カートから購入手続きへの移行は、ページ ナビゲーションの摩擦によってカートが放棄される最も一般的なポイントの 1 つです。認証されていない買い物客がカート画面の [購入手続きに進む] ボタンをクリックした瞬間に Immediate UI モードを呼び出すことで、ボタンがクリックされた場所にアカウント選択ダイアログが表示され、1 回のタップで認証が完了します。
認証が成功すると、購入者はログインページを完全にバイパスして、最終的な配送と支払いの確認画面（購入手続きページ）に直接移動するため、購入を完了するために必要な手順が大幅に削減されます。認証情報が存在しない場合、購入者は通常どおり、従来のログイン画面またはゲスト購入の選択画面に移行します。ビジネス要件に応じて、ゲスト購入を許可するか、ログインを必須にするようにサイトを設計できます。Immediate UI モードは、リピーターの購入手続きの摩擦を解消するために使用されます。
マイクロ アクション（いいね、ブックマーク、保存）のインライン ログイン
ユーザーがソーシャル フィード、コミュニティ サイト、e コマースの商品カタログを閲覧しているときに、投稿に「いいね」したり、商品を「ブックマーク」したりするたびに、ログインページにフルページ リダイレクトを強制すると、ユーザーがその操作を放棄する可能性があります。
ログインしていないユーザーが [いいね]、[ブックマーク]、[保存] などのアクション ボタンをクリックすると、その場で Immediate UI モードのダイアログが表示され、ID 確認が完了するとすぐにアクション レコードと UI アニメーション（ハート アイコンが赤くなるなど）がトリガーされます。スクロール位置は 1 ピクセルも移動せず、ブラウジングの没入感が完全に維持されます。認証情報が存在しない場合は、すぐに移動するのではなく、現在の画面の上に軽量なインライン ログイン モーダルを表示するか、ログイン後に元の場所に戻るようにユーザーをログインページに誘導できます。
パブリッシャー サイトのペイウォールのロック解除
ニュース メディアやコンテンツ プラットフォームでは、記事の冒頭の段落は自由にアクセスできる一方、読者がスクロールすると、途中でソフト ペイウォールやメンバー限定のぼかしが表示されるモデルが広く採用されています。
読者が記事をスクロールしてペイウォールに到達し、[アカウントで読み続ける] ボタンをクリックすると、Immediate UI モードが呼び出され、読者が一時停止した正確なスクロール位置のすぐ上に認証ダイアログが表示されます。認証が完了すると、ページを再読み込みすることなく記事のぼかしがスムーズに解除され、読者は見ていた行を見失うことなく読み続けることができます。認証情報が存在しない場合は、ペイウォール セクション内のインライン登録フォームまたはログインフォームを開きます。
避けるべきアンチパターン
Immediate UI モードは、ページ ナビゲーションの前に使用すると非常に効果的ですが、間違った場所に配置したり、サポートされていないフローに適用したりすると、ユーザーのログイン エクスペリエンスに悪影響を及ぼす可能性があります。
専用のログイン ページのログイン ボタンで Immediate UI モードを回避
Immediate UI モードは、パスキーとパスワードの両方を 1 つの洗練されたダイアログで処理するため、専用のログインページに配置された [ログイン] ボタンで使用したくなるかもしれません。ただし、ここでは使用しないでください。まず、Immediate UI モードではユーザーによる有効化（クリックやタップなど）が厳密に必要となるため、ユーザーがログイン オプションをページの読み込み時にすぐに利用できることを期待する可能性があるログイン ページでは使いにくいです。2 つ目は、デバイスにローカル認証情報がない場合、またはモバイル デバイスのパスキー（クロスデバイス認証）やハードウェア セキュリティ キーを使用してログインしようとするユーザーが [パスキーでログイン] をクリックした場合に、ユーザーが最終的にたどり着くログイン ページです。ここで Immediate UI モードを使用すると、ブラウザはクロスデバイス QR コードとセキュリティ キーのフォールバックを抑制し、デバイスにローカル認証情報が見つからないとすぐに終了します。これにより、ユーザーは行き止まりに閉じ込められ、ボタンをクリックしても、次の宛先がないページでは何も起こりません。
すべての認証方法が確実に機能する必要があるログインページでは、入力フィールドに条件付き UI（自動入力統合）を設定してローカル パスキーの利便性を確保しつつ、明示的な [パスキーでログイン] ボタンを、クロスデバイスの QR コードとセキュリティ キーのオプションを確実に表示する標準の呼び出し方法と組み合わせるのがベスト プラクティスです。
ステップアップ再認証で Immediate UI モードを回避
ログインしているユーザーがパスワードの変更、配送先住所の更新、保存済みのお支払い方法の編集、新しいパスキーの追加などの機密性の高い操作を行う場合、サイトではユーザーの身元を確認するためにステップアップ再認証が必要になることがよくあります。ユーザーはすでにログインしているため、再認証フローでは通常、空でない allowCredentials リストを渡して、認証をその特定のユーザーに属する認証情報に制限します。
ただし、再認証には Immediate UI モードを使用しないでください。即時 UI モードは、ユーザーの身元がまだ特定されていない未認証のログインフロー専用に設計されています。リライング パーティが Immediate UI モードで特定の認証情報 ID のリストをクエリし、認証情報が存在するかどうかを観察できる場合、ユーザーが以前にサイトを操作したことがあるかどうかを推測し、セッション間でユーザーを追跡できます。このクロスセッション トラッキングのリスクを防ぐため、ブラウザは、空でない allowCredentials リストを含む Immediate UI モードのリクエストを NotAllowedError をスローして直ちに拒否します。逆に、再認証時に allowCredentials を省略すると、ブラウザがデバイスに保存されているサイトのすべての認証情報を提示するため、ユーザーが現在ログインしているアカウントとは異なるアカウントを誤って選択してしまう可能性があります。
ユーザーの身元がすでにわかっているステップアップ再認証の場合は、allowCredentials にログイン ユーザーの登録済み認証情報を入力した標準のモーダル WebAuthn リクエスト（uiMode:
'immediate' なしの navigator.credentials.get()）を使用するか、標準の再認証チャレンジ画面にユーザーを誘導します。
まとめ
即時 UI モードは、ログイン ページへの不要な迂回を排除し、コンテキストを維持しながらログインを完了する迅速なログインを実現する強力な UX ツールです。ページ ナビゲーションが発生する直前に、ユーザーの意図が明確に表れる瞬間（ヘッダーのログイン リンク、購入ボタン、マイクロ アクション、記事のペイウォールなど）をインターセプトすることで、離脱を防ぎ、シームレスなユーザー エクスペリエンスを提供できます。
同時に、Immediate UI モードは、ページ ナビゲーションの前の未認証ユーザー向けの厳密なプログレッシブ エンハンスメントであることを覚えておいてください。最終的なログイン ページのボタンには適用しないでください。これにより、デザインがオープンな状態を維持し、クロスデバイス（QR コード）ユーザーがアクセスできるようになります。また、allowCredentials が必要な再認証フローにも使用しないでください。
パスキーの実装と最新の Web Identity 機能について詳しくは、次のリソースをご覧ください。
- API 仕様と機能検出の実装コードの詳細については、ログインの即時 UI モードを参照してください。
- Chrome for Developers ブログで、ウェブ プラットフォームの最新情報を確認しましょう。
- Chrome Identity Portal で、パスキーの設計ガイドとケーススタディをご覧ください。