速さは機能である
どんなに優れたUIも、表示に10秒かかっては誰も使いません。エンジニアが行うパフォーマンス最適化の技術を知ることで、より体感速度の速いデザインが可能になります。
Lazy Loading (遅延読み込み)
「必要な時に、必要なだけ」
概要
画像やコンテンツを、画面に表示される直前まで読み込まない技術です。初期表示を高速化できます。
デザインへの適用
- プレースホルダー : 読み込み中に表示する「スケルトンスクリーン」や「ブラー画像」をデザインする。
- スクロール体験 : スクロールに応じてコンテンツが後から表示される際のガタつき（レイアウトシフト）を防ぐため、画像の高さ（アスペクト比）を予め確保しておく。
Caching (キャッシング)
「一度覚えたら忘れない」
概要
一度取得したデータを保存（キャッシュ）しておき、2回目以降は通信せずに即座に表示する技術です。
デザインへの適用
- 「古いデータ」の可能性 : キャッシュが表示されている間、実際のデータは更新されているかもしれません。「最終更新日時」を表示するか、リロードボタンを用意するか検討が必要です。
- オフライン体験 : キャッシュを活用すれば、電波がない場所でもアプリを閲覧できる（PWAなど）可能性があります。
Optimistic UI (楽観的UI)
「成功したフリをする」
概要
サーバーからのレスポンスを待たずに、操作した瞬間に「成功した」とみなして画面を書き換える手法です。 「いいね」ボタンを押した瞬間、通信結果を待たずにハートを赤くするなど。
デザインへの適用
- 体感速度の向上 : 通信待ちのグルグル（スピナー）を減らし、サクサク動く体験を作れます。
- 失敗時のロールバック : もし通信が失敗したら、こっそり元に戻すか、「保存できませんでした」とエラーを表示する仕組みを考える必要があります。