第2部 Webインターフェイスの現在形
Webインターフェイスの現在形
Web表現のメインストリームのひとつとなっているFlashインターフェイスを用いたWebサイトのなかから、非常に興味深いサイトを 紹介しよう。
Flash Videoで展開するユーモラスな製品紹介サイト
Honda 低床・低重心ミニバン
http://www.honda.co.jp/LandL/main.html
かつて遊園地の広告で「史上最低の遊園地」というものがあった。逆説的な内容の広告をエイプリルフールに打つことによって、鮮烈な印象と、シャレのわかる楽しい会社というイメージを見るものに訴求する、面白い広告だった。
このWebサイトは、同じように、低床・低重心のミニバンを特色とするホンダのミニバンラインアップの利点を、高床・高重心ミニバン「タカインジャー」という架空の車によって、逆説的にアピールするものである。構成そのものはFlash Video（FLV）によるシンプルなもので、まずタカインジャーの特色──つまりダメさ加減──をムービーで説明し、そのテキストに赤鉛筆でガリガリと添削が入り、その後にホンダ車の利点をわかりやすくムービーで説明するというものだ。
タカインジャーのデザインや欠点の映像、さらに開発者インタビューまで用意されており、細部の作り込みが素晴らしい。車の足回りを映す映像で、ホイールがポロリと取れたり、乗り込むときに木箱を積んで載らなければならなかったりと、笑いを誘う要素が満載。インターフェイスもわかりやすく、ムービーが終わると次のコンテンツへとスキップするバーがピョコピョコと動いてクリックを促する。シリアスに利点を訴求するより、ユーモアを交えたデザインとアイデアによって訴求するほうが、逆にわかりやすいし、何より深く印象に残る。画面の細部にまで、ユーモアがちりばめられたインターフェイスの楽しいWebサイトだ。
ユーザーに「実機の操作」感覚をWebで体験させる
VAIO
http://www.vaio.sony.co.jp/Products/Concept/
Vision/index.htmlωproduct=typeU
SONYのパソコンVAIOのWebサイト。TypeL、A、Uの3つのモデルが紹介されているが、ここでは最小モデルの「TYPE U」のサイトを紹介したい。機能を紹介するバーチャルツアーの最初に、10円硬貨がいくつか表示される。画面に硬貨を当て、同じサイズのものをクリックすると、TYPE Uが実寸で表示される。小ささが特長の商品の感覚を味わってもらいたいという、徹底した試みが随所にちりばめられている。
マシンの起動から認証といった流れも実機同様の流れで行うことが可能。操作はスタイラスペンで行うタブレットPCらしく、カーソルは画面のスタイラスペンを持った手と連動していて、実機の操作を画面上で行っているような趣向。内蔵カメラの紹介では、画面いっぱいに公園の風景のムービーが現れ、TYPE Uをかざして動画を録画しているような体験ができる。遠景のFLVはボケていて、TYPE Uの画面内部のみピントがあっていて、まさに実機を操作しているような感覚だ。
とことん「実機の体験」にこだわったインターフェイスであり、WebサイトというよりTYPE Uのシミュレーターともいえる。
ひとつの輪から無数に広がる小気味いいメニュー表示
Self Titled
http://www.selftitled.ca/
カナダのインターフェイスデザイナー、John Lacoviello氏のポートフォリオサイト。
カテゴリーごとに色分けされたたったひとつの輪がアイキャッチであり、そのままインターフェイスとなるという、ミニマルな構造だ。輪の上でドラッグすると、右側にメニューがスルスルと現れてスクロールする斬新で気持ち良い操作感が面白い。画面左にカーソルを合わせると、色の意味が表示される。また、画面上にカーソルを合わせるとオプションが表示され、キーボードのカーソルキーでナビゲーションできたり、音のオン／オフを切り替えたりすることも可能。円の周りに現れるタイトルをクリックすると、彼の膨大な作品を見ることができたり、コンテンツへのショートカットとして、画面右側にカーソルを合わせると、リストが表示されて、そこから作品を見ることもできる。
作品の右にはタブがついており、「×」をクリックすると、輪のインターフェイスに戻ることができるなど、全体的に動作は軽快で小気味いい。Lacoviello氏のインターフェイスデザイナーとしてのノウハウが惜しげもなく投入された、シンプルで美しいインターフェイスのWebサイトである。
ちなみにこのWebサイトは、世界中の優れたWebサイトを取り上げるデザインポータルサイト「The FWA: Favourite Website Aword」の「Site of the day」を受賞している。
参考リンク：
The FWA: Favourite Website Aword
http://www.thefwa.com/
イメージ写真を全面に起用したオンラインショッピングサイト
gift by nssgraphica
http://giftstore.jp/
「オンラインショッピングサイト」というと、たいていマトリックス状に並んだ商品画像のサムネールがあり、それをクリックすると詳細ページに遷移するという感じのインターフェイスデザインが普通だ。しかし、この「gift by nssgraphica」はひと味違う。
通常のショッピングサイトのように、サムネールの羅列で商品をただ全面に押し出すのではなく、表示されるのはイメージ写真。左右には「NEXT」「PREV」のボタンが表示され、Tシャツを着た男女の写真を延々と見ることができる。画面右下には、控えめにTシャツの名前と価格が表示され、カーソルを合わせると詳細が見られる。右上にはカートへのリンクが配置されている。インターフェイスが煩雑になりがちなショッピングサイトの中では、群を抜いてデザイン性の高いWebサイトといえるだろう。
商品（このWebサイトの場合はTシャツ）をただ並べるのではなく、それを使っているシーンを見せるほうが、購入意欲をかき立てられるような気がするのは、私だけだろうか。
モノクロ映像が全面に表示される印象的なバックグラウンド
Kurt Stallaert
http://www.kurtstallaert.be/
FLVというファイル形式によって、Flashでムービーが扱えるようになってから、オンライン・プレゼンテーションでのムービーコンテンツはすでに普及した観がある。前述のWebサイトの中にも、FLVを効果的に使ったものもある。しかし、それらではあくまでムービーは画面の一部だ。
フォトグラファーのKurt Stallaert氏のサイトをぜひ見て欲しい。「ENTER」ボタンを押すと、バックグラウンド全面にムービーが表示される。画質は粗いが、むしろ、粗い画質であるがためにインターフェイスは非常にスムーズに動く。さらに、モノクロということもあり、逆に味わいが感じられる。
コンテンツそのものはStallaert氏のポートフォリオであり、サムネイル表示の比較的オーソドックスなものだ。バックグラウンドのムービーは作品の閲覧にストレスを感じるほど重くもなく、劣化した画質が逆にスタイリッシュでファッショナブルな雰囲気を醸し出している。非常に大胆でインパクトのあるアイデアであることは間違いない。
