windows-95-web-designer

Windows 95 Web デザイナー

Windows 95 らしい本格的な美学を取り入れた、現代的な 2026 年のウェブアプリを作成します。1995 年を再現するのではなく、Win95 を現代のコンテキストへと発展させます。AI アシスタントは Clippy の子孫として、モバイルはポケット PC として、レスポンシブデザインはマルチモニターとして捉えます。

使用する場面

次の用途に使用します：

• Win95 らしさを備えたウェブアプリ（windags.ai、レトロなダッシュボードなど）
• AI チャットボットのインターフェース（Clippy 風のアシスタント、ウィザードダイアログ）
• モバイル対応の Win95 UI（ポケット PC のパラダイム）
• スタートメニューのナビゲーションパターン
• タスクバーをベースにしたレイアウト
• デスクトップアイコンのグリッド
• Win95 Plus! のテーマバリエーション

次の用途には使用しないでください：

• Windows 3.1 の美学 → windows-3-1-web-designer を使用します（よりフラットな、プログラムマネージャーのスタイル）
• ヴェイパーウェイヴ／シンセウェイヴ → vaporwave-glassomorphic-ui-designer を使用します（ネオン、グラデーション）
• macOS／iOS のスタイリング → native-app-designer を使用します
• フラット／マテリアルデザイン → web-design-expert を使用します

Win95 と Win31 の違い：重要なポイント

特徴	Windows 3.1	Windows 95
タイトルバー	単色のネイビー（#000080）	グラデーション（暗い青から明るい青へ）
ウィンドウコントロール	メニューボタン 1 つ	ボタン 3 つ（−、□、×）
ナビゲーション	プログラムマネージャー	スタートメニュー + タスクバー
フォント	ビットマップ／システム	MS Sans Serif、Tahoma
アイコン	フラットな 32×32	ドロップシャドウ付きの 32×32
奥行き	ベベルのみ	ベベル + 控えめなグラデーション

---

コアデザインシステム

カラーパレット

色	Hex	CSS 変数	用途
デスクトップティール	#008080	--win95-desktop	デスクトップの背景
システムグレー	#c0c0c0	--win95-gray	ウィンドウ枠、ボタン
タイトルブルー（ダーク）	#000080	--win95-title-dark	タイトルのグラデーション開始色
タイトルブルー（ライト）	#1084d0	--win95-title-light	タイトルのグラデーション終了色
ボタン面	#dfdfdf	--win95-button-face	ボタンの表面
ボタンのハイライト	#ffffff	--win95-highlight	上部／左側のベベル
ボタンのシャドウ	#808080	--win95-shadow	下部／右側のベベル
ボタンのダークシャドウ	#000000	--win95-dark-shadow	外側の影の縁
ウィンドウの背景	#ffffff	--win95-window-bg	コンテンツ領域
選択ブルー	#000080	--win95-selection	選択項目
選択テキスト	#ffffff	--win95-selection-text	選択範囲内のテキスト

Win95 のタイトルバーグラデーション

Win95 を象徴する要素です。暗い青から明るい青へと変化する水平グラデーションです。

