動く Web デザインアイディア帳 実践編(ウゴクウェブデザインアイディアチョウ ジッセンヘン)

「サイトを印象付ける基本の動き」+「世界観を作る動き」を集めた現場で使える実践サンプル集!
「サイトの印象を決定付ける動き」をこの 1 冊が丸ごとカバーします!
本書は、好評の「動く Web デザイン アイディア帳」の姉妹本です。「動く Web デザイン アイディア帳」が Web デザインで使われる基本的な「動き」を解説していたのに対して、本書では実際に Web サイトの印象を決定付けることができる動きについて解説しています。 前書と同様に、専用サイトから簡単にコードをコピー&ペーストして利用することも可能です!

静的なページは作れるようになったけれど、スクロール連動のフェードインやハンバーガーメニューの開閉をどう実装すればいいか分からない。本書はそうした「動き」を加えたいコーダーやデザイナーが、具体的な実装パターンを引いてすぐ使えるように設計されたリファレンスです。前作『動く Web デザインアイディア帳』が基本パーツの紹介に主眼を置いていたのに対し、この実践編ではパーツ同士を組み合わせたページ全体の演出に踏み込んでいます。

CSS アニメーションと jQuery を中心に、実務で頻出する動きのパターンがコード付きで並んでいます。ゼロから書く教材というより「完成品のコードを読み、自分のサイトに移植しながら仕組みを理解する」使い方を想定した構成です。デザインカンプから実装に落とす段階で手が止まる場面に、辞書的に参照できる点が強みといえます。

ただし、 JavaScript フレームワーク (React / Vue など) によるモーション制御は扱っていないため、 SPA の開発環境で動きを付けたい場合は別の資料が必要です。あくまでマルチページの静的サイトや WordPress テーマで「動き」を求められたときの引き出しを増やす本として活きます。