CJ Column

コラム

参考にしたい!アーティストのサイトから学ぶWebデザインのトレンド

ミュージシャンやアイドル(以下アーティスト)のオフィシャルサイトというと、近年のSNSの普及によって、見る機会が減った方もいるのではないでしょうか。とはいえ、Webサイトもアーティストの大事な看板のひとつ。
凝ったデザインのサイトも多く、あらためて見てみると真似してみたいアイデアがあったりと、新たな発見がありました。
今回は、デザインの参考になりそうなサイト、新しいトレンドを取り入れているサイトなど、私が気になったサイトをいくつか紹介します。
※スクリーンショットは2017年9月22日時点のものです。

国内アーティスト

きゃりーぱみゅぱみゅ

引用元:きゃりーぱみゅぱみゅオフィシャルWEBSITE
http://kyary.asobisystem.com/

1

ポップなミュージックビデオを全面に使ったサイト。
ページをスクロールしても背景の動画は変わりませんが、グラデーション背景があることで「スクロールの楽しさ」が感じられます。文字の色やアイコンはシンプルで、バナーなどの画像も最小限になっており、映像を邪魔しないデザインです。スマホ版は縦長の動画が使われていて、PCと同じく全画面動画を実現しています。

 

KEYTALK

引用元:KEYTALK official web  
http://keytalkweb.com/

2

斜めに傾けたコンテンツが目を引くデザイン。
シンプルな中にも、バンドの若さや勢いが感じられます。バンドのロゴとも相性がいいですね!一見ファーストビューでページが完結しているように見えますが、メインビジュアル下部にさりげなくスクロールを促すアイコンが出現しています。

 

福山雅治

引用元:福山雅治オフィシャルサイト
http://www.fukuyamamasaharu.com

3

スクロールでコンテンツが出現する動き、アイテムにマウスオンすると出てくる詳細の見せ方が小気味よく、何度も見たくなるサイトです。下層ページも、フラットなデザインとワンポイント使い、丸みのある英字フォントがおしゃれ!

 

MIYAVI

引用元:MIYAVI Official Site 【MYV382TOKYO.com】
http://myv382tokyo.com/

4

最近のトレンドである、ビジュアルとコンテンツを縦に分けたレイアウト。
コンテンツを移動するときのエフェクトや、メニューの挙動も凝っていて、つい感心してしまいました。冒頭で「Webサイトもアーティストの看板」と述べましたが、これぞまさにアーティストのイメージや世界観を作り上げているサイトだなと思いました。

 

BLUE ENCOUNT

引用元:BLUE ENCOUNT
http://blueencount.jp/

5

こちらも最近多く見かける、縦にメニューを配置した印象的なデザイン。
画面の端ではなく、コンテンツにかぶさるように中間に配置されているのが良いアクセントになっていますね!

 

海外アーティスト

Katy Perry

引用元:Katy Perry | WITNESS. THE ALBUM. THE TOUR
https://www.katyperry.com/

6

注目していただきたいのがスマホ版のメニュー!アイコンが並んでいるデザインはアプリ感覚で使えますね。
メニューのマークも、AndroidやGoogle Chromeなどでなじみのある形で、個人的にハンバーガーメニューより分かりやすくて好きです。
サイト全体のデザインも、メインビジュアルに合わせたカラーリングがキュートです。

 

Coldplay

引用元:Coldplay official website
http://coldplay.com/

7

左にメインメニュー、右にサブメニュー、下にはSNSや音楽サービスへのリンクが配置されています。
こういった3方向、4方向にナビゲーションがあるサイトは、最近海外サイトなどで見かけるようになりました。
サブメニューはアイコンが可愛いだけでなく、とても機能的!情報量の多いサイトで参考にしたいアイデアですね。
ナビゲーションが多そうに見えますが、スマホ版では意外とすっきり収まっているところもポイントです。

どのサイトもユーザーの目を引く工夫がされており、サイトを制作する上でのヒントが詰まっているように思います。
ビジュアルやインパクトを重視するサイトを制作する際は、ぜひ参考にしてみてください。



A.U  フロントエンドエンジニア

一覧に戻る

お問合せ

以下のフォームにご入力の上、送信ボタンをクリックしてください。

企業名 企業名を入力してください
お名前 [必須] お名前を入力してください
メールアドレス [必須] メールアドレスを入力してください
電話番号 電話番号を入力してください
お問い合せ内容 [必須] お問い合わせ内容を入力してください

個人情報保護方針

個人情報の取り扱いについて

個人情報の取り扱いについて同意してください

ログインをすると、
会員限定記事を全文お読みいただけます。

パスワードを忘れた方へ

  • ログインIDを入力してください。
  • ログインIDを正しく入力してください。
  • パスワードを入力してください。
  • パスワードを正しく入力してください。
  • ログインID、パスワードが間違っています。


ログイン実行中

ログイン完了!ページを再読込します。