windows-3-1-web-designer

Windows 3.1 Web Designer

本格的な Windows 3.1 の美学を取り入れた、モダンな 2026 年の Web アプリケーションを作成します。1992 年を再現するのではなく、Win31 を現代のコンテキストに応用します。AI アシスタントはキューカードシステムとして、モバイルはポケットオーガナイザーとして、レスポンシブデザインはタイル状の MDI ウィンドウとして表現します。

使用する場面

次の用途に使用してください：

• Win31 の本格的な雰囲気を持つ Web アプリ（ドキュメントサイト、レトロなダッシュボード）
• AI チャットボットのインターフェース（キューカード風アシスタント、ウィザードダイアログ）
• モバイル対応の Win31 UI（ポケットコンピューティングのパラダイム）
• プログラムマネージャーのナビゲーションパターン
• タイル状／カスケード式のウィンドウレイアウト
• MDI（マルチドキュメントインターフェース）アプリケーション
• ホットドッグスタンドモードのイースターエッグ

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

• Windows 95 の美学 → windows-95-web-designer を使用（グラデーション、スタートメニュー、タスクバー）
• ヴェイパーウェイヴ／シンセウェイヴ → vaporwave-glassomorphic-ui-designer を使用（ネオン、グラデーション）
• macOS／iOS のスタイル → native-app-designer を使用
• フラット／マテリアルデザイン → web-design-expert を使用

Win31 と Win95 の重要な違い

特徴	Windows 3.1	Windows 95
タイトルバー	無地のネイビー（#000080）	グラデーション（濃い青→薄い青）
ウィンドウコントロール	単一のメニューボタン	3 つのボタン（−、□、×）
ナビゲーション	プログラムマネージャー	スタートメニュー＋タスクバー
フォント	ビットマップ／VT323	MS Sans Serif、Tahoma
アイコン	32×32 のフラット表示	ドロップシャドウ付きの 32×32
奥行き	ベベルのみ	ベベル＋控えめなグラデーション
AI のスタイル	キューカード、ウィザード	Clippy キャラクター

---

コアデザインシステム

カラーパレット

色	Hex	CSS 変数	用途
システムグレー	#c0c0c0	--win31-gray	主な背景色
ダークグレー	#808080	--win31-dark-gray	影、押下状態
ライトグレー	#dfdfdf	--win31-light-gray	ハイライト
ネイビー	#000080	--win31-navy	タイトルバー（無地、グラデーションなし）
ティール	#008080	--win31-teal	デスクトップ、リンク、ハイライト
白	#ffffff	--win31-white	ベベルのハイライト、入力欄
黒	#000000	--win31-black	ベベルの影、枠線

Win31 のタイトルバー（無地）

Win31 を象徴する要素 ― 無地のネイビー、グラデーションなし：

