7g3の公式サイトを作った。音楽活動のための小さなWebサイト設計

はじめに

自分の音楽活動用（@7g3_na）に、公式サイトを作りました。

7g3は、Hyperflip / Ambient / Glitch / Shoegaze などの要素を軸に音楽を作っている名義です。

今回作ったサイトは、いわゆる大きなポートフォリオサイトではなく、
音源・作品・連絡先にすぐ辿り着ける小さな公式サイトを目指しました。

SNS、SoundCloud、Bandcamp、YouTubeなど、音楽活動の場所はどうしても複数に分かれます。

そのため、それらを一箇所にまとめつつ、
単なるリンク集ではなく「7g3の空気感」が少し伝わるように設計しました。

作ったもの

サイトの役割は大きく分けて以下です。

• 7g3という名義の説明
• 作品への導線
• SoundCloud / Bandcamp / YouTube / SNS などへのリンク
• 連絡先への導線
• 現在の活動の入口

特に意識したのは、情報量を増やしすぎないことです。

アーティストサイトは、何でも載せようとすると一気に履歴書っぽくなります。

今回は「全部説明する」よりも、
初めて見た人がすぐに作品へ飛べることを優先しました。

デザイン方針

1. 余白を多めにする

音楽の方向性として、壊れた感じ、孤独感、余韻、ノイズ感のようなものがあります。

そのため、デザインも詰め込みすぎず、
余白をしっかり取って、静かに見えるようにしました。

情報を強く主張させるよりも、

見たあとに少し残る

くらいの温度感を狙っています。

2. ポップだけど、派手にしすぎない

7g3の音楽は高BPMや電子音も多いので、完全に無機質なデザインにはしたくありませんでした。

ただ、派手なグラデーションや過剰な装飾を入れすぎると、
音楽よりもサイトの主張が強くなってしまいます。

そのため、

• 白〜薄いグレーをベースにする
• 色はアクセント程度に使う
• 角丸やカードで少し柔らかくする
• 文字の読みやすさを優先する

という方向にしています。

3. その人らしさを残す

最近のWebサイトは、綺麗に整えすぎると、逆にその人らしさが薄く見えてしまうことがあります。

なので今回は、あえて説明文を作り込みすぎず、
少し短く、少し余白のある言葉にしました。

例えば、

曲、記録、リンク。7g3の置き場所。

のように、完璧なマーケティングコピーではなく、
本人の言葉として置けるくらいの文章を意識しています。

実装方針

構成としては、静的なアーティストサイトです。

複雑なCMSやバックエンドは使わず、
更新しやすく、軽く、壊れにくい構成を優先しました。

想定している構成は以下です。

React
TypeScript
Vite
CSS
Cloudflare Pages

個人のアーティストサイトは、最初から重い仕組みにしなくてもいいと思っています。

大事なのは、

• すぐ表示される
• スマホで見やすい
• 更新が面倒にならない
• リンク先へ迷わず飛べる
• 名刺代わりに送れる

ことです。

セクション設計

Hero

最初に表示される部分では、説明を詰め込みすぎないようにしました。

「何者か」を一文で説明しようとすると、どうしても肩書きが増えます。

でもアーティストサイトの場合、最初に必要なのは詳細な経歴ではなく、
その人の温度感だと思っています。

そのため、Heroでは名前、短い説明、主要リンクを中心にしました。

About

Aboutでは、7g3の音楽性を短く説明します。

ここで意識したのは、ジャンル名を並べすぎないことです。

もちろん、Hyperflip / Ambient / Glitch / Shoegaze などの要素はあります。

ただ、それを全部前面に出すと、初見の人には少し硬く見えます。

なので、ジャンルは補助として扱い、
「どういう質感の音を作っているか」が伝わるようにしました。

Works

Worksでは、作品を全部並べるのではなく、
外部サービスに散らばった作品へ辿る入口として設計しました。

作品一覧を完全に管理しようとすると、更新コストが高くなります。

なので、最初は代表的な作品やリンクを中心に置き、
必要に応じて少しずつ追加できる形にしています。

この設計にしておくと、活動が増えても破綻しにくいです。

