ヴェイパーウェイブ / レトロウェーブ デザインインスピレーション
デジタルノスタルジア。90年代インターネットの夢の中。消費文化への皮肉を込めた、過去のデジタルメディアの美化と再構成 -- ヴェイパーウェイブのデザイン言語は、CRTモニターのスキャンライン、ネオングラデーション、無限に続くグリッドパターンで構成される。このスタイルはFloral ShoppeとWindows 95が交差する地点に存在し、日没のネオンパレットとモノスペースフォントが独特の「A E S T H E T I C」な空間を創り出す。
このページの使い方
各セクションにインラインHTMLのビジュアル例を配置しています。ネオングラデーションはCSS linear-gradientで、CRT効果はrepeating-linear-gradientで再現しています。
デザイン哲学 -- デジタルの夢
暗い紫の空間にネオンが浮かぶ。グリッドが無限に広がる。文字が間隔を広げて漂う。
ヴェイパーウェイブUIの世界観では、画面は「90年代のCRTモニター」だ。情報はネオングラデーションで彩られ、深い紫の空間に浮かぶ。スキャンラインが画面を横切り、グリッドパターンがパースペクティブを与える。
カラーパレット -- ネオングラデーション
ヴェイパーウェイブの色は4つのネオンカラーで構成される。ピンク、シアン、グリーン、パープルが暗い紫の空間でグラデーションを描く。
// Neon Gradient Colors
#ff71ce
#01cdfe
#05ffa1
#b967ff
// Background Layers
// Main Gradient
| Token | 値 | 役割 |
|---|---|---|
| bg-deep | #1a0a2e | 最深部 |
| bg-base | #16083b | メイン背景 |
| bg-surface | #1f0e4d | カード |
| neon-pink | #ff71ce | メインアクセント |
| neon-cyan | #01cdfe | セカンダリ |
| neon-green | #05ffa1 | ターシャリ |
| neon-purple | #b967ff | 装飾 |
コンポーネント -- レトロの部品群
ネオンボタン
レトロTVカード
特殊エフェクト
CRTスキャンライン
画面全体に薄いスキャンラインを重ねることで、「古いCRTモニター」の質感を演出する。CSS repeating-linear-gradient で実装し、pointer-events: none で操作を妨げない。Vaporwave では Cyberpunk よりも細かいライン（1-2px）を使用する。
ネオングリッド
背景に linear-gradient で薄いグリッドパターンを敷く。background-size: 40px 40px で正方形のグリッドを作成。色はシアン系の透明度の低い色（rgba(1,205,254,0.04-0.07)）。
グラデーションテキスト
見出しに background: linear-gradient() + -webkit-background-clip: text + -webkit-text-fill-color: transparent で虹色のグラデーションテキストを実現。ピンクからシアン、グリーン、パープルへの4色グラデーションが定番。
使い方ガイド
Stitch への投入方法
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/VAPORWAVE.mdをプロジェクトのDESIGN.mdにコピー- ネオンカラーのバランスをコンテンツに合わせて調整
- Stitch に「この DESIGN.md に従ってギャラリーページを作成してください」と指示
- スキャンライン・グリッドは後から追加（まず基本構造を優先）
適したプロジェクト
- 音楽・アート関連のサイト
- クリエイティブなイベントページ
- レトロゲーム・ノスタルジア系コンテンツ
- 個人のポートフォリオ（アート系）
- カルチャー・ファッション系メディア
不向きなプロジェクト
- ビジネス・コーポレートサイト
- ECサイト（購買を阻害する可能性）
- 医療・教育・行政のサービス
- アクセシビリティが最優先のサービス
- モバイルファーストのアプリ
パフォーマンスに注意
CRTスキャンライン、グリッドパターン、グラデーションアニメーションはGPU負荷が高くなります。モバイルではスキャンラインとグリッドを無効化してください。