この本を一言で言うと
WebサイトのアニメーションをCSS・JavaScriptで実装するための「動きの逆引き事典」として右脳系デザイナーに最適な一冊。
この本の概要
本書はWebサイトに動きをつけることが苦手なデザイナーが、アニメーション実装の第一歩を踏み出すための「動きの逆引き事典」。近年のWebサイトで使用される基本的な動きの原理と仕組みをサンプルコードとともに紹介する。「同じ内容を何度も検索している」「コードをコピペしたが動かない」「JavaScriptの本を買ったが実際のサイトに組み込む具体的なイメージがわからない」という課題を持つ右脳系デザイナーを対象に、動きの原理を最低限理解して実務に活かせるレベルまで解説した517ページの大ボリューム作。
「調べても動かない」が解消された。逆引きで使える実用書
正直に言うと、アニメーションの実装が苦手でした。毎回同じことをGoogleで調べて、コピペして、動かなくて、また調べて、という無限ループ。JavaScriptの入門書を買ったこともあるけど、「forループ」とか「関数」の話から始まって、「実際のサイトのスライダーをどう作るか」という話にたどり着くまでに挫折していた。
この本の「右脳系Webデザイナーのための逆引き事典」というコンセプトが刺さりました。私みたいな人向けの本なんだと。読んでみると、やりたいことから逆引きできる構成で、「スライダーを作りたい」「モーダルを出したい」というときに該当の章を開けばサンプルコードがある。
重要なのは、コードをコピペするだけじゃなくて、なぜそういうコードになるかの説明があること。最低限の原理を理解した上でコードを使えると、自分のサイトに合わせてカスタマイズできるようになる。これが以前のコピペ習慣との大きな違いでした。
517ページはかなり分厚いですが、全部読む必要はなく、必要なところだけ開く辞書的な使い方で十分です。デスクに置いておいて、実践編と合わせて参照しています。
— Webデザイン会社の中堅デザイナー（31歳女性）
この本で学べること
✓
「こういう動きを実装したい」というときに該当箇所を引いて使えるリファレンス的な構成になっている。
✓
JavaScriptの深い知識を前提とせず、実務に活かすために必要な最低限の原理を解説している。
✓
コードを書くことより視覚的・感覚的に仕事をするデザイナーでも使えるよう、わかりやすく実践的な内容にしている。
✓
フェードイン・スクロールアニメーション・スライダー・モーダルなど実際のサイトで頻出の動きを幅広くカバー。
✓
本書で基本を習得した後、「動くWebデザイン アイディア帳 実践編」でより高度な表現を学べるステップアップ設計。
本の目次
- 1Chapter1 動きをつける基礎知識
- 2Chapter2 CSSトランジションとアニメーション
- 3Chapter3 フェードイン・フェードアウト
- 4Chapter4 スクロールによる動き
- 5Chapter5 ホバーエフェクト
- 6Chapter6 スライダーとカルーセル
- 7Chapter7 モーダルウィンドウ
- 8Chapter8 メニューとナビゲーションの動き
- 9Chapter9 ローディングアニメーション
良い点・気になる点
良い点
- ○517ページの大ボリュームで多様な動きのパターンを網羅
- ○逆引き形式で目的の動きをすぐ探せる
- ○右脳系デザイナーを対象とした親しみやすい解説
- ○実践編（姉妹本）と合わせて体系的に学べる
気になる点
- △2021年刊行のためGSAPなど最新ライブラリの情報は別途確認が必要
- △JavaScriptを深く学びたい方には専門書が別途必要
著者について
こんな人におすすめ
✓
✓
✓
よくある質問
Q. JavaScriptの知識がなくても使えますか？▼
A. はい。JavaScriptが苦手なデザイナーを対象に設計されており、動きの原理を最低限理解して実務に活かすレベルを目指しています。
Q. CSSだけで実装できる内容ですか？▼
A. CSSアニメーションとJavaScriptの両方を使った実装を解説しています。どちらもサンプルコード付きで解説しているため、コードを参考に実装できます。
Q. 「動くWebデザイン アイディア帳 実践編」との違いは何ですか？▼
A. 本書は基本的な動きの原理と実装を解説する基礎編です。実践編はサイトの印象を決定付ける高度な動きに特化した応用編です。
UIデザインガイドライン集
実務で使えるUIデザインのガイドラインを無料でダウンロード
※ 登録いただいたメールアドレスは資料送付にのみ使用します