Lacoste 75th anniversary - Let's reinvent the game

近未来的なナビゲーションとざらりとしたノイジーな映像が魅力で取り上げられていたラコステの75周年サイトですが、派手に展開される派手なコンテンツに隠れてUI関連の工夫が存在します。

以前よりFlashコンテンツで巨大なコンテンツを表示する場合は、ナローバンド用、ブロードバンド用という区別があり、近年では、光回線を持つ人用とADSLクラスの回線速度を持つ人用の選択肢に分かれていることが多くなっています。

通常、これらの選択を行うのはムービーの開始時のみでしたが、このサイトではいつでも変更が出来ます。FlashにユニークURLを持たせるSWFAdressというライブラリと組み合わせて使用することで、再生を初めてみて、回線がちょっと遅いかもしれないと思ったときはすぐに別の回線環境用のコンテンツに変更することが出来るようになっています。

　
URTD.NET

Webページというのは、情報の塊です。Webページ内に存在するであろう情報というものは、ナビゲーションの都合上、ビジュアル的に隠れていたとしても、そこに存在していることで完全な情報となりえます。

例えば、HTMLにおいて、タブ切り替えのナビゲーションをAjaxで実現させる場合、タブをクリックするまで表示されないコンテンツであっても、HTML上では、マークアップされて存在しています。同じように、画像もまたそれぞれが完全な形で存在していることも重要であるということが出来るかもしれません。

画像が積み重ねられた表現を行う場合、一枚の画像として積み重なっている状態を画像で書き出してしまうことは簡単ですが、重なった部分の情報が失われてしまいます。このサイトのように、実際に重ねてしまうというコーディング手法を行うことで、情報として完全になるといえるのではないでしょうか。

　
volll

このサイトもその美しいビジュアルセンスによって、今年の頭に取り上げられていました。多くの人は星や雲、船や宇宙人などから、フルFlashのサイトと思ってしまうかもしれません。確かにFlashは使われていますが、NEWのマーク部分だけです。波や雲、星などはHTML上に書き出されており、JavaScriptによって高速に書き換えられています。

Flashのようなアニメーションとナビゲーションを実現したHTMLサイトという見方も出来るわけですが、本当の魅力は、羊や宇宙人やパラソル、灯台の入り口などをクリックした際に行われるちょっとしたアクションにあると思えます。

HTMLだけで出来たリンクくらいしかアクションのないWebページから、Ajax系のUIを使ったリッチなUIが普通に使われることで、ネットユーザーのクリックできる対象のリテラシーも上がったと言えます。しかし、そのリテラシーをちょびっとだけ裏切るクリック出来な無そうなものが、ちょっとだけアクションをするというのは、通常のWebページに本来用意されているアクション以上の期待感をもたらしてくれるはずです。

　
Baritchi Holding

HTMLベースのWebページのビジュアルデザインにおいて最後のフロンティアは、きっとフォーム部分になると思ってきました。つまり、ポップアップメニューであったり、コンタクトフォームであったりです。ブラウザのデフォルトのフォームを使用することが、ユーザーの利便性も高いと言えるでしょう。

Flashと違い、あらかじめベストアンサーに近いフォームが用意されているHTMLでは、そのまま、もしくは少しフォームのデザインをいじる程度のほうがユーザーにも優しいはずです。

では、どんな場合にフォームのデザインを頑張ってカスタマイズしたほうがいいのか？　という答えがこのサイトにはあるような気がします。

トップページにあるスムーズなロールオーバーや、各コーナーで使われているスライドなどはライブラリを使用して作られた手軽ではあるけど、美しい効果をもたらすものです。これらのリッチなUIが続いた後にアクセスされるであろうコンタクトフォームは、どういうルック＆フィールでなければならないのか？　ということを考えてみると、このフォームのデザインが正解な気がします。

　
Letters & Numbers

Letters & Numbersのサイトは、ちょっとユニークなナビゲーションを使用しています。このサイトは、いわゆるフンドシ型と呼ばれる1ページに全てのコンテンツがあるタイプのサイトですが、そのコンテンツは最初の状態では隠されています。

画像があるであろう箇所をクリックするか、右上のメニューをクリックすると、初めて画像がダウンロードされ表示されます。後は青色の左右の矢印でコンテンツを移動して閲覧します。ただし、左右の矢印を押してスクロールするのは、現在閲覧中のコンテンツのみです。

コンテンツのサイズと名前は知っているが、隠されているという状態は、メニューとサムネイルはあるけどコンテンツは次のページという状態よりもわくわく度が高いといえるかもしれません。