VTuber OfficialJapanPicked 2026.10.01

Neo-Porte（ネオポルテ）公式サイト

VTuber公式サイトのWebデザイン参考 — VTuber事務所

サイトを見るneo-porte.jp

neo-porte.jp開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

ボタンの角まで欠けてて、全部ゲームのUIっぽい。

ゲームと音楽を軸にしたVTuberプロジェクトNeo-Porteの公式サイトは、ドットとネオンのFVに角を欠いたHUD風パーツを合わせ、サイト全体をひとつのゲーム画面に見立てている。

PipTrends & VTuber

MEMBERのカードに、期と誕生日まで小さく載ってる！！初見でも推しの誕生日がその場でわかるし、6人がすき間なく並んでるから、気づいたら全員の名前を覚えてて箱推しになってるやつ。

1ドットとグリッチのネオン越しに、極太ロゴを左下へ。スクリーンを覗き込む距離感が生まれる
2MENUやニュースカードの角を斜めに欠き、四隅に小さな四角。部品単位でゲームUIの文法に揃える
3ダークとライトグレーの面を交互に切り替え、長いページに呼吸をつくる。巨大な「MEMBER」が区切りの目印

Color

Neo-Porte（ネオポルテ）公式サイトの配色

Typography

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

英字ナビ・ボタン・見出し

Aa あア

使用: Roboto
代替: Roboto

和文本文・リード

Aa あア

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

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

見出しKatapick 型28px · 1 · 600
本文The quick brown fox — 参考を型にする14px · 1.2 · 400
ボタンKatapick 型14px · 1 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左にロゴ、中央に英字の横並びナビ、右上に角を欠いた四角い「MENU」ボタン。MENUボタンはスクロール中も右上に追従する。
02
ヒーロー
メンバーのキービジュアルにドットスクリーンとネオン・グリッチ表現を重ねた全幅ビジュアル。左下に極太のロゴと英文3行のステートメント、右端に縦書きの「SCROLL」。
03
NEWS
白地に4列のニュースカード。サムネイル下に黒い帯でカテゴリ・タイトル・日付を載せ、右上に「ALL NEWS」ボタン。
04
ABOUT US
明るいグレー地で、左に「ABOUT US」と小さな英文、右に大きめの和文リードと説明文を置く2カラム構成。
05
MEMBER
背景に画面幅を超える「MEMBER」の巨大英字を流し、その上に6名の縦長カードを隙間なく横並び。カード上部に名前・期・誕生日の小さなラベル。
06
AUDITION
ダーク地の枠内に縦書きの大きな「AUDITION」と募集文、右下に円形に回る英字テキストと矢印のリンク。
07
OFFICIAL STORE
グレー地に白いバナー。左にストア名とキャッチ、右にアクリルキーホルダー風のグッズ画像を並べる。
08
フッター
斜めにカットした境界から黒地に切り替え、ロゴ、SNSアイコン、3列のテキストリンクとポリシーリンクを配置。

Interaction

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

ヒーローはメンバーごとのビジュアルが切り替わるスライドショーと思われる（撮影時とフルページ撮影時で別メンバーが表示されていた）。ドットは radial-gradient の repeating パターンを重ね、グリッチは clip-path や RGB ずらしの CSS アニメーションで近い表現ができる
「MEMBER」の巨大英字は横に流れるマーキーと思われる。CSS の @keyframes で translateX をループさせるか、GSAP の ScrollTrigger でスクロール量に連動させる
AUDITION の円形テキストは SVG の textPath で円周に沿わせ、CSS で rotate させる定番の手法で再現できる
stack に GSAP と Lenis があり、セクションのフェードインと慣性スクロールに使われていると思われる

スクロールのコマ撮りLenis · 240–2000ms

Neo-Porte（ネオポルテ）公式サイトをスクロールしたときのフレーム1 — 01

Neo-Porte（ネオポルテ）公式サイトをスクロールしたときのフレーム2 — 02

Neo-Porte（ネオポルテ）公式サイトをスクロールしたときのフレーム3 — 03

Neo-Porte（ネオポルテ）公式サイトをスクロールしたときのフレーム4 — 04

Neo-Porte（ネオポルテ）公式サイトをスクロールしたときのフレーム5 — 05

Neo-Porte（ネオポルテ）公式サイトをスクロールしたときのフレーム6 — 06

検出された技術:GSAPLenisWordPressGoogle Fonts

Reproduce

再現するときのポイント

01ボタンやカードの角を clip-path: polygon() で斜めに欠き、四隅に小さな正方形を置いてHUD風のパーツに統一する
02配色は黒・グレー・白のモノトーンに絞り、色味はメンバーのビジュアル側に任せる
03英字は Roboto の太めのウェイトで大文字表記、和文は Noto Sans JP でリードだけ大きくする
04メンバー一覧は縦長カードを余白なしで横に並べ、背景の巨大英字と重ねて奥行きを出す

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

neo-porte.katapick.md

1---
2title: "Neo-Porte（ネオポルテ）公式サイト デザイン分析書"
3source: https://neo-porte.jp/
4katapick: https://katapick.com/sites/neo-porte
5category: VTuber公式サイト
6region: 国内 (JP)
7tags: [ダーク, ネオン/グロー, 大胆なタイポ, マーキー, モノクロ, 固定ナビ]
8launched: 2026-05
9verified: 2026-10-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12generator: Katapick
13---
14 
15# Neo-Porte（ネオポルテ）公式サイト — デザイン分析書
16 
17> ボタンの角まで欠けてて、全部ゲームのUIっぽい。ゲームと音楽を軸にしたVTuberプロジェクトNeo-Porteの公式サイトは、ドットとネオンのFVに角を欠いたHUD風パーツを合わせ、サイト全体をひとつのゲーム画面に見立てている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22