ローディングアニメーションとは、Web ページやアプリケーションが読み込み中であることをユーザーにわかりやすく伝えるための動的な演出です。特に EC サイトやモバイルアプリなど、コンテンツ量が多いページでは、ページ表示が完了するまでの待ち時間に何も表示されないと、ユーザーが「サイトが動かない」「エラーかもしれない」と感じてしまい、離脱につながる可能性があります。
そこで活用したいのがローディングアニメーションです。待ち時間を「何が起こっているか見える化」することで、ユーザーを退屈させず、結果的に離脱率を下げ、ストア体験を向上させることができます。
今回は、以下の記事を参考にしています。
ユーザー体験の向上
読み込み中の無反応状態を避け、視覚的に楽しませることで、ユーザーのストレスを大きく軽減します。
離脱率の低減
ローディングの進捗をアニメーションで示すことで、「サイトが固まった」と思わせず、ユーザーの離脱を防ぎます。
ブランドイメージの訴求
ロゴやコンセプトに合わせたアニメーションを設定することで、ブランディングにも寄与します。
ページ速度の知覚的向上
実際の読み込み速度が同じでも、アニメーションで「待ち時間」を楽しませることで、遅さを感じにくくさせます。
顧客満足度アップ
ちょっとした工夫がユーザーにとっては好印象につながり、ショップ全体の満足度を高める要因となります。
ローディングアニメーションアプリを選択する際の主なポイントは以下のとおりです。
簡単に導入できるか
ノーコードあるいは最小限の設定でアニメーションを表示できるアプリは時短につながります。
デザインやアニメーションのカスタマイズ性
ロゴやブランドイメージに合わせて調整できると、ストア全体の統一感が高まります。
動作の軽さ
アニメーションを表示するためにスクリプトが大きすぎると、逆にページ読み込みを圧迫してしまうことも。なるべく軽量なアプリを選びましょう。
マルチデバイス対応
PC・スマホ・タブレットなど、あらゆるデバイスでスムーズに動作するかは重要です。
日本語対応やサポートの充実度
設定画面が日本語でわかりやすいか、問い合わせがスピーディーに行えるかも重要です。
こうした点を踏まえ、Shopify App Store で提供されているローディングアニメーションアプリを厳選してご紹介します。
ここからは、Shopify App Store で公開されているローディングアニメーション系アプリを 9 つピックアップし、それぞれ特徴や価格、コーディング例を紹介します。
ノーコードでローディングアニメーションを追加できる!
複数種類のローディングアニメーションから選べるシンプルなアプリ
特徴・機能
価格設定
コーディング例:テーマにアニメーションを強制表示する場合のサンプル
<!-- 下記のコードは「シンプル読み込み中表示」導入済みの場合の一例です。 -->
<!-- ページロード時に自作のアニメーションを強制的に上書き表示したいケースを想定しています。 -->
<style>
.my-custom-loader {
display: none;
position: fixed;
z-index: 9999;
width: 100vw;
height: 100vh;
background: rgba(255,255,255,0.9);
text-align: center;
top: 0; left: 0;
}
.my-custom-loader img {
position: relative;
top: 40%;
width: 80px;
}
</style>
<div id="my-custom-loader" class="my-custom-loader">
<img src="{{ 'loading.gif' | asset_url }}" alt="Loading...">
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const loader = document.getElementById('my-custom-loader');
loader.style.display = 'block';
setTimeout(function(){
loader.style.display = 'none';
}, 2000); // 2秒後に消す
});
</script>
上記のように、テーマ独自のアニメーションを組み合わせることも可能です。簡単に始めたい場合は、アプリのノーコード設定だけで完結します。
TurboMode で高速化 × オリジナルのローディング画面を実装
無料プランから利用できる多機能アプリ
特徴・機能
価格設定
コーディング例:Loadify のプレローダーをさらにカスタマイズする例
<!-- Loadify導入後、テーマ内で独自要素を追加 -->
<style>
.loadify-preloader .custom-logo {
animation: spin 1s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
</style>
Loadify が用意する .loadify-preloader
クラスに対して追加スタイルを当てることで、デフォルトのローディングロゴにアニメーションを付与するなど自由にカスタマイズできます。
軽量でカスタマイズ可能なプレローダーを簡単に導入
無料プランあり、PRO プランでも月額 $2.49~
特徴・機能
価格設定
コーディング例:ロゴ差し替え用のコード
<!-- PreloaderXのカスタムロゴをLiquidで差し替えるイメージ -->
{% if template.name contains 'product' %}
<script>
// 商品ページだけ別のロゴを使いたい場合など
document.addEventListener('PreloaderX:ready', function() {
PreloaderX.updateLogo('{{ "my_product_logo.png" | asset_url }}');
});
</script>
{% endif %}
特定のページごとにロゴを変えたい場合は、上記のように JavaScript イベントを利用して設定を動的に変更することも可能です。
直感的なドラッグ & ドロップのページビルダー
実はプレローダーやアニメーションの設定も可能
一見ローディングアニメーション専用のアプリではありませんが、GemPages 内でカスタムコードブロックやスクリプトを差し込むことで、オリジナルのローディング演出を組み込むことができます。また、AI 機能によるレイアウト生成や、セールス要素を高めるテンプレートが魅力です。
特徴・機能
価格設定
コーディング例:GemPages のページにプレローダーを追加する
<!-- GemPagesのカスタムHTMLブロックに挿入 -->
<div id="gem-preloader" style="display: none;">
<img src="{{ 'loading_icon.svg' | asset_url }}" alt="loading..."/>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const preloader = document.getElementById("gem-preloader");
preloader.style.display = "block";
window.addEventListener("load", function(){
preloader.style.display = "none";
});
});
</script>
GemPages で作成した特定ページだけにプレローダーを表示するなど柔軟な構成ができます。
AI を活用したページビルダーだが、アニメーションも自由に追加できる柔軟さが強み
無料プランあり、月額 $19 から上位機能を開放
Zeno AI はドラッグ & ドロップのビジュアルエディターに加え、独自にコードを挿入しやすいインターフェースを用意しています。ローディングスピナーやフェードインエフェクトなど、自由度の高い演出が可能です。
特徴・機能
価格設定
コーディング例:Zeno AI のテーマセクションに読み込みエフェクトを仕込む
<!-- Zeno AIビルダーで「カスタムコード」ブロックを作成し、以下を挿入 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// 画像をフェードインしながら表示する例
const images = document.querySelectorAll('.zeno-lazy-image');
images.forEach(img => {
img.style.opacity = 0;
// ローディング完了後にアニメーション
img.addEventListener('load', function() {
img.style.transition = 'opacity 1s';
img.style.opacity = 1;
});
});
});
</script>
Zeno AI と組み合わせれば、読み込み状態からふわっと画像を表示するアニメーションを簡単に実装可能です。
プレローダー設定とスムーズなページ遷移で離脱率を下げる
無料プランあり、月額 $5.99 のプランでカスタム画像も利用可能
特徴・機能
価格設定
コーディング例:特定ページでのみプリローダーをオフにする
// theme.liquid などに挿入
document.addEventListener("Preloadify:initialized", function(){
if (window.location.pathname === "/collections/sale") {
// セールページではプリローダーを無効化したい場合
Preloadify.disable();
}
});
URL 判別により柔軟にアニメーションのオン・オフを切り替え可能です。
チャットボット中心のアプリだが、読込時のウィジェット表示などを工夫してローディング感を演出できる
日本語含む多言語対応が強み
特徴・機能
価格設定
コーディング例:読み込み完了前にチャットウィジェットをローディング表示
<div id="chat-loader" style="display:none;">
<p>チャットボット準備中...</p>
</div>
<script>
// SmartBotが読み込み完了する前に表示しておく簡易ローディング例
document.addEventListener("DOMContentLoaded", function(){
const loader = document.getElementById("chat-loader");
loader.style.display = "block";
// SmartBotが読み込み完了したら消す(あくまで一例)
setTimeout(() => {
loader.style.display = "none";
}, 3000);
});
</script>
AI チャット起動前に「準備中」の表示を出すなど、ユーザー体験を滑らかにする工夫が可能です。
本来は代引き注文(COD)フォームのリード獲得アプリ
ローディング演出はあくまでおまけ機能として活用
COD(代引き)決済導入時のフォームやアップセル機能を備えた多機能アプリです。ローディングアニメーションに特化しているわけではありませんが、追加でスクリプトを挿入することでフォーム送信時の演出を行えます。
特徴・機能
価格設定
コーディング例:フォーム送信時にローディングアニメーションを表示
<form id="webi-cod-form" action="/cart">
<!-- フォーム要素 -->
<button type="submit">注文を確定</button>
</form>
<div id="form-loader" style="display:none;">
<p>送信しています。しばらくお待ちください...</p>
</div>
<script>
document.getElementById("webi-cod-form").addEventListener("submit", function(){
document.getElementById("form-loader").style.display = "block";
});
</script>
ユーザーがフォームを送信してから結果が返るまでの間にローディング表示を行い、入力エラーや送信失敗と思われないようにできます。
読み込み画面 + ページ遷移アニメ + Lazy Load + Link Prediction
すべてを組み合わせてサイト速度とブランド力をアップ
特徴・機能
価格設定
コーディング例:PIX のクラスに独自スタイルを当てる
/* theme.css内などに記述 */
.pix-preloader {
background-color: #fafafa !important;
}
.pix-preloader img {
width: 80px;
border-radius: 50%;
}
PIX が付与しているデフォルトクラスに対して CSS を上書きするだけで、好みのビジュアルに変化させることが可能です。
ローディングアニメーションアプリの主な価格帯をまとめます(テーブル記法は使用していません)。
シンプル読み込み中表示|お手軽ローディングアニメーション
月額 3.99 ドル
Loadify: Preloader & SEO Speed
無料プランあり、有料プランは 3.99〜5.99 ドル/月
PreloaderX
無料プランあり、PRO プランは 2.49 ドル/月
GemPages Landing Page Builder
無料プランあり、上位は 29〜199 ドル/月
Zeno AI Landing Page Builder
無料プランあり、19〜29 ドル/月
Preloadify
無料プランあり、有料は 5.99 ドル/月〜
SmartBot: Leading AI Chatbot
無料プランあり、30〜300 ドル/月
WEBI ‑ Lead Form COD & Upsells
月額 0.99〜49.99 ドル
PIX ‑ PreLoader
無料
ノーコードで始めたい場合は「シンプル読み込み中表示|お手軽ローディングアニメーション」や「Loadify」「PreloaderX」あたりが特に簡単です。テーマやアプリブロックへの挿入が少ないステップで完了しますし、管理画面が比較的わかりやすい印象です。
一方で、サイト全体のデザインやページビルダー機能を活かしながらアニメーションも制御したい場合は「GemPages」や「Zeno AI」などのページビルダータイプを使うと自由度が高まります。
日本語サポートが必要な方は「シンプル読み込み中表示」「Loadify」「Zeno AI」「SmartBot」など、日本語を利用できるアプリを優先すると安心です。
この記事では、Shopify ストアを魅力的に演出するための「ローディングアニメーションアプリ 9 選」をご紹介しました。単なるアニメーション効果にとどまらず、LazyLoad やページ遷移演出、AI チャットなど様々な機能と組み合わせることで、ストア全体のユーザー体験を大きく底上げできます。ぜひ一度、気になるアプリを試してみてください。
なお、導入時の細かなデザインやカスタマイズはテーマや他のアプリとの相性もあるため、テスト環境で確認しながら最適な設定を探ってみると良いでしょう。
今回は、以下の記事を参考にしています。