ローディングGIFの素材サイトと読み込み中の画像作成サービスも紹介！

企業用のWEBサイトや個人用のWEBサイトなど、ネットワーク上には多くのWEBサイトが存在します。取り扱っているコンテンツなどはWEBサイトごとに違いますが、基本的な機能や設定はどこのWEBサイトも共通しています。

例えば、ローディング用のGIF画像。こちらは、閲覧者がWEBページに移動する時、読み込み中であることを伝える画像で、読み込みに時間がかかっている時に閲覧者を不安にさせません。大抵どのWEBサイトも取り入れているため、今からWEBサイトを制作しようと思ってる方は、ローディングGIFの存在を頭に入れておいた方が良いでしょう。

例えば、WEBページに飛んだ時、真っ白なページのまま何のアクションも起きなかったらどう思うでしょうか。この先のWEBページは削除されているのかと思うかもしれませんし、間違って違うページに飛んだのかと不安に思うかもしれません。気の短い人なら、何のアクションもない画面を見た瞬間、サイトを閉じてしまうかもしれません。

読み込み中の表記がないというのは、数多くのデメリットを抱えることになります。読み込み中だと認識する閲覧者と、読み込み中なのか認識できない閲覧者の割合は、後者の方が圧倒的に多いでしょう。読み込み中なのか分からないということは、閲覧者に先の見えないストレスを与えていることになるのです。

WEBサイトの出来がどんなに良くても、閲覧者が不安を感じ、WEBサイトを閉じてしまったら、なんの意味もありません。WEBサイトを快適に見てもらうためにも、ローディングGIFの存在は必要不可欠です。

自分でローディングGIFを作成する方法と、ローディングGIFのフリー素材を利用する方法の2点がありますが、WEBサイトを初めて作る方や、画像作成に慣れていない方は後者の方法が良いでしょう。

と言っても、ローディングGIFはネットワーク上に山のようにあります。くるくる回るサークル型のGIF画像、砂時計型のGIF画像、ラインが動くGIF画像と、形や大きさやテーマは様々です。使用用途は全て同じですが、数多くあるローディングGIFから、自分のWEBサイトに合ったものを探すのは手間と時間のかかる作業になります。

適当なGIF画像を選んで配置しても良いですが、それではWEBサイトのデザインのバランスが崩れてしまうかもしれません。WEBサイトは内容だけでなく、デザイン力も必要なため、無視できない問題です。

まずは、ローディングGIFのフリー素材を配布しているサイトを確認し、自分のWEBサイトの雰囲気やデザインに合っているものを把握しましょう。そうすることで、素敵なローディングGIFと出会えるでしょう。

ローディングGIFを手軽に使用するには、無償提供されているフリー素材を探すのが一番手っ取り早いでしょう。有料のGIF画像は安定性と安全性が非常に高いですが、手軽さに欠けてしまいます。ローディングGIFがフリーで提供されている、おすすめの素材サイトが何点かあるため、好みのサイトがないか確認してみましょう。

「Preloaders.net」は、GIF画像の種類が非常に豊富なフリー素材サイトです。ローディングGIFとしてよく見かけるLINE型のGIF画像やテキスト型のGIF画像、さらにはフルーツ型のGIF画像や惑星型のGIF画像など、ユニークなデザインのものも取り扱っていて、見るだけでも飽きることはないでしょう。

様々なテーマを、全てシンプルにまとめているため、ローディングGIFに奇抜な画像と安定した画像のどちらも取り入れたい方は、「Preloaders.net」のGIF画像がおすすめです。

「Flat Preloaders」は、サークル型のローディングGIFをまとめたフリーのGIF画像です。ポップなカラーとユニークな動きが特徴的で、さりげないおしゃれさを光らせたい時に使うと効果的でしょう。

「GIF Preloaders」は、様々なモチーフがぐるぐると回る特徴的なフリーのGIF画像です。「時計」「地球儀」「矢印」「歯車」など、色々なモチーフがシンプルなデザインでまとめられているところが非常に魅力的です。シンプルなデザインと動作を求めるなら、「GIF Preloaders」が良いでしょう。

「PIXELLAB」は、くるくる回るアニメーションGIFを取り扱っている素材サイトです。もちろんこちらのローディングGIFはフリー素材なので、手軽に利用ができます。

くるくるアニメーションGIFは、6種類、複数サイズがあり、どんなサイトにも合わせやすい魅力があります。画質も綺麗に調整されているため、見栄えを大切にされる方には大きく役立つでしょう。

「Preloader iOS 7 Style（GIF）」は、文字通りiOS 7をテーマにした、フリーのローディングGIFです。美しい寒色のラインが伸びる姿は、閲覧者の心を少しだけ落ち着かせてくれます。シャープでシンプルなGIF画像が良いなら、「Preloader iOS 7 Style（GIF）」がおすすめです。

