利用しなくてもここまでのアニメーションが実現できるのか!と実感できるHTML5の事例を紹介いたします。早くからHTML5を採用し、2010~2012年にリリースされたサイトです。1:ユニクロ|UNIQLOOKShttp://uniqlooks.uniqlo.com/Facebookと連動したjavascriptで作られたファッションコミュニティサイトです。ユニクロ商品を身に付けたユーザー自身が投稿するスナップ写真を通じ、グローバルで情報を共有することで世界最大のファッションコミュニティサイトを目指しているようです。Experimenthttp://9elements.com/io/projects/html5/canvas/ゲーム、WEBサイトの制作会社が作ったHTML5を利用した実験的なサイトです。HTML5に関連するツイートを読み取り、粒で表示されています。粒はマウスに反応し、クリックするとツイートが表示されます。ツイートの中に日本語からの投稿も含まれていました。3:canvasmolhttp://alteredqualia.com/canvasmol/分子構造を確認できるサイトです、HTML5でアニメーションはここまでできるのかと実感したサイトです。iPhoneからでも見ることができますが、アニメーションの数を増やしていくとやはり、速度は遅くなります。Singinghttp://roxik.com/mona/こちらも同じく、HTML5のアニメーションの可能性を確認できたサイトです。モナリザや写楽の顔を引っ張って変形することができます。スマートフォンでも問題無く見ることができます。Shodo/書道http://www.theshodo.com/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/言わずと知れたカヤックの制作。CSSアニメーションとHTML5を活用して作成されたという9種類のゲームが楽しめるWebコンテンツ集、昨年夏ロンドンオリンピックを前に作られたものです。それぞれのゲームは面白くてちょっとはまりました。キーボード連打でタイムを競ったり、画面解像度で砲丸投げの距離を測ったりアイデアも素晴らしいですが、これがCSSアニメーションやJSライブラリ、HTML5の技術で開発したとは驚きです。「ラムダッシュ」のブランドコンセプトや歴史、開発者のインタビューを紹介するプロダクトサイト。canvasを使ってDNAの曲線を表現しています。なめらかで美しい動きは圧巻です。多少の動きは違えどスマートフォンでも同じように見えました。Webhttp://beta.theexpressiveweb.com/アドビが立ち上げたHTML5やCSS3の機能を使ったサンプルサイトです。ブラウザのサポート状況や該当機能を利用した他事例、チュートリアルまで用意されています。Flashのようなアニメーション、デザインも素晴らしい。レスポンシブにも対応しており、スマートフォン、iPadなどでも見ることが出来るのはさすがですね。言え、スマホの画面サイズで見るのは少々物足りないです。CodePenhttp://codepen.io/peterwestendorp/full/JEomiCSS3で作ったトンネルです。色のグラデーション、どこまでも続くトンネル、このままどこかに連れて行かれるような感覚になる、とても美しいサイト。スマートフォンでもPCと同様に美しく見えました。Designerhttp://dotmick.com/フランス人デザイナーのポートフォリオサイト。最近流行っているサークル(円)を使用。デザイン上のワンポイントというだけでなく、ナビゲーションとしてサークルを利用していますが、マウスオーバー時やページ遷移時の効果が面白い。トップページのみレスポンシブ対応されており、サークルが縦に並んで見えましたが、下層ページはPCサイトと同じでした。HTML5http://www.effectgames.com/demos/canvascycle/256色の8bitカラーで描かれた絵をHTML5で動的に再現。canvas要素を使用しています。川の流れ、波の動きなどのアニメーション効果が施されており、スピードを変えられるというオプションも。ドット絵とは思えない美しい絵がたくさん用意されています。スマートフォンでもPCと同様に見れました。1900-2000」のオンライン版です。玩具やポスターなど、子供にまつわるデザインを年代別に集めてあります。子供のテクテク歩く姿がかわいらしいです。レスポンシブデザインではなく、スマホ用トップページが用意されていましたが、PCページのような効果や詳細ページ、PCページへの導線も無く残念でした。canvas要素を使用したツール、マウスの奇跡が描画され、描画されたものは画像として保存も出来ます。スマホではサイトとしては見えるものの、PCサイトのように描画は出来ませんでした。Toyhttp://sketchtoy.com/こちらもcanvas要素を使用したツールSketchToy、まさにスケッチブック。自由にお絵描き出来る描画ツールです。ツールの太さや色が変えられるのですが、VIBRATIONの値を変更すると、絵がブルブル震えて面白い。SAVEをクリックするとURLが記録され、ブルブルもしっかり保存されていました。http://sketchtoy.com/29544809PCサイトがスマホでも同じように見え、同じように描画出来ましたが、若干横幅が足りずメニューが全て見えませんでした。横にずらそうとすると描画されてしまうのでうまく横スクロールが出来ませんでした。Chromeチームが制作したHTML5で表現された電子書籍。インターネットやWebの基礎をイラスト付きで楽しく学べるガイドブックです。デザインはもちろん、ページめくりのアニメーション効果も、まさに本物の絵本のよう。多言語対応で日本語でも読むことが可能です。これらの技術はオープンソースとして公開しているようです。スマホでもPCサイトが同じように見ることが出来ましたが、そのままのサイズで見えている為、スマホでの閲覧は小さくて厳しいかなという印象でした。Kitchenというケーキ屋さんのサイト。卵を割る工程から、ケーキが出来るまでを手書きイラストで紹介。可愛らしいアニメーションが入っていたり、キーボードで遊べたりあちこちに楽しい仕掛けがあり楽しいサイトです。VERSIONが作成されていました。スマホで可愛いイラストやアニメーションが見れないのは残念。wavehttp://modern-carpentry.com/workshop/html5/waveform/ウエーブする破線の、広さ、波長などの効果をスライダーで変更することが出来ます。スマホでも同じように見えましたが、スライダーを動かすのが難しく効果を変更することは出来ませんでした。experimenthttp://spielzeugz.de/html5/liquid-particles.html英国に拠点を置くエンジニアにおける実験サイト。鮮やかな色のドットがマウスポインタに集まり追いかけてきては弾けます。ドラッグすると、鮮やかな世界が広がり、とてもキレイです。スマホでもページとしては同じように見えましたが、マウスを追いかける等のアクションは表現されていませんでした。–PC向けの特設サイトや、試験的に制作されたサイトだからでしょうか、2010年、2011年と少し古いものもあったからかもしれませんが、レスポンシブ対応という観点で言うと、18件中1件が対応、5件がスマホでも問題無く閲覧できる程度にとどまりました。次の記事では、毎年リニューアルされトレンドが盛り込まれる採用サイトの事例から、HTML5とレスポンシブWebデザインの事例を見ていきたいと思います。