こんにちは。エンジニアの山岡です。
突然ですが、WEBサイトでページの読み込み中に"NOW LOADING"って出したくないですか？
ゲームだと読み込み中には必ず出てきますよね。くるくる回るアニメーションだったり、パーセント表示のバーが伸びていったり、"NOW LOADING"の文字が表示されたりと見た目は様々です。ただし共通しているのは、コンテンツの雰囲気に合わせた見た目をしていること。なんでもアリな気がしますが、そんなことはない。コンテンツだけでなくローディング画面もデザイナーと協力して作り込むのがベストプラクティスです！
この連載では、WEBサイトでのローディング画面の実装方法について解説していきます。
チャプターリスト
本連載の記事一覧です。もしも好評だったら続編が出ると思います♪
- Chapter.1 - NOW LOADINGを出してみよう（本記事）
- Chapter.2 - jQueryを使ってやってみよう
- Chapter.3 - 脱jQuery！ JavaScriptを使ってやってみよう
- Chapter.4 - プリローダーいろいろ（執筆中）
ローディング画面を表示するメリット
ぶっちゃけユーザー体験を考えれば実装したいですよね。会社や商品のイメージも伝わりやすいでしょうし、特別な感じも演出できます。他にも、
- ロード時間の間を繋ぐことで離脱率を改善！
- WEBサイトとコンテンツへの没入感がUP！
- ロード時間が楽しくなることでユーザーの好感がUP！
といったメリットがあります。
ただし、ローディング画面は魅力的ですが、全てのWEBサイトに必要なわけではありません。WEB制作の現場では、工数が増えるとクライアントに費用として跳ね返ってしまいますよね。
ページの読み込み中に表示される画面ですから、凝ったキャンペーンサイトや動画を使ったサイトなど、通常より読み込み時間が長いWEBサイトにピッタリです。
コストとメリットを天秤にかけて、本当に必要な場面か見極めてくださいね！
時代の流れは脱jQuery
JavaScriptライブラリとして2000年代に一斉を風靡したjQueryですが、今では勢いが少し弱まっています。脱jQueryのために書かれた記事もよく目にしますし、WEBの進化に対してちょっと古い気もします。SPAが流行し、AngularやReact、Vue.js等のJavaScriptフレームワークが活躍する時代になって、開発者の興味はダンゼンそっちに釘付けです。
さて、そうは言ってもjQueryの導入のしやすさと充実したライブラリの多さは魅力的！ コードを書き慣れていたり日本語でのサンプルや関連記事の多さから、なんだかんだで使いやすいという側面もあります。
そんなわけで、jQueryを使って実装する方法と、JavaScript/CSSのみで実装する方法（脱jQuery！）の順を追って両方ご紹介します。
どちらが良いか悩んでいる方は、ライブラリに依存しないJavaScript/CSSのみで実装する方を選ぶと良いのではないでしょうか。
次回
それでは、次回はいきなり世間の流れに逆らって、jQueryを使ったローディング画面の実装方法を見ていきましょう。
