伊勢丹のHTML5クリスマススペシャルコンテンツがすごい

Posted by admin at 17:14 日時 2010/11/18

伊勢丹のサイトで公開されているクリスマススペシャルコンテンツが話題です。この美しく魅力的なイラストが動き、絵本のようにストーリーが展開されます。イラストのラブリーさだけでも必見モノなのですが、このコンテンツ、フルFlashのように見えて実はHTML5で構築されています。まずはご覧あれ。

この記事を書いている時点ではIEでちょっと問題があるようですが、モダンブラウザであれば表示できます。ソースを見る限りiPadで閲覧するのに最適化されているみたいですね。もちろんiPhoneでもアニメーション・映像ともに閲覧に問題ありませんでした。音楽が鳴らないのがちょっと残念。

ドアが開いたりホッキョクグマが動くアニメーション自体はjQueryのエフェクトで書かれていますので、これはHTML5でなくても実現可能です。このコンテンツでは横移動しかしていませんが、回転したり拡大縮小することもjQueryを使えば割と簡単にできちゃいます。

HTML5ならではだなーと思うのは<audio>タグと<video>タグを使った、コンテンツ内への音楽と映像の埋め込みですね。やはり音声と映像が加わることでキャラクターが何倍も活き活きとしてきますよね！

ノウハウが蓄積されていけばこういったリッチコンテンツがより短期間に、さまざまなデバイスで閲覧できる形式で公開できるようになると思います。引き続きHTML5による新しい試みと普及に注目です！

最近HTML5関連で気になった記事

Blog