【アニメーション】canvasを使ってホームページのアニメーションを作成！
こんにちは、エソラボの大西です。
ホームページにアニメーションを掲載されたい方、たくさんいらっしゃるかと思います。
ただ、アニメーションを掲載するとなって色々地調べてみるものの、なかなか自分が思っているようなアニメーションって無いですよね。
そんな時に便利なJavaScriptを使用した、canvas要素のご紹介をさせていただきます。
この記事では
- CANVASの便利な使い方
- CANVASを使っているサイトのご紹介
を書いておりますので、これからアニメーションの実装を検討されている方はぜひ参考にされてみて下さい。
CANVASの便利な使い方
まずは、普通のアニメーションとどう違うの？
という疑問は、みなさん抱かれると思います。
canva（キャンバス）とは、HTML５から追加された、図形を描くための技術で、HTMLとJavaScriptを組み合わせて実装します。
例えば、ユーザーがサイトを閲覧している状況に合わせてアニメーションを変化させたり、タイマーと組み合わせることで時間ごとのアニメーションを実装することが可能となります。
つまり、今までのアニメーションでは実装できなかった機能を実装することができるのです。
例えばどんなアニメーションが作れるの？
まずはこちらのアニメーションをご覧ください。
こちらの「Click AnyWhere」と書かれている箇所をクリックすると花火のようなアニメーションが起こります。
こちらがCANVASアニメーションとなります。
こちらに掲載しているものはそこまで難しいものではなく、エンジニアの方であれば2時間程度あれば実装することができるのでは無いでしょうか？
CANVASのメリット・デメリット
かなり魅力的なCANVASではありますが、もちろんデメリットも存在します。
それは何かというと、工数がかかる・難しいという点です。
また、自分で作成しようとすると、かなり時間もかかってしまいますので、制作会社に依頼された方が早い場合もございます。
用途によっては、SVGアニメーションや、動画などで代替できる場合もございますので、慎重に判断されることをお勧めします。
CANVASを使っているサイトのご紹介
株式会社サイバー・バズ
LETTERS,INC.
STITCH.Co.,Ltd
まとめ
いかがでしたでしょうか？
普段はあまり聞き慣れないcanvasアニメーションという言葉ですが、これを機に導入されてみるのもいいかと思います。
ユーザーの動き方次第で、アニメーションが変化するなど、サイトを見てくれているお客様を飽きさせない施策を打つ事で、よりWEBサイトのPV増加につながるのでは無いでしょうか？
また、弊社でもcanvasを使ったアニメーションの製作を請け負っておりますので、ご興味があれば是非お問い合わせをお待ちしております。
この記事を書いた人
大西照
株式会社Esolab 代表取締役