前回の記事Webサイトアニメーションは必要？使うメリット・デメリットを解説の続きです。
Webサイトアニメーションを実装するにあたりAIを使うと簡単に素早く実装してくれます。
その反面、実装方法がわかっていないと調整や指示出しに苦労をしてしまいます。
この記事ではWebサイトアニメーションの実装方法の深堀り、AIへの指示出し、調整の方法を解説していきます。
- 実装したけど動かない？
- もっといろいろなことをしてみたい
- よく見るアニメーションじゃ面白くないな
アニメーションに慣れてきて、こんな気持になったらじっくりと見てみてください。
この記事で紹介している実装方法
- CSSを使ったアニメーション
- JSを使ったアニメーション
- ライブラリを使ったアニメーション
特にCSSを使ったアニメーションはブラウザやOSのバージョンによって動かなかったりするので要注意です。
JSを使えばよっぽど動くので、仕組みを知っていたらCSSからJSに作り直して、なんて指示も出せますね。
CSSで動くアニメーション
色々あるといいつつ、シンプルなアニメーションのほとんどはCSSで動きを制御します。
Javascriptでスクロールやマウスの動きを読み取り、ボタンや要素の動きの変化をCSSで調整すると言った流れですね。
しかし昨今のCSSは色々と進化しており、Javascriptを使わないと実装できなかったようなアニメーションがCSSだけで簡単に実装できるようになっています。
そういったものを実装する場合は最新のブラウザやOSを使う必要があり、環境によっては動かないこともあるので注意です。
CSS単体でも指定できるのは以下のようなものです。
- ホバー(マウスを乗せた状態)の変化の指定
- 特定の動きをする指定
- 動き続ける指定
これらはCSS単体で管理することが出来ます。
以下のような動きを指定したいときはCSSを中心に調整します。
- メニューをマウスで選んだらすこし動く
- 文字が左右に流れ続ける
- キャッチコピーがきらっとひかる
ブラウザによる変化
Chrome、Safari、Firefox、Edgeなど複数のブラウザがあり、物によってはCSSが思った挙動をしないことも多々あります。
ターゲットユーザーが幅広い場合や、高齢の方が多い場合などは古いバージョンのものを使っていることが想定されます。
古いブラウザやバージョンを使っている場合、CSSアニメーションがうまく動かないなんてことも。
たとえば
background-attachment: fixed（パララックス）は、iPhoneのSafariだと無効化されることがあります。「PCでは動いたのにスマホで動かない」はCSSアニメあるあるです。
こんな悲劇を避けるためにも、新しいCSSを使う時やAIによる実装を行ったときは、各ブラウザで稼働するかチェックするようにしましょう！
日々進化するCSS
CSSはどんどん追加されており、昔はJavascriptが必要だった動きが、今はCSSだけで出来るようになっています。
例えば、アコーディオンメニューのぬるっと動く感じ、jsでクラスつけてCSS連動させて、、と行っていたものを
grid-template-rows: 0fr → 1frといったテクニックで、JSなしでも実装できる様になりました。
このようなCSSのみで構成する場合もやはり、対応するブラウザが少ない場合があるので、Can I useを使うなどして確認しましょう！
JSで動くアニメーション
細かな動きから凝った動きまでJavascriptを使うことで実装できます。
例えば、
- スクロールに反応して動く
- スクロールに連動して動く
- クリックすることで動く
そして何より、CSSより安定して動くのが強みであり、CSSで実装したけど動かないというときはJSで作り直すと動くことが多いです。
コードを読み解くためにはしっかりと学習する必要がありますが、上記で紹介しているような動きの場合は比較的簡単なコードで実装できます。
便利なIntersection Observer
スクロールに連動したアニメーションを実装する時に、定番なのがIntersection Observer(インターセクションオブザーバー)です。
この仕組みを使うと、要素が画面に入ったかを監視してくれる機能がつきます。
例えば、アバウトセクションが画面に入ったらアニメーションを動かしたい、そんな場合に使います。
フェードインアニメーションやスライドインアニメーションなどと連動させて使うことが多いです。
基本的な動きはCSS任せ
Javascriptのアニメーションといっても、動きそのものはCSSで書くことが多いです。
役割分担としては
Javascript：動くタイミングやキッカケの感知(クラスをつける)
CSS：どう動くか、どう変化するかを担当
といったところです。
代表的なライブラリ
本格的なアニメーションや、ゼロからコードを書き上げることも不可能ではないですが、ライブラリを使うと幅が広がります。
以下に代表的なものを4種類紹介します。
- AOS
- swiper
- GSAP
- Animate.css
軽量で簡単に使えるものから、ガッツリアニメーションを使いたい場合までそれぞれの差があるので一つづつ解説します。
AOS
スクロールアニメのライブラリ。ライブラリを読み込ませてHTMLにdata属性を追加するだけで、スクロールに合わせたアニメーションをつけることが出来ます。
スクロールしたらふわっと現れたりするやつですね。
定番、軽く、CSSで管理するよりもつけ外しも簡単なため最初に使ってみるのにオススメなライブラリです。
swiper
カルーセルのライブラリ、カルーセルとは複数のカードが横スライドで流れるイメージです。
スライダーとも呼んだりします。
案件での使用されることの多いアニメーションで、お客様の声、制作実績、作業風景を並べる…様々な使い方が想定されます。数の多いコンテンツを並べるのに使われる印象です。
例)中部国際空港|新卒採用サイト
swiperではカルーセルの間隔、動くスピード、どんな動きをするかなどが調整できるためこのライブラリ一つでカルーセルの管理がとても楽になります。
animate.css
定番のアニメーションが詰め合わせになったCSSライブラリ。クラスの付け替えによる管理を行うことが出来る手軽さが魅力となっています。
オリジナルで作るよりも資料が多い、汎用性がある、他の人に見せても理解してもらいやすいなどのメリットがあり、AIが使えない案件などでは力になります。
GSAP
プロの現場でよく使われる高機能ライブラリ。要素一つを動かす細かいものから、サイトの動き全体をコントールする複雑なアニメーションまで様々な実装が行なえます。
学習コストが高めのため、アニメーションに慣れて、javascriptがある程度読めるようにならないと使うのは難しいですが、一風変わった動きを持たすことが出来るため非常にモダンなサイトづくりを行えます。
AIに指示を出すことで実装する難易度は大きく下がっていると感じるので、変わったアニメーションを実装してみたいときはGSAPのライブラリを入れて指示を出してみてください。
- テキストが1文字ずつ出る
- 紙芝居のように下から画面が被さってくる
- スクロールしたら右方向に動く(横スクロール)
他にも色々と動かすことが出来ます。
公式サイトのデモ何かを見てイメージをふくらませるのも面白いですね。
まとめ
Webサイトアニメーションの実装方法から代表的なライブラリまで紹介してきました。
Webサイトの実装方法
- CSSを使ったもの
- javascriptを使ったもの
- javascriptとCSSを組み合わせたもの
- ライブラリを使ったもの
実装方法を知ることでAIに指示するときのプロンプトもより具体的に出来るはずです。
代表的なアニメーションライブラリは
- AOS
- 簡単なアニメーション、data-属性で管理することが出来る
- swiper
- カルーセルの動きや機能を管理することが出来る
- animate.css
- CSSをつけるだけでアニメーションを付けることが出来る。デモもあるため動きのイメージがしやすい
- GSAP
- 様々な動きをつけることが出来る、中級者以上向け。Javascriptが読める人にはおすすめ
コードを読めるに越したことはありませんが、AIに指示を出せば簡単にアニメーションが実装できる今の時代です。
ライブラリにあるデモの動きを指示するだけで、イメージ通りの実装をすることが簡単になります。
Webサイトを作る上で参考にしてみてください。
最後までご覧頂きありがとうございました！
コメント