ホーム » ビジネスブログ » XP・アジャイル(システム開発) »

Ajax (Script.aculo.us)を多用した「GUCCI」Webサイトのリニューアル

2006年8月31日

Ajax (Script.aculo.us)を多用した「GUCCI」Webサイトのリニューアル

投稿者 竹村

SEの竹村です。

英語圏のAjax関連のニュースを見ていて、あの「GUCCI」のサイトがリニューアルしたことを知りました。

Ajaxian ≫ Gucci Relaunches on Script.aculo.us
http://ajaxian.com/archives/gucci-relaunches-on-scriptaculous

gucci01.jpg
http://www.gucci.com/us/

トップページやオンラインショップ、商品カタログ、About、カート機能までAjaxを多用した実装が行われています。
そこで、それぞれの画面で気になったところをチェックしてみました。

トップページでは、「GUCCI」ロゴのフェードイン→画像のフェードイン/アウト→画像の移動というギミックを使っていました。
アークウェブでもmusicmarQのリニューアルをお手伝いした際( 音楽情報サイト「musicmarQ」リニューアルのお手伝いをしました )、トップページにオープニング的なアニメーションを入れることで、ユーザーの注視を促す仕掛けとして使いました。GUCCIの場合、ブランドの効果的なアピールのためにといったところでしょうか。

実装的には、メイン画像の部分を一定のタイミングで次々と変えているようです。

gucci02.jpg

オンラインショップは、カテゴリを選択したら商品の画像一覧が表示され、商品をクリックすると詳細情報がシームレスな流れで表示されています。
商品一覧から詳細への動きはAjaxライブラリ「Script.aculo.us」をふんだんに使っているようですね。

ほかにもAjax的なギミックとしては、商品の拡大→ドラッグ→リセットの部分が気になります。一番気になるのは画像を拡大する部分。この拡大をどのように実装しているのか見てみました。

http://www.gucci.com/js/gucci-zoom.js
 $('zoomer-'+this.style+'-image').setStyle({left:'-'+p[0]+'px',top:'-'+p[1]+'px'});

なるほど、"Style"で大きさを変更しているわけですね。
拡大したら別画像に切り替えて、あとはそれを"Draggable"に登録するだけで、画像がドラッグできるようになります。リセットの際は、また"Style"で大きさを小さくし、元の画像に戻せばよい…というわけですね。


gucci03.jpg

商品カタログなどでは、最初は画像を縦長サイズで表示していて「>」をクリックすると横スクロールするようです。
これは画像の幅分スクロールさせて、新しい画像をロードするだけですね。試しにスクロールバーを適当に動かしてみると、表示されている画面領域の分だけ画像をロードするようです。右側にもメニューが表示されているところは、UI的になるほどと思うところです。


Flashなどで作られたRUI(リッチユーザーインターフェース)的オンラインショップでありがちなのは、チェックしておいたアイテムをブックマークできないというパターンです。
たとえばGoogleMapsでは「このページのリンク」というリンクで、いまユーザーが見ているページのパーマリンクを示したりしていますが、同じように、商品詳細に対して、パーマリンクを用意することは重要なように思います。

そこでこのサイトでは、オンラインショップの商品詳細を表示するときに、URLのアンカーリンクを張り替えているようです(Windows Firefoxでしか検証していませんが)。


たとえば、↓このように直接商品詳細ページに飛ぶことができます。

http://www.gucci.com/us/us-english/us/fall-winter-06/wallets/#fw06_slg_145754_A0V1R_2535

↓"runway fashion"というコンテンツでも、同様にアンカーが作られています。

http://www.gucci.com/us/us-english/us/fall-winter-06/mens/#fw06_rtwm_29

ただ、現時点でGoogleにはうまく拾われていないようですね。
↓[site:www.gucci.com card case with G ornament]というキーワードでGoogle検索した結果はこんな感じです。

site:www.gucci.com card case with G ornament - Google 検索
http://tinyurl.com/rhca9

対策としては、Google Sitemapに、商品情報をXML化したファイルを登録しておくのが近道かもしれません。


このように、サイト全体をAjaxによるリッチなユーザインタフェイスで、かつアイテムをブックマークしておけるような細かい配慮がされたサイトが今後増えてくるようになると、Webはますます楽しいですね!

投稿者 竹村 : 2006年8月31日 09:02

カテゴリー: XP・アジャイル(システム開発)

タグ: Ajax , オンラインショップ , ブランド , リッチユーザーインターフェース , ECサイト , GUCCI.EC , JavaScript , RUI , Script.aculo.us , UI , Web 2.0


Movable Type用高機能メールフォーム生成プラグイン A-Formの詳細へ
Movable Type用会員限定サイトプラグイン A-Memberの詳細へ
Movable Type用予約サイト構築プラグイン A-Reserveの詳細へ
ARK-Web×CSR(企業の社会的責任)

アークウェブの本

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む

Movable Type プロフェッショナル・スタイル

Movable Type プロフェッショナル・スタイル

ビジネスサイト構築におけるCMSとしてのMTの活用方法について、豪華執筆陣による実践的MT本です。八木が共著で執筆しました。続きを読む

Web屋の本

Web屋の本

Web 2.0時代の企業サイトの構築・運用などの戦略を考える「Web屋の本」 (技術評論社)を、中野・安藤が執筆しました。続きを読む

新着はてブ

Loading

アーカイブ

応援しています

  • キッズ・セーバー
  • ソロモン・リリーフ ─ソロモン諸島を応援する有志による、震災復興支援プロジェクト─

    (終了しました)

RSS配信

 

サービスおよびソリューション一覧


最新情報・投稿をチェック


このページのトップに戻る

Photo by A is for Angie

Powered by Movable Type Pro 6.0.1