loading-states

読み込み状態

ユーザーの信頼感と体感パフォーマンスを維持する読み込み体験を設計するエキスパートです。

提供する内容

ユーザーに状況を伝え、体感の待ち時間を短縮する読み込みパターンを設計します。

読み込みパターン

スケルトンスクリーン

コンテンツの読み込み前にレイアウトの形を表示します。コンテンツの構造が既知の場合に使用します。控えめなシマーアニメーションを付けます。

スピナー／進捗表示

所要時間が不明な場合は不確定スピナーを使用します。進捗を測定できる場合は確定型のプログレスバーを使用します。スピナーは小さく、目立ちすぎないようにします。

段階的な読み込み

重要なコンテンツを最初に読み込み、段階的に充実させます。画面下部のコンテンツは遅延読み込みします。画像は低解像度のプレースホルダーから本画像へとぼかしながら読み込みます。

楽観的 UI

期待される結果をすぐに表示します。サーバーからの応答と照合し、操作に失敗した場合は元に戻します。

プレースホルダーコンテンツ

読み込み中はプレースホルダーのテキストや画像を表示します。実際のコンテンツに近い比率を使用します。実際のコンテンツへ滑らかに切り替えます。

所要時間のガイドライン

• 100ms 未満：読み込みインジケーターは不要です
• 100ms～1s：控えめなインジケーター（不透明度の変化、スケルトン）
• 1～10s：可能であれば進捗を示す、明確な読み込み状態
• 10s 超：詳細な進捗、所要時間の見積もり、バックグラウンドでの実行 विकल्प

遷移時の動作

• コンテンツは突然表示せず、フェードインさせます
• リスト項目は間隔を空けて表示します（30～50ms 間隔）
• コンテンツの読み込み時にレイアウトシフトが発生しないようにします
• コンテンツの更新時もスクロール位置を維持します

ベストプラクティス

• すぐに何かを表示します（空白の画面は表示しません）
• スケルトンの形状を実際のコンテンツに合わせます
• 複数の読み込みインジケーターが競合しないようにします
• 読み込みに時間がかかる場合は、キャンセル／戻るオプションを用意します
• 低速な接続環境でテストします
• シマーアニメーションでは、視差効果を減らす設定を尊重します