サイバーパンク / SF デザインインスピレーション
ネオンが闇を切り裂く。ターミナルの緑色文字が瞬く。雨に濡れた路地裏でホログラムが揺れる -- サイバーパンクのデザイン言語は、Blade Runner と Cyberpunk 2077 が確立した「ネオンディストピア」の美学に根ざしている。このスタイルは単なる装飾ではない。HUD（ヘッドアップディスプレイ）の情報設計思想、ターミナルの等幅タイポグラフィ、そしてネオンの発光による視線誘導 -- すべてが「SF世界の端末」という一貫したコンセプトに奉仕する。
このページの使い方
各セクションにインラインHTMLのビジュアル例を配置しています。ネオングロウの表現はCSS box-shadow で再現しています。スキャンラインやグリッチは実装時にCSSアニメーションで追加してください。
デザイン哲学 -- 闇の中の発光
暗闇が世界。ネオンが情報。発光が優先度。
サイバーパンクUIの世界観では、画面は「暗い部屋のモニター」だ。情報は発光体として暗闇から浮かび上がる。最も重要な情報が最も強く光り、補足情報は暗闇に近い輝度で存在する。この「発光 = 優先度」の原則が、すべてのデザイン判断の基盤となる。
以下が、この哲学を体現したサイバーパンクHUDのプレビューである:
カラーパレット -- ネオンの3原色
サイバーパンクの色はシンプルだ。シアン、マゼンタ、イエローの3色のネオンが、ディープネイビーの闇を切り裂く。
// Background Layers
// Neon Accents
#00ffff
#ff00ff
#ffff00
#00ff88
#ff3366
テキスト階層
| Token | 値 | 役割 |
|---|---|---|
| bg-void | #0a0a0f | 最深部 |
| bg-base | #0d0d1a | メイン背景 |
| bg-panel | #111128 | パネル |
| bg-surface | #1a1a3e | カード |
| text-primary | #e0e0ff | 見出し |
| neon-cyan | #00ffff | メインアクセント |
| neon-magenta | #ff00ff | セカンダリ |
| neon-yellow | #ffff00 | ターシャリ |
コンポーネント -- HUDの部品群
ネオンボタン
バッジ
ターミナル入力
特殊エフェクト
スキャンラインオーバーレイ
画面全体に薄いスキャンラインを重ねることで、「古いCRTモニター」の質感を演出する。CSS repeating-linear-gradient で実装し、pointer-events: none で操作を妨げない。
グリッチエフェクト
テキストの clip-path をずらした2つの疑似要素(::before, ::after)に、シアンとマゼンタの color を設定。短い間隔(50-100ms)でランダムに transform: translate() を変化させる。見出しのホバー時やローディング時に使用。常時再生は避ける。
ネオンフリッカー
ネオンサインの「ちらつき」を再現。opacity を 1 → 0.85 → 1 → 0.92 → 1 と不規則に変化させる。重要なロゴやタイトルに1-2箇所だけ適用。
使い方ガイド
Stitch への投入方法
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/CYBERPUNK.mdをプロジェクトのDESIGN.mdにコピー- ネオンカラーをプロジェクトに合わせて調整
- Stitch に「この DESIGN.md に従ってダッシュボードを作成してください」と指示
- スキャンライン・グリッチは後から追加（まず基本構造を優先）
適したプロジェクト
- ゲーム関連サイト・ツール
- ハッカソンのイベントページ
- テックカンファレンスのLP
- セキュリティ・ネットワーク監視ツール
- クリエイティブコーディングのポートフォリオ
不向きなプロジェクト
- コーポレートサイト
- ECサイト（購買を阻害する可能性）
- 医療・教育・行政のサービス
- アクセシビリティが最優先のサービス
エフェクトの使いすぎに注意
グリッチ・スキャンライン・フリッカーは「スパイス」です。メインの料理（情報設計）を蝕わないよう、1画面に1-2個に制限してください。すべてが光れば、何も光らないのと同じです。