HTML5事例/Flashを使わなくてもここまで表現できる

今回はFlash を利用しなくてもここまでのアニメーションが実現できるのか!と実感できるHTML5の事例を紹介いたします。早くからHTML5を採用し、2010~2012年にリリースされたサイトです。

1:ユニクロ|UNIQLOOKS
http://uniqlooks.uniqlo.com/
02
Facebookと連動したjavascriptで作られたファッションコミュニティサイトです。ユニクロ商品を身に付けたユーザー自身が投稿するスナップ写真を通じ、グローバルで情報を共有することで世界最大のファッションコミュニティサイトを目指しているようです。

2:HTML5 Experiment
http://9elements.com/io/projects/html5/canvas/
03
ゲーム、WEBサイトの制作会社が作ったHTML5を利用した実験的なサイトです。HTML5に関連するツイートを読み取り、粒で表示されています。粒はマウスに反応し、クリックするとツイートが表示されます。ツイートの中に日本語からの投稿も含まれていました。

3:canvasmol
http://alteredqualia.com/canvasmol/
04
分子構造を確認できるサイトです、HTML5でアニメーションはここまでできるのかと実感したサイトです。iPhoneからでも見ることができますが、アニメーションの数を増やしていくとやはり、速度は遅くなります。

4:Mona Lisa Singing
http://roxik.com/mona/
05
こちらも同じく、HTML5のアニメーションの可能性を確認できたサイトです。モナリザや写楽の顔を引っ張って変形することができます。スマートフォンでも問題無く見ることができます。

