Web制作者は1冊持っておくとかなり便利！UIに適したさまざまなアニメーションの実装方法が分かる解説書 -動くWebデザイン アイディア帳 実践編
Post on:2021年8月6日
sponsors
Webページに動きやアニメーションを加えたい、毎回検索で探している、実装の手順を解説してほしい、そんな時にすぐに役立つコピペで利用でき実装方法もカスタマイズもていねいで分かりやすい解説書を紹介します。
動きやアニメーションのコードはサポートサイトから最新版がダウンロードでき、要素表示、背景の動き、エリアの動き、画像の動き、テキストの動きなど9種類にバリエーションが100個以上あり、「この1冊が丸ごとカバー」の文字通り大全集です。
既視感を覚えた人は、大正解！
「動くWebデザインアイディア帳（紹介記事）」の第2弾で、第1弾は基本的な動きでしたが、第2弾の本書は実践編として「印象に関わる動き」となっています。
Web制作者は、1冊持っておくとかなり便利だと思います。こういった気持ちいいアニメーションはクライアントからの要望も多く、喜ばれます。
Kindle版も同時発売されています！
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
本書でアニメーションや動きを実装するのは、CSSのみかjQuery併用です。コードはすべてコピペで利用でき、CSSやJavaScriptのコードも特にカスタマイズ方法が詳しく解説されています。
初心者はそのままコピペ、中級者はReactやVue.jsを使用したり、自作ライブラリにしてもよいでしょう。
アニメーションや動きを単体で見てもその魅力には気がつきません。本書では13タイプのWebサイトを取りあげ、どこでどのように使用するか掲載されています。
サンプルサイトの1つ目、エステサロンのサイトでは、アクセスすると観音開きのようにページが表示され、ロゴがほのかに光りながら出現します。スクロールするとヘッダ画像は固定されながら拡大され、コンテンツがふわりと表示されます。画像やリンク要素にもさまざまなアニメーションが適用されていますが、文字にすると多いと感じるかもしれませんが、実際にアクセスしてみるとどれも繊細な動きなので、気持ちよく快適に感じると思います。
サンプルサイトはさまざまなものがあり、企業サイト、車の代理店サイト、学習塾サイト、アパレルのブランドサイト、料亭サイト、エンタメサイト、ギャラリーサイト、ポートフォリオなどがあります。
サンプルサイトは実際にオンラインで見ることも可能で、左上のURLまたはQRコードからアクセスできます。対応ブラウザはIE11を含む主要ブラウザすべてです。
本書ではアニメーションや動きの実装方法だけでなく、それをどのように使用すると効果的かまでていねいに解説されています。動きが発生するタイミング、機能別に見た動きが組み込まれる場所など、実装するサイトにあわせて使用できます。
実装の準備編として、CSSやjQueryの基本、WordPressでの使用方法などが一通り解説されています。アニメーションや動きのほとんどはCSSでの実装ですが、トリガー（動くきっかけ）の判定にjQueryを使用します。
巻末には動かない時のチェック項目もあるので、万が一の時にも安心です。例えば、::after, ::before疑似要素はJavaScriptでイベントが取得できず動かないことがあります。
それでは本書のメイン、動きやアニメーションはどんなのが収録されているのか見てましょう。9種類にバリエーションが100個以上あり、全部は紹介できないので、少しだけ見てましょう。
まずは、「最低限覚えておきたい現れ方」の25種類の現れ方。ふわっ、パタッ、くるっ、じわっなど、よく見かける気持ちいいアニメーションです。
1つ目の「ふわっ」は、フェードインのアニメーションです。さまざまな要素をその場で下から・上から・左から・右からふわっと表示させます。
次ページからそれぞれの動きの実装方法が解説されています。少し変更するだけで実装できるものはまとめられており、変更箇所やカスタマイズのやり方までていねいに解説されています。
続いて「背景の動き」はファーストビューにインパクトを持たせたい時やサイト全体の空気感を演出したい時に使用するアニメーションです。
最近では、グラデーションが変化する動きもよく見かけますね。これはCSSのみで実装できます。
「エリアの動き」はビジュアル要素を押し出して、コンテンツごとに世界観を変化させたい時に活躍します。前述したスクロールするとヘッダ画像は固定されながら拡大されたり、スクロールすると画像やエリアが時間差で重なったり、紙芝居風のスクロールなどです。
「画像リンクの動き」では、ホバーすると画像サイズはそのままで拡大されたり、キラッとしたり、ぼかしや透過など、サイトの雰囲気を作り出す演出の一つです。
「テキストの動き」にも面白い動きが揃っています。タイプライター風をはじめ、バラバラに出現させたり、じわっと出現させたり、文字がランダムに変化しながら出現したり、ちょっとした演出に使えます。多用は厳禁です。
最後の「イラスト・オブジェクトの動き」ではGIFアニメーションをはじめ、PNGアニメーション（APNG）、SVGアニメーションをツールを使用して実装します。
動くWebデザイン アイディア帳 実践編の目次
動くWebデザイン アイディア帳 実践編の目次
動くWebデザイン アイディア帳 実践編の目次
動くWebデザイン アイディア帳 実践編の目次
動くWebデザイン アイディア帳 実践編の目次
Webページにかっこいい動きを加えたい、気持ちいいアニメーションを実装したい、そんな時に絶対役立つ一冊です。
献本の御礼
最後に、献本いただいたソシム株式会社の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
