Y2K

Y2K / Cyber Nostalgia

他と比較

2000年前後のデジタル文化を現代的に再解釈。メタリックなグラデーション、ピクセルフォント、ネオン色で若年層に刺さる強い個性を出します。

クロームホログラムピクセルネオンサイバー

向いているプロダクト: 音楽・アーティスト、ストリートファッション、Z世代向けコミュニティ、イベント・フェス

プレビュー

Live

プレビュー枠は右下をドラッグすると高さを変えられます

コードを編集して試す

書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。

HTML

CSS

.ui { font-family: "Space Mono", "DotGothic16", monospace; color: #f2f2ff; }
.card {
  width: 320px; background: #16162a; border: 1px solid #6a6a8a;
  box-shadow: 0 0 24px rgb(255 61 204 / .35), inset 0 1px 0 #fff3;
}
.titlebar {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px;
  background: linear-gradient(#e8ebf3, #b7bccb); color: #16162a;
}
.titlebar span { width: 10px; height: 10px; border-radius: 50%; background: #16162a; }
.titlebar b { margin-left: auto; }
.body { padding: 20px; }
.badge {
  display: inline-block; padding: 2px 6px; font-size: 11px; font-weight: 700;
  background: #b6ff3d; color: #0b0b14;
}
h3 {
  margin: 12px 0 6px; font-size: 22px; font-weight: 700; letter-spacing: .05em;
  background: linear-gradient(90deg, #ff3dcc, #3d8bff, #b6ff3d, #ff3dcc);
  background-size: 300%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: holo 6s linear infinite;
}
@keyframes holo { to { background-position: 300% 0; } }
p { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: #a9a9c9; }
.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-size: 11px; letter-spacing: .2em; color: #3d8bff; margin-bottom: 6px; }
.field input {
  width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 13px; font-family: inherit;
  color: #f2f2ff; background: #0b0b14; border: 1px solid #6a6a8a; outline: none;
  box-shadow: inset 2px 2px 0 #000; transition: box-shadow .1s linear;
}
.field input:focus { box-shadow: inset 2px 2px 0 #000, 0 0 12px #ff3dcc; }
.actions { display: flex; gap: 10px; }
.btn {
  padding: 9px 16px; font-size: 12px; font-weight: 700; letter-spacing: .1em; font-family: inherit;
  border: 1px solid #fff8; border-radius: 0; cursor: pointer; transition: box-shadow .1s linear, filter .1s linear;
}
.btn.primary {
  background: linear-gradient(#ff7ade, #ff3dcc 50%, #c21f9a); color: #fff;
  box-shadow: 0 0 10px rgb(255 61 204 / .6);
}
.btn.primary:hover { box-shadow: 0 0 20px #ff3dcc; }
.btn.primary:active { filter: invert(1); }
.btn.ghost { background: linear-gradient(#e8ebf3, #b7bccb); color: #16162a; }
@media (prefers-reduced-motion: reduce) { h3 { animation: none; } }

01デザインコンセプト

「未来を夢見た過去」。クローム・ホログラム・ピクセルといった初期インターネットの記号を、現代の精度で再構築する。うるさいが、意図的にうるさい。

2000年が想像した2026年。

02カラーパレット

背景#0B0B14

ほぼ黒の紺。またはシルバー

サーフェス#16162A

カード

本文#F2F2FF

白に近い薄紫

ネオンピンク#FF3DCC

メイン。ボタン・強調

エレクトリックブルー#3D8BFF

サブ。リンク

ライムグリーン#B6FF3D

アクセント。バッジ・成功

クローム#C8CCD8

メタリックグラデーションの基準色

03タイポグラフィ

見出し: ピクセルフォント（Press Start 2P / DotGothic16）または幅広サンセリフ（Space Grotesk）
本文フォント: モノスペース（Space Mono / IBM Plex Mono）または幾何学サンセリフ
数字: モノスペース・7セグ風でもよい
ウェイト: 400 / 700
サイズ階層: 12 / 14 / 18 / 28 / 48px。見出しは極端に大きく
行間: 本文1.6、見出し1.1
字間: ラベルは+0.2em、見出しは-0.02em〜+0.1em を大胆に
和欧混植: 日本語はDotGothic16など、英字と粒度を揃える

04レイアウトルール

—スペーシング 8px基準だが、要素の重なり・はみ出しを許可
—コンテンツ最大幅 1200px
—斜めのセクション・回転したテキスト・ウィンドウ風の枠
—情報密度は高め。にぎやかに
—角丸は0（ピクセル）または全丸（カプセル）の両極
—OSウィンドウ風のタイトルバー付きカード

05UIコンポーネントルール

ボタン: クロームのグラデーション（上明・下暗）+1pxのハイライト線。またはネオン色の塗り+外光（box-shadow 0 0 16px）。Hoverで発光強く、Pressで反転
カード: ウィンドウ風：タイトルバー+3つのボタン+1pxの明るいボーダー。背景はサーフェス色
入力フォーム: 角丸0、内側に凹んだ見た目（inset shadow）。Focusでネオンの外光
モーダル: ウィンドウ風。オーバーレイはスキャンライン（繰り返しグラデーション）
タブ: ブラウザタブ風の台形、または点滅する「>」カーソル
ナビゲーション: マーキーテキストや点滅を一部に。上部固定
バッジ: ライム地+黒文字、角丸0、「NEW!!」等
アイコン: ピクセルアイコン、または3D風の光沢アイコン
トースト: システムダイアログ風（アイコン+OKボタン）
空状態: 「404」風のピクセルアートや星のスクリーンセーバー
ローディング: プログレスバー（分割された矩形）、またはホログラム回転

そのまま使うトークン

上のカラー・タイポ・角丸・影・アニメーションのルールを、CSS変数または tailwind.config のtheme.extendとして書き出したものです。プロジェクトに貼れば、このテイストの土台がすぐできます。

/* Y2K（Y2K / Cyber Nostalgia）のデザイントークン — CSS辞書 /design/y2k/ */
:root {
  /* カラー */
  --color-bg: #0B0B14; /* 背景: ほぼ黒の紺。またはシルバー */
  --color-surface: #16162A; /* サーフェス: カード */
  --color-text: #F2F2FF; /* 本文: 白に近い薄紫 */
  --color-neon-pink: #FF3DCC; /* ネオンピンク: メイン。ボタン・強調 */
  --color-neon-blue: #3D8BFF; /* エレクトリックブルー: サブ。リンク */
  --color-neon-lime: #B6FF3D; /* ライムグリーン: アクセント。バッジ・成功 */
  --color-chrome: #C8CCD8; /* クローム: メタリックグラデーションの基準色 */

  /* フォント */
  --font-heading: "Press Start 2P", "DotGothic16", monospace;
  --font-body: "Space Mono", "DotGothic16", monospace;
  --font-mono: "Space Mono", monospace;

  /* 角丸 */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-full: 9999px;

  /* 影 */
  --shadow-sm: 0 0 8px rgb(255 61 204 / 0.4);
  --shadow-md: 0 0 16px rgb(255 61 204 / 0.5);
  --shadow-lg: 0 0 32px rgb(255 61 204 / 0.6);

  /* 余白の基準・線幅 */
  --space-unit: 8px;
  --border-width: 1px;

  /* アニメーション */
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 300ms;
  --easing: linear;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

06装飾ルール

—ホログラム（虹色グラデーション）・クローム（メタリック）を主要装飾に
—ピクセル・スター・スパークル（✦）・グリッド線を散らす
—グロー（外光）とスキャンラインを使う
—blob状の3Dオブジェクト・液体金属
—微細なノイズ・VHS風のずれ（意図的に少量）

07アニメーションルール

—duration 100〜300ms。easing は linear や steps() で機械的に
—Hover はグロー強化+色の反転。点滅も可
—マーキー・回転・グリッチをアクセントに（常時は避ける）
—ホログラムは常にゆっくり色相回転（hue-rotate）
—prefers-reduced-motion では点滅・グリッチ・マーキーを止める（必須）

08デザイン原則

—「意図的な過剰」。中途半端に抑えない
—ただし本文テキストは必ず読める（本文はモノスペースで平文）
—記号（星・スパークル・カーソル）を語彙として統一
—光と反射でレイヤーを作る
—点滅・グリッチには必ずreduced-motion対応

09NGデザイン

✕生成り・アースカラーなど温かい色
✕セリフ体・明朝
✕ぼかしの柔らかい影
✕控えめなミニマル表現
✕本文まで装飾書体にすること

10参考になるサービス・デザインスタイル

Charli XCX のビジュアルPC MusicWindows 98 / iMac G3PoolsuiteAre.na のY2K系デザイン集

11AIにこのテイストで設計させる

このテイストを軸にした「デザイン方向性決定プロンプト」をコピーできます。プロダクト情報を埋めて使う場合はジェネレーターから。テイスト固有の指示は次の通りです。

ネオン3色+クロームのメタリックグラデーション、ピクセル/モノスペース書体、OSウィンドウ風の枠、グロー・ホログラム・スパークルで「意図的な過剰」を作ること。本文は読める平文にし、点滅やグリッチには必ずprefers-reduced-motion対応を入れる。

このテイストで鍵になるプロパティ

linear-gradient()box-shadow animation @keyframes filter @media (prefers-reduced-motion)

Y2K