パラパラアニメ風の画像で動きのあるリッチな演出をする
サイトに動きをつけるために、これまではFlashを使っていましたが、スマートフォン、タブレットPCが台頭する中で、javascriptやgifアニメなどでリッチな表現をする手法が主流となって久しくなりました。
弊社の今年の年賀状では、紙の年賀状と連動して
スタッフを知ってもらいたいという点から「スタッフの動きのあるコンテンツ」、
クリエイティブの花をたくさん咲かせていく一年にというコンセプトで「花が開くコンテンツ」をiPhoneからご覧いただけるウェブコンテンツとして用意しました。
今回はこのコンテンツで使用したパラパラアニメ風の、コマ送り画像の制作方法の
検討や実装時の問題点などまとめてみました。
実装方法を色々と考えてみる
企画段階で、どんな実装方法があるんだろうと、考えてみました。
- 動画
- アニメGIF
- コマ数分の画像を、一枚ずつ切り替える
- コマ数分の画像を1枚画像にしてCSSスプライトを使う
今回のポイントとしては、iPhoneでアクセスしたときに、なるべく「テンポを崩さずスムーズに閲覧できること」という点が命題でした。
まず、動画の場合ですがiPhoneのsafariなどブラウザで動画コンテンツを再生する場合は動画の準備ができると「再生ボタン」が表示され、それをクリックすることで動画プレイヤーの画面に切り替わり、動画コンテンツが再生されるという流れになります。
動画コンテンツは、ユーザーは無意識に時間が必要という構えが出ていて時間的な余裕があるときでないと「再生ボタン」を押さないというハードルがあると考えられます。
そこで、コマ送りの画像の実装にすることにしました。
これは「再生する」という阻害になるアクションを飛ばし、半強制的にアニメーションをみせることができます。
ただ、コンテンツにアクセスすると同時に、目に飛び込んでくるため、内容や長さなどは慎重に考える必要があります。
で、実装方法を絞り込んでみました。
■アニメGIF（動画からアニメGIFを作成）
■flashでコマ数分の画像を、一枚ずつ切り替える
flashで画像を一枚ずつ読み込み切り替える構造を作成し、外部ファイルでコマ送り画像を用意してcreate.jsを使って書き出します。
■コマ数分の画像を1枚画像にして、CSSスプライトで移動させながら使う
→ 参考例
コマ数分の画像を横に並べていき、1枚の画像にしてそれをCSSスプライトで移動させてあたかも動画のように見せるという方法です。
今回の年賀状コンテンツでは、flashで画像を一枚ずつ読み込み切り替える構造を作成し
create.jsを使ったコマアニメーションの実装をすることにしました。
画像を軽量化して、テンポを崩さずスムーズに！
次に実装段階で、ローディングに時間がかかってしまう点が、問題になりました。
原因としては、画像の点数や1枚あたりの画像容量が大きいため、軽量化するために画像圧縮をかけて容量を減らすという必要があります。
そこで劣化を極力抑えて、画像圧縮をかけるサービスやソフトを使いました。
高画質なままPhotoshopと比べ物にならないくらいの圧縮ができちゃいます。
→ JPEGmini
→ BTJ32
いかに画質を落とさず、圧縮率を落とし軽量化できるかが
ポイントだったので、上記のサービスを使って色々な圧縮率で調整し無事、画像の軽量化を実現することができました。
一定の速度でのコマ再生だと、一瞬止めて見せたいようなところも一瞬で通り過ぎてしまうので、flash上で一旦止めて見せるなど細かいタイミングも調整。
ということで、試行錯誤の末、無事完成しました。
まとめ
今回の実装方法はflashでの外部読み込みの構造になるため、
画像を後から差し替えやすい点がメリットでした。
また機会があれば、1枚画像をCSSスプライトで移動させる方法も試していきたいと考えています。
CSSスプライトで実現するパラパラアニメ風の演出例
この方法は、画像のリクエストが1回で済むため、通信面での軽量化が見込めます。
ということで、今回はパラパラアニメ風の、コマ送りの画像の制作についての記事をまとめてみました。何かの参考になればいいなと思います。
