このページの本文へ

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

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. アイコンだけでダウンロード数が34%アップ!実例に見るA/Bテスト成功の秘策 14
  2. もうXMLを使わずにAndroidのUIが作れる!「Anko」って知ってる? 5
  3. JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい 4
  4. 知らないと損!CSSのvh/vwの使いこなしでレスポンシブなサイト制作が捗る 3
  5. CSS初学者がきちんと理解したい、marginとpaddingとborderの複雑な関係 2
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. Apple Musicが流行らない理由をユーザー視点で考えてみた 1015
  8. Sketch 3を使う3つの理由と10の魅力 633
  9. ボーナス支給日確定で新聞社を辞めた人に贈る本 551
  10. 5限目:「情報」を「コンテンツ」に変える 告知コピー制作メソッド 396
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

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

ランキング