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

 

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

 

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

 

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

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

 

外部ページローディング画像生成サイト

 

 

【手順2】画像タイプを選択する

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

 

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

 

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

 

 

【手順3】背景色を選択する

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

 

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

 

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

 

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

 

 

 

【手順4】画像の色を選択する

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

 

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

 

 

【手順5】ローディング画像を生成する

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

 

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

 

 

【手順6】ローディング画像をダウンロードする

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

 

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

 

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

 

 

【手順7】ダウンロードされた画像の確認を行う

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

 

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

 

 

 

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

おすすめの記事