ブログ

音楽関連のサイト｜BBデザイナーsite hunt!

Bit Beans
2025.05.14

デザイン

こんにちは。Bit Beansでは毎週デザイン会を開いています。メンバーが現在進めている案件の報告や、デザインに関する課題・疑問を共有し合う場です。そして最後に行うのが「サイト探し」。毎週テーマを決めて、各自が気になったサイトを紹介します。デザイナーの目線で選ばれたサイトはどれも素敵で刺激的。毎回、新しい発見があります。そんな「サイト探し」で見つけたお気に入りのサイトを、ブログで少しずつ紹介していきます。
今週のテーマは、Yさんが提案した「音楽関連のサイト」です。
デザイナーとして常にフレッシュな感覚を持ち続けたい。そんな思いから、各自が「これは素敵！新しい！」と感じたサイトをピックアップしました。それぞれがどんなポイントに注目したのか、一言ずつコメントを添えてご紹介します。

RIP SLYME

Fさんが紹介するのは、復活が嬉しい！何度も眺めてしまうサイト

F「個人的に「復活してくれて本当に嬉しい」と思った、アーティストの公式サイトを紹介させてください。まず目を引くのはサイケデリックなカラーとゴシック体のフォントが印象的なデザイン。そして縦スクロールで進むのかと思いきや、横スクロールでコンテンツを見せていく構成になっていて、今風のトレンドを取り入れたような新鮮な仕掛けです。結成から長い歴史を持つアーティストなので、掲載されている情報量はかなり豊富ですが、構成がしっかりしていて迷子になることもなく、全体的にとても見やすいサイトだと思いました。さらにスマホからアクセスしてもモバイル対応もばっちりです。初期のジャケットを手がけていたgroovisionsが個人的に大好きなので、またアートワークがgroovisionsだと嬉しいなぁと思いつつ、何度も眺めてしまいました。」
F「サイケデリックな配色で、私のイメージはリップスライムオレンジっていうイメージです」
Y「確かにロゴもオレンジですね」F「それにスマホファーストのレイアウトになっているので、見やすくてアクセスもしやすい。今にちゃんと寄り添ったおじさんたちだなというのを感じます」

サマーソニック２０２５

Sさんが紹介するのは、ビビッドでカラフル。視覚から元気をもらえるデザインのサイト

「今年のサマソニの公式サイトです。ビビットでカラフルな配色がエネルギッシュで夏フェスらしいビジュアルは見ているだけでテンションが上がります。オレンジとブルーのグラデーションが美しく、色の変化やバララックスの演出も見ていてとても気持ちが良いです。見ているだけでテンションが上がって参加したくなるサイトだと思いました。ソニックマニアのページはサーマーソニックとは打って変わって夜のイべントらしい怪しくて美しいビジュアルです。電気グループを見つけて思わず行きたい気持ちが加速！サイト全体からフェスの熱気が伝わってくるサイトです」
S「ただ、僕はアーティストに関しては、若い人だらけで興味がなくて。でも全体的に素敵だと思いました」

#ラブなポッキー　キャンペーンサイト

Y Uさんが探したのは、“愛”をテーマにした、ポッキー×アーティストの青春コラボ

Y U「ポッキー×アーティストのコラボキャンペーンサイト。 “愛”をテーマにした特別企画で、全体的に青春っぽさを感じるデザインがとても可愛く心惹かれました。特に目を引いたのがアーティスト写真。写ルンです風の画質とか、ところどころに使われている、まるで女子高生が書いた感じの筆圧の手書きフォントとか、この世界観にピッタリ。どこか懐かしさを感じさせるデザインが、プレイリストを公開するという青春企画にとってもマッチしてると思いました」
Y「めっちゃかわいい！写真もいいですね」
S「写ルンです、っておしゃれなんですか？」

サンリオフラガリアメモリーズ

Kさんが紹介してくれるのは、楽曲セレクトが楽しい、新しいストーリー体験サイト

