いま,見ておきたいウェブサイト

第16回 HTML5 Canvas and Audio Experiment,Marunouchi.com,NHK 戦争証言アーカイブス トライアルサイト

この記事を読むのに必要な時間:およそ 2 分

朝晩がすっかり涼しくなり,秋に一歩ずつ近づいているなあと感じながら,そういえば大型連休中はどうしようかと考えている今日このごろ,いかがお過ごしでしょうか。今回も個人的に感じた素晴らしいサイトの特徴を,いくつかお話したいと思います。

「HTML 5+JavaScript」の合わせ技

『HTML5 Canvas and Audio Experiment』

ドイツの9elementsによる,『HTML5 Canvas and Audio Experiment』(直訳:HTML 5のcanvasとaudioの実験)です。

図1 円形のオブジェクトがダイナミックな動きを見せる

図1 円形のオブジェクトがダイナミックな動きを見せる

credit: 9elements

音楽とともに,色の着いた円形のオブジェクトが粒子となって拡散したり,さまざまな形を作ったりと,非常にスムーズでダイナミックな動きを行います。また,円形のオブジェクトをクリックすると,HTML5に関連する100のtwitterの発言とリンクが表示されます。

図2 HTML5に関するtwitterの発言も表示される

図2 HTML5に関するtwitterの発言も表示される

HTML 5の新要素であるCanvas要素やaudio要素,processing.js(ブラウザ上でプログラミング言語Processingが実行できる),Modernizr(ブラウザがCSS3の各種属性に対応しているかを確認できる)などの各種JavaScriptライブラリを使うことで,「Flashを使っているな」と思わせるウェブサイトを作りあげています。

HTML 5とJavaScriptの進歩

『HTML5 Canvas and Audio Experiment』で欠かせない技術であるHTML 5ですが,まだドラフト(草案)段階であるにもかかわらず,すでに主要なブラウザ(Internet Explorerを除く)の最新版やベータ版で,新しい要素・属性が実験的に実装されています。

また,もう一方のJavaScriptについても,Googleが自社開発したブラウザChromeのJavaScriptエンジンの速さをアピールするためのウェブサイトChrome Experimentsを公開するなど,JavaScriptライブラリを使う上で最も重要な「JavaScriptの実行速度の速さ」について,主要なブラウザ間で競い合いが始まっています。

図3 JavaScriptで制作されたコンテンツが並ぶChrome Experiments

図3 JavaScriptで制作されたコンテンツが並ぶChrome Experiments

その他にも,HTML 5で携帯端末でもPCでも同じように利用できるAPI(アプリケーション・プログラミング・インターフェース)が提供されることなどを考えれば,「HTML 5+JavaScript」という組み合わせは,まずウェブアプリケーションやウェブサービス(例:HTML 5とJavaScriptで構成されたYouTubeのデモサイトを中心に大きな変化を起こすだろうと予想できます。

とはいえ,"新たな表現技術の一つ"として考えれば,今回紹介した『HTML5 Canvas and Audio Experiment』のような,新しいアイデアを実現する方法として活用される例も出てくるでしょう。「動きのあるウェブサイト=Flash」という考え方を大きく変化させる可能性を持つ,HTML 5とJavaScriptの組み合わせに今後も注目です。

コンテンツ,自由自在

『Marunouchi.com』

三菱地所株式会社が運営している,大手町・丸の内・有楽町エリアの情報コミュニティサイト『Marunouchi.com』です。

図4 グリッドレイアウトが印象的なトップページ

図4 グリッドレイアウトが印象的なトップページ

スッキリとしたグリッドレイアウトによるデザインを基本に,さまざまなジャンルの記事やコラム,イベント紹介などを中心とした情報を発信しています。

図5 食べ物からエリアのガイドまで,多彩な情報を用意

図5 食べ物からエリアのガイドまで,多彩な情報を用意

トップページでは,ブラウザのウィンドウサイズに合わせてコンテンツが可変する,リキッドレイアウトが採用されています。このような表現を行う場合,Flashが使用されることが多かったのですが,このウェブサイトでは複数のJavaScriptライブラリを使うことで,リキッドレイアウトを実現しています。

図6 ウィンドウ幅に応じて,コンテンツがスムーズに可変する

図6 ウィンドウ幅に応じて,コンテンツがスムーズに可変する

ネットブックが変えるもの

私の運営するBlogのアクセス解析で最近目立つのが,「1024x600」,「1024x576」といった画面の解像度をもつ,"ネットブック"と呼ばれるPCのアクセスです。

ネットブックとは,基本的なインターネットサービス(ウェブサイトの閲覧やメールなど)を利用することに特化した,小型軽量で安価なノートPCの総称です。ここ数年,日本でも爆発的に出荷台数を伸ばしており,アメリカの調査会社DisplaySearchによれば,世界の2009年のネットブックの出荷台数は前年比99.1%増の約3300万台,ノートPC市場全体のシェアは20%にまで拡大する見通しです。

このため,今後ネットブックのシェアが拡大することによって,"画面の解像度が低い","CPUの処理能力が高くない"という,ネットブックの持つ基本的なスペックを考慮したウェブサイトを制作する必要が出てくるでしょう。

そんな中で"今年大流行の兆し"を見せているのが,リキッドレイアウトを用いたアプローチです。処理能力の低いマシンでも比較的動作が軽く,コンテンツの表示やデザインも画面の解像度に左右されないこのやり方は,ネットブックにも対応するウェブサイトを作る場合,まず考えられる方法の一つとなっていくかもしれません。

どんな時でも,ユーザーはストレスがなく,素早くアクセスできるウェブサイトを求めます。その期待に応えながら、ウェブサイトでどのような表現をしていくのか。そんな制作者のさまざまな工夫と知恵を,今後も期待していきたいと思います。

著者プロフィール

Lançamento(ランサメント)

国内外のウェブサイトを日々紹介する Blog『Lançamento』を運営する,自称“フリーランスという名の無職”。目指すは“エクスペリエンスデザイナー”(O'REILLY『Web情報アーキテクチャ』11ページ参照)。2008年の“ジェフの奇跡的な残留”を目の前で見たサッカー好き。

コメント

コメントの記入