サイトを訪れたとき、最初にロゴやアニメーションが表示されることがあります。
これらの演出には「スプラッシュスクリーン」と「ローディング画面」という2つの種類があります。
どちらもユーザー体験を高める役割を持っていますが、目的や使いどころは大きく異なります。
この記事では両者の違いをわかりやすく整理し、WordPressでの実装方法をプラグインとコードの両面からご紹介します。
スプラッシュスクリーンとは？
スプラッシュスクリーンは、サイトやアプリを開いた直後に数秒間だけ表示される画面です。
ブランドロゴやキャッチコピーを表示して第一印象を与えることを目的としており、ページの読み込み状況とは関係なく一定時間が経過すると自動的に消えます。
表示時間は一般的に2〜3秒程度が目安とされています。
長すぎると離脱率が上がるため、短めに抑えるのが望ましいです。
スプラッシュスクリーンは特に「企業サイト」や「ブランドのポートフォリオサイト」で多く使われています。
例えばアパレルブランドのWebサイトでは、最初にロゴを数秒間表示してからメインページに遷移することで、ブランドの世界観を印象づけています。
WordPressでの実装方法
プラグインを使う方法
- LoftLoader
- WP Smart Preloader
どちらもロゴや画像を設定し、表示時間を数秒に固定すればスプラッシュ風の演出が可能です。
コードを使う方法（functions.php または Code Snippetsプラグイン）
以下のコードを子テーマの functions.php または Code Snippets プラグインに貼り付ければ、このままコピペで動作します。
初心者の方でも安心して試せるように、不要な設定変更は不要にしてあります。
add_action('wp_body_open', function () {
?>
<div id="splash">
<img src="<?php echo esc_url(get_site_icon_url(512)); ?>" alt="Site Logo">
</div>
<?php
});
add_action('wp_head', function () {
?>
<style>
#splash {
position: fixed;
inset: 0;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 1;
transition: opacity .4s ease;
}
#splash.is-hidden { opacity: 0; pointer-events: none; }
</style>
<?php
});
add_action('wp_footer', function () {
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
var el = document.getElementById("splash");
if (!el) return;
setTimeout(function(){
el.classList.add("is-hidden");
setTimeout(function(){ el.remove(); }, 500);
}, 2000); // 2秒後に非表示
});
</script>
<?php
});
ローディング画面とは？
ローディング画面は、ページや画像の読み込みに時間がかかるときに表示される画面です。
ユーザーに「現在処理中であること」を伝え、不安や離脱を防ぐ目的で利用されます。
スピナーやプログレスバーを表示するのが一般的で、読み込みが完了するまで表示され続けます。
ただし、すべてのページでローディング画面を出す必要はありません。
ページ遷移ごとに毎回表示されると「遅いサイト」と感じられて逆効果になることもあります。
そのため、導入は ユーザーにとって快適かどうか を基準にしましょう。
例えば ECサイトの商品ページ や 写真を多用したギャラリー・ポートフォリオサイト のように、画像が多くて表示が重いページでは効果的です。
読み込み中にスピナーを出すことで「止まっているのでは？」という不安を和らげ、ユーザーが安心して待てるようになります。
一方で、軽量な記事ページや通常のブログには不要です。
WordPressでの実装方法
プラグインを使う方法
- Preloader Plus
- LoftLoader
特にPreloader Plusは柔軟なカスタマイズが可能で、スピナーやアニメーションを自由に設定できます。
コードを使う方法（functions.php または Code Snippetsプラグイン）
以下のコードを追加すれば、このままコピペで動作します。
ページ読み込みが完了するまでローディング画面を表示し、終わったら自動で消えます。
add_action('wp_body_open', function () {
?>
<div id="loader"><div class="spinner"></div></div>
<?php
});
add_action('wp_head', function () {
?>
<style>
#loader {
position: fixed;
inset: 0;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity .4s ease;
}
#loader.is-hidden { opacity: 0; pointer-events: none; }
.spinner {
width: 44px; height: 44px;
border: 4px solid #ccc;
border-top-color: #111;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>
<?php
});
add_action('wp_footer', function () {
?>
<script>
window.addEventListener("load", function(){
var el = document.getElementById("loader");
if (!el) return;
el.classList.add("is-hidden");
setTimeout(function(){ el.remove(); }, 500);
});
</script>
<?php
});スプラッシュスクリーンとローディング画面の違い
スプラッシュスクリーンは「サイト起動時の演出」、ローディング画面は「処理中の待機表示」という違いがあります。
- スプラッシュスクリーンはブランドを印象づけることが目的で、表示時間は数秒に固定されています。
- ローディング画面はユーザーが安心して待てるようにするのが目的で、ページが完全に読み込まれるまで表示されます。
| 項目 | スプラッシュスクリーン | ローディング画面 |
|---|---|---|
| 表示タイミング | サイトやアプリを開いた直後に数秒間表示 | ページや画像が読み込み中に表示 |
| 主な目的 | ブランドやロゴを印象づける | 読み込み待ちを知らせ、離脱を防ぐ |
| 表示時間 | 固定（2〜3秒程度） | 読み込み完了まで（可変） |
| デザイン傾向 | ロゴやブランドカラー中心 | スピナーやプログレスバー中心 |
| 向いているサイト | 企業サイト、ポートフォリオサイト | ECサイト、重たいブログやメディア |
どちらを導入すべきか？
ブランドを強調したいサイトにはスプラッシュスクリーンが効果的です。
企業サイトやポートフォリオではロゴを見せることで印象に残ります。
一方、画像やスクリプトが多く読み込みに時間がかかるサイトではローディング画面が有効です。
必要に応じて両方を組み合わせることで、ブランド演出とユーザー安心感を同時に実現することもできます。
よくある質問（FAQ）
- Qスプラッシュスクリーンとローディング画面を両方使ってもいいですか？
- A
はい、可能です。
最初にスプラッシュスクリーンでロゴを表示し、その後にローディング画面を表示すれば自然に組み合わせられます。
ただし毎回のページ遷移に出すと逆効果なので注意しましょう。
- Qプラグインとコード、どちらで実装するのがおすすめですか？
- A
初心者はプラグイン、デザインを細かく調整したい人やプラグインを増やしたくない人はCode Snippetsやfunctions.phpでの実装がおすすめです。
- QスプラッシュスクリーンはSEOに影響しますか？
- A
数秒の演出であれば直接的にSEOへ悪影響を与えることはありません。
ただし表示が長すぎると離脱率が上がり、その結果としてユーザー行動を通じて間接的にSEOに悪影響を与える可能性があります。
- Qローディング画面は必ず必要ですか？
- A
必須ではありません。
ページ表示が速ければ不要です。
読み込みが重いページに限定して導入するのがベストです。
まとめ
スプラッシュスクリーンは「玄関でのウェルカム演出」、ローディング画面は「待機中の案内」です。
どちらも目的が異なるため、サイトの性質に合わせて選びましょう。
WordPressならプラグインを使えば手軽に導入できますし、Code Snippetsやfunctions.phpを使えばコードで自由にカスタマイズすることも可能です。
サイトの目的に合わせて導入し、ユーザーに快適で印象的な体験を提供してみてください。
