かわいいローディングアイコンを作成できる無料Webサービス「loading.io」

SEROの嫁です。
夫とニコ生で喋ったり、ブログに投稿したりしています。
2級ウェブデザイン技能士。

この記事は2017年6月26日に書かれたものです。
現在は内容が古い可能性もありますのでご注意ください。

ウェブサイトやアプリなどで「ロード中」に表示されるローディングアイコン。
ユーザーを待たせてしまう状況でも、デザイン次第では待ち時間を短く感じさせることができるかもしれません。

「loading.io」は、かわいらしいローディングアイコンを無料で作成できるWebサービスです。

→ loading.io – Your SVG + GIF Ajax Loading Icons

使い方

使い方は簡単で、トップ画面の中央にツールがあります。

下からアイコンを選択し、右のパネルで「オプション」「スピード」「色」などを決めたら、SVG・CSS・GIFのいずれかを選んでダウンロードするだけ。
(種類によってはDLできないものもあります)

ダウンロードしたアイコンはこんな感じです。

更に多くのアイコンとアニメーションで、自分だけのアイコンを作ることもできます。

  1. トップ画面で「MAKE ONE NOW」をクリックします。

     
  2. エディット画面に移動するので、下の一覧から好きなデザインを選びます。
    「Image」「Loader」などのボタンをクリックすれば、さらに多くのデザインを見ることができますよ。

     
  3. あとは右のパネルで「アニメーション」「アイコンの色」「スピード」などを調整して、「GET GIF」をクリック。

     
  4. しばらく待つと、ダウンロードリンクが表示されます。

     
  5. 出来上がったアイコンはこんな感じ。

     

メールアドレス、またはFacebook・Googleアカウントでサインアップすれば、作ったアイコンを保存したり、アップロードすることも可能です。

ローディング以外にも、問合せやFAQなど様々なシーンで使えそうですね!