アイコンをアニメーションさせる「Animated Icons」

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. アイコンをアニメーションさせる「Animated Icons」

アイコンをアニメーションさせる「Animated Icons」

アイコンをアニメーションさせる「Animated Icons」

こんにちは。アウラスタッフの仁木です。

icons8」でアニメーションつきのアイコンがフリーで配布されていたので試しに使ってみました。

アートボード 2

Webで使用しやすいものがチョイスされています。
リンク先のページでは「18 Free Animated Icons」と書かれていますが、種類は60種類確認できます。
同じ見た目のアイコンもいくつかありますが、アニメーションが違うものです。

 

使い方は簡単でした

10数行の記述ですぐに使うことが出来ました。
下のCodepenの「Result」の表示結果画面でアイコンをクリックするとアニメーションが確認できます。

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”veXyYN” default_tab=”js,result” user=”toshitaka”]See the Pen <a href=’https://codepen.io/toshitaka/pen/veXyYN/’>veXyYN</a> by Toshitaka Niki (<a href=’https://codepen.io/toshitaka’>@toshitaka</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

色も変えられる!

また、各アイコンはSVGなのでCSSで「stroke」プロパティと「fill」プロパティで色を変更することができます。
SVGのパスでアニメーションをつけているので、CSSより凝った動きでフレンドリーな印象です。UXにも大きく効果がありそうですね。

 

気を付けること

注意しておくこととして、IEとEDGEでは表示が安定しておらず一部線が消えてしまったりするようです。

最近はiPhoneやiPadを筆頭に高解像度のディスプレイが普及してきたのでSVGが大活躍している気がします。
サイトを訪れた人が「おっ」と思うような、ちょっとしたアクセントでホームページもより良くしていきたいですね。

前後の記事

ファーストビューをデザインする際に考えるべきこと

ファーストビューをデザインする際に、何を元に考えればいいかを明確にしたいと思い、調べてみました。 ファーストビューの重要性 一説によると、webサイトを訪れたユーザーは、「自分にとって必要かどうかを、…

お問い合わせはこちらから

見出しアイコン スタッフ募集 Recruit

アウラでは新メンバーを募集しています。詳しくは採用ページをご覧ください。 WANTEDLYで採用募集しております。詳しくはこちら