VTuber OfficialOverseas / USPicked 2026.11.03

DENSETSU.EXE

VTuber公式サイトのWebデザイン参考 — VTuberアイドルユニット

サイトを見るdensetsu.moe

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セクションの仕様 / AIっぽさを消すルール / 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-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 1/5
12generator: Katapick
13---
14 
15# DENSETSU.EXE — デザイン分析書
16 
17> 00年代の個人ホームページを、本気でやってる。VTuberアイドルユニットDENSETSU.EXEの公式サイトは、水玉の壁紙とハート付きのドット文字ナビ、青い下線リンクのニュース欄で、懐かしいWebの作法を個性にしている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22