星街すいせい Official Site

1. 01

   ヒーロー

   全面にキービジュアル、中央に王冠マーク付きのロゴ。左右中央に「VIRTUAL IDOL」「HOSHIMACHI SUISEI」の小さなラベル、右上に青い正方形のMENU、左下に青い帯のニュースティッカー。

2. 02

   TOPICS

   左上に細身の巨大な「TOPICS」、写真と青いパネル（MAGAZINE・TV・NEWS・RADIO）を4列グリッド上で段違いに配置し、各パネルに出演情報を箇条書き。

3. 03

   LIVE

   ライブ写真を背景に、青いパネルを3列並べて公演名・日程・会場・告知画像と「MORE」を配置。見出し「LIVE」が写真上に重なる。

4. 04

   DISCOGRAPHY

   巨大な見出しの下に、大小のジャケット画像を散らばらせ、それぞれに小さな曲名を添える。

5. 05

   MUSIC VIDEO

   高さ5,600px超の区間で、繰り返される「MUSIC VIDEO」見出しとともにMVのサムネイルが1本ずつ現れる。左に曲名、右にレーベルとリリース日。

6. 06

   CONTACT・フッター

   9000px以降のため、抽出データの見出し「CONTACT」とフッターの存在のみ確認。

• ヒーロー左下の青い帯は、ツアー名などの告知文が横に流れるティッカーと思われる（CSS の @keyframes で translateX をループ）
• MUSIC VIDEO は見出しをピン留めしながら MV カードを1本ずつ入れ替えるスクロール演出と思われる。GSAP ScrollTrigger の pin と、カードごとの表示切り替えで再現できる
• 右上の MENU ボタンは全区間で固定表示。MV 区間の右端にある縦3点のインジケーターは現在位置の表示と思われる
• stack に Lenis があり、慣性スクロールでパネルの段違い配置が滑らかに流れるようにしていると思われる

スクロールのコマ撮りLenis · 75–15000ms

検出された技術:LenisWordPressGoogle Fonts

• 01配色は淡い青灰色・鮮やかな青・白の3色に絞り、蛍光イエローはMENUとカテゴリ見出しだけに使う
• 02縦の細い罫線で4列のグリッドを常に見せ、パネルや画像をその列に沿って段違いに置く
• 03英字見出しは細いウェイトの幾何学サンセリフを画面幅の半分以上のサイズで使う
• 04各パネルは角丸なしの矩形で統一し、情報は小さな文字の箇条書きにとどめる

1---
2title: "星街すいせい Official Site 再現用デザイン仕様書"
3source: https://hoshimachi-suisei.jp/
4katapick: https://katapick.com/sites/hoshimachi-suisei
5category: VTuber / 配信者
6region: 国内 (JP)
7tags: [ブルー基調, 大胆なタイポ, グリッド, マーキー, スクロール演出, 固定ナビ]
8launched: 2026-03
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 24
13generator: Katapick
14---
15 
16# 星街すいせい Official Site — 再現用デザイン仕様書
17 
18> 青1色に絞ったのに、ぜんぜん地味にならない。バーチャルアイドル星街すいせいのアーティスト公式サイトは、4列の細い罫線に鮮烈な青のパネルを段違いで重ね、雑誌の誌面のような緊張感で輪郭を立てている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22