Autofill DeepDive 〜パスワード入力・更新周りのUX向上を目指す！〜

Autofill DeepDive 〜パスワード入力・更新周りのUX向上を目指す！〜 2025/04/22

2 LON Copyright © ENECHANGE Ltd., All rights reserved. Confidential
/ not for distribution About Me Yuta Katada ENECHANGE株式会社 • 2023/12〜 FlutterエンジニアとしてENECHANGEに入社 ◦ エネルギークラウド事業部/EVユニット ◦ アプリエンジニア • Swift/Kotlin修行中 • 🎾󰝱🎮🍺 @ktd_yuta GitHub: Yuta-KTD

INDEX この発表で話すこと・話さないこと・前提 Autofillって？パスワード変更画面を作って気づいた課題パスワード更新画面の課題に立ち向かう① パスワード更新画面の課題に立ち向かう② 調査結果パスワード更新画面のUI/UXについてまとめ 1
2 3 4 5 6 7 8

この発表で話すこと・話さないこと・前提

/ not for distribution 🙆 話すこと（目次） • Autofillの概要 • FlutterでのAutofill使用方法 • Autofillを用いたパスワード更新で困ったこと・解決策 • パスワード更新のUI/UXについて 🙅 話さないこと • 各OSの詳細なセットアップ方法 – Associated Domainsの設定 • iOS16以前・Android13以前の情報 • パスワード更新以外のAutofill活用方法 – 住所・カード番号 etc… この発表で話すこと・話さないこと・前提

/ not for distribution 前提 • Flutterのバージョンは3.29.2で検証しました • 本日紹介する機能はOSに依存する点が大きいです • つまり、今後OSバージョンアップによる仕様変更・バグFixによって前提が変わる可能性があります • 今回調査したOSは以下の通りです – iOS17,18 – Android14,15 • （私調べでは）公式に言及がない内容が多く、実際に試行錯誤しながら調査した点が多くありました – ぜひ公式で言及されている箇所や、FlutterのIssueとして取り上げられているものがありましたら共有いただけると嬉しいです！この発表で話すこと・話さないこと・前提

Autofillって？

/ not for distribution Autofillって？モバイルアプリ文脈でのAutofill →サイトやアプリで入力した情報を保存して、次回から自動的に入力できる機能 →ユーザーID、パスワードだけではなく、住所・クレジットカード情報などにも対応 iOS Android 実装例参考: Flutter widgets.dart AutofillGroup class https://api.flutter.dev/flutter/widgets/AutofillGroup-class.html

パスワード変更画面を作って気づいた課題

/ not for distribution パスワード変更画面を作って気づいた課題 • ユーザー名 • 現在のパスワード • 新しいパスワード • 新しいパスワード（確認）

/ not for distribution パスワード変更画面を作って気づいた課題

/ not for distribution あれ、、自動入力される場所おかしくない...？🤔（iOS）パスワード変更画面を作って気づいた課題

/ not for distribution パスワード変更画面を作って気づいた課題

/ not for distribution あれ、、こんな感じの更新ダイアログは...？🤔（iOS）パスワード変更画面を作って気づいた課題

/ not for distribution パスワード変更画面を作って気づいた課題 ※ iOSのみで発生 iOS18.4.1（実機）、iOS17.5（シミュレーター）で確認期待した結果実際「強力なパスワード」機能による自動入力が、 AutofillHints.newPassword の指定箇所で実行される AutofillHints.password と AutofillHints.newPassword それぞれ一つずつに実行されるパスワードを入力した後に、パスワードが更新される（画像ダイアログの表示）パスワードが更新されない ※ SwiftUIを用いて同様のフォームを作成しても同じ結果

パスワード更新画面の課題に立ち向かう①

/ not for distribution パスワード更新画面の課題に立ち向かう① • ユーザー名 • 現在のパスワード • 新しいパスワード • 新しいパスワード（確認）この二つを.... 最初の構成

