BLOG
サイトのアニメーション（動き）の調べ方 — 「この動き、どうやってるの?」を読み解く
「このサイト、スクロールすると要素がふわっと出てくる。どうやってるんだろう」「ボタンにカーソルを乗せると色がなめらかに変わる。あれを自分のサイトでもやりたい」——気になる動きは見つかったのに、調べ方が分からない。CSS アニメーションの「○○選」やコピペ集を眺めても、「で、このサイトの動きはどれなの?」には答えてくれません。この記事では、サイトのアニメーション（動き）の調べ方を、開発者ツールで手作業で見る方法と、yorunoma で URL を入れるだけで読み解く方法の両面から紹介します。
先に試したい人は、URL を入れて 5 要素を読み解く「分析」が登録なしで 1 回無料で使えます（→ yorunoma を無料で試す）。
そもそもサイトのアニメーション（動き）とは
Web サイトの動きは複雑そうに見えても、多くは 基本的なアニメーションの組み合わせ でできています。まず、よく使われる 4 つを押さえておきます。
- hover（ホバー） — カーソルを乗せた時に反応する動き。ボタンの色がふわっと変わる、リンクに下線が伸びる、など。
- fade（フェード） — ふわっと現れる / 消える動き。スクロールで要素がじわっと表示されるのは、たいていこれです。
- slide（スライド） — 横や下からスーッと滑り込んでくる動き。セクションやカードの登場でよく使われます。
- transition（トランジション） — 状態が変わるときの「なめらかな変化」。色・大きさ・位置が一瞬で切り替わらず、滑らかにつながります。hover の多くもこの transition で作られています。
これらは主に CSS アニメーション（CSS の transition や animation）で作られていて、Web サイトの動きの大部分を占めます。一方で、マウスの動きにぴったり追従するもの（カーソル追従）や、スクロール量に細かく連動する高度な動きは、JavaScript で複雑に制御されていることが多く、別物です。まずは hover・fade・slide・transition という基本を読み解ければ、多くのサイトの「動きの正体」は分かります。 この記事と yorunoma の分析は、この基本的なアニメーションを対象にします（複雑なカーソル追従や高度なスクロール連動は対象外です）。
サイトのアニメーションを調べる 3 つの方法
気になるサイトの動きを調べる手段は、大きく分けて 3 つあります。それぞれ向き不向きがあるので、簡単に比較します。
方法 1: 開発者ツール（DevTools）で確認する
ブラウザの開発者ツールで、要素にかかっている transition や animation のスタイルを確認する方法です。実際のコードを直接見られるので、正確です。
ただし、コードを読む必要があり、初心者にはハードルが高いのが正直なところ。どの要素のどのプロパティが動きを生んでいるのかを自分で探し当てる手間がかかります。さらに、JavaScript で複雑に制御される動き（カーソル追従など）は、スタイルパネルを見るだけでは追えません。
方法 2: 目で見て種類を見分ける
動きのパターンを知っていれば、「これは hover」「これは fade で出てきた」と、見た目から当たりをつける方法です。お金もツールも要らず、観察眼が養われます。
ただし、見分けられるのは「どんな種類か」までで、速さ（duration）やイージング（easing）といった具体的な値までは分かりません。再現するには、結局もう一歩踏み込んだ情報が要ります。
方法 3: yorunoma で「URL を入れるだけ」で読み解く
yorunoma は、URL を 1 つ入れると、そのページの基本的なアニメーション（hover・fade・slide・transition など）を自動で読み取ります。どんな動きが、どこに、どれくらいの速さ・なめらかさで使われているかを、CSS コードつきでまとめて確認できます。手作業の「コードが読めない・時間がかかる」を解消するのが違いです（複雑なカーソル追従や高度なスクロール連動は対象外です）。
なお、このアニメーション分析は「分析（解析）」機能の一部で、全プランで使え、登録なしの無料体験から試せます。
yorunoma でアニメーションを調べる手順（3 ステップ）
実際の流れは 3 ステップです。
動きを調べたいサイトの URL を入力欄に入れて、分析をはじめます。コードの知識は要りません。
分析が終わると、配色・フォント・アニメーション・構造・コピーの 5 要素ごとに結果が並びます。「アニメーション」では、ページ全体の動きの量（控えめ〜よく動く）の評価と、検出された動き（hover・fade・slide・transition など）が、どこに使われているか・速さ・なめらかさとともに表示されます。
気になった動きは、transition の duration（速さ）や easing（なめらかさ）を含む CSS コードとして確認できます。そのままコピーして、自分の制作に取り入れられます。
yorunoma のアニメーション分析で分かること
分析結果では、ページの動きについて次のような情報がまとまっています。実際に出力される範囲は以下のとおりです。
- 動きの量 — ページ全体がどれくらい動くか（控えめ / ほどほど / よく動く など）の評価
- 検出された動き — hover・fade・slide・transition など、基本的なアニメーションの種類
- どこに使われているか — その動きがページのどの要素で使われているか
- 速さ・なめらかさ — duration（速さ）と easing（なめらかさ）の具体値
- CSS コード — その動きを再現するための、コピーして使えるコード
ここで分かるのは 基本的なアニメーション（hover・fade・slide・transition など） です。マウスのカーソル追従や、スクロール量に細かく連動する高度な動きは、現時点では対象外です（複雑な動きは今後の対応予定）。まずは「この fade はどれくらいの速さか」「この hover はどんな transition か」といった、多くのサイトで使われる基本の動きを、コードまで読み解けるのが yorunoma の分析です。
動きを「見分ける・取り入れる」コツ
動きは、種類さえ知っていれば見分けやすくなります。また、取り入れるときの注意点もあります。
- hover は「カーソルを乗せた時」 — マウスを乗せて初めて変化するなら hover です。スマホでは起きないので、PC で確認します。
- fade は「ふわっと出る」 — 透明から徐々に現れるなら fade。スクロールで要素が現れるのは、たいてい fade か slide です。
- slide は「位置が動いて入ってくる」 — 横や下から滑り込んでくるなら slide。fade と組み合わせて使われることも多いです。
- 付けすぎに注意 — 動きは、要所に少しあるから効きます。あれもこれも動かすと、かえって読みづらく、メインのコンテンツの邪魔になります。参考サイトの「どこに・どれだけ」動きを置いているかも、あわせて観察すると失敗しません。
CSS コードで取り出した動きは、duration や easing を少し調整するだけで印象が変わります。そのまま貼るだけでなく、自分のサイトの速さに合わせて整えると、より馴染みます。
よくある質問（FAQ）
どんなアニメーションが調べられますか。
hover（カーソルを乗せた時の変化）・fade（ふわっと表示）・slide（スライドイン）・transition（なめらかな変化）といった、CSS で作られる基本的なアニメーションが対象です。これらが、どこに・どれくらいの速さ・なめらかさで使われているかを CSS コードつきで読み取れます。一方、マウスのカーソル追従や、スクロール量に細かく連動する高度な動きは、現時点では対象外です（今後の対応予定）。
コードが読めなくても使えますか。
はい。URL を入れるだけで、動きの種類や使われている場所が日本語で表示されます。コードを自分で探して読む必要はありません。取り出した CSS コードは、そのままコピーして制作に使えます。
無料でできますか。
はい。アニメーションを含む「分析（解析）」は全プランで使え、登録なしの無料体験で 1 回試せます。それ以降はプランによって 1 か月に解析できる回数が変わります。詳しくは 料金プランを見る からご確認ください。
調べた動きを自分のサイトに使えますか。
使えます。検出された動きは CSS コードとして取り出せるので、自分の制作に取り入れられます。ただし、動きは付けすぎるとコンテンツの邪魔になります。要所に絞り、速さ（duration）やなめらかさ（easing）を自分のサイトに合わせて調整するのがおすすめです。
まとめ
気になるサイトの動きは、開発者ツールで 1 つずつ確認することもできますが、コードを読む必要があり手間がかかります。yorunoma なら URL を入れるだけで、hover・fade・slide・transition といった基本的なアニメーションを、どこに・どれくらいの速さで使われているか、CSS コードごと読み解けます。複雑なカーソル追従などは対象外ですが、多くのサイトの「動きの正体」は基本の動きで説明できます。気になった動きを、コードまで取り出して自分の制作に活かしましょう。
あわせて読みたい
この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。