VTuberOverseas / USPicked 2026.09.26

DENSETSU.EXE

VTuber / 配信者のWebデザイン参考 — VTuberアイドルユニット

出典: densetsu.moe

Editor's note — 編集部の視点

00年代の個人ホームページを、本気でやってる。

VTuberアイドルユニットDENSETSU.EXEの公式サイトは、水玉の壁紙とハート付きのドット文字ナビ、青い下線リンクのニュース欄で、懐かしいWebの作法を個性にしている。

PipTrends & VTuber

え、待って、ニュースの見出しの横にRSSアイコンまであるの！？そこまで再現するの本気すぎる！！しかもリリースや出演告知がずらっと日付順に並んでて、推しの近況がここだけで追えるの助かる、神。

1ニュースは日付と青い下線リンクを1行ずつ並べるだけ。飾りを削った素の一覧が、かえって当時っぽい
2左の列はメンバーごとのYouTubeボタン。推しのチャンネルへ、トップから1クリックで飛べる
3ナビはドット文字に♥を添え、外部リンクには↗を付ける。サイトの外へ出る先を先に知らせる

Color

DENSETSU.EXEの配色

Typography

使用フォントと無料の代替

本文・ニュース

Aa あア

使用: Noto Sans JP Variable
代替: Noto Sans JP

ナビ・見出しのドット文字

Aa あア

使用: Tiny5
代替: Tiny5

絵文字

Aa あア

使用: SerenityOS Emoji
代替: Noto Emoji

実測タイプスケール1440px幅 · 2026-09-26 計測

特大見出しKatapick 型18px · 1.5 · 400
本文The quick brown fox — 参考を型にする16px · 1.5 · 400

Structure

ページ構成（上から順）

01
背景
白地に淡い色の水玉を全面に敷き、中央に固定幅のコンテンツ列を置く。
02
ヒーロー
星と稲妻、音符が飛ぶ中で3人が跳ねるキービジュアル。左上にパステルの「DENSETSU .EXE」ロゴが枠をはみ出して乗る。
03
ナビ
ピンクの角丸帯に HOME / PROFILE / DISCOGRAPHY / MERCH / GUIDELINES + GIFTS / FANCLUB をドット文字と♥で並べ、外部リンクには↗を付ける。
04
サイドバー
ユニットとメンバー3人のアイコン、名前、赤い YouTube ボタンを縦に並べる。
05
DENSETSU NEWS
ピンクの見出し帯に RSS アイコンを添え、日付と下線付きのリンクを1行ずつ並べたニュース一覧。
06
フッター
同じナビ帯をもう一度置き、コピーライトと Contact Us のリンクで締める。

Interaction

アニメーション・インタラクション

動きはほぼなく、1画面強で完結する静的なページ。Astro で静的生成していると思われる
ナビとニュースの見出しは Tiny5 のドットフォントで、当時のビットマップ文字の見た目を再現している
水玉の背景は radial-gradient を background-size で繰り返すと再現可能

スクロールのコマ撮り

検出された技術:Astro

Reproduce

再現するときのポイント

01コンテンツは中央寄せの固定幅にし、左右に水玉の壁紙を見せる
02リンクは青の下線付きのまま残し、ホバーの装飾も最小限にする
03見出しとナビだけドットフォント、本文は普通のゴシック体にして読みやすさを保つ
04メンバーのアイコンと YouTube ボタンをサイドバーにまとめ、2カラムに組む

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全6セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

densetsu-exe.katapick.md

1---
2title: "DENSETSU.EXE 再現用デザイン仕様書"
3source: https://densetsu.moe/
4katapick: https://katapick.com/sites/densetsu-exe
5category: VTuber / 配信者
6region: 海外 (US)
7tags: [レトロ, イラスト, ビビッド]
8launched: 2026-01
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 1/5
12estimated_hours: 8
13generator: Katapick
14---
15 
16# DENSETSU.EXE — 再現用デザイン仕様書
17 
18> 00年代の個人ホームページを、本気でやってる。VTuberアイドルユニットDENSETSU.EXEの公式サイトは、水玉の壁紙とハート付きのドット文字ナビ、青い下線リンクのニュース欄で、懐かしいWebの作法を個性にしている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22