MSNが提供するセレブニュースサイト「WONDERWALL」は、ダイナミックな写真の使い方と横スクロールが特徴です。ゴシップ誌や女性誌は著名人の顔が大きく取り上げられていますが、WONDERWALLも同様にコンテンツではなく、人を強調したコンテンツの載せ方をしています。記事のタイトルも内容が分かるような表記ではなく、人の名前や出演している作品の名前にかけたものが多く、内容ではなく人から記事を読ませようという姿勢が見られます。

著名人の顔は横へと続く構成になっており、横スクロールをすると次々と著名人が姿を表します。トップページでかなりの数の写真が表示されますが、可視エリアのみ写真がローディングされるように工夫されているので、最初のページが表示されるまで長い時間待つ必要もありません。また、写真をクリックしてコンテンツを観覧するという流れの場合、コンテンツエリアのみ変化するだけなのでページ全体を何度も読み込む必要もありません。

大胆な写真の使い方とメイン記事の文字の扱い方が目を引くWONDERWALLのトップページ

トップページに掲載されている著名人の顔写真はすべて Flashで構成されています。個々の写真をマウスオーバーすると概要が表示され、クリックすると詳細が現れるわけですが、写真のグループとグループの間に新たな隙間が出来、そこに記事が表示されるようなアニメーションがあります。

全体がFlashで構築されているのかと思いきや、隙間から出て来た記事はHTMLで構築されており、コピー＆ペーストも出来れば新規ウィンドウでリンクを開くことも可能です。ページ上位に横に敷き詰められているFlashはひとつではなく、複数のFlashが横に並んでいる構成になっています。Flashが配置されている要素と要素の間に記事が表示されるので、あたかもFlashの中に HTMLが表示されるような効果を生むことが出来ます。

水色のスクロールバーだけでなく、マウスホイールでも横へ移動が出来ます。横へスクロールして可視エリアが増える度に新しい写真がローディングされていきます。写真をマウスオーバーすると概要が表示されます

写真をクリックすると、写真と写真の間に隙間が出来、そこに記事が表示されます。ページの移動はありませんが、記事には固定リンクがあり、個別記事へのアクセスも簡単に出来ます

一見、ひとつの大きな Flashファイルがあるように見えますが、分割されており、隙間が出来る場所も決まっています

写真を活かしたアニメーションに強いFlash。HTMLを利用したアニメーションに強いJavaScript。記事を読みやすく、そして汎用性の高いものにしてくれるHTML。それぞれの特性を上手く活かして構築されているWonderwallですが、JavaScriptやCSSがなくてもサイトに掲載されている記事を読めるような工夫がされています。JavaScriptへの依存が高いサイトなので、Offにすると Flashが非表示になるだけでなく、レイアウトにも大きな変化が見られます。

しかし、Flashで表示されていた記事一覧がHTMLで表示されたり、ページの移動がなかった観覧フローも別ページへ移動して詳細記事が読めるようになります。CSSをオフにしても同様で見た目は大きく変わるものの記事を読むという本来の目的を果たすことが出来るようになっています。

文字情報だけでなく、写真ギャラリーやビデオも観覧出来ます

CSSをOffにした状態。マークアップがきちんとされているので、Offにしても十分読みやすいです

JavaScript がOffになった状態のトップページと記事ページ。JavaScriptをONにしましょうという警告が出ますし、ベストな体験とはいえませんが、記事を読むことは可能

横スクロールは使い難い印象がありますが、ナビゲーションに工夫がされており、横スクロールのコンテンツサイトに新たな可能性を示しています。通常、横スクロールはスクロールバーをドラッグするか、Shift+マウスホイールで行うわけですが、Shiftを押さなくてもマウスホイールのみで横移動が可能になっています。縦に長いサイトを同じような感覚で写真を眺めながら興味のある記事をクリック出来るようになっています。最近は16:9の横に長いディスプレイを利用している方が増えていることを考えると横幅より、縦に入るコンテンツ量が気になるところ。記事もほとんどの場合スクロールを要することなく読める長さに調整してあるので、一目で消化出来る情報量は縦に長いサイトより多いかもしれません。

横長ワイドスクリーンに強い構成

意外性のある仕掛けがあるWONDERWALLですが、単に技術的におもしろいことをしているというよりかは、利用者のコンテンツ消費の妨げを最小限にするにはどうすれば良いかが考えられたサイトです。Wonderwallがベストソリューションではないかもしれませんが、新たな提案という意味で興味深いアプローチをとっています。