# Neo-Porte（ネオポルテ）公式サイト｜VTuber / 配信者のWebデザイン参考

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

- URL: https://neo-porte.jp/
- 解説ページ: https://katapick.com/sites/neo-porte
- カテゴリ: VTuber / 配信者 / 地域: 国内（JP）/ 業種: VTuber事務所
- テイスト: ダーク、ネオン/グロー、大胆なタイポ、マーキー、モノクロ、固定ナビ
- 公開・リニューアル: 2026-05 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 24 時間）

## 編集部のひとこと（Pip）
MEMBERのカードに、期と誕生日まで小さく載ってるの優しすぎる！！初見でも推しの誕生日がその場でわかるし、6人がすき間なく並んでるから箱推ししたくなる。神。

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

## 配色
- #181818 Charcoal（ダークセクション背景 / テキスト）
- #f0f0f0 Light Gray（ABOUT・ニュースのセクション背景）
- #ffffff White（ロゴ・反転テキスト / カード背景）
- #202020 Graphite（カード・オーディション枠の背景）
- #b0bbc0 Steel Gray（背景の巨大英字 / 補足テキスト）
- #4c1439 Dim Magenta（ヒーローのネオン光（スクショから採色・メンバーごとに変わると思われる））

## フォント
- 英字ナビ・ボタン・見出し: Roboto（代替: Roboto）
- 和文本文・リード: Noto Sans JP（代替: Noto Sans JP）

## よくある質問
### Neo-Porteのサイトで使われているフォントは？
英字のナビやボタンに Roboto、和文の本文やリードに Noto Sans JP が使われています。どちらも Google Fonts で無料で使えます。大きな「Neo-Porte」の文字はロゴ画像と思われます。

### Neo-Porteのような角を欠いたボタンはどう作る？
clip-path: polygon() で四角形の角を斜めに切り落とし、擬似要素で四隅に小さな正方形を配置すると近い見た目になります。

### Neo-Porteのデザインはどんなサイトの参考になる？
ゲーム実況や音楽を軸にしたVTuber事務所、eスポーツチーム、ゲーム系イベントなど、クールでデジタルな印象を出したい公式サイトの参考になります。

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