win31-pixel-art-designer について
Windows 3.1風のピクセルアート制作を支援するデザインスキルです。アイコンやスプラッシュ画面、バナーを対象に、パレットやディザリング、硬いピクセル表現を解説します。
主な機能
- 01Windows 3.1風アイコンの設計
- 02スプラッシュ画面とバナーの制作
- 0316色・256色VGAパレットの活用
- 04ディザリングとピクセル表現の規則
- 05画像生成プロンプトと加工方法の提示
活用シーン
- 01レトロアプリのプログラムアイコン制作
- 02「バージョン情報」画面や起動画面の設計
- 03現代的な画像のレトロなピクセル表現への変換
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/win31-pixel-art-designerを入力して読み込まれたか確認します。
同梱ファイル.claude-plugin/plugin.json
詳細
Win31 ピクセルアートデザイナー
Windows 3.1 時代の本格的なピクセルアート、アイコン、スプラッシュ画面、プログラムバナーの作成に精通しています。16 色および 256 色の VGA パレット、ディザリング技法、90 年代初期のコンピューティングの視覚的表現を熟知しています。
使用する場面
次の用途に使用してください：
- プログラムマネージャー風アプリケーションアイコン（32x32、16x16）
- スプラッシュ画面や「バージョン情報」ダイアログのグラフィック
- Win31 テーマのアプリケーション用バナーアート
- カスタムカーソルやツールバーのグラフィック
- 現代的なアートを本格的なレトロスタイルに変換する
- 色数の制限とディザリングについて理解する
次の用途には使用しないでください：
- CSS／ウェブのスタイリング → windows-3-1-web-designer
- モダンなフラットアイコン → web-design-expert
- ヴェイパーウェーブの美学 → vaporwave-glassomorphic-ui-designer
- 高解像度のイラスト → native-app-designer
Win31 の視覚表現
アイコンの仕様
| アイコンの種類 | サイズ | 色数 | 用途 |
|---|---|---|---|
| 大きいアイコン | 32×32 | 16 色 | デスクトップ、ファイルマネージャー |
| 小さいアイコン | 16×16 | 16 色 | タイトルバー、タスクバー |
| シェルアイコン | 48×48 | 256 色 | Win3.11／初期の Win95 |
| カーソル | 32×32 | 2 色（白／黒） | マウスポインター |
Windows の 16 色パレット
これは Windows 3.1 が使用していた正確なパレットです。これを変更すると、本物らしさが損なわれます。
┌──────────────────────────────────────────────────────┐
│ Standard 16-Color VGA Palette (Win31) │
├──────────────────────────────────────────────────────┤
│ #000000 Black #808080 Dark Gray │
│ #800000 Dark Red #FF0000 Red │
│ #008000 Dark Green #00FF00 Green │
│ #808000 Dark Yellow #FFFF00 Yellow │
│ #000080 Dark Blue #0000FF Blue │
│ #800080 Dark Magenta #FF00FF Magenta │
│ #008080 Dark Cyan #00FFFF Cyan │
│ #C0C0C0 Light Gray #FFFFFF White │
└──────────────────────────────────────────────────────┘
重要なポイント： #C0C0C0（ライトグレー）はシステムカラーです。あらゆる場所で使用されています。
VGA の 256 色パレット
より豊かなグラフィック（スプラッシュ画面、バージョン情報ダイアログ）向けに、Win31 は 256 色モードをサポートしていました。
| 範囲 | 用途 |
|---|---|
| 0-15 | 標準の 16 色（上記） |
| 16-31 | システム予約 |
| 32-247 | アプリケーションカラー（カラーパレット） |
| 248-255 | システム予約 |
6×6×6 カラーキューブ： インデックス 32-247 の色は、次の規則に従います。
- R：0、51、102、153、204、255（6 段階）
- G：0、51、102、153、204、255（6 段階）
- B：0、51、102、153、204、255（6 段階）
ディザリングパターン
ディザリングは、パターンを使ってより多くの色があるように見せる技法です。Win31 では多用されていました。
よく使われるディザリングパターン
50% Checkerboard: 25% Sparse: 75% Dense:
■ □ ■ □ □ □ □ □ ■ ■ ■ □
□ ■ □ ■ □ ■ □ □ ■ ■ □ ■
■ □ ■ □ □ □ □ □ ■ □ ■ ■
□ ■ □ ■ □ □ □ ■ □ ■ ■ ■
Diagonal: Horizontal Lines: Vertical Lines:
■ □ □ □ ■ ■ ■ ■ ■ □ ■ □
□ ■ □ □ □ □ □ □ ■ □ ■ □
□ □ ■ □ ■ ■ ■ ■ ■ □ ■ □
□ □ □ ■ □ □ □ □ ■ □ ■ □
ディザリングを使う場面
| 場面 | パターン | 色 |
|---|---|---|
| 滑らかなグラデーション | 規則的なディザリング | 16 色 |
| 影の部分 | 50% の市松模様 | 黒＋ダークグレー |
| ハイライト | 25% のまばらなパターン | 白＋ライトグレー |
| 空／背景 | 水平の帯 | 青系 |
| 金属の表面 | 斜線 | グレー系 |
CSS ディザリングパターン
/* Classic Win31 checkerboard dither in CSS */
.win31-dither {
background-image: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='2' height='2' fill='%23808080'/%3E%3Crect x='2' y='2' width='2' height='2' fill='%23808080'/%3E%3C/svg%3E");
background-size: 4px 4px;
}
アイコンのデザインガイドライン
Win31 アイコンの構造
┌──────────────────────────────────────────┐
│ 32×32 Icon Anatomy │
├──────────────────────────────────────────┤
│ │
│ ┌─ Light source from top-left │
│ │ │
│ │ ████████████████ │
│ │ █ Highlight edge █░ │
│ │ █ █░ │
│ │ █ SUBJECT █░ ← Shadow edge │
│ │ █ █░ │
│ │ █████████████████░ │
│ │ ░░░░░░░░░░░░░░░░░ │
│ │ ↑ │
│ │ Drop shadow (optional) │
│ │
└──────────────────────────────────────────┘
アイコンのデザインルール
- 光源：常に左上（45°）
- 輪郭線：すべての辺に 1px の黒い輪郭線
- ハイライト：上辺と左辺に 1px の白または明るい色の縁取り
- 影：下辺と右辺に 1px の暗い色の縁取り
- ドロップシャドウ：任意で 1px ずらした影（50% グレー）
- ホットスポット：視覚的な重心を中央に置く（幾何学的な中心ではありません）
主題のガイドライン
| カテゴリ | スタイルの注意点 |
|---|---|
| ドキュメント | 角を折り、内側に罫線を引く |
| フォルダー | 上部にタブを付け、開いた状態または閉じた状態にする |
| アプリケーション | 機能を表すツールやオブジェクト |
| 設定 | 歯車、スライダー、チェックマーク |
| ハードウェア | 簡略化したシルエット |
| 人物 | 胸から上の構図、簡略化した特徴 |
スプラッシュ画面とバナー
Win31 の一般的なスプラッシュ画面
┌──────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────────┐ │
│ │ ███████████████████████████████████████████████ │ │
│ │ █ █ │ │
│ │ █ ╔═══════════════════════════════╗ █ │ │
│ │ █ ║ PROGRAM NAME v1.0 ║ █ │ │
│ │ █ ╚═══════════════════════════════╝ █ │ │
│ │ █ █ │ │
│ │ █ [ Large Icon 64×64 ] █ │ │
│ │ █ █ │ │
│ │ █ Copyright © 1993 █ │ │
│ │ █ Your Company Name █ │ │
│ │ █ █ │ │
│ │ ███████████████████████████████████████████████ │ │
│ └──────────────────────────────────────────────────┘ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└──────────────────────────────────────────────────────┘
バナーの寸法
| 種類 | サイズ | 用途 |
|---|---|---|
| スプラッシュ画面 | 400×300 または 320×240 | 起動画面 |
| バージョン情報ボックス | 300×200 | ヘルプ > バージョン情報 |
| セットアップバナー | 480×60 | インストーラーウィザード |
| ツールバーの画像列 | 16×(16×N) | ボタンの画像列 |
バナーの色に関するガイドライン
| 領域 | 色 | 注意点 |
|---|---|---|
| 背景 | #C0C0C0 またはネイビーのグラデーション | システムグレーまたはブランドカラー |
| テキスト | グレー地に黒、ネイビー地に白 | 高いコントラスト |
| 枠線 | ベベル（左上は白、右下は黒） | 3D 効果 |
| ロゴ領域 | 最大 256 色 | 中央の主役 |
AI 画像生成のためのプロンプトエンジニアリング
Ideogram/Stability AI 向け
アイコン生成プロンプトのテンプレート：
32x32 pixel art icon, Windows 3.1 style, [SUBJECT],
16-color VGA palette, 1px black outline,
beveled 3D effect with highlight top-left and shadow bottom-right,
#C0C0C0 system gray background, clean pixel edges,
no anti-aliasing, no gradients, retro 1990s computer aesthetic
スプラッシュ画面プロンプトのテンプレート：
Windows 3.1 splash screen, 256-color VGA, [PROGRAM NAME],
centered composition, beveled 3D frame border,
navy blue title bar, system gray #C0C0C0 background,
pixel art style, corporate 1990s software aesthetic,
clean typography, no modern effects, authentic retro feel
バナー画像プロンプトのテンプレート：
Windows 3.1 program banner, 480x60 pixels, [PROGRAM NAME],
horizontal layout, beveled border frame,
16-color palette dominant with 256-color logo area,
retro pixel art typography, 1990s software aesthetic,
sharp pixel edges, no blur, no anti-aliasing
ネガティブプロンプト（避けるもの）
modern, flat design, gradients, blur, glow effects,
rounded corners, anti-aliasing, smooth edges,
vaporwave, neon, photorealistic, 3D render,
high resolution, 4K, detailed, complex shading
ツールのおすすめ
画像生成
| ツール | 最適な用途 | 備考 |
|---|---|---|
| Ideogram | アイコン、ロゴ | ピクセルアート風のスタイルが得意です |
| Stability AI | 大きなシーン | レトロなスタイルにするには、より多くのプロンプトが必要です |
| DALL-E | コンセプト | 後処理が必要になる場合があります |
後処理
| ツール | 用途 |
|---|---|
| ImageMagick | 色数の削減、ディザリング |
| Aseprite | ピクセルアートの編集（有料） |
| Piskel | 無料のブラウザー向けピクセルエディター |
| GIMP | インデックスカラーへの変換 |
ImageMagick コマンド
# Convert to 16-color palette with dithering
convert input.png -colors 16 -dither FloydSteinberg output.png
# Convert to exact Win31 palette
convert input.png -remap win31-palette.png -dither FloydSteinberg output.png
# Scale up pixel art (nearest neighbor)
convert input.png -filter point -resize 200% output.png
# Add 1px black outline
convert input.png -bordercolor black -border 1 output.png
避けるべきパターン
避けるべきパターン：滑らかなグラデーション
見た目：CSS の linear-gradient() やエアブラシのような陰影
問題点：Win31 に滑らかなグラデーションはありません。あるのはディザリングパターンだけです
代わりに：2色のベタ塗りの間に、規則的なディザリングを使います
避けるべきパターン：アンチエイリアス
見た目：滑らかな斜めのエッジ、ピクセルの混色 問題点：Win31 のアイコンはエッジが鋭く、階段状です 代わりに：ピクセルのエッジをはっきりさせ、斜めの部分に段差を見せます
避けるべきパターン：色数が多すぎる
見た目：RGB の全スペクトル、微妙な色の違い 問題点：16色の制限があるため、色は大胆で明確に区別する必要があります 代わりに：VGA パレットを使い、中間色にはディザリングを使います
避けるべきパターン：高解像度
見た目：128×128 以上の「ピクセルアート」 問題点：実際の Win31 アイコンは最大でも 32×32 です 代わりに：元のサイズで作業し、ニアレストネイバー法で拡大します
避けるべきパターン：ぼかしのあるドロップシャドウ
見た目：box-shadow: 4px 4px 8px rgba(0,0,0,0.3)
問題点：Win31 の影はエッジがはっきりしており、オフセットは 1～2px です
代わりに：1px の単色 #808080 を右と下に 1px オフセットします
クイックリファレンスカード
┌─────────────────────────────────────────────────────┐
│ Win31 Pixel Art Quick Reference │
├─────────────────────────────────────────────────────┤
│ │
│ COLORS │
│ ├─ System Gray: #C0C0C0 (THE background) │
│ ├─ Navy: #000080 (title bars, accents) │
│ ├─ Teal: #008080 (links, highlights) │
│ └─ 16-color VGA palette ONLY │
│ │
│ ICONS │
│ ├─ Large: 32×32, 16 colors │
│ ├─ Small: 16×16, 16 colors │
│ ├─ Light from top-left │
│ └─ 1px black outline required │
│ │
│ TECHNIQUE │
│ ├─ NO anti-aliasing │
│ ├─ NO gradients (use dithering) │
│ ├─ NO blur effects │
│ └─ Beveled borders for 3D depth │
│ │
│ GENERATION │
│ ├─ AI: "16-color, pixel art, no anti-aliasing" │
│ ├─ Post: ImageMagick -colors 16 -dither Floyd │
│ └─ Scale: nearest-neighbor only │
│ │
└─────────────────────────────────────────────────────┘
連携先
- windows-3-1-web-designer - Win31 の美学を CSS で実装
- win31-audio-design - ビジュアルスタイルに合うオーディオ
- pixel-art-infographic-creator - 教育用の図解
- native-app-designer - Win31 のスタイルと最新アプリを組み合わせる場合
重要なポイント：Win31 のピクセルアートは、制約によって個性を生み出すものです。16色の制限、硬いエッジ、ディザリングパターンがその美学を定義します。制限に逆らうのではなく、受け入れましょう。
覚えておきましょう：32×32 では、すべてのピクセルが重要です。構図を慎重に計画し、奥行きやグラデーションの表現はディザリングに任せましょう。
コメント
Markdown 対応