このページの本文へ

キーボードでサクサク動くウィンドウ・ショッピングサイト

Flashで衝動買い!Amazonの新UIサイト

2008年10月31日 04時00分更新

小橋川誠己/企画報道編集部

  • この記事をはてなブックマークに追加
  • 本文印刷

 「これはすごい!」と思わず漏らしてしまうユーザーインターフェイス(UI)のWebサイトが、米アマゾン・ドットコムから登場した!

Amazon
これが「Amazon Windowshop」。これだけ商品をプッシュされれば、衝動買いの機会も高まるかも?

 「Amazon Windowshop Beta」と名づけられた新サイトは、その名のとおり、Amazon.comの商品をまるで“ウィンドウ・ショッピング”のような感覚で眺められる。ユニークなUIが斬新だ。

Amazon
基本操作はキーボード。矢印キーで移動、スペースキーで拡大/縮小する。マウスホイールでも操作は可能

 Windowshopでは、ブラウザーいっぱいに並ぶ商品のサムネイル画像の壁面を、キーボードを使って上下左右に自在に移動できる。表示の切り替えはとてもスムーズで、さくさく動く。さらに特定の商品画像をクリックする(またはスペースキーを押す)と画像が拡大され、映像商品の場合はサンプルムービーの閲覧が、音楽CDの場合は視聴がその場でできる。

 表示される商品は、本/音楽/ビデオ(DVD)/ゲームの各カテゴリにおける新商品とベストセラーが対象。データは毎週火曜日に更新され、蓄積された過去のデータは右方向にスクロールしていくとチェック可能だ。

Amazon
サンプルムービーの閲覧や音楽の視聴もできる

 見た目はかなりインパクトがあるWindowshopだが、現時点での機能はかなり限定的だ。購入ボタンをクリックすると本家Amazon.comのサイトに移動することからも分かるように、Amazonが公開しているWebサービスAPIを自社で使った、新しいUIの1つの実験サイトと見てもいいのかもしれない。

 この新サイト、アニメーションなどの処理はFlashで、キーボードやマウスホイールイベントの検出はJavaScriptで処理しているようだ。Flashをフルに使ったインパクトのあるデザインと、キーボード操作を組み合わせたUIはとにかく楽しい。新しいWebサービスのアイデアとして参考になりそうだ。

カテゴリートップへ

ソーシャルランキング
  1. チームで美しくメンテナブルなCSSを書くための 「Stylelint」導入のすすめ 1
  2. スクロールアニメにはjQuery不要でサクッと使える「ScrollReveal.js」が便利 1
  3. 「脱電話」でコミュニケーション基盤へ進化したTwilio、LINEとも接続 1
  4. 「自社がどういうキーワードで人を集められるのか」企業と個人のミスマッチを防ぐ採用ページ作り 1
  5. Google検索、コアアルゴリズムのアップデートを実施 1
  6. なぜいまさら「ブログ」なの?KDDIウェブに聞く新サービスの狙い 218
  7. 全部知ってる?今後のサイト制作で押さえたいCSSの最新プロパティ9選 161
  8. フロントエンドエンジニアが絶対読んでおきたいJavaScript最新記事ベスト10 120
  9. フロントエンド開発の現場で役立つJavaScriptの知恵10選 78
  10. これなら作れる!WordPressプラグイン開発に役立つ記事まとめ 62
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く