「Ajaxload」サイトでオリジナルのローディング画像を作成する７つの手順

2017年6月27日

このようなアニメーション付きのローディング画像は、一から作るとなると結構手間なものです。

「Ajaxload」というサービスでは、
「画像タイプ」「背景色」「画像色」のたった３つの項目を選択するだけで、誰でも簡単にアニメーション付きローディング画像を作成することができるサービスです。

ここでは、「Ajaxload」でオリジナルのローディング画像を作るためのすべての手順を紹介していきます。

【手順１】サイトへアクセスする

まずは、「Ajaxload」の公式サイトへアクセスしましょう。
以下のリンクから別タブでアクセスすることができます。

サイトを表示したら、
早速ローディング画像を作っていきましょう。

以下のキャプチャのように、
「Indicator type」の右側のプルダウンをクリックすると、自分の好きなローディング画像の画像タイプを選択できます。

ごく一般的な画像から、個性豊かなものまで、色々な画像タイプがあるので、その中から一つ選択しましょう。
（2017年6月現在の時点で、画像タイプは全39種類となっています。）

画像の背景色を選択します。

もしサイトの背景色がすでに決まっている場合は固定の色を指定しても良いのですが、特にこだわりがない場合は透過色を選択されることをおすすめします。

これは、今後サイトのデザインカスタマイズで、
背景色を微妙に変更した時などに、ローディング画像の差し替えを行わなくて良くなるからです。

背景色が単色ではなくグラデーションであったり、
模様が入っている場合にも、
背景で透明色を選んでおけば、画像の境界線がない綺麗な状態で表示することができます。

ローディング画像のくるくると回っているアニメーションの色を選択します。

カラーコードを直接指定するか、カラーピッカーから自分の好きな色を選択してください。

以上の設定が完了したら、早速ローディング画像を生成していきます。

「Generate it!」ボタンをクリックしましょう。

ローディング画像が正常に生成できた場合、「Preview」という赤色の枠の中にプレビュー画像が表示されます。

この画像でよければ「Download it!」ボタンをクリックしましょう。
自動で画像のダウンロードが開始されます。

イメージと違ったという場合は、もう一度設定を見直し、微調整していきましょう。

ダウンロード先のフォルダを開き、ローディング画像のチェックを行います。

「ajax-loader.gif」という名前のファイルを開きます。

表示された画像が、アニメーション付きでくるくるとまわっていれば、問題なく画像をダウンロードできています。