メロウな時間のwebサイト漁り 07

Chance The Rapper – https://chancestuff.com/

まるでUSラッパーの紹介サイトのようになってきた当サイトでございますが、
あくまでwebサイトの構築方法のためのサイトでございます。

とか言いながら今回もUSラッパーのサイトを拝見させていただきます。
グラミー賞を受賞したことでも知られるChance The Rapperはアメリカはシカゴのラッパーです。
少年時代のCommonとのエピソードでも有名でありますが、彼はCDや音源は販売せず、あくまで無料配信に拘り、ライブやグッズ販売のみで収益を上げるとゆう全く新しいスタイルのプロモーションで有名になりました。
そのため、webサイトにも力を入れているはず！と思い見てみることにいたしました。それでは早速見て行きましょう。

Top page

First ViewはChance The Rapperのロゴがデカデカと配置され、クリックするとホームへと入っていけるようになっています。

webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 07 – Chance The Rapper 01

ロゴに関して、ロゴを制作時のアルバム『Coloring Book』が、彼にとって”３”作目のミックステープということにちなんで３の数字がプリントされたそうですが、実際は4枚目じゃねーのかなとも思ってたりします。どうゆうカウント方法なんでしょう？
ちなみに、僕はAcid rapの頃のシカゴジューク時代のサウンドが好きでしたが、それ以降はあんまり聞いてません。申し訳ない。

そして、こちらがトップページ。

webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 07 – Chance The Rapper 02

トップページはシンプルなページで、画面左側がNavigationメニューになっています。
右側の書体が立体感が出ていてこだわっているなと感じます。

それではコンテンツページを見て行きます。

Contents page

まずはGet ticketをクリックすると、ライブ講演の会場がズラリと並びます。

webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 07 – Chance The Rapper 03

音源の販売をしない分だけライブ本数が多いことでも知られており、特にカレッジライブが多いので有名なアーティストですので会場も多岐にわたります。
それぞれクリックすると外部のチケット販売ページへとリンクされております。

お次はWhatch the Official Trailer

webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 07 – Chance The Rapper 04

クリックするとポップアップ形式で動画が流れます。ページは変わらないんで、面倒な手間がありません。

そして、お次はTeaser

webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 07 – Chance The Rapper 05

こちらもトレイラーと同じ仕組みです。

お次はShopページ。こちらはクリックすると別タブで開かれます。
ShopページのFirst Viewは埋め込みの動画になっております。

webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 07 – Chance The Rapper 06

そして、下へとスクロールしていくと販売中の商品が3カラムで表示されます。

webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 07 – Chance The Rapper 07

ホバーするとこんな感じ。

webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 07 – Chance The Rapper 08

さらにクリックするとこんな感じ。

webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 07 – Chance The Rapper 09

何度も言うように音源は販売せずライブとグッズ販売で収益を上げるため、Shopページのアイテム数がすごい多かったのと、購入までの動線がしっかり出来ていると思いました。ECサイト作りの際はお手本になるなと感じました。

そして最後はWhatch The Latest

webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 07 – Chance The Rapper 10

過去に配信されています動画のアーカイブですね。4カラムでコンテンツを埋め込んであり、とても見やすい作りです。

webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 07 – Chance The Rapper 11

ホバーすると埋め込み動画が少し大きくなるのですが、スクショでは分かりづらいですね笑

webサイト 100選 | メロウな時間のWebサイト漁り- メロウな時間のwebサイト漁り 07 – Chance The Rapper 12

クリックするとこんな感じ。

まとめ

サイト自体はシンプルな作りでページ遷移も少なく、サイト内で動画をしっかり見れる作りだったのが勉強になりました。
そして、Shopページが充実していて、こちらも今後のサイト作りの参考になるなと感じました。

メロウな時間のwebサイト漁り 08へ