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

第11回 UNIQLO CALENDAR,ANDREAS LUTZ,QuakeQuizSF

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

道端に咲くあじさいの美しさに目を奪われつつ,いよいよ本格的にジメジメと闘わなければならなくなってきた今日このごろ,いかがお過ごしでしょうか。今回も個人的に感じた素晴らしいサイトの特徴を,いくつかお話したいと思います。

"動き"を強調した現代の箱庭

『UNIQLO CALENDAR』

ユニクロによる"四季の映像,音楽,商品カタログが融合した新感覚カレンダー",『UNIQLO CALENDAR』です。

図1 今回のプロモーションはカレンダーがテーマ

図1 今回のプロモーションはカレンダーがテーマ

Credit: Projector Inc., puzzle inc., spfdesign Inc.

東京,神奈川,京都,兵庫,静岡,徳島,沖縄の7都市32か所を,ティルトシフトレンズ(レンズの光軸と撮像面の関係を変えられるシフト機能とティルト機構を搭載したレンズ)を用いて撮影し,ミニチュア風のストップモーション・アニメーションに仕上げています。

図2 ミニチュア風のストップモーション・アニメーションが印象的

図2 ミニチュア風のストップモーション・アニメーションが印象的

アニメーション部分をクリックすると,その色に合わせた商品写真のモザイクに変化し,モザイクをクリックすることで,商品の詳細を確認できます。

図3 アニメーションが商品写真のモザイクに変化する

図3 アニメーションが商品写真のモザイクに変化する

また,郵便番号を利用して,登録した地域の天気情報を知ることができるブログパーツも配布されています。ストップモーション・アニメーションに合わせて流れる音楽は,FPM(Fantastic Plastic Machine)とサキソフォン奏者の清水靖晃さんの組み合わせによるもので,今後も新しい映像や音楽,スクリーンセーバーが追加されるとのことです。

"ストップモーション・アニメーション"のもたらす効果

ユニクロに確認したところ,「ストップモーション・アニメーションを使用している理由は,ミニチュアのコマ撮り風に見せる演出のため」との回答をいただきました。ただ個人的には,このウェブサイトで使われているストップモーション・アニメーションには,演出だけではない"ある効果"が感じられました。

通常の動画表現では,画面上の動きがスムーズになる反面,細かく動いている部分が非常に分かりにくくなります。ところがストップモーション・アニメーションを使うことで,画面上の動きはカクカクしてしまいますが,かわりに動いている部分をはっきりと判別する事ができます。このため,ユーザーが「次は何が起こるのかな」と画面上の動きを追っていくことで,映像を視聴する時間が長くなるという効果もあるのではないでしょうか。

近年,ページ遷移のないAjaxの技術が使われるようになったことで,「ページビュー」という指標だけでは,ユーザーの動向が測りきれなくなってきました。そんな中で「ユーザーの滞在時間」という指標が注目されるようになっています。

ウェブサイトを構築する上で重要になってきている「ユーザーの滞在時間」を長くするために,今後ストップモーション・アニメーションのこうした効果を利用したコンテンツが,増えてくるかもしれません。

マウス操作はもう古い?

『ANDREAS LUTZ - Because clicking is so 90s!』

ドイツのデザイナー兼ミュージシャンであるAndreas Lutzによるポートフォリオサイト,『ANDREAS LUTZ - Because clicking is so 90s!』です。

図4 メインメニューの項目もジェスチャーで選択する

図4 メインメニューの項目もジェスチャーで選択する

Credit: Andreas Lutz (Creator), Scholz & Volkmer (Company)

ウェブカメラの前で行うさまざまなジェスチャーと,マイクからの音声入力を使うことで,ウェブサイト内の各コンテンツを見ることができます。

図5 拡大・縮小もジェスチャーを使って行う

図5 拡大・縮小もジェスチャーを使って行う

コンテンツの確認に"マウスとキーボードを使わない"特殊なウェブサイトのため,基本的な操作方法を紹介した動画も用意してあります。

図6 ウェブサイトの操作を解説した動画も用意

図6 ウェブサイトの操作を解説した動画も用意

マウスとキーボードから離れた操作感覚は,考える以上に不思議な感覚ですので,ぜひウェブサイトを訪れて体験してみてください。

※実際には,最初に"ウェブカメラとマイクを使わない"という設定をすれば,マウスを使用してサイト内のコンテンツを確認することもできます。

新たなデバイスで変わる未来

お世辞にも操作性が良いとは言えないこのウェブサイトですが,あっと驚くことが少なくなってきた個人の実験的ポートフォリオと考えるならば,このような大胆なチャレンジは大歓迎したいと思います。

近年では,特に家庭用ゲーム機において,新たな操作デバイスの出現(モーションセンサーを内蔵したWiiコントローラーや,Xbox 360用のモーション・音声コントロール周辺機器「Project Natal」など)による,ユーザーへの新しい操作方法・操作感覚の提供が目立ってきています。

現在,パソコンの入力デバイスと言えば"マウスとキーボード"というのが定番ですが,マイクやウェブカメラ,タッチパネルの標準装備,また,新たなデバイスによって,ウェブサイトもマウスとキーボード以外の操作方法が主流になる日が来るのかもしれません。

著者プロフィール

Lançamento(ランサメント)

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

コメント

コメントの記入