ローディング

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

ローディング

ローディング画面は、コンテンツの準備が整うまでのあいだに表示する「つなぎ」の演出です。単なる待ち時間の穴埋めではなく、ロゴや数字の動きでブランドの第一印象をつくり、体感の待ち時間を和らげる役割があります。特に画像や動画の多いサイト、演出重視のブランドサイトでよく使われます。

一方で、ローディングは「見せ方を誤ると離脱の原因になる」諸刃の剣でもあります。以下のデモは、数字カウントアップ・プログレスバー・ロゴアニメーションといった定番パターンに加えて、「同日2回目のアクセスでは表示しない」という実運用寄りの工夫まで含めた構成です。

おさえておきたいところ

ローディングアニメーションを使う目的と使いどころはこんな感じです。

       目的：サイト読み込みの進捗状況をユーザーに伝える
使いどころ：画面の読み込み中

数字カウントアップ

画面中央でカウントアップするローディングアニメーションです。

プログレスバー+数字カウントアップ

画面中央でプログレスバーとカウントアップするローディングアニメーションです。

プログレスバー＋数字カウントアップ＋画面が開く

画面中央でプログレスバーとカウントアップするローディングアニメーションです。
１００％まで到達したら上下に開きます。

ロゴアニメーション

画面中央でロゴが「ふわっ」と表示されるローディングアニメーションです。

ロゴアウトラインアニメーション

画面中央でロゴの輪郭をなぞり、最後にカラーリングされるローディングアニメーションです。

同日2回目のアクセスでローディング画面非表示

１日に２回以上アクセスするとローディング画面を非表示にするローディングアニメーションです。

実務メモ（2026年追記）

コードとデモは学習当時のまま残しています。いまローディング演出を導入・保守するなら、最初に問うべきは「本当に待たせている時間があるか」です。演出のためだけのローディングは、表示速度の指標（LCP）を確実に悪化させ、SEOと離脱率に直結します。現在の主流は、読み込み中の骨組みを見せるスケルトンスクリーンで、「同日2回目は表示しない」というこのデモの発想は今も有効な緩和策です。

• 表示は長くても2〜3秒まで。それ以上かかるなら演出ではなく軽量化（画像圧縮・遅延読み込み）が先
• prefers-reduced-motion（OSの「視差効果を減らす」設定）を尊重し、動きを減らした代替を用意する
• 導入の判断はLCPなどの実測とセットで。計測せずに演出だけ足さない
• 連載の出発点ははじめてのコーディング技術、ページ間をつなぐ演出は画面遷移も参照

次回の予定

ページの遷移を知らせる画面遷移アニメーションを作ってみようと思います＼＼\٩( ‘ω’ )و //／／