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

第2回HAPPY NEW YEAR '09、株式会社コルテックス、Cam with me(カム ウィズ ミー)

本格的な朝晩の厳しい冷え込みにより、毎朝"二度寝の誘惑"と戦う今日このごろ、いかがお過ごしでしょうか。今回も個人的に感じた素晴らしいサイトの特徴を、いくつかお話したいと思います。

いつもと違う現実世界

『HAPPY NEW YEAR '09』

HAPPY NEW YEAR '09は、AID-DCC Inc.KATAMARI Inc.による、2009年の年賀コンテンツです。

図1 HAPPY NEW YEAR '09のトップページ
図1 HAPPY NEW YEAR '09のトップページ
credit: AID-DCC Inc., KATAMARI Inc.

四角形の黒い枠で作られたマーカーの書かれた年賀状、またはサイトでダウンロードできるPDFファイルを印刷して用意し、ウェブカメラを通して、サイト内に映し出します。すると認識されたマーカー部分が沈み込み、そこからテキストやグラフィックなど、いろいろなモノが飛び出してきます。

図2 黒い枠で作られたマーカー部分
図2 黒い枠で作られたマーカー部分

サイトでは環境の整わない方のために、実際にどうなるのかを撮影したデモムービーも用意されています。映像の中では、一度に複数のマーカーを表示させたり、体にマーカーをマジックで書いたりと、さまざまなパターンが用意されており非常に面白いです。

図3 サイトではデモムービーも用意されている
図3 サイトではデモムービーも用意されている

とはいえ、実在しないものが、そこにあるかのように見えるこの不思議な感覚。ぜひウェブカメラを用意して、実際に体験してもらいたいと思います。

ARって何ですか?

さて、このサイトを語る上で外せない技術がAR(Argumented Reality/拡張現実)です。すなわち、現実世界に情報を付け加えることができる技術です。

このAR研究のために、加藤博一さん(現:奈良先端科学技術大学院大学教授)とアメリカ・ワシントン大学HIT(Human Interface Technology)研究室によって開発されたARToolKitというC言語のライブラリがあります。

サイトでは、SaqooshaさんによってActionScript 3に移植されたARToolKitである、FLARToolKitというライブラリが使用されており、紙に印刷されたパターンをカメラで認識して、その上に3Dのオブジェクトを描画しています。

すでに海外では、企業のキャンペーンでこのAR技術が使われ始めており(例:BMW MINI Cabrioのキャンペーン⁠、個人的には、今年は日本でも同じような体験ができるのではないかと、非常に期待している技術でもあります。

言葉以外の表現方法

『株式会社コルテックス』

大阪と東京を拠点とする広告代理店、株式会社コルテックスのサイトです。

図4 フルスクリーンでアニメーションが始まる
図4 フルスクリーンでアニメーションが始まる
credit: YAMA,COLTEX INC

サイトでは、いきなりフルスクリーンでドミノを立て続ける男などが登場する、おとぎ話のようなアニメーションが始まります。

図5 男が積み続けるドミノはポートフォリオとなっている
図5 男が積み続けるドミノはポートフォリオとなっている

クリックすることで、アニメーションのシーンを一つひとつ進められます。また会社に関するさまざまな情報が、所々に埋め込まれており、それらをクリックすると拡大され、内容が表示されます。

図6 シーンの所々に会社の情報が表示されている
図6 シーンの所々に会社の情報が表示されている

物語を二度終わりまで進めると、エンディングが始まります。各シーンが作り込まれており、フルスクリーンのみで再生される(フルスクリーンでなければ見ることができない)こともあり、アニメーションの世界の中に入り込んでいることを強く感じます。

アニメーションが表現するもの

さて、このアニメーションでは何を表現しているのでしょうか。その答えを知るためには、株式会社コルテックスのウェブサイトで用意されている、HTMLベースの別ページを見る必要があります。

別ページでも、アニメーション内にも表示されていた、会社の基本情報が確認できます。⁠会社情報はこの別ページで十分だ」とすれば、アニメーションは何を表現しているか、もう気づいたと思います。答えは、"別ページには用意されていないコンテンツを、アニメーションで表現している"ということなのです。

会社のフィロソフィーやビジョン、メッセージなどの"言葉で表現することが非常に難しいコンテンツを、アニメーション作品で表現する"というこの手法は、作品の質や方向性を間違えれば、会社のイメージダウンにもなりかねないのですが、今回の例では、会社の制作に対する懐の広さをうまく表現することができていると思います。

海外サイトでは何度か見たことのあるこの表現方法が、日本のウェブ制作の中で増えてくるのか、注目していきたいと思っています。

"感情"と"現実"を意識させる

『Cam with me(カム ウィズ ミー)|デジタルビデオカメラ Handycam “ハンディカム” | ソニー』

ソニーのデジタルビデオカメラ、⁠ハンディカム⁠のプロモーションサイトCam with me(カム ウィズ ミー)です。

図7 画面中央で、生まれた子どもが大人へと成長していく
図7 画面中央で、生まれた子どもが大人へと成長していく
credit: Hakuhodo Inc., TYO Interactive Design Inc., 602 Inc., undefined Inc., wonderclub, CRANK Inc., Q Inc.

生まれた子どもが大人へと成長し、結婚式を迎えるまでのさまざまな思い出を、クリックするというシンプルな操作で、次々と録画していきます。

図8 録画シーンでは、思い出が映像で表現される
図8 録画シーンでは、思い出が映像で表現される

最後に録画したシーンをまとめたエンディングが流れます。子どもから大人になるまでの映像と、竹内まりやさんの曲『毎日がスペシャル』とが合わせられることで、とても雰囲気の良いでき上がりとなっています。

図9 エンディング後は録画できたシーン数が表示される
図9 エンディング後は録画できたシーン数が表示される

なお、コンテンツ自体をBlogに貼り付けられる機能が提供されているのですが、その内容はまさにサイトの縮小版と言えるもの。Blogなどの記事と一緒に貼り付けてあれば、興味を持ったユーザーが"その場でサイトと同じ体験ができる"という、非常にユニークなものとなっています。

"感情に訴える"だけでなく

コンテンツ内容をじっくり見てみると、ターゲットとしてビデオカメラ購入層の親世代と予備軍を狙い撃ちしていること、別れのとき(家庭から巣立っていく)がやってくる女の子が主役であること(男の子バージョンがない)など、"感情に訴える"ためのさまざまな特徴が見えてきます。

ですが、個人的に注目したのは、サイト内で成長する子どもを撮影する部分です。実はこの子どもの成長するスピードが絶妙で、実際にビデオカメラで撮影する操作をサイトで試してみると、なかなか用意された映像すべてを撮ることはできません。 しかも、撮りきれなかったシーンに戻って、そこだけを録画することもできません。

「あんなに一生懸命になって撮ったのに、それでも撮りきれていない⁠⁠、⁠一度撮り逃せば、撮り直しもできない」とサイトで感じたことは、"現実の世界でも起こることである"ということを意識させ、⁠撮っておかなければ、将来何も残らない。だから(ビデオカメラを買って)撮っておきましょう⁠⁠ というメッセージを、静かに、そして強く表現しています。

"感情に訴えかけた後、現実を意識させる"ことで「ビデオカメラ買おうかな」と思わせてしまうこのサイト。商品を購入させるきっかけを作るサイトのお手本として、参考になる部分が多いのではないでしょうか。

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

おすすめ記事

記事・ニュース一覧