「みんなの知識 ちょっと便利帳」は、様々なローディングGIFを取り扱っている、フリー素材サイトです。「スピードで探す」「サイズで探す」「人気度で探す」など探し方を決めることができ、素早く好みのGIF画像に会えるメリットがあります。

このサイトでなら、好みのものが見つかるだろうという安心感を与えるほど、幅広い種類のGIF画像があるため、色々なGIF画像を比較したい場合は、「みんなの知識 ちょっと便利帳」がおすすめです。

「Egg Preloader（GIF）」は、世にも珍しい目玉焼き型のローディングGIFです。真ん中の黄身が左右に揺れるユニークなGIF画像で、奇抜さを求める方にはぴったりでしょう。優しげな色合いの画像なので、パステル調のサイトと親和性が高いです。

すでに用意されているフリー素材を利用するのではなく、一からローディングGIFを作成したい、という方がいるかもしれません。ローディングGIFを作成する方法だと、フリー素材のローディングGIFを利用するより手間がかかりますが、その分オリジナリティの強いGIF画像を用意することができます。

しかし、なんの助けもなしに一から作成するのは、中々難易度の高い話です。ローディングGIF作成の手助けをしてくれるサイトが何点かあるため、そちらを確認して、自分に合ったサイトがないか探してみましょう。

「Loader Generator」は、分かりやすさと使いやすさに特化した、ローディングGIF作成用のサイトです。ライン型、サークル型、矢印型など、様々な形を選ぶことが可能で、サイズや速度の微調整もできます。

作成しながらプレビュー画面を確認できるため、脳内の完成図と実際のGIF画像に大きな差異が出ないメリットがあります。初めてローディングGIFを作成する方や、とりあえず手軽に作成したい方は、「Loader Generator」を強くおすすめします。

「Ajaxload」は、デザインの種類が豊富なローディングGIF作成用のサイトです。ライン型、サークル型だけでも種類が幅広く、選択肢の多い中から好きなものを選んで作成できる強みがあります。基本形と背景色と前景色の3種類しか設定できませんが、非常に使いやすく、画像作成したことがない方でも、短時間でローディングGIFを作成することができます。

「Load Info」は、132種類のデザインを取り扱っているローディングGIF作成用のサイトです。基本形が多いため、オリジナリティの高いローディングGIFを作成することができます。カスタマイズの仕方も複雑ではないため、少し手の込んだものを作成したいなら「Load Info」がおすすめです。

ローディングGIFが用意できたら自分のサイトに設定しましょう。GIF画像の設定方法は難しいものではありません。自分のサイトが作成できたなら、問題なく設定できるため、安心して設定方法を確認しましょう。

ローディングGIFは、HTMLとCSSで設置することができます。サイト運営をされている方で、HTMLとCSSが分からない方はいないと思いますが、もしも首を傾げてしまう方がいるなら、文書の構成をするHTMLと、そこのデザインを担当し整えるのがCSS、と思っていただければ大丈夫です。

img{
    background-image: url("ローディングGIF画像のパス");
    background-repeat: no-repeat;
    background-position: center center;
}

上記のコードをサイトに設置しましょう。ローディングGIF画像を設定する「background-image」と、画像の繰り返し表示をしないようにする「background-repeat: “no-repeat”;」と、画像位置を設定する「background-position: “center center”;」の組み合わせです。

これで、画像の読み込み中の間にローディングGIFが表示されるようになります。

画像の読み込みだけでなく、サイト表示の読み込み中にも、ローディングGIFを使用したい方がいるかもしれません。もちろん、サイト表示の読み込み中にローディングGIFを設定することはできます。

サイト表示に時間がかかるかもしれないと思う場合や、短い待ち時間でも空白を作りたくないという場合は、サイト表示にローディングGIFを設定してみましょう。

ローディングGIFを設置するにしても、あまりに手間のかかる方法では気が進まないでしょう。ローディングGIFを素早く簡単に設置するために、jQuery（jsをさらに使いやすくするファイル）のプラグインのPACE.jsを利用しましょう。

<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
2<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-center-circle.min.css" />

下部のリンクにあるCDNで、pace.jsと使いたいcssをheadに記入し設定しましょう。たったこれだけで、サイト表示の読み込み中にローディングGIFを表示させることができます。

読み込み中の時間が、一切存在しないWEBサイトというのは存在しません。どうしても、閲覧者に対して、空白の時間を与えてしまうことがあります。そんな時、なんのアクションもない画面で閲覧者を待たせるより、ローディングGIFを表示させて、閲覧者にアクションを起こす方が、閲覧者に安心感を与えられます。

WEBサイトに似合うローディングGIFを探し、正しく設定して、閲覧者に優しいサイト作りをしていきましょう。