.win31-titlebar {
  background: #000080; /* SOLID - never a gradient! */
  color: white;
  font-family: 'VT323', 'Courier New', monospace;
  font-weight: bold;
  font-size: 11px;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.win31-titlebar-inactive {
  background: #808080; /* Solid dark gray when inactive */
}

ウィンドウコントロールボタン（単一）

Win31 のコントロールボタンは 1 つです（Win95 の 3 つとは異なります）：

.win31-control-btn {
  width: 18px;
  height: 14px;
  background: var(--win31-gray);
  border: none;
  font-size: 8px;
  font-family: var(--font-pixel);

  /* 3D bevel - outset */
  box-shadow:
    inset -1px -1px 0 var(--win31-black),
    inset 1px 1px 0 var(--win31-white),
    inset -2px -2px 0 var(--win31-dark-gray),
    inset 2px 2px 0 var(--win31-light-gray);
}

.win31-control-btn:active {
  box-shadow:
    inset 1px 1px 0 var(--win31-black),
    inset -1px -1px 0 var(--win31-white);
}

絶対的なルール：ベベル枠線

アウトセット（隆起） ― ボタン、ツールバー：

• 上／左の枠線：白
• 下／右の枠線：黒
• 内側：左上はライトグレー、右下はダークグレー

インセット（沈み込み） ― テキストフィールド、コンテンツ領域：

• 上／左の枠線：ダークグレー
• 下／右の枠線：白
• 内側：左上は黒、右下はライトグレー

タイポグラフィ

用途	フォント	フォールバック	サイズ
UI ラベル	VT323	Courier New	12px
タイトルバー	VT323 Bold	Courier New Bold	11px
見出し	Press Start 2P	VT323	14px
コード	IBM Plex Mono	Courier Prime	12px

Web フォントスタック：

:root {
  --font-win31-ui: 'VT323', 'Courier New', monospace;
  --font-win31-pixel: 'Press Start 2P', 'VT323', monospace;
  --font-win31-code: 'IBM Plex Mono', 'Courier Prime', monospace;
}

---

現代向けの応用

AI チャットボット：キューカードのパラダイム

Win31 では、AI はアニメーションキャラクターではなく、モーダルウィザードシステムとして表現されます：

┌─ AI Assistant ──────────────────────[─]─┐
│                                          │
│  ┌────────────────────────────────────┐  │
│  │  What would you like help with?    │  │
│  │                                    │  │
│  │  ○ Writing a document              │  │
│  │  ○ Working with files              │  │
│  │  ○ Setting up your system          │  │
│  │  ○ Learning Windows basics         │  │
│  └────────────────────────────────────┘  │
│                                          │
│         [  OK  ]  [ Cancel ]  [ Help ]   │
└──────────────────────────────────────────┘

主なパターン：

• アニメーションキャラクターなし（Clippy 登場以前）
• 一度に 1 つの質問（モーダル）
• ラジオボタン／番号付きの選択肢
• 手順を示すウィザードインジケーター
• アプリの横に浮かぶキューカード

モバイル：ポケットコンピューティングのパラダイム

モバイル向けの Win31 は、プログラムマネージャーを備えたポケットオーガナイザーとして応用できます：

┌────────────────────────────┐
│ ■ Program Manager ─ 10:45  │  ← Title bar with time
├────────────────────────────┤
│ ╔════════════════════════╗ │
│ ║ Main                  ║ │
│ ╠════════════════════════╣ │
│ ║  ┌───┐   ┌───┐        ║ │
│ ║  │📁│   │📝│        ║ │  ← Program group
│ ║  │Mgr│   │Wrt│        ║ │
│ ║  └───┘   └───┘        ║ │
│ ╚════════════════════════╝ │
├────────────────────────────┤
│ [ Window ]  [ Help ]       │  ← Menu bar bottom
└────────────────────────────┘

主なパターン：

• ナビゲーションにはプログラムマネージャーを使用（スタートメニューではない）
• 一度に 1 つのウィンドウ（モーダルスタック）
• ダイアログスタックパターン（オーバーレイをカスケード表示）
• タッチ操作向けに画面下部へメニューバーを配置
• 左へスワイプ＝ウィンドウを閉じる

レスポンシブ：ブレークポイントとしての MDI

Win31 ではマルチドキュメントインターフェースが使われていました。これを応用します：

ブレークポイント	Win31 のメタファー	レイアウト
モバイル（<640px）	ポケットコンピューティング	単一ウィンドウ、モーダルダイアログ
タブレット（640-1024px）	ノート PC	カスケード式ウィンドウ
デスクトップ（>1024px）	フルデスクトップ	タイル状の MDI ウィンドウ

テーマ設定：Hotdog Stand からその先へ

Windows 3.1 のテーマは限られていましたが、印象的なものがありました。

/* Hotdog Stand (the infamous red/yellow) */
[data-theme="hotdog-stand"] {
  --win31-gray: #ff0000;
  --win31-dark-gray: #800000;
  --win31-light-gray: #ff8080;
  --win31-navy: #ffff00;
  --win31-title-text: #ff0000;
}

/* Monochrome (high contrast) */
[data-theme="monochrome"] {
  --win31-gray: #ffffff;
  --win31-dark-gray: #000000;
  --win31-light-gray: #ffffff;
  --win31-navy: #000000;
  --win31-teal: #000000;
}

---

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

プログラムマネージャーのウィンドウ

.win31-program-manager {
  position: fixed;
  inset: 0;
  background: var(--win31-teal);
  display: flex;
  flex-direction: column;
}

.win31-program-group {
  background: var(--win31-gray);
  border: 3px solid var(--win31-black);
  box-shadow:
    inset 2px 2px 0 var(--win31-white),
    inset -2px -2px 0 var(--win31-dark-gray);
  margin: 8px;
  min-width: 200px;
}

.win31-program-group-titlebar {
  background: var(--win31-navy);
  color: var(--win31-white);
  padding: 2px 6px;
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: bold;
}

.win31-program-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, 64px);
  gap: 8px;
  padding: 12px;
}