5:The Shodo/書道
http://www.theshodo.com/
06
2010年にIE9の可能性を伝えるためにbAが制作したサイトです。
(記事参照:http://www.itmedia.co.jp/pcuser/articles/1009/17/news043_5.html
Web上で書道が楽しめるのですが、非常にスムーズに筆運びが出来、なかなかの文字が書けます。BGMも「和」のムード満点です。IE10をインストールして、とFunctionが出ましたが、Chromeでも問題無く動きました。サクサク気持ちよく書けました。

6:カヤック|HTML5杯
http://html5cup.kayac.com/
07
言わずと知れたカヤックの制作。CSSアニメーションとHTML5を活用して作成されたという9種類のゲームが楽しめるWebコンテンツ集、昨年夏ロンドンオリンピックを前に作られたものです。それぞれのゲームは面白くてちょっとはまりました。
キーボード連打でタイムを競ったり、画面解像度で砲丸投げの距離を測ったりアイデアも素晴らしいですが、これがCSSアニメーションやJSライブラリ、HTML5の技術で開発したとは驚きです。

7:パナソニック|LAMDASH DNA
http://panasonic.jp/lamdash/dna/
08
メンズシェーバー 「ラムダッシュ」のブランドコンセプトや歴史、開発者のインタビューを紹介するプロダクトサイト。canvasを使ってDNAの曲線を表現しています。
なめらかで美しい動きは圧巻です。多少の動きは違えどスマートフォンでも同じように見えました。

8:アドビ|The Expressive Web
http://beta.theexpressiveweb.com/
09
アドビが立ち上げたHTML5やCSS3の機能を使ったサンプルサイトです。ブラウザのサポート状況や該当機能を利用した他事例、チュートリアルまで用意されています。
まるでFlashのようなアニメーション、デザインも素晴らしい。当然レスポンシブにも対応しており、スマートフォン、iPadなどでも見ることが出来るのはさすがですね。とは言え、スマホの画面サイズで見るのは少々物足りないです。

9:Tunnel vision 3D CSS – CodePen
http://codepen.io/peterwestendorp/full/JEomi
Tunnel vision 3D CSS - CodePen
CSS3で作ったトンネルです。色のグラデーション、どこまでも続くトンネル、このままどこかに連れて行かれるような感覚になる、とても美しいサイト。
スマートフォンでもPCと同様に美しく見えました。吸い込まれそうです。

10:Mickaël Larchevêque – Interactive Designer
http://dotmick.com/
Mickaël Larchevêque - Interactive Designer
フランス人デザイナーのポートフォリオサイト。
最近流行っているサークル(円)を使用。デザイン上のワンポイントというだけでなく、ナビゲーションとしてサークルを利用していますが、マウスオーバー時やページ遷移時の効果が面白い。トップページのみレスポンシブ対応されており、サークルが縦に並んで見えましたが、下層ページはPCサイトと同じでした。

11:Canvas Cycle: True 8-bit Color Cycling with HTML5
http://www.effectgames.com/demos/canvascycle/
Canvas Cycle: True 8-bit Color Cycling with HTML5
256色の8bitカラーで描かれた絵をHTML5で動的に再現。canvas要素を使用しています。川の流れ、波の動きなどのアニメーション効果が施されており、スピードを変えられるというオプションも。ドット絵とは思えない美しい絵がたくさん用意されています。
スマートフォンでもPCと同様に見れました。

12:MoMA | Century of the Child
http://www.moma.org/interactives/exhibitions/2012/centuryofthechild/
MoMA | Century of the Child
ニューヨーク近代美術館(MoMA)で開催された、子供のためのデザインを集めた展覧会「Century of the Child: Growing by Design 1900-2000」のオンライン版です。玩具やポスターなど、子供にまつわるデザインを年代別に集めてあります。子供のテクテク歩く姿がかわいらしいです。
レスポンシブデザインではなく、スマホ用トップページが用意されていましたが、PCページのような効果や詳細ページ、PCページへの導線も無く残念でした。

13:Sketchy Structures: HTML5 Canvas – the works and portfolio of Jay Weeks
http://jayweeks.com/sketchy-structures-html5-canvas/
Sketchy Structures: HTML5 Canvas - the works and portfolio of Jay Weeks
デザイナーJay Weeksの作品。canvas要素を使用したツール、マウスの奇跡が描画され、描画されたものは画像として保存も出来ます。
スマホではサイトとしては見えるものの、PCサイトのように描画は出来ませんでした。

14:Sketch Toy
http://sketchtoy.com/
Sketch Toy
こちらもcanvas要素を使用したツールSketchToy、まさにスケッチブック。自由にお絵描き出来る描画ツールです。ツールの太さや色が変えられるのですが、VIBRATIONの値を変更すると、絵がブルブル震えて面白い。SAVEをクリックするとURLが記録され、ブルブルもしっかり保存されていました。
http://sketchtoy.com/29544809
PCサイトがスマホでも同じように見え、同じように描画出来ましたが、若干横幅が足りずメニューが全て見えませんでした。横にずらそうとすると描画されてしまうのでうまく横スクロールが出来ませんでした。

15:20 Things I Learned About Browsers and the Web
http://www.20thingsilearned.com/ja-JP/home
20 Things I Learned About Browsers and the Web
Google Chromeチームが制作したHTML5で表現された電子書籍。インターネットやWebの基礎をイラスト付きで楽しく学べるガイドブックです。デザインはもちろん、ページめくりのアニメーション効果も、まさに本物の絵本のよう。多言語対応で日本語でも読むことが可能です。ライトのオンオフの変更、拡大縮小、印刷機能などなど、とても良く出来ています。これらの技術はオープンソースとして公開しているようです。
スマホでもPCサイトが同じように見ることが出来ましたが、そのままのサイズで見えている為、スマホでの閲覧は小さくて厳しいかなという印象でした。

16:The Production Kitchen
http://www.jacquico.com/
The Production Kitchen
The Production Kitchenというケーキ屋さんのサイト。卵を割る工程から、ケーキが出来るまでを手書きイラストで紹介。可愛らしいアニメーションが入っていたり、キーボードで遊べたりあちこちに楽しい仕掛けがあり楽しいサイトです。スマホ用にLITE VERSIONが作成されていました。スマホで可愛いイラストやアニメーションが見れないのは残念。

17:modern carpentry rides the html5 canvas wave
http://modern-carpentry.com/workshop/html5/waveform/
modern carpentry rides the html5 canvas wave
ウエーブする破線の、広さ、波長などの効果をスライダーで変更することが出来ます。スマホでも同じように見えましたが、スライダーを動かすのが難しく効果を変更することは出来ませんでした。

18:Liquid Particles – spielzeugz.de canvas experiment
http://spielzeugz.de/html5/liquid-particles.html
Liquid Particles - spielzeugz.de canvas experiment
英国に拠点を置くエンジニアにおける実験サイト。鮮やかな色のドットがマウスポインタに集まり追いかけてきては弾けます。ドラッグすると、鮮やかな世界が広がり、とてもキレイです。スマホでもページとしては同じように見えましたが、マウスを追いかける等のアクションは表現されていませんでした。

PC向けの特設サイトや、試験的に制作されたサイトだからでしょうか、2010年、2011年と少し古いものもあったからかもしれませんが、レスポンシブ対応という観点で言うと、18件中1件が対応、5件がスマホでも問題無く閲覧できる程度にとどまりました。
次の記事では、毎年リニューアルされトレンドが盛り込まれる採用サイトの事例から、HTML5とレスポンシブWebデザインの事例を見ていきたいと思います。