手を動かして覚えるUIアニメーション：CSSとJavaScriptを組み合わせる考え方

HTMLとCSSの基礎は身についた。でも「動き」を加えようとするといきなり止まる——「transition は CSS に書く？ JavaScript で書く？」「クリックでクラスを付け替えるのはわかるけど、どこに何を書けばいいんだ」というやつだ。

Mana 著『CSSとJavaScriptで作る動くUIアイデアレシピ』（インプレス、2025年）は、その詰まりどころを正面から扱うレシピ集だ。ボタン、画像、ナビゲーションメニュー、スクロールといった現場でよく出てくるUIパーツを題材に、CSSとJavaScriptをどう使い分けるかを順に見せていく。

1. CSSとJavaScriptの役割分担を最初に整理する

本書はまずここを片付ける。色・サイズ・位置の変化は CSS の transition や keyframes が担い、クリックやスクロールへの反応は JavaScript でクラスを付け外しして制御する。この分担さえ頭に入れば、「どこに書けばいいか」の迷いがかなり減る。

flowchart TD
    USER["ユーザー操作\n（クリック・スクロール）"] --> JS["JavaScript\nクラスを付け外し"]
    JS --> CSS["CSS\ntransition / keyframes\nで見た目の変化を担当"]
    style USER fill:#e8f4fd,stroke:#4a9eda
    style JS fill:#fff8e1,stroke:#f5a623
    style CSS fill:#e8f8e8,stroke:#4caf50

各章の構成も「基本仕様 → 応用展開 → カスタマイズ」の順で、一度動くものを作ってからアレンジを加えていく流れ。手を動かしながら読み進めやすい。

2. 実在するサイトのコードから「なぜその動きか」を確認する

制作会社が手がけた商業サイトの事例が掲載されている。プロダクション環境で動いているビジュアルとコードが対応しているため、「なぜこの動きが必要か」という設計の判断まで追える。

アニメーションはどこに入れてどこには入れないか——この感覚はチュートリアルだけでは身につきにくい。デザイナー目線の補足が随所に入っていて、「過剰な演出を避ける」という判断の根拠が実例とセットで示されている。

3. CodePenで「読みながら試す」

各パーツ解説にはCodePenへのQRコードと短縮URLが添えられている。ローカル環境を立ち上げずにパラメータを書き換えてすぐ確認できるため、読みながら実験しやすい。

Chapter 8ではAnimate.css、AOS（スクロール連動）、Fancybox（画像拡大）、Swiper（スライダー）などよく使われるライブラリの使い方を扱う。初期化設定や競合時の注意点も解説されているので、既存サイトの改修でライブラリを持ち込む場面でも役立つ。

4. この本が解決できる具体的な状況

「ホバーで色が変わるボタンは作れる。でも、クリックでメニューが開閉するやつはどう書けばいいのか」——この段階の人に向けてピンポイントで書かれている。静的なページは作れるが動きを付けるたびにつまずく、という状態を抜けるための一冊だ。

特に実務でデザイナーから「ちょっとアニメーション付けて」と言われたときに何から始めればよいかわからないエンジニアにとって、各章の構成（パーツ単位で完結・コード付き）は辞書として使いやすい。

5. 向いている人・向いていない人

向いている人：

• HTML/CSS の基礎はある。JavaScript も少し書ける。でも「動き」を実装した経験がほとんどない
• コピペで使えるコードよりも、CSSとJavaScriptの役割分担の理由から理解したい
• デザイナーとのやりとりで「なぜこのアニメーションが必要か」を言語化したい

向いていない人：

• HTML・CSS・JavaScript の基本文法をまだ学んでいない（基礎を習得済みの読者を前提に書かれており、その前の段階では敷居が高いため）
• React / Vue 等のコンポーネントベースのフレームワークで開発している（バニラ JS 前提の解説が多いため）
• gsap や Framer Motion などのアニメーションライブラリを本格的に使いこなしたい（本書はライブラリ入門に留まる）

6. 読み終えた後のステップ

この本を読み終えたら、Webサイトのパフォーマンスと読み込み体験を改善する観点が自然と気になり始める。アニメーションが実装できるようになると「重い動きが遅延の原因になっていないか」「CSS の will-change は使ったほうがよいか」という問いが浮かぶからだ。

CSS アニメーションのパフォーマンス（Reflow / Repaint の仕組み）を扱う書籍や、React / Vue でのコンポーネントへのアニメーション組み込み実践が次の学習先になる。

DevBookPath の学習パスで本書の次に置いているのは『Tailwind CSS実践入門』だ。パーツ単位の UI 表現が作れるようになると、今度は「ページが増えてもスタイルの一貫性をどう保つか」という設計の悩みが前に出てくる。ユーティリティファーストの考え方は、クラス命名や詳細度の管理に消耗せずに UI を保守する道筋を示してくれる。個別のレシピを組み合わせる段階から、スタイル全体を設計する段階へ移りたくなったら進むタイミングだ。

書籍より先にできる最初の一歩は、担当しているサイトのナビゲーションメニューに開閉の動きを 1 つ実装してみることだ。クラスの付け外しは JavaScript、変化そのものは CSS の transition に任せる——本書の役割分担を自分のコードで一度再現すると、レシピが手に馴染む。

筆者の体験から

デザイナーからアニメーションの依頼を渡される機会が増えた頃、色が変わる程度は書けても、メニューの開閉のような動きになると毎回検索したコードのつぎはぎで、なぜ動くのか自分の言葉で説明できなかった。本書を読んでからは、動きが見た目の変化なのか状態の切り替えなのかをまず切り分け、CSSとJavaScriptどちらの担当かを実装前に決める順番が身についた。デザイナーへ「この動きは何を伝えたいのか」を一言尋ねる習慣もこのときからだ。

正直なところバニラJSを前提にした解説が中心だったため、後にReact案件が増えてからはクラスの操作をそのままコンポーネントへ持ち込めず、発想だけ流用して実装は書き直す羽目になった。管理画面のハンバーガーメニューに「もっとちゃんとした開閉を」と頼まれた際は、本のナビゲーション章にあったCodePenの短縮URLを昼休みにスマホで開き、イージングや秒数を触って感触を確かめた。役割分担をそのまま自分のコードに写してみると、思ったよりあっさり動いて拍子抜けした。

DevBookPath のマップで確認する

この本の学習パス上の位置づけ・前後の読書順は、DevBookPath のグラフで辿れます。

👉 フロントエンドの地図を見る

📖 Amazon で購入する

---

本記事のリンクには Amazon アソシエイト等の広告が含まれる場合があります。リンク経由の購入で運営者に紹介料が支払われることがあります。