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

第9回 Honda Insight - Let It Shine on Vimeo,TWO STORIES FROM free stitch,Labuat

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

ゴールデンウィークも終了し,日ごとに感じる梅雨の気配とその先の夏について,妄想をふくらませる今日このごろ,いかがお過ごしでしょうか。今回も個人的に感じた素晴らしいサイトの特徴を,いくつかお話したいと思います。

サイトと映像のあわせ技

『Honda Insight - Let It Shine on Vimeo』

動画共有サイトvimeoにアップロードされた,ホンダのハイブリッド自動車INSIGHT(インサイト)の新しいTVCM,『Let It Shine』です。

図1 無数の自動車を使った映像に圧倒される

図1 無数の自動車を使った映像に圧倒される

Credit: Wieden + Kennedy's Amsterdam, Bouffant

1分間の映像ではタイトルの通り,無数の自動車を整列してライトを点滅させる事で,LED(発光ダイオード)スクリーンを作リ,さまざまな絵文字を表現しています。

図2 自動車のライトで絵文字を表現する

図2 自動車のライトで絵文字を表現する

安易にCG(コンピュータグラフィックス)を使用することなく,実際に車を並べて撮影された映像はとても美しく、そして楽しいものに仕上っています。

また,The Making of "Let it Shine"というメイキング映像も公開されていますので,ぜひ確認してみてください(動画中の車の制御は,車同士を配線してソフトウエアで制御を行ったそうです)。

同期による新しい感動

さて,アイデアやクオリティーも非常に高いこのTVCMですが,それ以上に感動するのが,映像と同期して,映像の外側のサイトもさまざまな姿に変化していくところです。

図3 映像とページを同時にレンズフレアが横切っていく

図3 映像とページを同時にレンズフレアが横切っていく

映像内の時間の経過とともに,暗闇から次第に明るくなったり,映像を再生する枠の外にまで表現部分が広がったり,レンズフレアが横切ったり。特にvimeoを普段使っているユーザーにとっては,思いもよらない表現と展開によって,映像の内容がより深く心に残ることでしょう。

昨年話題になったYoutubeのWario Land: Shake it(ゲームを紹介する動画を再生すると,動画の中のキャラクターの動きと同期して,ウェブサイト上のさまざまなパーツが落下していく)と同じように,映像とウェブサイトとの連動で新たな体験を作りあげるというこの方法。次に使ってくるのはどこなのか,また,新たにどのような表現を加えてくるのか,今後も期待したいと思います。

余計なものを"消す"ということ

『TWO STORIES FROM free stitch』

ドッググッズ,ドッグウエア,ペットグッズ専門店のセレクトショップ,フリーステッチのスペシャルサイト,『TWO STORIES FROM free stitch』です。

図4 2つのストーリーが写真で表現される

図4 2つのストーリーが写真で表現される

Credit: free stitch

「SHINY DAY(雨の日)」と「THE NIGHT(夜)」という,犬の散歩をテーマとした2つのショートストーリーを,写真を使ったスライドショー形式で紹介していきます。

図5 オンラインショップへの導線も用意されている

図5 オンラインショップへの導線も用意されている

スライドショーの最後では,登場した各種アイテムが紹介され,オンラインショップから購入できるようになっています。

気づかれない小さな工夫

ショートストーリーのメインとなる写真,テキストの表示方法や音楽など,丁寧な作り込みが感じられるこのサイトですが,最も注目したのはスライドショー時に起こる"ある現象"です。

その現象とは,"マウスカーソルと画面下部に表示されるスライドの位置情報が,さりげなく消えること"です。画面全体に広がる写真を中心に見せていくスライドショーにとって,どうしても余計なものとなるマウスカーソルを消す事で,ユーザーの視線を集中させる事に成功しています。

図6 マウスカーソルが消えることで画面もすっきり

図6 マウスカーソルが消えることで画面もすっきり

「マウスカーソルが消えることで,使い勝手はどうなるのか」と考える方も多いと思いますが,マウスを少しでも動かせばすぐにマウスカーソルと位置情報が再表示されるため,使い勝手が悪くなるという事はまったくありません。

なかなかユーザーに気づかれない小さな工夫ですが,ついつい単調になりがちなスライドショー形式に集中させるための,制作者のこだわりが感じられる仕組みです。今後もこのような細部のこだわりに注目していきたいと思います。

著者プロフィール

Lançamento(ランサメント)

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

コメント

コメントの記入