ダイアログボックス

.win31-dialog {
  min-width: 300px;
  background: var(--win31-gray);
  border: 3px solid var(--win31-black);
  box-shadow:
    inset 2px 2px 0 var(--win31-white),
    inset -2px -2px 0 var(--win31-dark-gray),
    4px 4px 0 var(--win31-black);
}

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

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

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

メニューバー

.win31-menubar {
  background: var(--win31-gray);
  border-bottom: 2px solid var(--win31-dark-gray);
  padding: 2px;
  display: flex;
  gap: 0;
}

.win31-menu-item {
  padding: 4px 12px;
  font-family: var(--font-pixel);
  font-size: 11px;
  cursor: pointer;
}

.win31-menu-item:hover,
.win31-menu-item--active {
  background: var(--win31-navy);
  color: var(--win31-white);
}

.win31-menu-dropdown {
  position: absolute;
  background: var(--win31-gray);
  border: 2px solid;
  border-color: var(--win31-white) var(--win31-black)
               var(--win31-black) var(--win31-white);
  min-width: 150px;
  z-index: 100;
}

ステータスバー

.win31-statusbar {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--win31-gray);
  border-top: 2px solid var(--win31-dark-gray);
}

.win31-statusbar-panel {
  flex: 1;
  padding: 2px 8px;
  font-family: var(--font-pixel);
  font-size: 10px;
  border: 1px solid;
  border-color: var(--win31-dark-gray) var(--win31-white)
               var(--win31-white) var(--win31-dark-gray);
}

---

アンチパターン

アンチパターン：タイトルバーのグラデーション

初心者の考え：「Win31 のタイトルバーは Win95 のように青い」 実際：Win31 のタイトルバーは単色のネイビーです。グラデーションは Win95 のみです。 代わりに：background: #000080（linear-gradient は使わないでください）

アンチパターン：ウィンドウボタンが 3 つ

初心者の考え：「Windows には最小化、最大化、閉じるボタンがある」 実際：Win31 にあるのは単独のメニューボタン（−）です。3 ボタンのパターンは Win95 のものです。 代わりに：システムメニューを開くボタンを 1 つだけ配置します

アンチパターン：スタートメニュー／タスクバー

初心者の考え：「Windows のナビゲーションといえばスタートボタン」 実際：Win31 ではプログラムマネージャーを使います。タスクバーもスタートメニューもありません。 代わりに：カスケード表示／タイル表示のウィンドウでプログラムグループを構成します

アンチパターン：ネオンカラー

初心者の考え：レトロな雰囲気を出すために #00d4ff、#ff00ff を使う 実際：それはヴェイパーウェイヴであり、Win31 ではありません 代わりに：落ち着いた色のパレットを使います。ティール（#008080）、ネイビー（#000080）、グレー（#c0c0c0）

アンチパターン：角丸

初心者の考え：親しみやすい UI にするため border-radius: 8px を使う 実際：Win31 の角はすべて鋭角の 90° です 代わりに：border-radius を使わない（または 0 にする）

アンチパターン：ぼかし効果

初心者の考え：backdrop-filter: blur(10px) やソフトな影を使う 実際：Win31 にぼかしはありません。あるのは輪郭のはっきりしたベベルのみです 代わりに：輪郭のはっきりしたベベルシャドウを使います。box-shadow: 4px 4px 0 #000

アンチパターン：暗い背景

初心者の考え：ダークモードといえば #1a1a2e の背景 実際：Win31 は明るいデザインです。システムグレー（#c0c0c0）を全体に使います。 代わりに：ティールのデスクトップをベースにしたライトグレーを使います

