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

第51回 Attraction,Elect-LO-nica Compilation,Art Project, powered by Google

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

時折吹く冷たい風と目とノドにしみる花粉のおかげで,うれしいような,うれしくないような春の近づきを感じる今日このごろ,皆様いかがお過ごしでしょうか。今回も個人的に感じた,素晴らしいサイトの特徴をいくつかお話したいと思います。

アニメーションという"魅力"

Attraction

フランスのINPES(Institut national de prevention et d'education pour la sante:国立健康教育・疾患予防研究所)による,インタラクティブ・アニメーションを使ったキャンペーンサイト『Attraction / 魅力』です。

図1 クオリティの高いアニメーションが印象的な『Attraction』

図1 クオリティの高いアニメーションが印象的な『Attraction』

credit:DDB Parisunit9TYO Productions Inc.STUDIO4℃THE

ウェブサイトで展開されるアニメーションでは,2040年の東京を舞台に,奇妙なダイヤモンド型のアイテムを手に入れた3人の若者が,ある「Attraction」を通じて,成長していく姿が描かれます。

図2 アニメーション内では,ウェブカメラやマウスを使うシーンもある

図2 アニメーション内では,ウェブカメラやマウスを使うシーンもある

ユーザーは,ウェブカメラを利用したアクションや,マウスを使いながら物語を進めていきます。Facebookと連携しているほか,Flashの利用ができなくても楽しめるAccessible Versionや,アニメーション終了後にダウンロードできる「Comic」⁠PDFファイル)も用意されています。

興味を持たせる流れを作る

「16才未満の子供は学校で喫煙してはならない」と法律で定められているフランスでは,2008年には「公共の場における全面的禁煙」が施行されるなど,国を挙げての禁煙活動が進んでいます。しかし,INPESによる2010年の調査では,15-19才の男子で25.7%,女子で20.1%が喫煙しており,10代の若者の喫煙率は依然高いままです。

この『Attraction / 魅力』は,禁煙を啓蒙しているウェブサイトです。まじめな内容を含むために,ウェブサイト上の表現も固くなりがちですが,アニメーションとソーシャルメディアを入口として,10代の若者に興味を持ってもらおうという工夫が感じられます。

図3 終了後には,タバコの害や禁煙に関するコンテンツへのリンクが表示される

図3 終了後には,タバコの害や禁煙に関するコンテンツへのリンクが表示される

日本における禁煙の啓蒙活動は,毎年5月31日の「世界禁煙デー」⁠⁠禁煙週間」が有名でしょう。2010年は厚生労動省が中心となり,ポスターなどによる広報,アイドルを招いてのシンポジウムなどが行われていますが,実際の活動内容をしっかりと国民に伝えられるかについては疑問が残ります。

ソーシャルメディアが一般化する現在では,見てもらう機会を作り,そこから人を動かし,拡散させていくという流れをどう作るかが重要な課題となっています。もちろん,自発的に広がりを見せる魅力的なコンテンツを用意することは言うまでもありませんが,2011年もやってくる「世界禁煙デー」に,今度はどのような活動が行なわれるのか注目したいと思っています。

個性的で,なめらかな連動

Elect-LO-nica Compilation | Bunkaikei Records

茜新社の漫画雑誌「COMIC LO」と,オンライン・レーベルのBunkai-Kei recordsのコラボレーションから生まれたコンピレーション・アルバムのスペシャルサイト,⁠Elect-LO-nica Compilation』です。

図4 コンピレーション・アルバムの特設サイト,⁠Elect-LO-nica Compilation』

図4 コンピレーション・アルバムの特設サイト,『Elect-LO-nica Compilation』

credit:cooked.jp

画面左上のナビゲーションから各項目を選択すると,画面が大きく縦にスクロールしながら,背景画像が動き始め,コンテンツに合わせたレイアウトを形成していきます。この画像とスクロールのなめらかな連動が,非常に印象に残るウェブサイトです。

図5 スクロールに合わせた,なめらかな背景画像の動きが印象的

図5 スクロールに合わせた,なめらかな背景画像の動きが印象的

なお,⁠少女とエレクトロニカ」をテーマとしてウェブサイトで提供されている曲(16アーティストによる18曲)は,すべて無料で試聴・ダウンロードできます。

次第に個性を見せはじめたHTMLベースのウェブサイト

一般的に,豊かな表現を求めるのであれば「Flash」⁠情報へのアクセスを優先すれば「HTML」を中心に組み立てるというのが,ウェブサイトにどちらの技術を使用するかの判断材料のひとつとなっていましたが,ここにきて,表現力を高めたHTMLベースのウェブサイトが次々と登場しています。

図6 ニューヨークの地下鉄システムをビジュアライズした『MTA.ME』

図6 ニューヨークの地下鉄システムをビジュアライズした『MTA.ME』

図7 2011年のSXSW(サウス・バイ・サウスウェスト)で行われるビアパーティーの告知サイト『BeerCamp at SXSW 2011』

図7 2011年のSXSW(サウス・バイ・サウスウェスト)で行われるビアパーティーの告知サイト『BeerCamp at SXSW 2011』

上記のMTA.MEBeerCamp at SXSW 2011では,JavaScriptライブラリのjQuery,HTML5,CSS3といった技術を用いて,個性的で面白い表現を実現しています。

表現が向上したとはいえ,まだまだFlashのようなリッチな表現には追いついていませんが,制限がある中での表現を追求することで,Flashとは異なった,新しい表現が生まれてくる可能性を秘めています。

ブラウザの表現環境が整ってきたことで,新しい技術に関するノウハウも次第に増えてきています。今後,Flashとは異なる技術が,私たちの前にどんな表現を登場させてくれるのか。また,その表現がFlashにどのような影響を与えていくのか,注目していきたいと思います。

著者プロフィール

Lançamento(ランサメント)

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

コメント

コメントの記入