「なぜ私は、アーティストのファンサイトを本気で作ったのか」

ライブ当日が近づくにつれて、少しずつ気持ちが高まっていく。
SNSでライブを楽しみにしている人たちの投稿を見たり、過去の楽曲を聴き返したり。

私は、その「ライブを待っている時間」そのものが好きでした。

ただ、その気持ちはSNSのタイムラインの中に流れていってしまい、残り続けるものではありません。

だからこそ今回のサイトでは、ライブまでの日数をカウントダウンしながら、ファン同士がその時間を共有できるような場所を作りたいと思いました。

サイト内では、楽曲のシェア機能を中心に、ライブ前の高揚感を少しずつ積み上げていけるような構成を意識しています。

背景で動く粒子演出も、主張しすぎる演出ではなく、ライブ前の空気感を邪魔しない“雰囲気づくり”の一部として設計しました。

ライブ前の高揚感を、Web体験として表現したかった

実際、最初から派手な演出を作りたいと考えていたわけではありませんでした。

ライブそのものが主役なので、サイト側が前に出すぎてしまうと、逆にライブ前の空気感を壊してしまう気がしていたからです。

そのため、粒子演出も強く動かし続けるのではなく、背景として静かに存在する程度に調整しています。

サイトを開いた瞬間に、少しだけライブ前の雰囲気を感じられる。
でも、操作や投稿体験の邪魔にはならない。

そのバランスを意識しながら、演出の密度や色味、余白感を細かく調整していきました。

また、このサイトは、ただ見るだけで終わるものにはしたくありませんでした。

ファン自身が楽曲を選び、SNSへ投稿しながら、ライブまでの日数や気持ちを共有できる場所にしたいと考えています。

どの曲を聴き返しているのか。
ライブ当日をどんな気持ちで待っているのか。

そういったライブ前の時間そのものを、少しでも楽しくできるようなサイトを目指して制作しました。

ただのファンサイトにはしたくなかった

一般的なファンサイトは、情報をまとめて閲覧することが中心になるものが多いと思います。

ですが今回のサイトでは、ライブ前の時間そのものを楽しめるような構成を意識しました。

そのため、単に情報を並べるだけではなく、楽曲投稿やカウントダウン、シェア機能など、ファン自身が参加できる導線を取り入れています。

特に意識したのは、SNSへ自然に共有したくなる流れです。

ライブが近づくにつれて、自分が今どの曲を聴いているのか、どんな気持ちでライブを待っているのかを発信したくなる瞬間があります。

その感覚を、サイトの中で自然に行えるようにしたいと考えました

空気感を支えるための実装

今回のサイトでは、Viteをベースに、Vanilla JavaScriptとWebGLを使って制作を行っています。

粒子演出にはGLSLシェーダーを使用しており、背景として静かに空気感を支えるような表現を意識しました。

また、Three.jsのようなライブラリは使用せず、描画や制御を調整しながら実装しています。

ライブ前の雰囲気を邪魔しないよう、粒子の密度や動き方、色味のバランスなども細かく調整しました。

さらに、SNSでの共有導線も重視していたため、Cloudflare Workersを使いながら、OGP表示やシェア時の見え方も含めて設計しています。

単に見た目を作るだけではなく、実際に公開して触れられる状態まで含めて制作したことで、演出と使いやすさを両立する難しさも強く実感しました。

作ってみて感じたこと

今回の制作を通して、Webサイトは単に情報を表示するだけではなく、空気感や時間そのものを体験として表現できるものなのだと改めて感じました。

特にライブ前の高揚感のような曖昧な感覚を形にしようとすると、派手な演出を増やすことよりも、違和感を減らしたり、雰囲気を壊さないことの方が重要になる場面が多くありました。

また、実際に公開しながら運用していく中で、デザインだけではなく、SNSとの繋がり方やモバイル環境での見え方まで含めて考える必要があることも強く実感しています。

今回のサイトは個人制作ではありますが、ただ作って終わりではなく、公開後も改善を続けながら運用している点も、自分にとって大きな経験になっています。

これからも、機能を作るだけではなく、その場の空気感や感情まで含めて体験として設計できるようなWeb表現に挑戦していきたいと思っています。

技術スタック

Frontend
・HTML / CSS
・Vanilla JavaScript
・ES Modules
・Vite
・Swiper 11 CDN

Graphics / Visual
・WebGL
・GLSL Shader
・Canvas 2D API

Backend / Infrastructure
・Cloudflare Workers
・Wrangler
・Cloudflare HTMLRewriter

Assets
・WebP / SVG / PNG

サイトURL

こちらが実際に公開しているサイトになります。
ライブ日程に合わせて演出内容を変更しているため、閲覧するタイミングによってはカウントダウン表示や粒子演出が異なる場合があります。

また、掲載に関しては事前に確認をいただいた上で公開しています。