アニメーション・エフェクトの個人的な探し方

折橋廉

2021年9月1日 19:20

先日、マシュマロを頂き、webテンプレートで使うアニメーションやエフェクトをどうやって見つけているのか、ご質問を受けました。

そこで、個人的にどうやってアニメーションやエフェクトを見つけているのか、まとめていきたいと思います。

01. とりあえずブクマしておく

Twitter で「Webクリエイターボックス」様、「コリス」様、「Web Design Trend」様など、ウェブ関連のツイートをされる方をフォローしています。
そこで紹介されるスニペットなどをブラウザのブックマークに保存しておきます。

後から見返して分かるように、ブクマは「テンプレート素材 > アニメーション > テキスト関係」など細かく分類しています。
※CodePen などアカウントを作れるサイトでは、アカウントごとのコレクションに追加しているだけのこともあります。

-------------------------------

02. まとめ記事を更新してくれるサイト

アニメーション・エフェクト（以下スニペット）についてのまとめ記事を掲載してくれるサイトを上げておこうと思います。
スニペットまとめから気に入ったものをブクマしています。

(1) PHOTOSHOP VIP

無料デザイン素材、ウェブ制作、フォトショップの使い方、インスピレーションなど、様々な参考になるURLやスニペットまとめなどが掲載されています。「スニペット」で検索すると、コピペで使えるスニペット集などの記事を絞り込めます。
ツイッターで最新記事の情報が更新されるのでフォローしてみても良いかもしれません。

検索例：「スニペット」

(2) コリス

Web制作に関する情報を掲載する老舗サイト。ツイッターで最新記事の情報が更新されるのでフォローしてみても良いかもしれません。

検索例：「スニペットエフェクト」

(3) Web Design Facts

ウェブ制作、無料素材などについての記事が掲載されているサイト。数はあまりないですが、アニメーションに関する記事もいくつかあります。

カテゴリ例：「CSS」

-------------------------------

03. Googleでキーワード検索

Google で、スニペットをキーワード検索して見つけます。

◆ CodePen を利用する
おすすめの方法は、英単語で「気になるアニメーション + codepen」で検索する方法です。CodePen（後述）のサイト内検索だと上手くヒットしないスニペットも、Google 検索だと引っかかることがあります。
例：「css loader codepen」「wave animation codepen」「background effect codepen」

◆ 単語で検索
日本語でキーワード検索しても、かなり沢山の優れたまとめ記事がヒットすることがあります。
例：「CSS エフェクト文字」「ボタンホバーアニメーション」など
英語で検索すると、英語のまとめ記事を見つけることができます。
例：「javascript particle background」「image hover animation」

-------------------------------

04. コードスニペットを集めたサイトで探す

よく使うサイトをまとめます。

(1) CodePen

https://codepen.io/trending

世界中のプログラマーが書いたコードを共有できるサイト。HTMLやCCS, JavaScript が主で、Sassなども画面上でコンパイルしてCSSとして見ることができます。
キーワード検索の質はあまり高くない気が個人的にします。

「Little Snippets」というアカウントには画像のホバーアニメーションなどが豊富に投稿されていておススメです（※１）。

(2) Little Snippets

※１で記載した「Little Snippets」専用のサイト。ホバーエフェクトなどをカテゴリーで絞り込むことができます。

(3) Code My UI

Javascript、HTML、CSS、jQueryプラグインなど、様々なスニペットがタグでカテゴリ分けされています。
カテゴリ例：「text animation」「image effects」

(4) Free Frontend

英語で書かれたスニペットのまとめ記事が豊富にあり、よく使っています。HTML, CSS, Bootstrap, JavaScript などの大枠の中にさらにカテゴリ分けされているため、目的のスニペットを絞り込むことができます。
サイト内検索も精度が高いです。
絞り込み例：「CSS > Essentials」

(5) CodePad

世界中のスニペットが集まる CodPen にも似たサイト。CSS アニメーションなどが中心で、人気スニペット一覧も便利です。
検索例：「effect」

-------------------------------

番外編：ライブラリやジェネレーター

(6) Web Code Tools

CSS, HTML などのジェネレーター集。@keyfreame アニメーションなどを簡単にカスタマイズしてコードを生成できます。

-------------------------------

05. その他プログラミング系投稿サイト

日本のプログラミング系情報共有サイトを紹介します。サイト内検索で「javascript アニメーション」などで調べるといいかもしれません。

(1) Qiita

プログラミングに関するTips、ノウハウ、メモなどが公開されています。
検索結果例：「クリックで波紋を出すエフェクト（Ripple Effect）実装メモ」

(2) Zenn

エンジニアが技術・開発についての知見をシェアする情報コミュニティサイト。
検索例：「アニメーション」

-------------------------------

06. 参考文献

この記事を書くにあたって参考にした記事を掲載します。

どう書くんだっけ？を一発解決！コピペ用コードスニペットを集めたオススメWebサイトまとめ

いいなと思ったら応援しよう！

この記事が参加している募集

#スキしてみて

563,608件