Contact

Contactはかなり重要です。

SNSだけでも連絡はできますが、
公式サイトに連絡先があると、外部の人が見たときに安心感が出ます。

特に音楽活動では、

• イベント出演
• コンピレーション
• 楽曲制作
• コラボ
• Web制作
• その他の相談

など、連絡の入口が必要になる場面があります。

そのため、サイト内に連絡先への導線を分かりやすく置きました。

UIで意識したこと

カードは使うが、情報を詰めすぎない

カードUIは便利ですが、使いすぎると一気に「テンプレート感」が出ます。

今回はカードを使いつつも、

• テキスト量を抑える
• 余白を広めにする
• 枠線や背景色を強くしすぎない
• クリックできる要素を分かりやすくする

ことを意識しました。

アニメーションは入れすぎない

現時点では、派手なアニメーションは入れていません。

アーティストサイトなので動きを入れたくなりますが、
アニメーションを増やすほど、サイトそのものの主張が強くなります。

今回は、動きで見せるよりも、
文字・余白・導線の整理で見せることを優先しました。

個人サイトの場合、最初から演出を作り込むよりも、
まずは「ちゃんと読める」「ちゃんと飛べる」ことの方が大事だと思っています。

レスポンシブ対応

スマホで見られることをかなり意識しました。

音楽活動のリンクは、XやDiscord、Instagramなどから開かれることが多いです。

つまり、最初に見られる環境はPCよりスマホの可能性が高いです。

そのため、

• テキストを小さくしすぎない
• ボタンのタップ領域を広めにする
• 横並びレイアウトに依存しすぎない
• 1カラムでも成立する構成にする

ことを優先しました。

.section {
  max-width: 960px;
  margin: 0 auto;
  padding: 80px 24px;
}

@media (max-width: 768px) {
  .section {
    padding: 56px 18px;
  }
}

デザインを作るときはPCで見がちですが、
個人サイトこそスマホでの第一印象がかなり重要だと思います。

Cloudflare Pagesにデプロイ

デプロイはCloudflare Pagesを使いました。

GitHubにpushすると自動でビルドされるので、
静的サイトとの相性がかなり良いです。

個人サイトでCloudflare Pagesを使うメリットは、

• 無料枠でも十分使いやすい
• 独自ドメインを当てやすい
• 表示が速い
• GitHub連携が簡単
• SSLまわりをほぼ任せられる

あたりです。

アーティストサイトは、頻繁に大規模改修するよりも、
小さく直してすぐ反映できることが大事なので、GitHub連携はかなり便利です。

実装で大事だったこと

今回のサイトで一番大事だったのは、技術的に凝ることではありませんでした。

むしろ、

• 何を載せないか
• どの文章を短くするか
• どのリンクを目立たせるか
• 作品の雰囲気をどう邪魔しないか

の方が重要でした。

Webサイトは、機能を増やすほど良くなるとは限りません。

特にアーティストサイトの場合、
情報量が多すぎると、かえって印象が薄くなることがあります。

今回は、実装よりも編集に近い感覚で作りました。

今後やりたいこと

今後は、以下を追加していきたいです。

• 作品ページの拡張
• OGP画像の最適化
• 各作品への導線整理
• 軽いアニメーション追加
• 多言語対応
• リリースごとの個別ページ
• SoundCloud / Bandcamp / YouTubeへの導線強化

特にOGPは、SNSで共有されたときの見え方に直結するので、
音楽活動用サイトではかなり重要だと思っています。

まとめ

7g3の公式サイトは、技術的に派手なサイトではありません。

ただ、個人の音楽活動においては、
「ちゃんと存在している場所」があること自体が大事だと思っています。

SNSは流れていくし、SoundCloudやBandcampもそれぞれ別の場所にあります。

その間に、
自分の名義・作品・活動をまとめる小さな拠点として、公式サイトを作りました。

個人のアーティストサイトは、完璧なポートフォリオである必要はありません。

むしろ最初は、

その人の空気が分かる
作品にすぐ飛べる
連絡先が分かる

くらいで十分だと思います。

7g3の置き場所として、これから少しずつ育てていきます。