【アニメーション】canvasを使ってホームページのアニメーションを作成! | 株式会社Esolab
logo

ARTICLE

記事ページ

記事ページ

【アニメーション】canvasを使ってホームページのアニメーションを作成!

TECH

こんにちは、エソラボの大西です。

ホームページにアニメーションを掲載されたい方、たくさんいらっしゃるかと思います。
ただ、アニメーションを掲載するとなって色々地調べてみるものの、なかなか自分が思っているようなアニメーションって無いですよね。
そんな時に便利なJavaScriptを使用した、canvas要素のご紹介をさせていただきます。




この記事では

  • CANVASの便利な使い方
  • CANVASを使っているサイトのご紹介

を書いておりますので、これからアニメーションの実装を検討されている方はぜひ参考にされてみて下さい。

CANVASの便利な使い方

まずは、普通のアニメーションとどう違うの?
という疑問は、みなさん抱かれると思います。

canva(キャンバス)とは、HTML5から追加された、図形を描くための技術で、HTMLとJavaScriptを組み合わせて実装します。

例えば、ユーザーがサイトを閲覧している状況に合わせてアニメーションを変化させたり、タイマーと組み合わせることで時間ごとのアニメーションを実装することが可能となります。

つまり、今までのアニメーションでは実装できなかった機能を実装することができるのです。

例えばどんなアニメーションが作れるの?

Click Anywhere



まずはこちらのアニメーションをご覧ください。
こちらの「Click AnyWhere」と書かれている箇所をクリックすると花火のようなアニメーションが起こります。

こちらがCANVASアニメーションとなります。

こちらに掲載しているものはそこまで難しいものではなく、エンジニアの方であれば2時間程度あれば実装することができるのでは無いでしょうか?

CANVASのメリット・デメリット

かなり魅力的なCANVASではありますが、もちろんデメリットも存在します。

それは何かというと、工数がかかる・難しいという点です。

また、自分で作成しようとすると、かなり時間もかかってしまいますので、制作会社に依頼された方が早い場合もございます。
用途によっては、SVGアニメーションや、動画などで代替できる場合もございますので、慎重に判断されることをお勧めします。

CANVASを使っているサイトのご紹介

株式会社サイバー・バズ

サイトを見る

LETTERS,INC.

サイトを見る

STITCH.Co.,Ltd

サイトを見る




まとめ

いかがでしたでしょうか?
普段はあまり聞き慣れないcanvasアニメーションという言葉ですが、これを機に導入されてみるのもいいかと思います。
ユーザーの動き方次第で、アニメーションが変化するなど、サイトを見てくれているお客様を飽きさせない施策を打つ事で、よりWEBサイトのPV増加につながるのでは無いでしょうか?

また、弊社でもcanvasを使ったアニメーションの製作を請け負っておりますので、ご興味があれば是非お問い合わせをお待ちしております。

製作依頼フォーム

この記事を書いた人

大西照

株式会社Esolab 代表取締役

アーカイブ

カテゴリー

  • TECH (34)
  • DESIGN (21)
  • OTHER (15)
  • MARKETING (6)
  • SEO (5)
  • お問い合わせ

    株式会社EsolabではWEBサイトやECサイトの運営など多岐にわたり事業を展開しています。
    ホームページや自社ECサイトをお求めの方は一度お問い合わせください。

    お問い合わせ