Webページを表示するときに、行き届いた印象を残すために、Now loading 表示はとても効果的です。 今、ページを読み込んでいるのが早いか遅いかは、読み込みがわのネットワーク環境にも依存します。 ということは、どんなに早く読み込みができるサーバーを用意していても、読み込む側のネットワークが遅ければ、読み込み時間はそれ相応にかかってしまう状態です。 そんな時、読み込みという待ち時間に、ディズニーランドのようなおもてなしができているWebページであれば、ユーザーは待ってくれて、さらにサイトのブランド感も味わってもらえる可能性があるんですね。 実は、このブログの一番アクセスの多いのは、NowLoading関連の記事ということが、アクセス履歴から判明したので、 関連記事を元に、NowLoadingについて、徹底的に、深掘りしてみたくなり、今回の研究室を立ち上げることになりました。

Now Loadingについてのメリット・デメリット

これからホームページを作ろうと思っている会社さんや、個人事業主の人。 あとまだ Now Loadingを導入していないホームページをお持ちの経営者さん。 ページの振る舞い向上を目指したいと思っている人に、Now Loadingのメリデメを書いておきますので、こちらの内容を十分に理解して本記事を読み進めてください。

メリット

・ユーザーに「処理中」であることを明確に伝えられる。 ・真っ白な画面やフリーズと誤解されるのを防げる。 ・アニメーションやブランド要素を入れて、世界観を演出できる。 ・ロード時間を心理的に短く感じさせる効果がある。 ・重要な初期処理（データ取得・認証・キャッシュ生成など）を見せないで済む。 ・SPA や大きめのアセット読み込み時の体験を改善できる。 ・FOUCを防止することができる。

デメリット

・表示される＝「待たされている」と感じるため、体感速度は落ちる。 ・ローディングが長い、とユーザーが離脱しやすい。 ・本来の最適化（遅延読み込み・コード分割など）が怠られがちになる。 ・アニメーション自体がUXの邪魔になるケースもある。 ・システムが遅いことをごまかしているように見える場合がある。 ・ネットワークや端末性能で差が出やすく、統一された体験を作りにくい。

NowLoadingの特性

読み込み時間の想定

0.5〜1秒以内に終わらない処理（API呼び出し、巨大データロード）の場合、読み込みに時間が掛かっていることを明示的に表現するのが、NowLoadingの仕事です。 マーケティング的に言われていることは、「3秒以上の読み込みで、ユーザーは離脱する」らしいので、3秒以上かかる場合は、あとどのくらいかかるのかという、プログレスタイプにした方が待つ側の気持ちを考えると、待っていられるモチベーションに繋がります。

NowLoading必須のWebページ

・初回アクセスでアセットを大量に読み込むSPA/React/Vue系サイト ・ゲーム系・アプリ系の世界観を演出したい時

これらのページでは、プログレス系読み込みが必須に考えた方がいいでしょう。 そういえば、ゲームをプレイする場合でも、データ読み込みのローディングは表示されますよね。 （家庭用ゲーム機でもCD,DVD ROM時代から、表示されてますね）

賑やかし系NowLoading

アイコン的な単一画像が、少し動いているだけでも、読み込みしている感が出せます。 Webサイトに多いのは、こうした簡易な表示を、画面中央か画面右下に少し小さめに表示するものが、多く使われています。 あまり説明的なものはいらず、単にピロピロと動いているだけの賑やかしは、見ていて楽しいものもあるので、さほどネガティブな印象は持たれないでしょう。 また、癒されるような雰囲気のものは、もっと長く見ていたいと思わせるクオリティのものもたまに見かけます。

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

そのページのアイキャッチ的な簡易画像を1枚表示するだけという簡易なNowLoadingパターンもあります。 エンタメ系で、世界観をチラ見で表現したい場合などに有効なパターンですね。

ステップ型

