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

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

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

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

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組)が参加します。結果ももちろんですが、どのような作品が生み出されるのか、ぜひ注目してみてください。

待ち時間が、クイズ番組に

宅配ピザのドミノ・ピザ|エクセレント・トラッキング・クイズショー

宅配ピザチェーンのドミノ・ピザが運営するドミノオンライン本店で開始された、ピザが出来上がる待ち時間でクイズが楽しめる新感覚コンテンツ「エクセレント・トラッキング・クイズショー」です。

図4 ピザ完成までの時間でクイズを楽しむ「エクセレント・トラッキング・クイズショー」
図4 ピザ完成までの時間でクイズを楽しむ「エクセレント・トラッキング・クイズショー」

『ドミノオンライン本店』で注文完了後に表示されるバナーをクリックすると、実際の店舗とリアルタイムで連動した、注文したピザの調理過程が表示されます。さらに「ピザが完成するまでの時間=クイズの解答制限時間」というルールでクイズが出題されます。

図5 制限時間内にクイズを解答すれば、クーポンがプレゼントされる
図5 制限時間内にクイズを解答すれば、クーポンがプレゼントされる

ユーザーがクイズに正解すると、次回の注文時に使えるクーポンがプレゼントされます。出題されるクイズには4つの難易度があり、最高難度のクイズ「BIG CHALLENGE」に正解すれば、ピザ一年分(ピザ12枚分相当)のクーポンも獲得できます。

「エクセレント・トラッキング・クイズショー」の内容を説明した動画

また、注文回数などに応じて、司会者のコメントや登場するキャラクター、演出が変化する仕組みになっているそうです。

テーマをより深く掘り下げる

各企業の製品やサービスへの関心を高めるため、プロモーションサイトは頻繁にリニューアルされます。その度に、前回とは異なる新しいアイデアや視点から、仕切り直しが行われるのが一般的です。

「エクセレント・トラッキング・クイズショー」以前に、⁠ドミノオンライン本店』で行われていたプロモーションがピザトラッキングショーです。本連載で紹介したこともありますが、ピザが到着するまでの時間を活用した素晴らしい事例です。ただし、ユーザーが何回も利用しているうちに表現に慣れてしまい、プロモーション効果が薄れてしまう"弱点"もありました。

図6 問題が解けないときはTwitterのフォロワーに助けを求めることもできる
図6 問題が解けないときはTwitterのフォロワーに助けを求めることもできる

この"弱点"を解消すべく、⁠エクセレント・トラッキング・クイズショー」では、クーポンという景品を提示することでユーザーのモチベーションを高めています。さらに、ピザ到着までの時間に問題を回答するクイズショー形式を取り入れたことで、積極的にユーザーが集中して参加する仕掛けを作り、待ち時間の質をさらに向上させています。

「ピザ到着までの時間をどう使うか」をさらに追求し、深く掘り下げることで、前回を上回るプロモーション効果を提供しているこのウェブサイト。継続したテーマでプロモーションを行いながら、職人のように質を洗練させる事例は増えてくるのか。常に何らかの変化を求められるウェブサイトの今後のあり方にも注目していきたいと思います。

というわけで、今回も最後まで読んでいただき、ありがとうございました。それでは次回をおたのしみに。

おすすめ記事

記事・ニュース一覧