レスポンシブデザインのアーティストサイト10選!

yonetsuHP

本日はこのブログのテーマでもあるwebサイトに関する話題です。

人々がプライベートのPCやスマホというデジタルデバイスを持っているのが当たり前になったこのご時世、Webサイトはデジタルにおける自分(企業、アーティスト)の分身とも言えます。

アーティストサイトのグラフィックデザインやユーザビリティはブランディングや人気を支える大事な要素となるのです。

そういう風潮がある中で近年よく利用されるのがレスポンシブデザインというデザイン手法です。

レスポンシブデザインとは?

簡単に言うと、スマホやPCなど様々な大きさデバイスでサイトを閲覧したときにその画面サイズに合わせてサイトのデザインを最適化してくれるデザインのことですね。

PCで閲覧されている方は画面幅をだんだん小さくしてみてください。

あるポイント(ブレークポイント)でページ構成がクルっと変わります。このサイトだと、右上にメニューバーが現れ、スマホ仕様に姿を変えます。

レスポンシブデザインがここまで普及するまでは、PCサイトとモバイル(スマホ)サイトが別々に存在していました。今でもデザインの自由性など様々な理由でスマホサイトを別に持っているケースもありますが、昨今はSEOや運用負荷軽減、品質管理などの観点で重宝されています。

レスポンシブアーティストサイト10選

今回はレスポンシブデザインで制作されているイケてるアーティストサイトを紹介したいと思います。※画像はPC版です。

米津玄師

yonetsuHP
ネット時代の新進気鋭のアーティストはやはりオウンドメディアにもこだわっているのでしょう。
http://reissuerecords.net/

go!go!vanillas

gogovanHP
今回の記事を書くにあたり、一通りHPを見て回りましたが、所謂若手ロックバンドは少ないように感じました。その中で一昨年のスぺシャ列伝から波に乗っているgo!go!vanillas。
http://gogovanillas.com/

ゲスの極み乙女。

gesuHP
今飛ぶ鳥を落とす勢いで駆け上がっているゲスの極み乙女。彼らはレスポンシブだろうなぁと思っていたら…やはり。
http://gesuotome.com/

the fin

thefinHP
the finも予想通り。デザインを見る限りスマホファーストで制作されたのかな、と思ったりもします。
http://www.thefin.jp/

パスピエ

passepiedHP
ブランディングのデジタル基盤でもあるオウンドメディア。パスピエは独自のビジュアルを展開し、ここでの世界観も抜け目がありません。
https://passepied.info/

THE NOVEMBERS

theNovHP
メインビジュアルがとても印象的。そのポイントを活かすデザイン意識はPC、スマホ共に感じられます。
http://the-novembers.com/

Greeeen

greeeenHP
アルバム紹介ページから収録曲全曲の歌詞・映像へのリンクがあるのは驚きでした。
http://greeeen.co.jp/

サザンオールスターズ

sasHP
出ました大物!ベテランアーティストがレスポンシブ対応されているのは意外でした!
http://special.sas-fan.net/special/sas2015/

aiko

aikoHP
動画の配置を見ると、スマホファーストなのかな、と感じます。特にスマホでのUIがシンプルで好きです。
http://aiko.com/

N.O.R.K

norkHP
N.O.R.K、デジタルに精通していることがサイトから伝わります。メニュー(グロナビ含め)にSound Cloudを入れているアーティストサイトもなかなかないですよね。
http://www.nork.asia/

以上10サイト選んでみました。意外とあっという間に見つかりました。

ピックアップしてみた印象としては、やはり音楽でシューゲイザーやボカロなど、デジタルをイメージさせるようなアーティストはレスポンシブデザインを使用しているところも多かったように感じます。

そして、今回はあえてPC版のみの画像を掲載しています。スマホサイズになるとどうデザインが変わるのか、PCで画面サイズを調整して是非ご自身のお手元でお確かめください。

ブレークポイントでデザインがクルッ!と切り替わるあの感触、癖になるかもしれません。笑

アーティストサイトがただの”掲示板”としてではなく、”マーケティングプラットフォーム”として認知され、注力されるようになる第一歩として、今回ピックアップしたようなレスポンシブデザインが取り入れられているサイトがたくさんあるのはこの上なく嬉しいことですね!


SNSでもご購読できます。

コメント

コメントを残す

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>