KO「サンリオを題材にしたYoutubeメインのアニメーションコンテンツです。
女性向けらしいキラキラしたデザインで、世界観も華やか。特に面白いのが、楽曲を選ぶという体験型の構成。セレクトしていく時の選択肢が多いぶん、タブにしてスクロールさせるなど、スマホファーストなU Iが細やかで素敵だと思いました。見た目だけじゃなく、体験としてもしっかり作られていて、本当におすすめです！SANKOUなどに載っていないのですが、埋もれていた名サイトだと思いました。元サイトも華やかでステキ！さすがサンリオです」

水曜日のカンパネラ

Mさんが紹介するサイト。

「尖ってるアーティストのサイトはやっぱり尖ってる？」――そう思って見てみたら、案の定、尖りまくっていました。まるでポスターのようなグラフィックが目を引いて、とにかく大胆で斬新！ビジュアルで圧倒される感じです。構成もなかなかユニークで、下層ページは、ほぼ外部リンクに飛ぶ仕様。左下の「WHO?」を押すとWikipediaに飛ばされるのも面白い。さらに、ページの切り替えのアニメーションの動きがとにかくスムーズで気持ちいいんです」

Linkin Park Official Site

Tさんが選んだのは、このサイト

T　「チェスターの死から7年、新ボーカルのエミリーが加わっての再始動。エミリーの声本当にいいよね。サイトのデザインもUIがユニーク。ブラウザ画面をぐるっと囲むようにメニューやロゴが固定されていて、その内側にコンテンツが展開されているレイアウトが印象的です。TOP ページでは、マウスの動きに合わせてウニョウニョと背景が歪んだり、別の背景が見えたりする演出も目新しくてGOOD。「music」のアルバムの曲紹介ページの画面(モーダル)がぼかし&半透明というのが個人的に好みで、自分ではモーダルをすぐ黒の半透明背景で済ませてしまいがちです。今度どこかでやってみたいと思いました」

T 「一番気に入っているのは、曲紹介のページ。背景はジャケットがぼかされて半透明になる表現がいい、あのモダールだとあの半透明の黒を置きがちですよね」
YO「確かにかっこいいですね」

BOB ROCK FESTIVAL

Yさんが紹介したのは、土日が休めない人のためのフェスサイト

Y「土日休みがない美容師のためのフェスのサイトを見つけました。フェスのサイトって、情報が多くてごちゃっとしているものが多いですが、このサイトは構成がとてもシンプルで、チケット申し込みの導線がわかりやすくて好印象でした。全体の情報量もコンパクトに絞られていて、必要なことを丁寧に伝えている感じです。イラストもコンセプトにも統一感があって、派手すぎず、落ち着いた雰囲気でステキです。まさに知る人ぞ知る隠れ家的なフェスのサイトで、いいなと思いました」
SH「美容師のための野外フェス。面白いですね」。

名古屋たちばな高等学校マーチングバンド

TAさんが紹介するのは、クラシカルで上品。余白と光が生む音楽的デザインのサイト

このサイトは、マーチングバンドの持つクラシカルな雰囲気を非常によく表現したデザインだと思います。使用するイラストや色味を絞り込むことで、視覚的な統一感と上品さが感じられ、サイト全体の印象を洗練されたものにしています。特に印象的なのは、斜めにカットされたレイアウトや、スポットライトを当てたような光の演出です。これらの要素が随所に効いていて、まるでステージ上での演奏の高揚感や集中を連想させる効果を生み出しています。

また、黒を基調とした配色により、金属製の楽器や制服の装飾が映え、演奏中の緊張感や輝きを強調しています。さらにアニメーションやスクロールに連動した演出も効果的で、静的なウェブ空間の中に「音」や「動き」を感じさせる工夫がなされています」

YO「イラストもいいですが、斜めの感じが素敵ですね。スポットを当てたような表現も素敵ですね」

今回は、好きなアーティストや面白いサイトを紹介してくれました。自分のデザインに取り入れたいものもたくさんあったのではないでしょうか。