このページの本文へ

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

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. 初めて作るWordPressプラグイン! ツールバーを自在にカスタマイズする方法 2
  2. webpackよりもシンプルで高速!最新モジュールバンドラー「FuseBox」超入門 2
  3. ヒュンダイ、Google Assistant と連携、リモートで自動車に音声指示が可能に 1
  4. Bootstrapはすでに下火に——海外の開発者1600人に聞いたCSS開発のいま 1
  5. Adobe XDで始める爆速プロトタイピング 1
  6. 商業写真で首切りと串刺しがダメな理由 2324
  7. ボーナス支給日確定で新聞社を辞めた人に贈る本 551
  8. Yahoo!検索、8月18日より検索結果ページをSSL暗号化すると発表 393
  9. Jimdoが国内100万サイト突破、初のテレビCMも 384
  10. 「休業の挨拶」が話題のあの老舗の羊かんを撮ってみた 371
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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

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

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

ランキング