この本を一言で言うと
サイトの印象を決定付ける「動き」に特化した、現場で即使えるWebアニメーション実践サンプル集。
この本の概要
本書は好評の「動くWebデザイン アイディア帳」の姉妹本で、より実践的なWebアニメーションに特化した一冊。基本的な動きを解説した前作に対し、本書ではWebサイトの印象を決定付ける動き・世界観を作る動きを中心に収録している。専用サイトからコードをコピー&ペーストして利用できる実用性も継承。ローディングアニメーション・スクロールアニメーション・ホバーエフェクト・テキストアニメーションなど、サイトの質感を大きく左右するアニメーション表現を実践的に学べる。
「動き」がサイトの格を変えるって、この本で実感した
コーディングはできるけど、アニメーションになると急に自信がなくなる。CSSのtransitionとかtransformは書けるんだけど、「かっこいい動き」にならなくて、いつも同じような実装しかできなかった。
この本の特徴は「サイトの印象を決定付ける動き」というコンセプトで、単にアニメーションの実装方法を並べるだけじゃなくて、どういう場面でどういう動きを使うと効果的かという視点が入っている。ローディング・スクロール・ホバー・テキストアニメーションと章立てされていて、自分がやりたいことをすぐ探せる。
専用サイトからコードをコピーして使えるのは実用的で、クライアントワークで「こんな動きを試してみたい」と思ったときにすぐ検証できる。原理もわかるので、コピーしたコードを自分のサイトに合わせてカスタマイズするのも難しくない。
前作の「基本編」を読んでいたので、この実践編はステップアップとしてちょうど良かった。2冊セットで持っておくと、動きに関する引き出しがかなり増えます。
— Web制作会社のデザイナー（27歳女性）
この本で学べること
✓
基本的なアニメーションだけでなく、Webサイト全体の世界観・印象を作り出す動きの表現に焦点を当てている。
✓
専用サイトからコードをコピーするだけで実際のサイトに実装できるため、原理理解と即実践を両立できる。
✓
「動くWebデザイン アイディア帳」で基本を学んだ読者が次のステップへ進める内容に設計されている。
✓
豊富なサンプルが収録されており、逆引き事典として使うことも、順に習得していくことも可能。
✓
動きの原理を最低限理解して実務に活かすという姿勢で書かれており、JavaScriptが得意でないデザイナーでも使いやすい。
本の目次
- 1Chapter1 ローディングアニメーション
- 2Chapter2 スクロールアニメーション
- 3Chapter3 ホバーエフェクトの表現
- 4Chapter4 テキストアニメーション
- 5Chapter5 背景とビジュアルの動き
- 6Chapter6 ページ遷移アニメーション
- 7Chapter7 世界観を作るインタラクティブ表現
良い点・気になる点
良い点
- ○専用サイトからコードコピーで即実装できる実用性
- ○サイトの印象を高める実践的なアニメーション表現を網羅
- ○前作の発展版として体系的に学べる
- ○424ページの豊富なサンプル量
気になる点
- △前作を読んでいた方がより理解が深まる
- △JavaScriptの原理を深く理解したい方には別の専門書が必要
著者について
こんな人におすすめ
✓
✓
✓
よくある質問
Q. 前作「動くWebデザイン アイディア帳」を読んでいないと理解できませんか？▼
A. 前作を読んでいなくても本書単独で使えますが、基本的なアニメーションの原理を前作で学んでから読むとより理解が深まります。
Q. CSSだけで実装できる内容ですか？▼
A. CSSアニメーションを中心に、一部JavaScriptも活用した実装を解説しています。専用サイトのコードをコピーして使えるため、JavaScriptが苦手でも実装できます。
Q. 専用サイトのコードはいつまで使えますか？▼
A. 専用サイトのコードの提供期間については出版社にご確認ください。
UIデザインガイドライン集
実務で使えるUIデザインのガイドラインを無料でダウンロード
※ 登録いただいたメールアドレスは資料送付にのみ使用します