「動くWebデザインアイディア帳」で、アニメーションサイトを作る

昨年、もっと動きのあるサイトを作れるようになりたくて、アニメーションについて勉強していました。

普段は、ボタンのマウスオーバー、ナビゲーションメニューなど、利便性のためにシンプルな動きを取りいれるくらいです。しかし、そのたびに、基本となるソースコードを検索して、イメージに合わせて書き換えて…ということを繰り返していました。

HPでよく使われるアニメーションについて、まとまった情報を探していて、「動くWebデザインアイディア帳」を見つけました。

大ボリュームで２冊あります。

サンプルサイトが13種類あり、それぞれにどんな動きが組み込まれているのか解説されています。
サンプルサイトはどちらも同じなのですが、２冊に分けて、動きが掲載されているので、サンプルサイトをそっくりそのまま再現するには両方の本を見る必要があります。

ロゴ、ハンバーガーメニュー、スクロールバー、画像など、パーツごとによく使う動きがまとまっているので、辞書のように動きを調べてサイトに取り入れることができます。

書籍連動サイトもあるので、コードをコピペするのに便利！

一つ注意としては、パララックス効果についてはコラムでプラグインが紹介されているくらいだったので、詳しい解説は他の情報を参考にした方がよいです。

「動くWebデザインアイデア帳」を見ながら、架空のネイルサロンのHPを作ってみました。

やっぱりアニメーションの部分は、作って動いたときが楽しいですね＾＾

タイトルをふわっと表示させたり、ロゴをきらめかせたりする動きは、簡単にできて、女性らしい世界観を演出するのにぴったり。今後も、アクセントでとりいれていきたいです。