.win95-titlebar {
  background: linear-gradient(90deg, #000080 0%, #1084d0 100%);
  color: white;
  font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
  font-weight: bold;
  font-size: 11px;
  padding: 3px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.win95-titlebar-inactive {
  background: linear-gradient(90deg, #808080 0%, #b5b5b5 100%);
}

ウィンドウコントロールボタン

Win95 には、Win31 のメニュー 1 つとは異なり、特徴の異なるボタンが 3 つあります。

.win95-controls {
  display: flex;
  gap: 2px;
}

.win95-control-btn {
  width: 16px;
  height: 14px;
  background: var(--win95-gray);
  border: none;
  font-size: 9px;
  font-family: 'Marlett', sans-serif; /* Win95 symbol font */

  /* 3D bevel */
  box-shadow:
    inset -1px -1px 0 var(--win95-dark-shadow),
    inset 1px 1px 0 var(--win95-highlight),
    inset -2px -2px 0 var(--win95-shadow),
    inset 2px 2px 0 var(--win95-button-face);
}

.win95-control-btn:active {
  box-shadow:
    inset 1px 1px 0 var(--win95-dark-shadow),
    inset -1px -1px 0 var(--win95-highlight);
}

タイポグラフィ

用途	フォント	フォールバック	サイズ
UI ラベル	Tahoma	MS Sans Serif、Arial	11px
タイトルバー	Tahoma Bold	Arial Bold	11px
メニュー	Tahoma	Arial	11px
コード	Fixedsys	Courier New	12px
ピクセル見出し	MS Sans Serif	VT323（ウェブ）	12-14px

ウェブセーフな近似フォント：

:root {
  --font-win95-ui: 'Tahoma', 'Segoe UI', 'Arial', sans-serif;
  --font-win95-mono: 'Fixedsys Excelsior', 'Courier New', monospace;
  --font-win95-pixel: 'VT323', 'Courier New', monospace;
}

---

現代への発展

AI チャットボット：Clippy のパラダイム

Win95 では、AI はウィザードダイアログ内の親切なアシスタントキャラクターとして表示されます。

┌─ AI Assistant ──────────────────────────[−][□][×]─┐
│ ┌────────────────────────────────────────────────┐│
│ │  ┌─────┐                                       ││
│ │  │ 📎  │  "It looks like you're writing a     ││
│ │  │     │   letter. Would you like help?"      ││
│ │  └─────┘                                       ││
│ │                                                ││
│ │  ○ Get help with writing                       ││
│ │  ○ Just type without help                      ││
│ │  ○ Don't show this tip again                   ││
│ │                                                ││
│ └────────────────────────────────────────────────┘│
│                              [  OK  ] [ Cancel ] │
└──────────────────────────────────────────────────┘

主なパターン：

• キャラクターのアバター（チャットバブルだけではありません）
• ラジオボタンによる選択肢（自由入力ではありません）
• ウィザードのステップインジケーター
• 「今日のヒント」風のスタイリング
• 提案に使う黄色いメモ用紙の背景

モバイル：ポケット PC のパラダイム

モバイル向けの Win95 は、ポケットサイズのデスクトップへと発展します。

┌────────────────────────┐
│ Start │ 📶 🔋 3:45 PM  │  ← Status bar as taskbar
├────────────────────────┤
│ ┌──────┐ ┌──────┐     │
│ │ 📁   │ │ 🌐   │     │  ← Desktop icon grid
│ │Files │ │Browse│     │
│ └──────┘ └──────┘     │
│ ┌──────┐ ┌──────┐     │
│ │ 💬   │ │ ⚙️   │     │
│ │Chat  │ │Setup │     │
│ └──────┘ └──────┘     │
├────────────────────────┤
│ [Start] [📧2] [💬] [📁]│  ← Taskbar with open apps
└────────────────────────┘

主なパターン：

• 左下にスタートボタンを配置します（ハンバーガーメニューは Win95 ではありません）
• タスクバーには、開いているアプリをボタンとして表示します
• デスクトップはアイコンのグリッドです（アプリドロワーではありません）
• ステータスバーはシステムトレイを模します
• 上スワイプでスタートメニューを開きます（ジェスチャーではありません）

レスポンシブデザイン：ブレークポイントとしてのマルチモニター

Win95 では複数のディスプレイを想定していました。この考え方を適用します。

ブレークポイント	Win95 のメタファー	レイアウト
モバイル（<640px）	ポケット PC	単一ウィンドウ、下部にタスクバー
タブレット（640-1024px）	ラップトップ	ウィンドウを重ねて表示、タスクバー
デスクトップ（>1024px）	フルデスクトップ	複数のウィンドウ、デスクトップアイコン

ダークモード：Plus! テーマ

Windows 95 Plus! にはテーマパックがありました。ダークモードとして応用すると：

/* Plus! "Mystery" theme (dark) */
[data-theme="dark"] {
  --win95-desktop: #1a1a2e;
  --win95-gray: #3d3d5c;
  --win95-title-dark: #16213e;
  --win95-title-light: #1a1a4e;
  --win95-button-face: #4a4a6a;
  --win95-highlight: #5a5a7a;
  --win95-shadow: #2a2a4a;
  --win95-window-bg: #2d2d4d;
}

/* Plus! "Golden Era" theme */
[data-theme="golden"] {
  --win95-title-dark: #8b4513;
  --win95-title-light: #daa520;
  --win95-desktop: #2e1a0d;
}

---

コンポーネントのパターン

スタートメニュー

.win95-start-menu {
  position: fixed;
  bottom: 28px; /* Above taskbar */
  left: 0;
  width: 200px;
  background: var(--win95-gray);
  border: 2px solid;
  border-color: var(--win95-highlight) var(--win95-dark-shadow)
               var(--win95-dark-shadow) var(--win95-highlight);
  box-shadow: 2px 2px 0 var(--win95-dark-shadow);
}

.win95-start-menu-sidebar {
  width: 24px;
  background: linear-gradient(0deg, #000080 0%, #1084d0 100%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  color: white;
  font-weight: bold;
  padding: 4px;
}

.win95-start-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  cursor: pointer;
}

.win95-start-menu-item:hover {
  background: var(--win95-selection);
  color: var(--win95-selection-text);
}

タスクバー

.win95-taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: var(--win95-gray);
  border-top: 2px solid var(--win95-highlight);
  display: flex;
  align-items: center;
  padding: 2px 4px;
  gap: 4px;
}

.win95-start-button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-weight: bold;
  font-size: 11px;
  /* 3D button styling */
}

.win95-taskbar-button {
  min-width: 140px;
  max-width: 160px;
  height: 22px;
  font-size: 11px;
  text-align: left;
  padding: 0 8px;
  /* Pressed = active window */
}

.win95-system-tray {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 2px solid var(--win95-shadow);
  padding-left: 8px;
}

ダイアログボックス（AI 用）

.win95-dialog {
  min-width: 340px;
  background: var(--win95-gray);
  border: 2px solid;
  border-color: var(--win95-highlight) var(--win95-dark-shadow)
               var(--win95-dark-shadow) var(--win95-highlight);
}

.win95-dialog-content {
  padding: 16px;
  display: flex;
  gap: 16px;
}

.win95-dialog-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.win95-dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 16px 16px;
}

