エンジニアとしてWEB制作を行う上で、アニメーションというのは最も高い壁の一つではないでしょうか。
一般的にかっこいい、おしゃれだと言われるWEBサイトではアニメーションが豊富に使われていることが多いです。
ですが、WEB制作の業務で実際に必要になるアニメーションは意外と少ないもの。
エンジニアとして上を目指していくのであれば複雑なアニメーションも覚えるべきですが、未経験の時点で覚えるべきアニメーションは多くないのです。
本記事では、未経験エンジニアが最低限覚えるべきアニメーションの実装についてご紹介します。
ここでご紹介するアニメーションをマスターすれば、実務でよく使用するアニメーションについては大方マスターできるので、ぜひ最後までご覧いただければと思います。
本記事では、『動くWebデザインアイデア帳（https://coco-factory.jp/ugokuweb/）』様のアニメーションを例に使用させていただいております。
未経験エンジニアが最低限覚えるべきアニメーション
未経験エンジニアが最低限覚えるべきアニメーションは以下の７つ。
- アコーディオン
- フェードイン
- ハンバーガーメニュー
- スライダー
- モーダル
- ページトップへのスクロールボタン
- タブでの表示切り替え
それぞれ解説していきます。
アコーディオン
まずは一番使うであろうアコーディオン。
Q&Aでアンサーの部分を隠したり、コンテンツの量が多い時に、見た目を綺麗に整えるために使用したりします。
WEBサイトに動きをつけるのがJavaScriptと言われますが、アコーディオンを自分で作れるようになると、「動きをつける」というのが理解しやすくなるのではないでしょうか。
基本的で簡単なものに分類されますが、最も使用頻度の多いアニメーションといっても過言ではないため、必ずマスターするようにしましょう。
参考：https://coco-factory.jp/ugokuweb/move01/9-2-1/
フェードイン
「WEBサイトをおしゃれにしたい！」となったときによく使われるのがフェードイン。
スクロールしていって、要素が画面に入った時にふわっと現れるようなアニメーションはよく見ますよね。
下からふわっと、左からふわっとなど、基本から少しいじるだけで多種類のアニメーションを実装することができます。
「スクロールしたら」については他のアニメーションでもよく使うため、マスターできるとアニメーションをもっと使いこなせるようになるでしょう。
参考：https://coco-factory.jp/ugokuweb/move02/4-1/
ハンバーガーメニュー
ハンバーガーメニューは、表示領域の狭いスマホ用のWEBサイトでよく使用されます。
PC用のWEBサイトではヘッダーやフッターに含まれている要素が、スマホ用のWEBサイトではハンバーガーメニューに配置されます。
イメージとしてはアコーディオンに近く、クリックするとメニューが出てきて、再度クリックするとメニューが閉じルような仕様になります。
アコーディオンを習得できていればそんなに難しくないため、あまり気負わず挑戦してみましょう。
参考：https://coco-factory.jp/ugokuweb/move01-cat/humbugermenu/
スライダー
お知らせやキャンペーンなどの画像を1箇所で見せることができるスライダー。
Amazonや楽天などのECサイトなどでもよく使用されていますね。
基本的にスライダーは「slick」などのライブラリを使って実装することが多く、生のコードで実装することはほとんどないため、ライブラリの使い方を学ぶと良いです。
また、ライブラリの使い方もそんなに難しくないため、使用すると決まったときに調べれば使えるレベルにはなるため、気にして覚える必要はそんなにないかもしれません。
自動でスクロールするように設定したり、表示するコンテンツの数を調整したりと、細かなオプションを加えることもできますよ。
参考：https://coco-factory.jp/ugokuweb/move01/6-1-6/
モーダル
モーダルは、別にページを用意するまでもないようなコンテンツを表示させたり、画像や動画を大きく表示させたいときに実装することが多いです。
お知らせを表示したり、確認テキストを表示したりと用途は様々で、1番ではないにしろよく実装するものになります。
ハンバーガーメニューなどと同じような方法で実装できるため、ここまで紹介してきたアニメーションを習得できていれば簡単に実装できるでしょう。
動画の自動再生など、細かなカスタマイズが必要になってくると多少実装難易度は上がりますが、実務になると必要になってくるケースもありますので、ぜひ身につけておくと良いですね。
参考：https://coco-factory.jp/ugokuweb/move01/9-6-1/
ページトップへのスクロールボタン
コンテンツが縦に長いWEBサイトでは、ページTOPへスクロールするボタンの実装は必須です。
aタグのリンク先を「#」にすることでTOPへスクロールすることもできますが、動きがあまりスマートではないため、JSを使用したアニメーションを使用して実装することがほとんど。
フッター付近に配置するだけでなく、画面の固定位置に配置したり、一定スクロールしたらふわっと現れるなど、様々な種類のスクロールボタンがあります。
たくさんある種類を全て覚える必要はありませんが、2〜3種類くらいは実装できるようにしておくと良いですね。
参考：https://coco-factory.jp/ugokuweb/move01/8-1-1/
タブでの表示切り替え
この記事でご紹介するアニメーションの中で私が一番難しいと思うのがタブでの表示切り替えです。
タブメニューを実装するとコンテンツをコンパクトに収めることができ、ユーザーにとって見やすいWEBサイトを作ることができます。
少し規模の大きなWEBサイトを作る際に実装することの多いタブでの表示切り替えですが、この記事でご紹介してきた他のアニメーションに比べると多少レベルは上がってきますので、張り切って習得に臨みましょう。
これができれば、WEB制作で使用する必要最低限のアニメーションは網羅できます。
参考：https://coco-factory.jp/ugokuweb/move01/5-4-1/
まとめ
WEB制作の業務で使用するアニメーションは、この記事でご紹介した７つがほとんどです。
また、別のアニメーションも、これらをカスタマイズしたり、考え方を応用することで実装できるものが多いです。
最低限ここでご紹介したアニメーションを習得し、WEB制作の業務をこなせるようになりましょう。
アニメーションが楽しくなってきた人は、他のアニメーションについても調べてみると良いですね。
コメント