このページの本文へ

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

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. 問い合わせが来る採用サイトのポイントとは 2
  2. Sketch使いなら試してみたい!UIデザインツールへ進化した「Framer」とは? 1
  3. 広告運用担当者が2018年に押さえておきたい、3つの変化 1
  4. Web担当者が知っておきたい、「読んでもらう」ための写真素材の選び方 1
  5. 日本のUIデザインシーンは3年でどう変わったか? 坪田 朋さんに聞く 1
  6. なぜいまさら「ブログ」なの?KDDIウェブに聞く新サービスの狙い 219
  7. 全部知ってる?今後のサイト制作で押さえたいCSSの最新プロパティ9選 161
  8. フロントエンドエンジニアが絶対読んでおきたいJavaScript最新記事ベスト10 119
  9. ブラウザーだけでWatsonが使える!人工知能アプリの作り方 92
  10. ビジネスサイト運営が捗る!WordPress厳選プラグイン10+1 80
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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