/ not for distribution パスワード更新画面の課題に立ち向かう① • ユーザー名 • 現在のパスワード • 新しいパスワード • 新しいパスワード（確認）この二つを.... • 現在のパスワード • ユーザー名 • 新しいパスワード • 新しいパスワード（確認）入れ替える！最初の構成解決策参考: iOS Password AutoFill — how and why? https://medium.com/mobilepeople/ios-password-autofill-how-and-why-b8414e6ada96

/ not for distribution パスワード更新画面の課題に立ち向かう① ※ （確認）のフォームはなくても保存は可能です ※ 新しいパスワードを入力するときはこのダイアログが出ており、「強力なパスワードを使用」を選択しています

/ not for distribution ※ iOSのみで発生 iOS18.4.1（実機）、iOS17.5（シミュレーター）で確認期待した結果実際「強力なパスワード」機能による自動入力が、 AutofillHints.newPassword の指定箇所で実行される AutofillHints.password と AutofillHints.newPassword それぞれ一つずつに実行されるパスワードを入力した後に、パスワードが更新される（画像ダイアログの表示）パスワードが更新されない ※ SwiftUIを用いて同様のフォームを作成しても同じ結果パスワード更新画面の課題に立ち向かう① 当初の課題

/ not for distribution ※ iOSのみで発生 iOS18.4.1（実機）、iOS17.5（シミュレーター）で確認期待した結果実際「強力なパスワード」機能による自動入力が、 AutofillHints.newPassword の指定箇所で実行される AutofillHints.password と AutofillHints.newPassword それぞれ一つずつに実行されるパスワードを入力した後に、パスワードが更新される（画像ダイアログの表示）パスワードが更新されない ※ SwiftUIを用いて同様のフォームを作成しても同じ結果パスワード更新画面の課題に立ち向かう① 当初の課題 🎉解決🎉

/ not for distribution ただし... パスワード更新画面の課題に立ち向かう①

/ not for distribution パスワード更新画面の課題に立ち向かう① ※ 現在も発生中のIssueにより自動入力パスワードが消えないので、フォームクリアボタンを配置 https://github.com/flutter/flutter/issues/84446

/ not for distribution 「独自のパスワードを選択」すると保存できない...😭（iOS）パスワード更新画面の課題に立ち向かう①

/ not for distribution パスワード更新画面の課題に立ち向かう①

/ not for distribution 現在のパスワード入力欄で強力なパスワード入力の補助が出力される...🤯（またiOS）パスワード更新画面の課題に立ち向かう①

/ not for distribution ※ iOSのみで発生 iOS18.4.1（実機）、iOS17.5（シミュレーター）で確認期待した結果実際「強力なパスワード」機能による自動入力が、 AutofillHints.newPassword の指定箇所で実行される AutofillHints.password と AutofillHints.newPassword それぞれ一つずつに実行されるパスワードを入力した後に、パスワードが更新される（画像ダイアログの表示）パスワードが更新されない新規パスワード入力欄のみ強力なパスワード入力の補助が実行できる現在のパスワード入力欄でも強力なパスワード入力の補助が出力される ※ SwiftUIを用いて同様のフォームを作成しても同じ結果パスワード更新画面の課題に立ち向かう① 当初の課題（手動入力において）未解決...😢 新規追加😭

パスワード更新画面の課題に立ち向かう②

/ not for distribution ※ iOSのみで発生 iOS18.4.1（実機）、iOS17.5（シミュレーター）で確認期待した結果実際「強力なパスワード」機能による自動入力が、 AutofillHints.newPassword の指定箇所で実行される AutofillHints.password と AutofillHints.newPassword それぞれ一つずつに実行されるパスワードを入力した後に、パスワードが更新される（画像ダイアログの表示）（独自入力で）パスワードが更新されない新規パスワード入力欄のみ強力なパスワード入力の補助が実行できる現在のパスワード入力欄でも強力なパスワード入力の補助が出力される ※ SwiftUIを用いて同様のフォームを作成しても同じ結果パスワード更新画面の課題に立ち向かう② 当初の課題これらの課題に立ち向かう

