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

第59回 Fit for My Life ワコール GIRLS ROOM,Close The Annotation,EXCELLENT TRACKING QUIZ SHOW!

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

スッキリしないお天気とじめじめとした湿気に,改めて太陽のもつ力の大きさを感じる今日このごろ,皆様いかがお過ごしでしょうか。今回も個人的に感じた,素晴らしいサイトの特徴をいくつかお話したいと思います。

ドラマでつくる,みんなの部屋着

Fit for My Life ワコール GIRLS ROOM

衣料品メーカーのワコールによる「みんなの部屋着づくり」を開発・生産するプロジェクト,⁠Fit for My Life ワコール GIRLS ROOM』です。

図1 リニューアルされたワコールの『Fit for My Life ワコール GIRLS ROOM』

図1 リニューアルされたワコールの『Fit for My Life ワコール GIRLS ROOM』

ウェブサイトでは,3人の女性による日常を舞台としたドラマが展開されています。このドラマに登場する占いやアンケートにユーザーが答えることで,意見を反映した秋冬用の部屋着を完成させていくプロジェクトです。なお,このプロジェクトで完成した商品は,ワコールの通販サイト「ワコールウェブストア」で販売される予定だそうです。

HTML5+CSS3+JavaScriptはプロモーションを変えるか

『Fit for My Life ワコール GIRLS ROOM』では,各コンテンツへのリンクなど,動きのあるアイテムが表示されています。そのため「Flashが使われている」と思ってしまいますが,実際にはJavaScriptを中心にウェブサイトが組み立てられています。

この事例の実現の要因として,まずCSS3の使用やjQueryのようなJavaScriptライブラリの充実が挙げられるでしょう。また最近では,Adobeによるアニメーションツール「Edge」やFlashからHTML5のアニメーションへと変換するツールWallaby」⁠Macintosh用のアプリケーションHypeなど,⁠Flashの対抗馬」といわれるHTML5の開発環境も少しずつ整い始めています。

図2 HTML5を利用して制作されたVJアプリ「Fi-VJ」

図2 HTML5を利用して制作されたVJアプリ「Fi-VJ」

credit:Akira Fukuoka

HTML5の特徴でもあるcanvas要素やvideo要素などを利用して,個人レベルで十分な機能を備えたアプリケーションなどが制作されている現状を考えれば,これから先,今までFlashが担っていた制作領域の一部分を,HTML5が担当していくのは間違いないでしょう。

各ブラウザでの互換性や表現の豊かさなど,Flashと比較するともの足りない部分もありますが,今後プロモーションサイトでもこうした事例が増えていくのか,注目していきたいところです。

クリックが世界を変える

Close The Annotation

1919年にイギリスで設立され,子どもの権利保護のための活動を行っているNGO(非政府組織)であるSave the Childrenをテーマとした動画,⁠Close The Annotation(アノテーションを閉じてください)⁠です。

Save the Childrenによる「Close The Annotation」

credit:Shachar Aylon

動画を再生すると,YouTubeのアノテーション機能を使った"ネガティブな意味を持つ言葉"が表示されます。クリックしてその言葉を消すと,代わりに"ポジティブな意味を持つ言葉"が登場します。

次々とクリックを続けて言葉を消していくと,最後に"A SINGLE CLICK CAN HELP CHANGE THE WORLD. Help us sign an online petition and save millions of mothers and their children"(クリックは世界を変えられる。たくさんの母親とその子どもを助けるため,オンラインの署名をお願いします)というメッセージとリンクが表示されます。

表示されたリンク先は,Save the Childrenが行っている世界のリーダーに保健医療労働者(医師や看護師,薬剤師など)への訓練と支援を呼びかけるオンライン署名となっています。

"制限時間"から生まれるアイデア

「クリックが"ネガティブ"を"ポジティブ"へと変化できる」とメッセージとシンプルな仕掛けが印象的な「Close The Annotation」ですが,お金と時間をかけずとも,アイデアを生かすことで,こうした強いメッセージをもつコンテンツも制作できるという,ウェブの面白さと奥深さを感じることができる事例ではないでしょうか。

図3 YouTubeの公式チャンネル「The 48 Hour YouTube Cannes Young Lions Ad Contest」

図3 YouTubeの公式チャンネル「The 48 Hour YouTube Cannes Young Lions Ad Contest」

この作品は,2011年の「Cannes Young Lions Competition」のFilm部門への参加権が獲得できるThe 48 Hour YouTube Cannes Young Lions Ad Contestのために制作されたものです。

「Cannes Young Lions Competition」は,"会場で提示された課題をもとに,規定時間内で作品を制作する"という厳しいルールで行われる競争のため,どの部門(Cyber,Film,Media,Print,Young Marketersの5つ)でも,⁠Close The Annotation」のようなアイデアあふれる作品が生み出されます。

今年の「Cannes Young Lions Competition」のCyber部門にも,世界一を目指し,日本から代表チーム(28歳以下の2名1組)が参加します。結果ももちろんですが,どのような作品が生み出されるのか,ぜひ注目してみてください。

著者プロフィール

Lançamento(ランサメント)

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

コメント

コメントの記入