NowLoadingでありながら、これから行う作業を段階的に表示することで、作業イメージを読み込み前に持たせるやり方も有効的なUIに繋がります。 Loadingというよりも、チュートリアル的な内容にもなりますが、ユーザーがOKボタンを押してからページ表示を切り替えるようなやり方にすることで、 ユーザーは、違和感なく、読み込みを意識しない状態でサイトを利用することができます。 ツール系の管理画面や、初期設定画面の時に有効なパターンです。

本ブログサイトにも、NowLoadingを設置

本ブログを書いたタイミングで、我がブログにも「Loading...」という、読み込み中表示を追加してみました。 「ページ切り替えごとに表示されるのがウザい」というご意見もいただいたんですが、ブログ記事単体で読まれることが多いので、とりあえずこれで満足しています。 Webページの特性に応じて色々なパターンのLoading表示を工夫してみるのもいいでしょう。 これによりユーザー感覚が大きく変わる可能性もありますからね。

あとがき

世の中には、優れた"Now Loading"がたくさんありますが、じっくりとみる機会がない上、見落とされがちなのが NowLoadingデザインです。 いいデザインに出会った時に、魚拓的に、このサイトで保持して、この研究室にて分析をしていこうかと思っています。 再現したソースは、知的財産の許す限りブログ内で公開していきたいと思っていますので、興味のある人は、ぜひこの研究に参加して見ませんか？

English version : Now Loading Laboratory

Adding a “Now Loading” screen is a simple but effective way to create a polished first impression when a web page is opened. The loading speed depends heavily on the user’s network environment, not only on the server’s performance. Even with a high-performance server, if the user’s connection is slow, the page will inevitably take time to load. In such cases, a well-designed loading experience—like the hospitality you feel at Disneyland—can keep users engaged and even strengthen the brand impression. Interestingly, access analytics revealed that the most viewed posts on this blog are related to “Now Loading”. That discovery inspired me to dig deeper into the topic and open this new research series.

Benefits and Drawbacks of “Now Loading”

Benefits

- Clearly communicates that the system is “processing”. - Prevents users from mistaking the screen for a blank page or a frozen browser. - Allows brand elements or animations to convey a unique atmosphere. - Makes load times feel psychologically shorter. - Hides heavy initial processes (data fetching, authentication, cache generation). - Improves UX for SPA pages or pages loading large assets. - Helps prevent FOUC issues.

Drawbacks

- Still implies users are “being kept waiting”, lowering perceived speed. - Long loading times can increase abandonment rates. - May encourage neglect of real optimizations (lazy loading, code splitting). - Certain animations can become distractions. - Can give the impression the system is slow and trying to hide it. - Experiences may vary based on device or network performance.

Characteristics of “Now Loading”

Expected Loading Time

For processes taking longer than 0.5–1 second (API calls, large-data loads), a loading indicator becomes essential. Marketing studies say that “users start leaving after about 3 seconds”. If loading exceeds 3 seconds, a progress-type indicator is better for maintaining user motivation.

Pages That Require Now Loading

SPA/React/Vue-based sites that load many assets on the first visit. Game-style or entertainment-style pages that rely on immersive visuals.

Simple Decorative Loaders

Even a small, moving icon can effectively indicate activity. Many websites place a small animation in the center or bottom-right of the screen. Gentle or relaxing animations can even make users want to watch them longer.

Content Placeholder Style

Displaying a single simplified key visual of the page works well. Useful for entertainment-focused sites to preview a small part of the atmosphere.

Step-Based Loading

Shows upcoming steps (similar to a tutorial) during loading. Allows users to understand what will happen before the page appears. Works effectively in management tools and initial setup screens where a guided flow is appropriate.

Implementing Now Loading on This Blog

This blog also includes a “Now Loading” feature to improve the browsing experience.

Conclusion

Many excellent “Now Loading” designs exist, but people rarely analyze them deeply. Outstanding designs often go unnoticed, even though they play an important role. I’m planning to archive impressive loaders like a “fish print” and analyze them in this research series. Within the limits of intellectual property, I will publish reproduced implementations on this blog. If you’re interested, feel free to join this exploration into the world of “Now Loading”.