/ not for distribution （独自入力で）パスワードが更新されない問題パスワード更新画面の課題に立ち向かう②

/ not for distribution ログイン時にキーチェーンに登録されているパスワードと異なる →パスワード更新ダイアログが表示されるパスワード更新画面の課題に立ち向かう②-1

/ not for distribution ログイン時にキーチェーンに登録されているパスワードと異なる →パスワード更新ダイアログが表示されるログインと似たような形のフォームを作ればいいのでは？パスワード更新画面の課題に立ち向かう②-1

/ not for distribution 現在のパスワード入力欄でも強力なパスワード入力の補助が出力される問題パスワード更新画面の課題に立ち向かう②-1

/ not for distribution 現在のパスワード入力欄でも強力なパスワード入力の補助が出力されるパスワード更新画面の課題に立ち向かう②-1 現在のパスワード入力欄と強力なパスワード入力欄を画面で分割すればいいのでは？

/ not for distribution • 現在のパスワード • ユーザー名 • 新しいパスワード • 新しいパスワード（確認）解決策① このフォームを... パスワード更新画面の課題に立ち向かう②-1

/ not for distribution • 現在のパスワード • ユーザー名 • 新しいパスワード • 新しいパスワード（確認） • フォーム1 ◦ 現在のパスワード ◦ ユーザー名 • フォーム2 ◦ ユーザー名 ◦ 新しいパスワード ◦ 新しいパスワード（確認）分割する！解決策① 解決策②-1 このフォームを... パスワード更新画面の課題に立ち向かう②-1

/ not for distribution パスワード更新画面の課題に立ち向かう②-1

/ not for distribution 不要な強力なパスワード入力の補助は出なくなった🎉 →ただし変わらず保存できない...😢 他に試したこと • AutofillGroupから新規パスワード（確認）を外す→保存できず ◦ さらに更新ボタン押下時にフォーカスを新規パスワードに当てる→保存できず • AutofillHintsを空にする→保存できず • AutofillHints.newPasswordを.passwordに変える→newPasswordと同じ結果パスワード更新画面の課題に立ち向かう②-1

/ not for distribution パスワード更新画面の課題に立ち向かう②-2 • フォーム1 ◦ 現在のパスワード ◦ ユーザー名 • フォーム2 ◦ ユーザー名 ◦ 新しいパスワード ◦ 新しいパスワード（確認）解決策②-1 このフォームの...

/ not for distribution パスワード更新画面の課題に立ち向かう②-2 • フォーム1 ◦ 現在のパスワード ◦ ユーザー名 • フォーム2 ◦ ユーザー名 ◦ 新しいパスワード ◦ 新しいパスワード（確認）解決策②-1 このフォームの... • フォーム1 ◦ 現在のパスワード ◦ ユーザー名 • フォーム2 ◦ ユーザー名 ◦ 新しいパスワード ◦ 新しいパスワード（確認）解決策②-2 （確認）フォームを削除する！

/ not for distribution パスワード更新画面の課題に立ち向かう②-2 ※ 現在も発生中のIssueにより自動入力パスワードが消えないので、フォームクリアボタンを配置 https://github.com/flutter/flutter/issues/84446

/ not for distribution ※ iOSのみで発生 iOS18.4.1（実機）、iOS17.5（シミュレーター）で確認期待した結果実際「強力なパスワード」機能による自動入力が、 AutofillHints.newPassword の指定箇所で実行される AutofillHints.password と AutofillHints.newPassword それぞれ一つずつに実行されるパスワードを入力した後に、パスワードが更新される（画像ダイアログの表示）（独自入力で）パスワードが更新されない新規パスワード入力欄のみ強力なパスワード入力の補助が実行できる現在のパスワード入力欄でも強力なパスワード入力の補助が出力される ※ SwiftUIを用いて同様のフォームを作成しても同じ結果パスワード更新画面の課題に立ち向かう②-2 結果 🎉（条件付き）解決🎉 🎉解決🎉

