ワードプレスで作成したウェブサイトにロゴ画像が表示できるおしゃれなローディング画面を導入する方法

運営中のウェブサイトに「ローディング画面」は導入していますか？ワードプレスであればテーマ側にローディング機能が実装されている場合もあるので人によってはすでに導入できているかもしれません。

ローディング画面はアイコンが表示されるタイプもあれば、ロゴ画像とアニメーション画像を同時表示するタイプなどさまざまです。ローディング画面の目的は「閲覧者のストレスを軽減すること」です。

以下ではワードプレスサイトにローディング画面を導入する方法を解説いたします。

ワードプレスで作成したウェブサイトにロゴ画像が表示できるおしゃれなローディング画面を導入する方法

ローディング画面を導入する前にまずは効果や動作の意味を理解しておきましょう。

上記は、実際に当サイトを開いて「ローディング画面が動いた状態」となります。

ローディング画面が遅いのはNG

まず前提としてはワードプレスサイトはレンタルサーバー上で動いていますよね。

レンタルサーバーには「低価格なサービスから高額なサービス」まで幅広く準備されています。低価格なサービスはサーバーのスペックも下がりやすいのでウェブサイトの表示速度が遅くなるわけです。

そこで「ローディング画面」が役に立ちます。つまり、ウェブサイトの表示速度が遅く、閲覧ユーザーにストレスを与えてしまう可能性がある場合にローディング画面を導入すればストレスを緩和できます。

ローディング画面は接客と同じ？

たとえばあなた自身がランチ時に「混雑したお店の入り口で順番を待っている場面」を想像してみてください。

そんな状況で『（店員さんに声をかけてもらえず）ひたすら待たされる』のと『（店員さんから）少々お待ちいただけますか？』と声をかけてもらえたとしたら、どっちがストレスなく待てますか？

もちろん、スムーズに席に案内されるのであれば「掛け声」はそもそも必要ありません。問題は混んでいるお店や混み合った時間帯での接客です。放置されるより声をかけてもらった方が安心感がありますよね。

ウェブサイトでのローディング画面も同じで「閲覧者に対しての配慮（気遣い）」によく似ています。

入り口にある椅子の役目とは？

人気店では入り口に「待つ専用のイス」が置いている店舗も増えてきました。

店舗によってはイスに座って待っていると店員さんから事前に「メニューを渡してくれるお店」もあります。ローディング画面でも会社ロゴや専用の画像を表示したり、読込みのアニメーション動画を表示させることで閲覧者へ事前に情報を伝えることができるわけです。ローディング画面は「接客と同じ」だと言えますよね。

ローディング画面は一瞬で消える

ローディング画面が表示される時間は「レンタルサーバーのスペックとウェブサイトの重さ」に左右されます。

あとローディング画面は「作り方」次第で『ローディング画面が消えない状態』になる現象が発生します。ローディング画面を表示するスクリプトは「ウェブサイトのデータを読み込む直前にアニメーションを表示して、読み終わった段階でウェブサイトを開く」のですが作り方が微妙な場合は画面が正しく次へ移りません。

カンタンに言えばローディング画面のアニメーションを読み込んだ直後の処理で「finishの実行」を忘れている場合などに起こります。中途半端な作りになっているローディング機能は注意が必要です。

最初だけローディング画面を表示する方法

ローディング画面を導入検討中では「最初だけローディング画面を表示したい」という要望もあります。

しかしウェブサイトは初回だけが重たいわけではありません。特にワードプレスはWebサーバーとDBサーバーの両方でデータのやりとりをしますので「最初だけ表示させても意味がない」です。

もちろん、ご希望があれば「初回以降はローディング画面を表示しない」という処理も行えますが『アクセスが集中しやすい時間帯は曜日によってもバラバラ』なので常に表示させるのが基本となります。

ホームページにローディング画面を表示する

ウェブサイトにはさまざまな形式がありますよね。ブログ・ホームページ・オウンドメディア ・サポートサイト・会員サイト・ランディングページ等。ウェブサイトならどんな形式にでも導入可能です。

どうしてもレンタルサーバーではWebサーバーやDBサーバーが重たくなると「ページが固まって見える」ため状況次第では閲覧者にストレスを与えてしまいます。ローディング画面はストレス緩和に役立ちます。