アンチパターン：Clippy 風のキャラクター

初心者の考え：Win31 にもアシスタントのキャラクターがいた 実際：Clippy は Office 97（Win95 の時代）に登場しました。Win31 で使われていたのは Cue Cards です。 代わりに：モーダルダイアログ、ステップごとのウィザード、フローティングヘルプカードを使います

---

簡易判断ツリー

Is it a window chrome element?
├── Title bar? → SOLID navy (no gradient!)
├── Control button? → SINGLE button (not three)
├── 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? → Program Manager groups
├── Section nav? → Menu bar with dropdowns
├── Page nav? → List box or tree control
└── Actions? → Toolbar buttons (beveled)

Is it AI/help?
├── Onboarding? → Setup Wizard (Step X of Y)
├── Inline help? → Cue Cards (floating tips)
├── Questions? → Modal dialog with options
└── Feedback? → Message box with icon

Is it responsive?
├── Mobile? → Single window, modal stack
├── Tablet? → Cascading windows
└── Desktop? → Tiled MDI layout

---

CSS 変数のテンプレート

:root {
  /* Core palette */
  --win31-white: #ffffff;
  --win31-black: #000000;
  --win31-gray: #c0c0c0;
  --win31-dark-gray: #808080;
  --win31-light-gray: #dfdfdf;
  --win31-navy: #000080;
  --win31-teal: #008080;

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

  /* Typography */
  --font-win31-ui: 'VT323', 'Courier New', monospace;
  --font-win31-pixel: 'Press Start 2P', 'VT323', monospace;
  --font-win31-code: 'IBM Plex Mono', 'Courier Prime', monospace;

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

---

簡易チェック

コンポーネントに次の要素がある場合：

• ❌ グラデーションのタイトルバーがある → Win31 ではありません（Win95 のものです）
• ❌ ウィンドウボタンが 3 つある → Win31 ではありません（Win95 のものです）
• ❌ スタートメニューまたはタスクバーがある → Win31 ではありません（Win95 のものです）
• ❌ ネオンカラーがある → Win31 ではありません（ヴェイパーウェイヴです）
• ❌ 角丸がある → Win31 ではありません
• ❌ ぼかし効果がある → Win31 ではありません
• ❌ アニメーション付きのアシスタントキャラクターがある → Win31 ではありません（Clippy／Win95 のものです）

次の要素が必要です：

• ✅ 単色のネイビー（#000080）のタイトルバー
• ✅ ウィンドウコントロールボタンは 1 つだけ
• ✅ プログラムマネージャーによるナビゲーション
• ✅ システムグレー（#c0c0c0）のベース
• ✅ ベベル付きの境界線（左上は白、右下は黒）
• ✅ すべての角を鋭角にする
• ✅ ピクセルフォント（VT323、Press Start 2P）
• ✅ 輪郭のはっきりしたボックスシャドウのみ
• ✅ ヘルプには Cue Cards を使う（キャラクターではなく）

---

ファイル名の規則

本格的な Win31 の雰囲気を出すには：

• すべて大文字：README.TXT、INSTALL.EXE
• 8.3 形式：PROGRAM.EXE、CONFIG.SYS
• 拡張子が重要です：.WRI、.BMP、.INI

---

参考資料

• /references/design-system.md - 完全なカラーパレット、タイポグラフィ、ベベル付き境界線のパターン
• /references/component-patterns.md - ウィンドウ、ボタン、フォーム、パネルの完全な CSS
• /references/anti-patterns.md - ヴェイパーウェイヴとの比較、判断ツリー、変換例
• /references/ai-assistant-patterns.md - Cue Card 風の AI UX パターン
• /references/mobile-pocket-computing.md - モバイル向けのレスポンシブな Win31

---

組み合わせるツール

• windows-95-web-designer - グラデーション／タスクバーを取り入れた Win95 の美学に
• vaporwave-glassomorphic-ui-designer - 異なるレトロな美学（ネオン）に
• web-design-expert - レトロなスタイルと合わせたブランド方針の策定に
• design-system-creator - 完全なデザイントークンシステムの生成に