フロントエンドカンファレンス関西2026 - 速すぎるUIに、待ち時間を

このスライドはフロントエンドカンファレンス関西2026 の登壇に使用したスライドのアーカイブになります。

チームラボでは、フロントエンドエンジニアを募集しています。
少しでも、チームラボにご興味をお持ち頂けましたら、採用ページをご覧頂けますと幸いです。
https://www.team-lab.com/recruit/

Transcript

1. フロントエンドカンファレンス関西 2026 速すぎるUIに、待ち時間を Irie チームラボ パッケージチーム 所属 © teamLab Inc.
2. 自己紹介 irie 所属｜ チームラボ パッケージチーム フロントエンド班 福岡出身 福岡→鹿児島→東京 うどんがすき © teamLab Inc. 2
3. 我々はなぜ速いUIを求めるのか © teamLab Inc. 3
4. 速度を求めて ユーザー視点  待たされないので、 ストレスなく使える  業務において、同じ時間 で多くのことができる  「自分が操作している」 実感と安心感  どんな環境でも快適に 使える etc… © teamLab Inc. 4
5. 速度の目安 Jakob Nielsen が1993年の著書 Usability Engineering で3つの目安を示している 100ms 1000ms 10000ms 瞬時に反応 遅れに気づく 待ちを実感 注意が離れる 直接操作している感覚 思考は途切れない 注意はまだ保てる 別の作業へ Walter Doherty氏及びAhrvind Thadani氏のIBM Systems Journal(1982)の研究を 元とした「ドハティの閾値」では、400ms未満で応答するとユーザーの作業テ ンポが途切れず生産性が大きく向上する © teamLab Inc. 5
6. 速ければ速いほど良い 👏 © teamLab Inc. 6
7. 本当に？ 🤔 © teamLab Inc. 7
8. 速くしたことによる弊害 © teamLab Inc. 8
9. 信頼性の問題 事例：携帯料金サービスプラン最適化ツール 顧客の携帯電話の使用状況を分析し、最も費用対効果の高いプランを提案するシステム 処理時間「数ミリ秒」 ❏ 変更後：あえて「8〜30秒」の待ち時間を追加 分析処理が一瞬で完了してしまい、適切な ❏ 計算が行われた実感が湧かない ❏ スピナー（ローディング画面）を表示し、 意図的に待機時間を発生させた 「単なるマーケティングの誇大広告だ」と疑 ❏ われ、信頼を得られなかった 算出結果は全く同じであるにもかかわらず、 システムの信頼度が大幅に向上 The UX Secret That Will Ruin Apps For You - Fast Company © teamLab Inc. 9
10. 信頼性の問題 他にもあえて遅くしている事例 住宅ローンの事前審査 銀行の生体認証 セキュリティチェック 処理が速すぎる問題 一瞬で終わるスキャン 信頼性の低下 承認が速すぎて、正式な審査で はなく「単なるシステムによる 自動の仮受付（事前承認）」だ とユーザーに誤解された。 認証スピードが速すぎて、実際 に認証スキャンが機能している ことにユーザーが気づくことが できなかった。 チェックがあまりにも一瞬で完 了するため、「本当に厳格な チェックを行っているのか」と システムの信頼性が疑われた。 When Slower is Better for UX - Ensegna Blog © teamLab Inc. 10
11. セキュリティチェックデモ © teamLab Inc. 11
12. 労働の錯覚 © teamLab Inc. 12
13. 労働の錯覚とは サービスの裏側で行われている作業（労働）が見えると、人はそのサービスをよ り高く評価する心理現象 結果が同じでも、待ち時間が長くなった時に「自分のために頑張ってくれてい る」と感じられれば満足度や価値の認識が上がる 出典：The Labor Illusion: How Operational Transparency Increases Perceived Value © teamLab Inc. 13
14. 速さを求めることとの対比 速さを求める ❏ 待ち時間は短いほど良い ❏ ❏ 待ち時間を設計する ❏ 待ち時間に過程を適切に見せる 結果を即時反映させる ❏ 頑張ってくれたと感じる 速すぎるとその価値が見えづらい ❏ 遅くても満足度・価値が上がる VS © teamLab Inc. 14
15. 注意点 ❏ 結果が悪いと逆効果 結果が自分の意に沿ったものでないとかえって逆効果になってしまう → 逆に過程を見せた方が満足度は低下した ❏ 労働の錯覚の演出 実際にはやっていない処理をやっているかのような処理を見せる → サービスの信頼を失うリスク © teamLab Inc. 15
16. まとめ © teamLab Inc. 16
17. まとめ • 速度を求めることで恩恵があることは事実 ◦ • ユーザー・エンジニアの両面で恩恵を受けられる 最速のUI＝最高の体験であるとは限らない ◦ 待ち時間とプロセスの可視化によって新たな価値が生まれることがある ◦ 無理に速度を求めるのではなく別のアプローチでUX体験を良くする 目指すのは「納得できる待ち時間」 © teamLab Inc. 17
18. 良い、フロントエンド開発を！ Irie フロントエンドカンファレンス関西 2026 速すぎるUIに、待ち時間を チームラボ パッケージチーム 所属 © teamlab Inc.
19. We’re Hiring! 一緒にものづくりできるメンバー募集してます！ © teamLab Inc
20. 参考文献 • https://www.nngroup.com/books/usability-engineering/ • https://lawsofux.com/ • https://www.oreilly.co.jp/books/9784814401000/ • https://github.com/react/react/pull/26611 • https://github.com/react/react/issues/31819 • https://react.dev/reference/react/Suspense#preventing-already-revealed-content-from-hiding • https://www.fastcompany.com/3061519/the-ux-secret-that-will-ruin-apps-for-you • https://ensegna.com/blog/when-slower-is-better-for-ux/ • https://www.hbs.edu/ris/Publication%20Files/Norton_Michael_The%20labor%20illusion%20How%20o perational_f4269b70-3732-4fc4-8113-72d0c47533e0.pdf • https://shinji.design/labor-illusion-operational-transparency/ • https://www.shokasonjuku.com/ux-psychology/labor-illusion © teamLab Inc. 20