フロントエンドの制作者は持っておくとかなり便利！Webのさまざまなアニメーションの実装方法が分かる解説書 -動くWebデザインアイディア帳
Post on:2021年3月23日
sponsors
Webページやスマホアプリに動きやアニメーションを加えたい、そんな時にすぐに役立つコピペで利用できる解説書を紹介します。
コードはサポートサイトから最新版がダウンロードでき、画面遷移、ナビゲーション、ボタン、スライドショー、検索フォーム、グラフなど19種類にバリエーションが200個くらいあり、「この1冊が丸ごとカバー」の文字通り大全集です。
フロントエンドの制作者は、1冊持っておくとかなり便利です。
よく見かけるさまざまなアニメーションが収録されており、実装の参考になるだけでなく、アイデア集としても非常に便利。19種類からのバリエーションも豊富で、こんなこともできるのかという発見もあるかもしれません。
Kindle版も同時発売！
かなり分厚いので、電子版の方がいいかもしれませんが、パラパラ見るには書籍版がおすすめです。
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。
本書でアニメーションや動きを実装するのは、CSSのみかjQuery併用がベースとなっています。コードはすべてコピペで使用できますが、CSSやJavaScriptのコードも特にカスタマイズ方法が詳しく解説されています。
初心者はそのままコピペ、中級者はReactやVue.jsを使用したり、自作ライブラリにしてもよいでしょう。
アニメーションや動きを単体で見てもその魅力には気がつかないかもしれません。本書では、13タイプのサイトからどこでどのように使用するか掲載されています。
サンプルサイトの1つ目、エステサロンのサイトでは、ローディング時にロゴが表示され、中央から背景色が広がり、クリックしたら背景が全面に広がります。ハンバーガーメニューをはじめ、コンテンツにはスライダーやボタンなどにもアニメーションが加えられており、一定の位置までスクロールしたらページトップのリンクが表示されます。
もう1つ見てましょう、こちらは企業サイトの事例です。スクロール途中でヘッダが消え、上にスクロールすると復活します。ナビゲーションの動きは企業らしくソリッドなアニメーションで、年表ではスクロールするとタイムラインの縦線が伸びます。
本書ではアニメーションや動きの実装方法だけでなく、それをどのように使用すると効果的かまでていねいに解説されています。動きが発生するタイミング、機能別に見た動きが組み込まれる場所など、実装するサイトにあわせて使用できます。
実装の準備編として、CSSやjQueryの基本、WordPressでの使用方法などが一通り解説されています。
アニメーションや動きのほとんどはCSSでの実装ですが、トリガー（動くきっかけ）の判定にjQueryを使用します。
動かない時のチェック項目もあるので、万が一の時にも安心です。
19種類の動き、200個のバリエーションを全部紹介すると大変なことになるので、少しだけ見てましょう。
「画面遷移」は画面の読み込み中やクリックした時に、画面の遷移を知らせる役割です。上から、下から、左から、右から、中央から、斜めからなどさまざまな動きがあります。それぞれのサムネイルの下には実装に必要な技術（CSSのみ、jQueryの有無など）が掲載されています。
次ページからそれぞれの動きの実装方法が解説されています。少し変更するだけで実装できるものはまとめられており、変更箇所やカスタマイズのやり方までていねいに解説されています。
グローバルナビゲーションはバリエーションが豊富です。クリックやマウスオーバー、スクロールをトリガーにしてさまざまな動きをします。
ドロップダウン、スクロールすると上部固定、スクロールするとヘッダの高さが小さくなる、サイドに固定など、すべてコピペで実装できます。
ナビゲーションは他にも、テキストナビゲーション、タブなどが揃っています。
テキストナビゲーションだとすべて、CSSのみの実装になります。
スライドショーも画像やコンテンツに合わせて適切な動きで実装したいですね。
バリエーションの数がもっとも多いのが、ボタンです。48個あり、基本的どころかほとんどの動きが解説されています。
検索フォームも、あの動きが実装したいと思った時は、本書があると便利ですね。
ページのトップに戻るアニメーションも、シンプルなものから、速度可変、指定範囲でボタン表示など、さまざまなバリエーションがあります。
逆の動きで、ページ内リンクのアニメーションでは、固定ヘッダの高さ分を補正するなどのテクニックも解説されています。
アコーディオン、ツールチップ、モーダル、グラフなど、使用する頻度は高くないけど、いざという時に調べないと実装できないというタイプのものもたくさん掲載されています。
動くWebデザインアイディア帳の目次
動くWebデザインアイディア帳の目次
動くWebデザインアイディア帳の目次
動くWebデザインアイディア帳の目次
動くWebデザインアイディア帳の目次
Webページになにか動きを加えたい、アニメーションを実装したい、そんな時に絶対役立つ一冊です。
献本の御礼
最後に、献本いただいたソシム株式会社の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors
