Webサービスで「保存」を押したのに画面が変わらず、「押せていないのか」「もう一度押すべきか」と迷った経験はないでしょうか。
実際には処理中でも、反応が見えなければ、ユーザーには画面が止まったように見えます。待機をなくせない場面では、今何が起き、どう待てばよいかをUIで伝えることが重要です。
この記事では、スケルトンUI、処理中テキスト、スピナー、プログレスバーの選び方を整理します。
なぜ待ち時間がストレスになるのか？
待機のストレスは、処理にかかる秒数と、現在の状態を判断できるかどうかの両方で変わります。
UIの応答時間には0.1秒・1秒・10秒の目安がある
UX分野で広く参照されているのが、ヤコブ・ニールセンが1993年に紹介した「3つの応答時間」です。人の知覚特性に基づく古典的な指針で、0.1秒、1秒、10秒をUI設計の境界として示しています。
モバイルページ読み込みの「3秒で離脱」調査結果
Googleが2017年に公開したモバイルWebの資料では、ページの読み込みが3秒を超えると、モバイルサイト訪問の53%が放棄されると報告されています。
出典：Google｜Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed
この結果は、人間の知覚や注意の限界そのものが、過去より短くなったことを示すものではありません。
スマートフォン上で別のサイトやアプリへすぐに移れる環境では、速く滑らかな体験が当たり前になり、待ち時間に対するユーザーの期待も高くなっていると考えられます。
つまり、「現代人は待てない」とは、より速い選択肢と比較されるため、小さな遅延でも強いストレスや離脱につながりやすいことを意味します。
そのため、仮にシステム的にどうしても待機時間が発生してしまう箇所に関しては待ち時間を感じさせないようなUIの工夫を行うことが重要です。
どのようなUIの工夫があるかを次の章からご紹介します。
ローディングUIと選定基準
ローディングUIとは
ユーザーが操作を行った後、システムが裏側で処理（データの読み込みや計算など）を行っている間に画面に表示される視覚的な表示をローディングUIと呼びます。
「画面がフリーズしたのかな？」とユーザーが不安になるのを防ぎ、「今ちゃんと動いていますよ」と伝えるための重要な役割を持っています。
優れたローディングUIは、単に「待たせる」だけでなく、ユーザー体験（UX）を大きく向上させます。
1. 不安の解消
前述と別の調査では人間は「何も起きない状態」が5秒続くと「壊れた」と判断しやすいと言われています。ローディングUIがあるだけで、ユーザーは安心して待つことができます。
2. 体感時間の短縮
面白いアニメーションを見せたり、スケルトン画面で「もうすぐ表示される感」を出したりすることで、実際の待ち時間よりも短く感じさせることができます（心理的待機時間の削減）。
3. 誤操作の防止
処理中にボタンを何度も連打してしまうような無駄なリクエスト（二重送信など）を防ぐ役割も果たします。
デザインや開発の現場では、処理にかかる時間（1秒未満なのか、数秒なのか）に合わせて最適なローディングUIを選ぶことが求められます。
ローディングUIの種類と適した場所
ローディングUIは、待機中にユーザーへ伝えられる情報に合わせて選びます。
1. 完成後の配置を示すスケルトンUI
スケルトンUI（スケルトンデザイン）は、テキストや画像の代わりに画面の骨格を先に表示する方法です。
商品一覧やダッシュボードなど、複数の要素が順次読み込まれる画面に向いています。骨格と完成後の配置をそろえると、読み込み完了時の大きなレイアウト変化も防げます。
2. 状態と次の行動を補う処理中テキスト
処理中テキストには、「何を処理しているか」と「ユーザーはどう待てばよいか」を書きます。
3. 短時間の処理を示すスピナー
スピナーは、保存や画面切り替えなど、進捗を計測できないものの短時間で終わる処理に適しています。
長引く可能性がある場合は、テキストやキャンセル手段、完了通知などを追加します。
4. 進捗を示すプログレスバー
プログレスバーは、ファイルのアップロードやデータ変換など、進捗を計測できる処理に向いています。
数値は実際の処理と連動させます。残り時間を正確に予測できない場合は、秒数を示さず、進捗率や現在の処理内容を表示します。
ローディングUIの効果はどう検証するのか？
処理時間に加え、連打、離脱、完了などの行動指標を改善前後で比較します。
操作からフィードバック表示までの時間
実際の処理完了までの時間
同じボタンの連続クリック率や二重送信率
ローディング中の離脱率とタスク完了率
待機に関する問い合わせやユーザーの声
処理時間が変わらなくても、連打や離脱が減り、完了率が上がったなら、UIが判断の迷いを減らした可能性があります。
まとめ
待たせないUIとは、待ち時間を隠す演出ではなく、処理の状態と見通しを伝える設計です。
進捗を計測できるならプログレスバー、画面の骨格を先に出せるならスケルトンデザイン、進捗不明でも短く終わるならスピナーを選びます。
さらに処理中テキストで、何をしているか、次にどうすればよいかを補います。
ローディングUIを整えても、操作の迷いは解消できません。
ユーザーが止まった理由を「システムの待機」と「操作の迷い」に分け、性能、状態表示、導線の3面から改善を進めましょう。
こうしたスケルトンUI・処理中テキスト・スピナー・プログレスバーの出し分けは、細かな改修の積み重ねになりがちですが、Onboardingならこうした画面要素の追加・変更やA/Bテストによる効果検証をノーコードで行えるため、エンジニアリソースを使わずに状態表示の改善へすぐ着手できます。