.win95-button-primary {
  min-width: 75px;
  padding: 4px 12px;
  /* Add dotted focus ring for default button */
  outline: 1px dotted var(--win95-dark-shadow);
  outline-offset: -4px;
}

---

アンチパターン

アンチパターン：ハンバーガーメニュー

初心者の考え方：「モバイルナビゲーションには三本線を使う」 実際：Win95 にハンバーガーメニューはありません。あるのはスタートボタンです 代わりに：ラベル付きボタンを使ったスタートメニューのパターンを使います

アンチパターン：フローティングアクションボタン

初心者の考え方：「主要なアクションには FAB を使う」 実際：Win95 のアクションはツールバーやメニューにあります 代わりに：ツールバーボタンまたはコンテキストメニューを使います

アンチパターン：カードベースのレイアウト

初心者の考え方：「角丸で影のあるカードを使う」 実際：Win95 ではウィンドウとリストビューを使います 代わりに：リストビュー、詳細ビュー、またはタイルアイコンを使います

アンチパターン：あらゆる場所にグラデーション背景を使う

初心者の考え方：「Win95 にはグラデーションがあるので、あらゆる場所に使う」 実際：グラデーションが使われるのはタイトルバーだけです。それ以外はすべて単色です。 代わりに：グラデーションはアクティブなタイトルバーだけに使い、それ以外は単色にします

アンチパターン：柔らかな影

初心者の考え方：box-shadow: 0 4px 6px rgba(0,0,0,0.1) 実際：Win95 の影はピクセル単位でくっきりしています 代わりに：box-shadow: 2px 2px 0 #000000（ぼかしなし）

---

クイック判断ツリー

Is it a window chrome element?
├── Title bar? → Gradient (dark→light blue)
├── Button? → 3D bevel (white TL, black BR)
├── Input? → Inset bevel (dark TL, white BR)
└── Content area? → White or gray, flat

Is it navigation?
├── Primary nav? → Start Menu pattern
├── Section nav? → Tab control
├── Page nav? → Tree view or list
└── Actions? → Toolbar buttons

Is it a notification?
├── Important? → Modal dialog with icon
├── Informational? → Balloon tooltip (system tray)
├── Progress? → Progress bar in status bar
└── Success? → Sound + brief dialog

---

CSS 変数のテンプレート

:root {
  /* Core palette */
  --win95-desktop: #008080;
  --win95-gray: #c0c0c0;
  --win95-title-dark: #000080;
  --win95-title-light: #1084d0;
  --win95-button-face: #dfdfdf;
  --win95-highlight: #ffffff;
  --win95-shadow: #808080;
  --win95-dark-shadow: #000000;
  --win95-window-bg: #ffffff;
  --win95-selection: #000080;
  --win95-selection-text: #ffffff;

  /* Semantic */
  --win95-error: #ff0000;
  --win95-warning: #ffff00;
  --win95-success: #00ff00;
  --win95-info: #0000ff;

  /* Typography */
  --font-win95-ui: 'Tahoma', 'Segoe UI', 'Arial', sans-serif;
  --font-win95-mono: 'Fixedsys Excelsior', 'Courier New', monospace;

  /* Spacing (4px grid) */
  --win95-spacing-xs: 2px;
  --win95-spacing-sm: 4px;
  --win95-spacing-md: 8px;
  --win95-spacing-lg: 16px;
  --win95-spacing-xl: 24px;
}

---

参考資料

• /references/component-library.md - Win95 のすべてのコンポーネントの CSS 全体
• /references/ai-assistant-patterns.md - Clippy スタイルの AI UX パターン
• /references/mobile-pocket-pc.md - モバイル向けのレスポンシブ Win95
• /references/plus-themes.md - ダークモードとテーマのバリエーション
• /references/icon-system.md - Win95 のアイコンデザインとサイズ

---

併用するもの

• windows-3-1-web-designer - より古く、フラットな Win31 の美しさを求める場合
• web-design-expert - レトロスタイルと併せたブランドの方向性を決める場合
• design-system-creator - デザイントークンシステム全体を生成する場合
• frontend-architect - Win95 アプリを Cloudflare にデプロイする場合