Webサイトにおいて、アニメーションはもはや切っても切り離せない存在です。ちょっとしたアニメーションによって、Webサイトの使いやすさや印象に大きく影響を与えます。
しかし、Webサイトのアニメーションだけをまとめた書籍の数は少なく、初心者の方が0からの学習を進めづらいという課題があります。
そこで、今回はWebサイトに使われているアニメーションの作り方を基本から学べる「動くWebデザインアイディア帳」をご紹介したいと思います。
動くWebデザインアイディア帳とは
動くWebデザインアイディア帳は、久保田涼子さんと杉山彰啓さんによって書かれた、Webアニメーションの基本を分かりやすく学べる書籍です。
よくあるHTMLとCSSの入門書では、HTMLとCSSの基本的な書き方から始まり、部分的にWebアニメーションについての説明が書かれたものはありましたが、Webアニメーションについて詳しく書かれた書籍はほとんどありませんでした。
そのため、Webアニメーションについて勉強したくても、勉強方法が分からなかったり、自分のレベルにあった教材を見つけるのに手間がかかってしまっていました。
動くWebデザインアイディア帳は、HTMLとCSSの使い方を一通り覚えた初心者の方がWebアニメーションの使い方を覚える際にぴったりの内容となっていて、スキルアップを目指したい方におすすめの書籍となっています。
Webアニメーションの重要性
アニメーションと聞くと、大きな動きや演出を伴って表示されるもののようなイメージがあるかもしれませんが、実際にWebサイトに適用されているWebアニメーションのほとんどはとても控え目なものです。
ボタンにマウスカーソルを合わせた時、押した時、ボタンから離した時の変化だったり、スクロールに合わせて要素がふわっと表示されるものだったり、ちょっとしたアニメーションがWebサイトを使う人の使いやすさや印象に大きく影響を与えます。
過度なアニメーションの採用はユーザビリティの低下に繋がってしまいますが、適切なタイミングで適切なアニメーションを取り入れることによって、Webサイトに様々なメリットをもたらすことができます。
これからWebサイトの制作を学ぶという方や、Web制作者としてスキルアップするために、Webアニメーションの基本を押さえておくことはとても大切です。
「機能」編と「印象」編の2冊
動くWebデザインアイディア帳は、
- 機能に関する動きが紹介されている「動くWebデザインアイディア帳」
- 印象に関する動きが紹介されている「動くWebデザインアイディア帳 実践編」
の2冊が販売されています。
1冊目よりも2冊目の方がよりレベルの高い内容となっているので、自分のスキルレベルに合わせたものを選ぶと良いでしょう。
通常版について
1冊目の通常版は、Webサイトでよく見かけるようなハンバーガーメニューやローディングアニメーション、ナビゲーションメニューなど、Webサイトに欠かせない機能のアニメーション要素の作り方について体系立てて紹介されていて、この1冊をしっかりマスターすれば、アニメーションの基本をしっかりと理解できるような内容になっています。
機能に関するアニメーションについては、例えば「ハンバーガーメニュー 作り方」のようなキーワードで検索すればコピペ用のコードが公開されているかもしれませんが、それをそのまま使っているだけでは、アニメーションに関する知識やスキルが身に付かず、本質的な解決にはなりません。
もしあなたが一人前のWebデザイナー、コーダーとして業務に取り組みたいと考えているのであれば、上記のような機能に関するアニメーションの制作は避けて通ることはできません。
「HTMLとCSSの使い方を理解して、簡単なWebサイトであれば作ることができる」くらいのレベルの方は、この本を読んでアニメーションに関するスキルを身につけることで、着実にスキルアップを目指すことができるでしょう。
こちらの書籍では、下記ような「動き」が紹介されています。
実践編について
2冊目の実践編では、Webサイトでより豊かな表現を作るための印象に関わるアニメーション要素の作り方について紹介されています。
通常版よりも一歩レベルの高いアニメーションの作り方について紹介されているほか、JavaScriptのライブラリを使ったアニメーションの作り方なども説明されています。
JavaScriptのライブラリは、Webサイトの表現の幅を広げるためには欠かせない存在で、パララックスやスクロールエフェクトなど、自分で作ると非常に手がかかるような演出も、数行のコードだけで実装することができたりします。
特に独学でWebデザイン、Web制作を勉強されている方は、どのようなライブラリを使えばどのような動きを作ることができるかが分からない方も多く、ライブラリを使ったWebアニメーションの作り方について説明されているこの書籍は学習の助けになると思います。
こちらの書籍では、下記ような「動き」が紹介されています。
期間限定でWebサイトも公開中
動くWebデザインアイディア帳は、期間限定でWebサイトが公開されています。書籍で紹介されている内容と同じものが公開されていて、実際にアニメーションが動いている様子を確認することができます。
ソースコードや説明も公開されているので、書籍を購入しなくてもWebサイト上で詳しく見ることはできますが、本格的に勉強したいと考えている方は、体系立てて説明されている書籍の方がおすすめです。
購入しようか悩んでいるという方は、サイトを一度チェックしてどのようなことが学べるのか見てみるといいでしょう。
