動きが面白い・かっこいいHTML5で作られたサイト5選

ぱないの!

土橋です。

今回は、以前までならFlashでしか作れなかったような動きをHTML5で作ったサイトをご紹介します。

IEもバージョンが上がるごとにHTML5に対応してきましたので、やはり外せない要素となります。

まずはどんなことができるのか、見てみましょう。

ライフ・オブ・パイ

映画「ライフ・オブ・パイ」の特設サイトです。

背景の映像が使用されている他、再生・停止ボタンなど各所に細かい動きが付いています。

LIFE OF PI - Available Now on 3D Blu-ray, Blu-ray, DVD, and Digital HD

MyProvence Festival

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

MyProvence Festival - 3ème édition - 2012

RAIZIN COOL

エナジードリンクのランディングページです。
缶の周りにリアルな冷気が表現されています。

ちなみにこのページを制作した会社の方が解説とサンプルを公開してくれています。こちらから。

メンソール系 氷冷エナジードリンク RAIZIN COOL  RAIZIN - ENERGY DRINK

Fireworks

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

js-fireworks - JavaScript Fireworks - A Chrome Experiment

ウェブの進化

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

ウェブの進化

まとめ

今回はほんの一部ですが、開発者はmustになってくると思います。

canvasで図形を描いたり、css3で図形を動かしたりできるというのはWebだからこそですね。

2、3年前からインブラウザデザイン(英語だとDesigning in the browser)が制作フローとして使用され始めており、Photoshopでデザインをする時代が終わってしまうかもしれません。

インブラウザデザインについてはこちらが参考になります

常に進化するWebに、制作者も対応しなければ時代遅れの人になってしまいます。

僕はデザイナーとしても、コーダー(フロントエンジニア?)としても働いていきたいのでどっちにしろ新しい言語は覚えなければいけないのですが、「デザイナーとしてやっていきたい」という人もWebに限ってはPhotoshopやFireworksだけ使えればいいという考えは危険なのかもしれません。