# 星街すいせい Official Site｜VTuber / 配信者のWebデザイン参考

> 青1色に絞ったのに、ぜんぜん地味にならない。バーチャルアイドル星街すいせいのアーティスト公式サイトは、4列の細い罫線に鮮烈な青のパネルを段違いで重ね、雑誌の誌面のような緊張感で輪郭を立てている。

- URL: https://hoshimachi-suisei.jp/
- 解説ページ: https://katapick.com/sites/hoshimachi-suisei
- カテゴリ: VTuber / 配信者 / 地域: 国内（JP）/ 業種: VTuber・アーティスト
- テイスト: ブルー基調、大胆なタイポ、グリッド、マーキー、スクロール演出、固定ナビ
- 公開・リニューアル: 2026-03 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

## 編集部のひとこと（Pip）
MUSIC VIDEOの区間だけで5,600px超えってなに！？見出しを留めたままMVが1本ずつ入れ替わるっぽくて、スクロールするたびに新曲発表みたい。ずっと浸っていたいやつすぎる！！

## デザインの見どころ
- 色は淡い青灰と #003cff の2色。MENUにだけ蛍光イエローを差し、押すべき場所を一点で知らせる
- TOPICSは青いパネルと写真を市松状にずらす。4列の罫線が効いているから、段違いが乱雑に見えない
- DISCOGRAPHYはジャケットを大小に散らし、曲名を小さく添える。星座をたどるように作品を眺めさせる

## 配色
- #cddee5 Pale Sky（ページ背景）
- #003cff Electric Blue（パネル背景 / 見出し）
- #000f30 Midnight Navy（ダーク背景）
- #f5ff14 Neon Yellow（MENU・カテゴリ見出しのアクセント）
- #adcbd7 Mist Blue（罫線・補助テキスト）
- #ffffff White（パネル上のテキスト）

## フォント
- 約物（句読点・括弧）の字詰め用: YakuHanJP（代替: Noto Sans JP）
- 英字見出し・ナビ・ラベル（スクショから判断）: 幾何学系サンセリフ（書体名は抽出データで特定できず）（代替: Questrial）

## よくある質問
### 星街すいせい Official Siteで使われているフォントは？
抽出データでは約物用の YakuHanJP のみ確認でき、英字見出しの書体名は特定できませんでした。細身の幾何学サンセリフなので、無料なら Questrial や Jost で近い雰囲気が出せます。

### 星街すいせい Official Siteの配色の特徴は？
淡い青灰色（#cddee5）の背景に鮮やかな青（#003cff）のパネルを重ね、アクセントに蛍光イエロー（#f5ff14）を少量使う3色構成です。

### このサイトの素材を参考作品に使ってもいい？
キャラクターやロゴの権利は事務所・所属先に帰属します。レイアウトや配色の考え方を参考にし、画像やロゴは自前の素材に差し替えてください。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/hoshimachi-suisei からダウンロードできます。
出典: Katapick（https://katapick.com）