ぱないの！ 土橋です。 今回は、以前までならFlashでしか作れなかったような動きをHTML5で作ったサイトをご紹介します。 IEもバージョンが上がるごとにHTML5に対応してきましたので、やはり外せない要素となります。 まずはどんなことができるのか、見てみましょう。

ライフ・オブ・パイ

映画「ライフ・オブ・パイ」の特設サイトです。 背景の映像が使用されている他、再生・停止ボタンなど各所に細かい動きが付いています。

• http://www.lifeofpimovie.com

MyProvence Festival

こちらも映像が使用されており、音楽も再生されます。癒されます。

• http://www.myprovence.fr/snapshots2012/en/

RAIZIN COOL

エナジードリンクのランディングページです。 缶の周りにリアルな冷気が表現されています。 ちなみにこのページを制作した会社の方が解説とサンプルを公開してくれています。こちらから。

• http://raizin-japan.com/cool/

Fireworks

自分の入力した文字が花火になります。花火のスピードや重力なども調整することができます。残念ながら英語だけです。

• http://js-fireworks.appspot.com/

ウェブの進化

Webの進化が年表でわかるすごいサイト。Web制作者は一読するべきサイトかもしれません。

• http://www.evolutionoftheweb.com

まとめ

今回はほんの一部ですが、開発者はmustになってくると思います。 canvasで図形を描いたり、css3で図形を動かしたりできるというのはWebだからこそですね。 2、3年前からインブラウザデザイン（英語だとDesigning in the browser）が制作フローとして使用され始めており、Photoshopでデザインをする時代が終わってしまうかもしれません。 インブラウザデザインについてはこちらが参考になります 常に進化するWebに、制作者も対応しなければ時代遅れの人になってしまいます。 僕はデザイナーとしても、コーダー（フロントエンジニア？）としても働いていきたいのでどっちにしろ新しい言語は覚えなければいけないのですが、「デザイナーとしてやっていきたい」という人もWebに限ってはPhotoshopやFireworksだけ使えればいいという考えは危険なのかもしれません。