ローディング画面の作り方

念のために「ローディング画面の仕組み」をカンタンに解説だけしておきます。

ローディング画面は「ウェブサイトの1枚上側にレイヤーを被せて、画面の真ん中に読込み用のアニメーション画像を表示してウェブサイト全体のデータが読み込まれるまで維持しておく仕組み」です。

作り方はいくつかありますが基本的にウェブ系の言語のみで作ります。

ローディング画面はjQueryで作るのが良いのか？

ローディング画面を作る方法は主に「htmlとCSSとJavaScript」で作ります。

そしてJavaScriptは「jQuery」に準じて書くか「素のJavaScript」で書くかの2種類があります。最近は脱jQueryが業界スタンダードになりつつあるので理想は「後者」。このあたりは考え方次第かもしれません。

jQueryはとても便利なライブラリですが、ワードプレスの場合は他のプラグインがjQueryベースで動いている可能性も考えられるのでバージョン指定がむずかしい場合もありおすすめできません。

おしゃれなローディング画面とは

どんなローディング画面が「オシャレ」なのかは人それぞれ好みが分かれます。

強いて言えば「シンプルで洗練したアイコン画像」が「いかなる環境でも綺麗に表示される」ことです。たとえば解像度の高い低いに関係なくモニター内で綺麗に表示されなければクオリティは落ちますよね。

ローディング画面にロゴを表示させたい

一般的にローディング画面には「アニメーション画像」が使用されています。

ウェブサイトを「ローディングしている途中」だということが閲覧者に伝わればいいのでアニメーションがあれば十分事足ります。ただ、ローディング画面はページを移動する度に表示されるため状況によっては自社のロゴや希望の画像を表示したくなるシチュエーションもあるはずです。

ローディング画面にロゴ画像を表示させるにはローディング用アニメーションの上下位置にロゴを差し込めるように設定してけばOK。html側に差し込めるようにするだけで準備は完了です。

ローディング画面のデザイン

ローディング画面では特にデザインが必要ありません。構成はシンプルですよね。

上記でも解説したように画面のど真ん中にアニメーションの読込みアイコンさえ表示できればOK。アニメーションとして表示させるアイコンをRetinaディスプレイでも自動で最適化される仕組みを導入しておけば見た目がかっこ悪くなる心配もなくなります。画像が綺麗に表示されたらOKですね。

ローディング画面はGIFで作るの？

基本的にローディングに表示させるアニメーションはGIFで作成しましょう。

GIF画像は「パラパラ漫画と同じ仕組み」なので1枚ずつのイメージが表示されて動いて見えます。当サイトでもページを移動すると輪っかのアイコンが出ますよね。ファイルはGIFとして作っています。

ローディング画面は動画を使う？

一般的にローディング画面では「動画」は使いません。動画に見える画像です。

一部の方は「アニメーションGIF」を動画と呼ぶ方もいるので別の言い方では動画とも言えます。1枚1枚のイメージが瞬時に切り替わって表示されるので動画のように見えているだけです。パラパラ漫画と同じ。

ちなみにインターネット上にはライセンスフリーのアニメーションGIFがたくさん落ちていますので気に入ったアニメーションがあればぜひお試しください。ローディング画面を導入するウェブサイトによっても最適なアニメーション（円が回るアイコンやタイヤが回る車等）は違うはずです。

まとめ

本日はおしゃれなローディング画面を作る方法をご紹介いたしました。念のため再度まとめておきますね。

・ローディング画面は接客に似ているので来訪者の不安を下げる効果がある
・読込み用のアニメーションアイコンを差し替えるとよりオリジナリティが出る
・ロゴ画像や好きなイメージを差し込める機能を導入しておけば満足度が高い
・一般的にローディングアイコンには動画ではなくアニメーションGIFを使う
・ローディングアイコンはさまざまなタイプがあるので好みに合わせて選べばOK

以下で「ワードプレスにローディング画面を導入できるプラグイン」を2つ公開していますのでぜひ併せてご参照くださいませ。記事内では無料版と有料版のプラグインをそれぞれ解説させていただきました。

ワードプレスにローディング画面を素早く導入できる便利プラグイン「WP Loading Gif Animations Plus」