ワック スタイル
i
n
f
o
✕ とじれる
about : wack-style.
ワックスタイルについて

wack-style.は飼育中のハリネズミ(ピグミーヘッジホッグ)の飼い方やファッション・webマーケ・仕事に役立つ情報等をお届けするwebサイトです。

著者:
now reading
現在のページ

John Peel's Record Archive main

TITLE  » [Web/Contents]The John PeelVinyl Record Archive
DATE 2012.05.04
CATEGORY Contents, Study
TAG  , , ,
ABOUT ハリネズミ(ピグミーヘッジホッグ)飼育飼い方や値段など総合ブログサイト。ペットの餌やりやゲージ・里親販売情報まではりねずみの情報得るならwack-styleへ!
+ SHARE THIS PAGE
        

[Web/Contents]The John PeelVinyl Record Archive

[Web/Contents]The John PeelVinyl Record Archive


2012
05.04


英BBC RADIOの伝説のDJとして知られるJOHN PEEL氏のレコードコレクションがインターネット上で観覧出来るサイトが公開されています。レコード好きは必見の内容です。サイトは全てhtml5で制作されておりレコードコレクション以外にも、JOHN PEELのラジオや音源のアーカイブがサイト上に掲載されています。

レコードコレクションページ

特にレコードコレクションのページのUIが素晴らしく、レコード棚から一枚一枚レコードを選ぶ感覚が再現されていることに驚きました。

クリック後の1ページ目では、A〜順にアーティスト名でレコードが並べられたレコード棚の写真がでてきます。アルファベットにカーソルを合わせることで、その頭文字からはじまるアーティストのレコード棚へ移ります。

棚に収納されているレコード1枚1枚にリンクが振り当てられています。ファッション通販サイトでトータルコーディネートされた1枚のモデル写真に上着やパンツ等のアイテム別にリンクを貼れる技術を応用したのでしょう。

画象にツールチップを表示できるjQueryプラグイン「iPicture」 | Web活メモ帳

レコード詳細ページではアートワークは勿論、レコードによってはiTunesやSpotify,SoundCloudへのリンクが貼られていて、すぐに聴くことができます。

5月3日現在では’A’が頭文字のアーティストのレコードのみの公開になりますが、B〜以降のアーティストのコレクションも今後1 週間ごとに追加される予定です。

その他ページ

メインコンテンツ?となるレコードコレクション以外のコンテンツはfancyboxにより情報を掲載しています。

まとめ

レコードやCDを収集したことがある方ならば棚から1枚1枚レコードを選ぶ感覚に共感することでしょう。発想からデザイン、完成度まで勉強になることばかりでした。。

是非皆さまもお試し下さい!
URL John Peel’s Record Archive

著者: