はじめに
こんにちは、株式会社スプールのWebディレクターの高橋です。
前回記事では、Webデザインシミュレーターの高速化表示の重要性とビジネス効果についてご紹介しました。
今回はより深堀りして、ユーザーに「遅い」と感じさせないためのシミュレーターの最適化戦略について、ご紹介します。
ユーザーの体感速度を早くするための戦略
デザインシミュレーターでは、変更できるデザイン数・パーツ・要素が増えるほど、必要なデータの量が多くなります。
そこで、全データを初回に一括で読み込む方法ではなく、ユーザーの操作に合わせてその都度データを取得するオンデマンド方式が検討されますが、それぞれに課題があります。
| 全データ一括読み込み方式 | オンデマンド方式 ※都度読み込み |
|---|---|
| 最初に全データを 一括でロードする | ユーザーの操作に合わせて その都度データを取得する |
この2つの方式はトレードオフの関係にあり、このトレードオフを解消するため、システム全体では複数の対策を組み合わせ、ユーザーにとって快適な体験を実現する工夫が必要です。
【全データ一括読み込み方式】のメリット・デメリット
| メリット | デメリット |
|---|---|
| 初回データの読み込み以降の操作では待機時間が少なくスムーズに動作 | 初回の読み込みに時間がかかる |
【オンデマンド方式（都度読み込み）】のメリット・デメリット
オンデマンド読み込み、すなわち「必要なときだけデータを取得する」方式は、初期表示時のデータ量を抑えることが可能です。
ですが、デメリットもあります。
| メリット | デメリット |
|---|---|
| 初回に大量のデータを一括で読み込む必要がなく、初期の画面表示が速くなる | ユーザー操作ごとにサーバーへのリクエストが発生し、場合によっては読み込み待ちが生じる可能性がある |
待機時間低減のための補完策
オンデマンド方式のデメリットを補い、ユーザーが操作中に「遅さ」を感じさせないためには、以下の対策があります。
キャッシュの活用
一度取得したデータは、ブラウザキャッシュやローカルストレージに保存します。同じデータへの再リクエストを避けることで、待機時間を大幅に削減します。
プリフェッチとプリロード
ユーザーの操作パターンや直前の行動から、次に必要となる可能性が高いデータを予測し、バックグラウンドで先行取得します。
これにより、ユーザーが次の操作を行うときには、既にデータが用意されている可能性が高くなります。
オンデマンド時の待機時間をさらに短縮し、ユーザー体感速度を向上させます。
非同期通信
非同期通信でデータ取得を行い、ユーザーインターフェースがブロックされるのを防ぎます。
また、リクエストを非同期に処理することで、ユーザー操作中に画面が固まることを防ぎ、常にスムーズな動作を実現します。
スケルトンUIの導入
また、データ読み込み中はスケルトンUI（仮のレイアウト）やプレースホルダーを表示して、処理進行中であることを明示することで、待機時間のストレスを軽減します。
具体的には、テキストや画像、ボタンなどの配置を示す灰色や薄い色のブロックを表示し、データが読み込まれるまでの間、ユーザーに全体のレイアウトがどうなるかをあらかじめ視覚的に伝えます。
キャッシュ戦略の徹底
ブラウザキャッシュ、ローカルストレージ、IndexedDBなど、複数のキャッシュ手段を組み合わせることで、一度取得したリソースは再利用され、不要な通信を削減します。
これにより、同じデータの再取得による待機時間が発生せず、連続した操作がスムーズに進行します。
リクエストの統合（バッチリクエストの実装）
GraphQLなどを活用し、複数のデータ要求を1回のリクエストにまとめることで、ネットワークの往復回数を削減し、全体的な通信遅延を低減します。
段階的なレンダリング
画面全体を一度に表示するのではなく、ユーザーが最初に目にする部分から優先的にレンダリングすることで、初期表示の遅延を防ぎます。
まとめ
全データを一括で読み込む方式と、必要なときだけオンデマンドでデータを取得する方式には、それぞれ一長一短のトレードオフが存在します。
このトレードオフを解消するため、まとめると以下の戦略が考えれます。
- キャッシュの徹底活用
- プリフェッチ、プリロード
- 非同期通信
- スケルトンUI
- リクエスト統合
このような多層的な対策を組み合わせることで、ユーザーに待ち時間のストレスを与えることなく、快適でスムーズなシミュレーション体験を提供することが可能です。
最後に
弊社では、ユーザーの体感速度をあげるための工夫を取り入れた、カスタムオーダーシミュレーターやデザインシミュレーターの開発・構築を行っています。
オーダー製品のシミュレーターをご検討中の場合は、ぜひ一度ご相談ください。
▼ユニフォームに特化したカスタムオーダーシミュレーター
カスタムオーダーシミュレーター「MyCOS（マイコス）」
▼アイテムやグッズに特化したカスタムオーダーシミュレーター
カスタムオーダーシミュレーター「MyCOS GOODS（マイコスグッズ）」
▼3Dモデルを利用したカスタムオーダーシミュレーター
3Dシミュレーターシステム「MyCOS 3D（マイコススリーディー）」
