初回のみローディングアニメーションを再生する｜『Studio』実装ガイド🌀
Studioで「初回のみ」ローディングアニメーションを表示する方法を解説。sessionStorageを使ったシンプルなコード追加とID設定で実装でき、自由なアニメーション演出も可能。公開後に確認すべきポイントやよくあるつまずき対策も紹介します。
サイトを開いた瞬間にブランドの印象を決める「ローディングアニメーション」。ちょっとした演出ですが、ユーザーに"特別な体験"を感じさせる大切な要素です。
ただ、毎回出てくるローディングは少ししつこいですよね…😅 結果、ローディングアニメーションがユーザーにとっては煩わしくなり、離脱につながる可能性もあります。
そこで今回は、『Studio』で実装可能な"初回のみ"ローディングアニメーションを表示する方法をご紹介します。
👉方法はとっても簡単！サイト設定の<body>の末尾にカスタムコードを1つ追加して、ローディング要素にIDを付けるだけ！
※このカスタムコードを利用するには、『Studio』の有料プランが必要です。
💡 仕組みの概要
この実装ではsessionStorage（セッションストレージ）を活用します。
- 初回訪問時 → ローディングを表示し、アニメーション再生後に非表示へ。ブラウザ内に「再生済みフラグ」を保存。
- 2回目以降（同じタブ内） → フラグを確認してスキップ。即ページを表示。
🔁 sessionStorageはタブを閉じるとリセットされるので、次に新しいタブで開いたときにはまたローディングが表示されます。
🧠 用語解説：sessionStorageとは？
sessionStorage はブラウザに「一時的なデータ」を保存する仕組み。保存はタブ単位で行われ、タブを閉じるとデータは消えます。今回のような「一度だけ再生したいアニメーション」にぴったりの方法です✨
🪄 実装手順
Step 1｜body内の末尾にコードを追加
まず、ローディングアニメーションを設置しているページで「ページ設定 → カスタムコード → body内末尾」に以下のコードを貼り付けます。
<script>
(function() {
const loader = document.getElementById("loading");
if (!loader) return;
// まだ再生していない場合
if (!sessionStorage.getItem("loaderPlayed")) {
loader.style.display = "flex";
// アニメーション完了を待って非表示にする
loader.addEventListener("animationend", () => {
loader.style.opacity = "0";
setTimeout(() => loader.style.display = "none", 500);
}, { once: true });
sessionStorage.setItem("loaderPlayed", "true");
} else {
loader.style.display = "none";
}
})();
</script>
Step 2｜ローディング要素にIDを付ける
ローディングアニメーションの要素（例：div）に、必ずID「loading」を設定してください。設定場所：右パネル → 詳細設定 → 要素ID
🎨 Studioエディタで演出を設定
ローディング用の要素（#loading）は、Studioのアニメーション機能で自由に演出できます。たとえば、
- ロゴがゆっくり拡大してフェードアウト
- スピナーが回転して消える
- 背景がスライドしてページが現れる
⏱ アニメーションの長さはコード側で指定していないので、Studioのエディタ側で自由に調整できます！
🚀 公開して挙動をチェック
このコードはプレビュー画面では動作しません。必ずサイトを公開してから、ページを再読み込みして確認しましょう。
初回だけローディングが再生され、2回目以降はスキップされていれば成功です👏
🧯 よくあるつまずきと対策
「アニメーションが出てこない」 → IDが「loading」になっているか確認。プレビューでは動かないので、公開後に確認を。
「毎回出てしまう」 → 今回はsessionStorageを使用しているため、タブを閉じるとリセットされます。「完全に1回だけ」にしたい場合はlocalStorageに変更しましょう。
「フェードアウトが早すぎる」
→ setTimeout(500)の値を変更すると、フェード時間を調整できます。
✨ まとめ
<body>末尾にコードを1つ追加するだけ- ローディング要素にID「loading」を設定
- アニメーションはStudioエディタで自由に演出OK
これで、初回だけローディングアニメーションを再生できるようになります🙌 ユーザー体験を損なわずに、ブランドの世界観をしっかり演出しましょう。