WHITE & β

“バンドが存在している”と感じるサイトへ。

Overview

WHITE & β は、YouTube発のロックバンドという設定をもとに制作した架空公式サイトです。
単なる紹介ページではなく、MV・ライブ・オフショット・メンバーQ&Aを通して、 ファンが“見たいもの”を順番に体験できる構成を目指しました。

Challenge

課題は、ビジュアルの強い世界観と、公式サイトとしての読みやすさを両立することでした。
演出を増やしすぎると重くなり、情報を整理しすぎるとバンドらしい熱量が薄れるため、 “見せ場”と“余韻”のバランスを慎重に設計しました。

Solution

• Heroに静止画と短尺動画を交互に表示し、MV編集のようなテンポを演出
• 切替時に白フラッシュと名前バー発光を入れ、映像とUIを連動
• Membersではモノクロカードからカラーの詳細モーダルへ展開
• SECRET Q&Aで、公式プロフィール以上の“推し深掘り”体験を実装
• PhotobookはSPで横スワイプ＋ボタンループに対応し、写真集らしく閲覧可能に

Highlights

• モノクロ＋メッシュカラーだけを残すビジュアルルールで、ブランド感を統一。
• メンバー別背景演出により、赤・紫・青・黄・緑の個性を画面演出へ変換。
• Movie / Photobook / Contact まで、ファンサイトとして自然な導線に整理。
• 最後は静かなCTAカードで締め、熱量のあとに余韻が残る構成に。

Design

デザインは黒・白・グレーを基調に、各メンバーの色を“見せすぎないアクセント”として配置しました。
透明抜きロゴの中で背景画像をスライドさせる見出し演出を複数セクションで使い、 サイト全体に統一された音楽映像のようなリズムを持たせています。

Result

メンバーの個性、MVの空気、オフショットの親密さを一つのサイト体験としてまとめることで、 “このバンドが本当に存在していそう”と感じられる公式サイトに仕上がりました。
世界観訴求とファン体験の両方を見せられる、上位ボリュームの制作事例です。

Role & Deliverables

• バンド設定・世界観をWebサイト構成へ落とし込み
• Hero / Release / About / Members / Movie / Photobook / Contact の情報設計
• モノクロ＋メッシュカラーを軸にしたビジュアルルール設計
• Hero動画切替・モーダル・Q&A・写真集UIの実装