最新コラム
-
-
-
Webデザイン
インパクトを与えたいならパララックスデザインを使え!
-
SEO対策コンテンツSEO
カスタマージャーニーマップとは?作成する目的や作り方を紹介します
-
SEO基礎SEO対策SEO解析
アクティブユーザーとは何?効率の良い増やし方や調べ方も解説
WEBサイトの読み込み時間に表示されるローディング画面。
ユーザーにストレスを与えず待ってもらう為にも気持ちの良いローディング画面を作りたいものです。
今回は本当にコピペするのみ!たった10秒で実装出来てしまうJqueryプラグインのPACE.jsの使い方と、
ローディングアニメーションを作成するのに便利なライブラリをいくつかまとめたのでご紹介します!
早速ですがPACE.jsの使い方です。
1.CDNでpace.jsと使いたいテーマのcssをheadに記述CDNはこちら
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fpace%2F1.0.2%2Fpace.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-center-circle.min.css" />
以上です!!!簡単!
出来たローディング画面はこちらです↓
(ページが軽いので冒頭のローディングバーは一瞬です…^^;)
このプラグインでは10色×14パターンのCSSが用意されているので、使いたいものを選んでください。
ちなみにデモでは、テーマは「Loading Bar」カラーは「green」を使っています。
カスタマイズもなく、使いたいデザインが決まっているなら、本当に10秒もしないでローディング画面が作れてしまいます!
ただ、このままだとローディングしている時もコンテンツが出る可能性があるので、丸っとclass=“”wrap”などでコンテンツを囲い、display: noneで隠しておきます。
また表示される時はフェードインで自然に切り替わるようにしてみましょう!
【CSS】
.pace-running .wrap { display:none; }
【js】
Pace.on('done', function(){ $('.wrap').fadeIn(); });
今回はお手軽重視でCDNを使いましたが、色や形状をアレンジする場合を考えるとGitHubからcssファイルをダウンロードしてサーバーにアップした方が良いでしょう。
PACE.jsはとても簡単ですが、もっとオリジナルのローディングアニメーションを作る必要がある時に便利なライブラリを、GIF形式、SVG形式、CSSの3パターンに分け、特徴とおすすめライブラリをまとめました。ライブラリを使えばどの形式でも少しのアレンジでオリジナリティーを出せますので、是非参考にしてみてください。
GIFやPNG,JPEGのビットマップ形式とは違い、XMLベースのベクター形式の為、拡大縮小しても画像が劣化しません。この点ではCSSのみで実装しているローディングアイコンと同じですが、SVGはIllustratorでの編集さえ出来れば、企業のロゴなどのCSSだけでは再現の難易度が高いモチーフを作る事が出来るので、サイトにオリジナル感を出せるのが最大の特徴ではないでしょうか
スムーズにアニメーションする12種類のアイコンがパックになっています。
色を変えたり形状を変えたりは結局Illustratorやhtmlで調整が必要ですが、既存のアニメーションを参考にしていけば1から作成するよりもスピーディーかついい感じにオリジナルのローディングアイコンを作れます!
実際にペコプラカラーでアレンジしてみたローディングアイコンがこちらです!
コーディングが出来なくてもSVGアニメーションが実装出来るオンラインツールです!
SVGファイルをインポートし、アニメーションの編集、そしてダウンロードする事が出来ます。
コード書くにはちょっと億劫な複雑なアニメーションを作れます!
GIF形式はローディングアイコンに限らず、アニメーション画像の定番でもあります!
IE対応がまだされていないSVGローダーやCSSローダーは別途jsを使ってサポートしなければいけませんが、GIF形式はその必要がなくブラウザの互換性の面で安定しています!
ブラウザの互換性の心配がないのって、結構大事ですよね・・・
またSVGやCSSでは難易度の高いモチーフを扱える事もメリットのひとつではないでしょうか。
ただ拡大縮小した時に画像が劣化してしまうという点で、昨今のモバイル化や高画質ディスプレイへの対応という点ではSVGやCSSに劣ってきます。
カラーやサイズ、スピードに形状など、カスタマイズする上で基本的な設定項目が揃っており、カラフルなアイコンが作れる事も特徴です。テキストアニメーションもあります。
またGIFだけでなく、SVGやCSS形式でダウンロードが可能です。※ただしこちら有料のようです
ライブラリを読み込んだり、コピペOKのものばかりなので、WEBデザイン初心者でも簡単に実装していけます。
また、ファイルが軽くなる点もメリットのひとつです。
オリジナリティーは出しにくいですが、定番のローディング画面を簡単に実装する場合には手軽に使う事が出来ますね!
いかがでしたか?
jQueryプラグインやライブラリを使う事は、速い・簡単・お手軽という面もありますが、アイデア次第で、より魅力的なものを作れる可能性を秘めていると考えます!
ローディング画面について、本来であれば読み込み時間の少ないページ作りの方が重要ではあります!
また、読み込み速度の早いページにローディング画面を実装してしまっても、画面が切り替わる事がユーザーにとってかえってストレスになるという事にもなりかねません。
しっかりユーザビリティを考え、まずはページの読み込み速度をあげる事を心がけてください。その上で、読み込みの遅いページに魅力的なローディング画面が作れるよう、今回の記事を参考にしていただければ幸いです!