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

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

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

言葉以外の表現方法

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

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

図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などの記事と一緒に貼り付けてあれば,興味を持ったユーザーが"その場でサイトと同じ体験ができる"という,非常にユニークなものとなっています。

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

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

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

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

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

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

著者プロフィール

Lançamento(ランサメント)

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