/ not for distribution パスワード確認フォームを配置する理由とは🤔 パスワード更新画面の課題に立ち向かう②-2 パスワード入力のタイポ対策

/ not for distribution タイポ対策を別のアプローチから実施する（p41の動画参照） • 入力パスワードの表示・非表示を切り替える ◦ 表示非表示を切り替えてもタイポする時はする • 入力パスワードを保存させる ◦ パスワード管理ツールを使用していなかった場合は保存できない ◦ アプリ以外でログインを行う場合に保存したパスワード情報が見つけられないかもしれないパスワード更新画面の課題に立ち向かう②-2

/ not for distribution パスワード確認を入れる（対応策①、②-1） • Pros ◦ パスワード入力のタイポを限りなく減らせる • Cons ◦ 自動入力時しかパスワード管理ツールへの保存ができない（iOS） ◦ 複雑なパスワードを入力したい場合、2回入力するのは手間パスワード確認を入れない（②-2） • Pros ◦ パスワード管理ツールへの保存ができる • Cons ◦ パスワードをタイポして登録してしまう可能性がある ◦ パスワード管理ツールが存在する前提でのサービス設計になるパスワード更新画面の課題に立ち向かう②-2

調査結果

/ not for distribution 調査した結果 • パスワード確認フォームがあるパスワード更新画面では、Autofill機能をフル活用できない（iOSのみ対象） • Autofill機能を拡充させるためにパスワード確認フォームを削除する必要がある調査結果個人的なオススメ • iOSとAndroidでフォームの表示を出し分けた方が良さそう • iOS側はAutofillをユーザーにフル活用して欲しいのか、できるだけ確実にパスワードのタイポを防ぎたいのかによってフォームの形式を考えるべき

パスワード更新画面のUI/UXについて

/ not for distribution Autofillにパスワードを保存するメリット • ユーザーの手動入力を排除できる • 複雑なパスワードを使用しやすくなる • デバイス間で同期がしやすくなる • プラットフォーム側がパスワードの管理をしてくれるパスワード更新画面のUI/UXについて

/ not for distribution • ここまでAutofillにおいて制約が多いのであれば別の仕組みでパスワードを保存してもいいのでは？ ◦ flutter_secure_storage + local_auth を用いた生体認証によるアプリへの保存とか ▪ 端末更新時に引き継ぐかどうかの検討は必要（設定注意） ▪ 管理責務がアプリ側にも発生することも注意 • モバイルやWebのみであればパスキー認証を用いるのもいいかも...？パスワード更新画面のUI/UXについて

まとめ

/ not for distribution • AutofillはOSごとの挙動差を理解しないといけない ◦ iOSは自動入力・保存ともに制約あり • パスワード確認欄の有無でUXが変わる ◦ あり：タイポ防止だがAutofill保存はできない場合あり ◦ なし：Autofill活用しやすいがタイポ注意 • 最適解はサービス要件とユーザー層次第で変わる • Autofillにこだわる必要はないかもしれないまとめ

/ not for distribution • ENECHANGEでは今回紹介したEV充電アプリ以外にも、「エネルギーの未来を作る」というミッションをベースに様々なプロダクトを提供しており、開発エンジニアを募集しています！ • https://engineer-recruit.enechange.co.jp/ または「エネチェンジエンジニア」で検索一緒にエネルギーの未来を作るメンバーを募集中！

エネルギーの未来をつくる CHANGING ENERGY FOR A BETTER WORLD

Autofill DeepDive 〜パスワード入力・更新周りのUX向上を目指す！〜

Autofill DeepDive 〜パスワード入力・更新周りのUX向上を目指す！〜

More Decks by KATADA Yuta

Featured

Transcript