メニューのローディング状態:Skeleton vs Spinner のベストプラクティス

ブルサ・ギョリュクレにある14テーブルのキャンパスカフェは、デジタルメニューの回転スピナーをshimmer-skeletonに置き換えたところ、モバイルの直帰率が18%から11%に下がりました。同じデータ、同じ画像、同じ3G回線です。

Nielsen Norman 2023の知見

Nielsen Norman Groupの2023年調査では、スケルトンスクリーンが体感ロード時間を38%短縮し、従来型スピナーが逆に12%延長することが示されています。脳は「アニメ化された空白」よりも「描かれた構造」を好みます。

レストランメニューではこれが決定的です。客はテーブルに座り、スマホを手に、素早く決めたい。2秒の白画面で「回線切れた?」と疑念が生まれます。スケルトンはこの疑念を即座に消します。

thMenuデフォルト:shimmer-skeleton

thMenuは商品カード、カテゴリタブ、画像プレースホルダーにCSS gradient shimmerアニメを使います。画像読み込み中はblur-up placeholderとskeletonフレームを表示します。

• カテゴリタブ:5本のグレーピル、shimmer 1.5秒
• 商品カード:画像 + テキスト2行 + 価格
• カートドロワー:行スケルトンでスピナーは使わない

スピナーを使うべき時

動作確認——「注文送信中」「決済処理中」「ウェイター呼出中」——では小さいインラインスピナーが向きます。ここで待つのは結果であり、内容ではないからです。

ルール:データはskeleton、動作はspinner。thMenuは「カートに追加」タップ後200ms以内にインラインspinnerを表示し、成功時にtoastを出します。

FAQ

スケルトン動作が遅すぎると害がある?はい。2秒超のサイクルは苛立たせます。最適は1.2-1.8秒、thMenuは1.5秒。

劣悪回線でスケルトンだけで十分?Skeleton + 8秒超でtoast + service workerオフラインfallback。

スケルトンはアクセシブル?はい、aria-busy="true"とaria-label="メニュー読み込み中"で対応します。

お役に立ちましたか?シェアしてください。