第2部 Webインターフェイスの現在形
Webインターフェイスの現在形
私たちWebデザイナーは、プロデューサーやインフォメーション・アーキテクトが企画立案したコンテンツの全貌が明らかになったとき、そのコンテンツの内容やターゲットユーザーに合わせて、画面のデザインに取りかかる。そこでは、使用する技術の吟味から色彩、VI、ナビゲーション要素の配置や演出といったさまざまなな作業が待っている。
Webサイトをデザインするときに、私たちがまず何より重要視すべきことは、ターゲットユーザーの年齢や性別、そして「ユーザーがWebサイトに何を期待してアクセスするか」である。これを想像してデザインすることこそ、私たちの仕事の中核であるといえる。そのリテラシーの高低により、デザインは大きく変わってくるだろう。しかし、昨今のWebインターフェイスの発展はめざましい。Flashをはじめとするテクノロジーの発展や、それに伴う発想の進化により、5年前では考えられないようなものも増えてきている。また、ユーザーのリテラシーも、私たちの想像より上であることも少なくない。Webの進化とともに、また、ユーザーのリテラシーも育ってきているのである。ここでは、最近話題となっているWebサイトや、筆者が気になっているWebサイトを紹介しよう。
文・立山信一（Interface Architects）
Webサイトをデザインするときに、私たちがまず何より重要視すべきことは、ターゲットユーザーの年齢や性別、そして「ユーザーがWebサイトに何を期待してアクセスするか」である。これを想像してデザインすることこそ、私たちの仕事の中核であるといえる。そのリテラシーの高低により、デザインは大きく変わってくるだろう。しかし、昨今のWebインターフェイスの発展はめざましい。Flashをはじめとするテクノロジーの発展や、それに伴う発想の進化により、5年前では考えられないようなものも増えてきている。また、ユーザーのリテラシーも、私たちの想像より上であることも少なくない。Webの進化とともに、また、ユーザーのリテラシーも育ってきているのである。ここでは、最近話題となっているWebサイトや、筆者が気になっているWebサイトを紹介しよう。
文・立山信一（Interface Architects）
ウインドウのサイズに追従するインターフェイス
ANTEPRIMA
ミラノを拠点にコレクションを発表するファッションブランド、「アンテプリマ」のWebサイト。
このWebサイトは、シーズンごとにパリで撮影されるキャンペーンフォトを全面に使った美しいデザインが特徴である。画面いっぱいに広がる写真と、シンプルでそぎ落とされたミニマルなデザイン、美しくセンシティブな演出に目を奪われるが、このWebサイトの特徴はそれだけではない。
ブラウザを全画面表示しているならば、ぜひウインドウをドラッグして、大きさを変えてみてほしい。そのサイズに合わせて、写真は常に最適なサイズにトリミングされ、ナビゲーション要素は定位置に移動するという隙のない設計となっている。このアイデアはここ1、2年の間、世界的によく見られるようになったもので、アンテプリマのWebサイトは、そのはしりと言えるだろう。ある程度の最低環境を想定し、ウインドウがリサイズされるたびに、いくつかのサイズで用意された背景画像を最適なものにリアルタイムに差し替えて表示する仕組みだ。Flash Playerが必要であるということだけを除けば、ユーザーに特定の環境を要求せず、ブラウザ環境に合わせてフレキシブルに対応する、優れたアイデアといえる。
「カメ城」を玄関にしたユニークなコーポレートサイト
平和アルファ
http://www.heiwa-alpha.co.jp/
このWebサイトに初めてアクセスしたとき、さながら『ハウルの動く城』を彷彿させる、巨大なカメが建造物をしょってのそのそと歩く精巧なCGに目を奪われた。牧歌的な風景の中を歩く「カメ城」の姿を見て、「なんだこのWebサイトは」と思うユーザーも少なくないだろう。しかし、このインパクト十分なWebサイトが企業サイトであると分かったときには、さらに大きな驚きを禁じ得ない。
ヌルい音楽に合わせて画面を歩く「カメ城」をクリックすると、城の中に入ることができ、そこにいるさまざまなキャラクターが「会社案内」や「ギャラリー」へのリンクとなっており、このサイトがはじめてパチンコのソフトウエアや映像開発の企業サイトであることがわかる。キャラのひとつひとつのデザインや動きにはかなりの労力が注がれており、見ていて飽きない。また、それらはすべてこの会社の持つ開発力を表す。そう考えると、このユーモラスで壮大なお遊びとも取れるWebサイトが、企業のパワーを示すショーケースとしても機能していることがわかる。そういった意味では、非常に面白いアプローチのコーポレートサイトといえるだろう。
クリック強要を逆手に取った愛らしさ漂うメニュー画面
バタフライ・ストローク・株式會社-Characters
http://characters.butterfly-stroke.com/
知る人ぞ知る、紙で出来たたたかうロボット「カミロボ」を世に送り出したバタフライ・ストローク・株式會社のWebサイト。
プリローダーを兼ねた「btf」のロゴより分裂して現れる5つの円。その中には、それぞれこの会社の生み出したキャラクターが描かれている。画面を弾むこの円がメニューであることは容易に想像がつくだろう。
しかし、それらをクリックしても、簡単に次の画面遷移に進むわけではなく、少し大きくなった円が「もっと！もっと！」と跳ね回る。どんどんクリックすることで、円もどんどん大きくなり、ようやくコンテンツにたどり着ける。ぷにょぷにょと跳ね回って「もっと！もっと！」とクリックを促するエレメントは、なぜか妙にかわいくて頬が緩む。何度もクリックしなければならないということは普通であれば「面倒」であったり、「無駄」であったりする。それは、もしかするとユーザーによってはイライラさせるかもしれないマイナス要素だが、このWebサイトは、それを逆手に取って、愛らしさやユーモアへと昇華している。何度もクリックしたくなる衝動は、かわいい犬や猫を見るとなでたくなるような感じとでも言ったらいいかもしれない。
ちなみに、急ぐ人のために画面右上にちゃんとメニューも用意されている。
