動く Web デザインアイディア帳(ウゴクウェブデザインアイディアチョウ)

「サイトに動きをつける時、同じ内容を何回も検索をしてソースコードを探している」
「サイトで見つけたソースコードをそのままコピペしてみたけど、動かない」
「 JavaScript の本を購入してみたが、実際のサイトにどう組みこめばいいか具体的なイメージがわかない」
「動きの原理を最低限理解して、とにかく早く実務にいかしたい」

本書は Web サイトを動かすことが苦手な右脳系ウェブデザイナーが、サイトを動かす第 1 歩を踏み出すための「動きの逆引き事典」です。
近年のウェブサイトで使用されている基本的な動きの原理や仕組みをサンプルコードと共に紹介します。

ハンバーガーメニューのスライド、スクロール連動のフェードイン、ホバー時のカード拡大。 Web サイトに「動き」を加えたいとき、ゼロからコードを書くのは初学者にはハードルが高く、かといってライブラリをコピーしても仕組みが分からないまま終わりがちです。本書はその中間を狙い、実務でよく使う UI アニメーションを「やりたいこと」から逆引きできる形でまとめた一冊です。

各パターンは CSS と jQuery (または vanilla JavaScript) のコード付きで示され、そのまま貼り付けて動かせる即効性を持っています。ただし単なるスニペット集に留まらず、イージングの違いやアクセシビリティへの配慮といった「なぜそう書くのか」が補足されているため、コピペの先にある応用力が育ちます。ポートフォリオサイトの制作で動きを付けたい駆け出しのデザイナーや、デザインカンプを受け取ったフロントエンド初心者が手元に置いておくと便利です。

注意点として、 jQuery ベースの記述が中心にある点は把握しておく必要があります。フレームワーク環境では読み替えが必要になりますが、動きの原理自体は CSS アニメーションと DOM 操作に帰着するため、考え方はそのまま活かせます。