龍弥デザインでは制作に携わらせて頂くWebサイトによくjavascriptのアニメーションを使います。
以前はflashを使ったアニメーションの制作のほうが多かったんですが、検索エンジン対策やページの表示速度、そしてiPhoneで再生されない点などを考慮した結果、flashアニメーションはほとんど作らなくなり、代替えとしてjavascriptでアニメーションを作るようになりました。
にぎやかしや遊びを取り入れることで目を引くページに仕上げる、というのが動きを与える目的ですが、より効果的に印象を与えるにはストーリー性が大事だと思います。
例えば少し前に流行りだし、現在も多くのWebサイトが取り入れているパララックス効果を使用したアニメーションはダイナミックで目を引きますが、そこにストーリー性がなければただ派手なだけのページになります。
こちらは有名なマイケル・ジョーダンの2012年モデルのバスケットシューズを取り上げたパララックスエフェクトのランディングページを、実際にスクロールしながら動画撮影されたもののYoutube動画ですが、パララックス効果がまだそれほど浸透していない頃に僕が見てものすごく感動したページです。
見ていただければ一目瞭然ですが、スクロールしていくとシューズが飛行機のカタチになったりレーシングカーのカタチになったり戦車のカタチになったりして全力で遊びを表現しています。
けどそれだけではなく、飛行機のカタチだったところからふっとシューズの内側のクッション部分が浮かび上がり、下から現れたシューズの外側部分に入り込みます。
この見せ方によって遊びもアピールポイントもとてもうまく表現されていますよね。
一度見てしまえば、「飛行機のように高く、レーシングカーのように早く、戦車のように強く」という受け取り方をするように作られています。
閲覧者が感動し、何かしらのアクションを起こしてもらうためには、「無意識に考えさせる」ことが大事だと思います。
それを可能にするためにはストーリー性をもったアニメーションが不可欠というわけですね。
ページにアニメーションを！とお考えの方は、まずそのページのストーリーを作りこむことから始められてはいかがでしょうか。
