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

第80回 See the new Beetle!,東京スカイツリー TOKYO SKYTREE,BCCKS / ブックス

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

憂鬱だった花粉症ともお別れして,ゴールデンウイークのことで頭がいっぱいになってきている今日このごろ,皆様いかがお過ごしでしょうか。今回も個人的に感じた,素晴らしいサイトの特徴をいくつかお話したいと思います。

誰もが形を知っている,あるクルマの物語

See the new Beetle!

ノルウェー市場向けにローンチされた,ドイツの自動車メーカーVolkswagenの自動車「The Beetle」のプロモーションサイト,⁠See the new Beetle!』です。

図1 ⁠The Beetle」を紹介する『See the new Beetle!』

図1 「The Beetle」を紹介する『See the new Beetle!』

credit:Try/Apt

自動車のタイヤがある場所にマウスで形を描くと,その形が自動車となって走り出します。走り出した自動車は,不思議な物語の中の主人公となり,ユーザーがマウスを使い,各シーンで必要となる「いろいろなもの」を描いていくことで,物語が進行していきます。

図2 マウスで描いた自動車が,物語の主人公となる

図2 マウスで描いた自動車が,物語の主人公となる

ユーザーの興味を持続させる時代へ

トップページの左側から展開される物語風のコンテンツが個性的な『See the new Beetle!』ですが,トップページ右側のコンテンツにも面白い仕掛けが施されています。右側は「The Beetle」の内装や各種装備を説明するものですが,どの場面にも画面内を点線が横切っており,一見すると,単なる装飾なのかと思ってしまいます。

図3 画面を横切る点線と同じ方向に矢印線を描くと,画面が遷移する

図3 画面を横切る点線と同じ方向に矢印線を描くと,画面が遷移する

実は,ユーザーがこの点線と同じ方向に,マウスをドラッグしながらで矢印線を引くと,次の説明へと画面が遷移していくようになっています。もちろん,画面上部のナビゲーション項目のクリックや,キーボードのカーソルキーでも画面の遷移は行えますが,この仕組みのおかげで,ユーザーはマウスから手を離すことなく,素早く各項目へと移動できます。

用意された2つのコンテンツは,どちらも単なるクリックではなく,ユーザーの手を能動的に動かす"線を描く"という仕掛けで,コンテンツを興味深く見てもらおうとしています。プロモーションサイトなどでは,用意された情報量が多い場合,ウェブサイト全体でこうした仕組みを徹底しないと,ユーザーをひきつけ,興味を持続させられない時代になってきたことを,ひしひしと感じる事例です。

画面の長さは,ツリーの高さ

東京スカイツリー TOKYO SKYTREE

2012年5月22日に開業する東京スカイツリーのオフィシャルサイト,⁠東京スカイツリー TOKYO SKYTREE』です。

図4 634mの高さを誇る,東京スカイツリーのオフィシャルサイト

図4 634mの高さを誇る,東京スカイツリーのオフィシャルサイト

ウェブサイトでは"世界一の電波塔"となる東京スカイツリーの高さ(634m)を,縦への長さ(7,715ピクセル)で表現しています。縦へのスクロールを進めると,天望回廊(地上450m)や3層構造を持つ天望デッキ(地上350m)の紹介など,東京スカイツリーに関する情報が表示されます。

図5 スクロールさせていくと,東京スカイツリーの施設が紹介される

図5 スクロールさせていくと,東京スカイツリーの施設が紹介される

ウェブサイト上を移動する,東京スカイツリーの公式キャラクター「ソラカラちゃん」の楽しい動きや,スクロールと連動したパララックス(視差)表現も特徴的です。

図6 東京スカイツリーの高さを,ページの縦への長さで表現している

図6 東京スカイツリーの高さを,ページの縦への長さで表現している

大きさをどう表現するか

もう一つ,縦への長さで最近話題となったウェブサイトを紹介します。インフォグラフィックを特集した,イギリスのBBC(英国放送協会)によるHow big is our own solar system?(私たちの太陽系の大きさってどのくらい?)です。

図7 太陽系の大きさを表現した,BBCの『How big is our own solar system?』

図7 太陽系の大きさを表現した,BBCの『How big is our own solar system』

こちらは単純に,⁠太陽系の大きさ=インフォグラフィックの縦の長さ」として表現しています。使用されたインフォグラフィックがあまりに巨大(58,180ピクセル)なため,ウェブサイトでは画像を5つに分割して表示しています。

高さや大きさをウェブサイトの幅や縦の長さで表現する方法は,誰にでもわかりやすいため,これからもどんどん登場してくるでしょう。新たな表現方法などを加えながら,ウェブサイトにおける大きさの表現方法がどう変化していくのか,楽しみにしたいと思います。

著者プロフィール

Lançamento(ランサメント)

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

コメント

コメントの記入