Snoop Dogg – https://snoopdogg.com/
今回のwebサイト漁りは御大Snoop Doggでございます。
言わずと知れた西海岸のOG（Original Gangsta）でございます。
新作のアルバム、めちゃカッコいいンスよね〜。
まあ細かいことは抜きにして、早速サイトを見ていきましょう。
Top page
First view
Key visは新作のアルバムのカバージャケット。
ちなみに、Meth＆Redと一緒に歌ってる曲が僕の今のところのお気に入りです。
他にもカッコいい曲だらけだったので、もっとじっくり聴き込みたいと思います。
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 01
そして、Key visをホバーすると少し浮き上がる仕組み。
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 02
所属レーベルのDef Jamのwebサイトもオシャレでしたが、こういった小技が効いている造りを見るとSnoop様も負けず劣らずなwebサイトだなと思う次第です。
そして、これはコンテンツページで紹介しても良かったのですが、左上のアイコンをホバーするとSNSアイコンが現れる仕組みになっております。
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 03
見比べないと分かりづらいだろうなと思い、Top pageでご紹介することにしました。
それでは下へスクロールしていきます。
2nd view〜
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 04
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 05
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 06
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 07
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 08
コンテンツ毎に区分けされているので見やすいですね。Navigation menuはposition: relative;で常に表示されてます。spotifyの再生ツールも同じrelativeですが、footerに差し掛かると消える仕組み。jQueryで制御しているのでしょうか？初心者の私にはちょっと分かりませんでした笑
Hover Action
こちらのTop pageですが、各コンテンツごとにホバーアクションが違うのも見どころです。
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 09
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 10
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 11
特にFeatured Releasesのホバーするとジャケットからレコードが出てくる動きがオシャレ。
これは絶対に何かで真似したいと思います。
バックグラウンドは黒で統一し、所々でパープルがキーカラーとして現れるんですが、Snoopのキャラともマッチしていて本当にオシャレな造りだなと思います。
それではコンテンツページの方を見ていきます。
Contents page
News
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 12
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 13
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 14
ホバーアクションはトップページを引き継ぐ形。
クリックすると各ニュースコンテンツのページへと飛びます。
Film
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 15
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 16
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 17
ホバーすると画像が一回り大きくなる仕組み。transition: ease-in;で構成されています。
クリックすると各フィルムコンテンツへ飛び、フィルムコンテンツの詳細と、下部に購入ページ（amazonなど）へのリンクやSNSへのShareリンクボタンが表示されます。
Music
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 18
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 19
3カラム構成で作品が並べられています。
ホバーアクションはトップページと同じく、クリックすると作品の詳細ページへ。
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 20
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 21
ページ内で視聴することも出来ますので、新譜も旧譜もページ内でチェックできます。ありがたや。
Campaigns
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 22
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 23
キャンペーンページは2カラムでimgとコンテンツの簡単な説明。
ホバーするとRead moreのボタンの色が変わり、クリックすると各キャンペーンコンテンツへとリンクされます。
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 24
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 25
Gin and Juiceを聴きながらこのページを見てますが、怪しい雰囲気プンプンで面白いすね〜笑
Shop
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 26
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 27
ショップページはNavメニューの中で唯一 別タブで開かれます。それだけ気合が入っているページなんでしょう。しっかり作り込まれたショッピングサイトになっていました。
私事ではありますが、キャンドルの仕事をしはじめたので、このSnoopのキャンドルが気になってしまいました。
Appearances
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 28
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 29
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 30
アピアランス – 容姿、外観。要するにどこそこで見れるってよー的なライブ告知ページですかね。
ホバーすると文字色が変化します。ちなみにレキシントンのパープアリーナ（笑）という場所でライブするようですね。
何から何までパープルがキーカラーになっていて微笑んでしまいました♪
Snoop TV
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 31
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 32
読んで字のごとく、Snoopがホストを務めるTV show形式の番組です。
少し前の動画ばかりですし、ASAP Rockyとのフリースタイル動画が話題にもなったのでご存知の方も多いかと思います。ページ遷移なく見れますので、ストレスなく楽しめます。
Contact & Search
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 33
webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 09 – Snoop Dogg 34
Snoop様にメッセージを送りたい方はコンタクトフォームから。
あの曲も聞けるのかしら？あのグッズあるのかしら？と気になった方はSearchから検索を。
まとめ
ゴージャスな造りで、Snoop Doggのキャラクターイメージがしっかり反映されたサイトの造りだと感じました。
きっと打ち合わせの時からレーベル含め綿密に話し合われたのでしょう。あまりにもしっかり作られているので、他に紹介したアーティスト（特にGucci笑）のwebサイトはなんだったのかと考えてしまいました笑 まあどのサイトも良し悪しですがね〜
もちょっとwebサイト構築の真髄を理解できた頃に、もう一度見にきて勉強しようと思いました。
コメント