Pixel Art Professional

ピクセルアートのプロフェッショナル技法

概要

このスキルでは、スプライトを洗練させ、磨き上げるための高度なピクセルアート技法を紹介します。ディザリングパターン、パレットの最適化、色彩理論、陰影の付け方、アンチエイリアスを扱い、プロ品質のピクセルアートを実現します。

使用するタイミング

次のような場合に、このスキルを使用してください。

• 「ディザリング」を適用したい、またはディザパターンについて言及している
• 「パレットの最適化」や「色数の削減」について質問している
• 「陰影」「ハイライト」「影」「ライティング」について言及している
• 「アンチエイリアス」「スムージング」「エッジの調整」を依頼している
• 「カラーステップ」「グラデーション」「色彩理論」について話している
• 既存のピクセルアートを「磨き上げる」または「洗練させる」ことを望んでいる
• 「Bayerディザリング」や「Floyd-Steinberg」など、特定の技法について言及している

トリガーキーワード： ディザリング、パレット、陰影、アンチエイリアス、スムーズ、グラデーション、カラーステップ、磨き上げる、洗練させる、色彩理論、量子化

手順

1. ディザリングを理解する

ディザリングとは、使用できる色のピクセルをパターン状に混ぜることで、より多くの色があるかのように見せる技法です。

ディザリングを使う場面：

• 色数を減らす場合（例：256色 → 16色）
• 限られたパレットで滑らかなグラデーションを作る場合
• テクスチャを再現する場合（布、金属、石）
• レトロな美しさを表現する場合（往年のゲームではディザリングが広く使われていました）

ディザリングアルゴリズム：

組織的ディザリング（Bayerマトリックス）：

• 固定パターンのマトリックスを使用します（2x2、4x4、8x8）
• 規則的で予測しやすいパターンになります
• 最適な用途：テクスチャ、背景、レトロな見た目
• 高速で一貫した結果が得られます

誤差拡散（Floyd-Steinberg）：

• 色の誤差を隣接するピクセルに分配します
• より自然で、規則性の少ないパターンになります
• 最適な用途：グラデーション、自然な画像、滑らかな変化
• 処理は遅くなりますが、品質は高くなります

一般的なディザリングパターン：

• チェッカーボード：2色を交互に並べるシンプルなパターン
• Bayer 2x2：基本的な組織的ディザリング
• Bayer 4x4：より繊細な組織的ディザリング
• Bayer 8x8：非常に繊細で、グラデーションに近い見た目
• Floyd-Steinberg：滑らかなグラデーションのための誤差拡散

2. パレットの管理

色の量子化： mcp__aseprite__quantize_palette を使用して、スプライトの色数を適切に減らします。

• スプライトの色を分析します
• 最適な限定パレットを見つけます
• ピクセルを新しいパレットに割り当て直します
• 見た目の品質を維持します

パレット最適化のワークフロー：

1. 現在のスプライト情報とパレットを取得します
2. 目標とする色数（4、8、16、32、64、256）を決めます
3. 必要に応じてディザリングを加えて量子化します
4. 必要であればパレットを確認して調整します

一般的なパレットサイズ：

• 4色：Game Boy、ZX Spectrumのスプライト単位
• 8色：CGA、初期のアーケードゲーム
• 16色：NES、Master System、初期のVGA
• 32色：SNESの背景単位、Amiga OCS
• 64色：Genesis、PC Engine
• 256色：VGA、SNESの全パレット、Amiga AGA

パレットの理論：

• カラーステップ：陰影を付けるための、暗色から明色への段階的な変化
• 色相シフト：鮮やかな見た目にするため、影やハイライトで色相を少し変化させること
• 彩度：中間調では彩度を高くし、影やハイライトでは低くします
• コントラスト：重要な要素どうしに十分なコントラストを確保します

3. シェーディング技法

シェーディングの種類：

フラットシェーディング（シェーディングなし）：

• 面ごとに単色
• シンプルで印象的な見た目
• 最適な用途：UI アイコン、シンプルなスプライト、ミニマルなスタイル

セルシェーディング（ハードシェーディング）：

• はっきりとした境界の色帯
• 面ごとに2～3色（ベース、シャドウ、ハイライト）
• 最適な用途：カートゥーンスタイル、大胆なグラフィック、見やすいスプライト

ソフトシェーディング（ディザシェーディング）：

• ディザリングを使った段階的な変化
• 色数を抑えながら、滑らかな見た目を実現
• 最適な用途：リアルな見た目、滑らかな表面、グラデーション

ピクセルクラスター：

• 戦略的なピクセル配置による手動ディザリング
• 有機的で、手作り感のある見た目
• 最適な用途：金属、布の質感、独自の見た目

シェーディングのワークフロー：

1. 光源の方向を特定する
2. ベースカラーを決める
3. シャドウ用の暗い色を作る（色相を青／紫寄りにずらす）
4. ハイライト用の明るい色を作る（色相を黄／白寄りにずらす）
5. 光から離れた面にシャドウを適用する
6. 光に向いた面にハイライトを適用する
7. 深いシャドウに反射光を加える（控えめに）

よくあるシェーディングの間違い：

• 純粋な黒のシャドウを使う（代わりに、色相をずらした暗い色を使う）
• 純粋な白のハイライトを使う（代わりに、色味のある明るい色を使う）
• 色相をずらさない（シャドウ／ハイライトの色相がベースと同じ）
• ピローシェーディング（光源を考慮せず、エッジに沿ってシェーディングする）

4. アンチエイリアス

目的：中間色を加えて、ギザギザしたエッジや斜線を滑らかにします。

アンチエイリアスを使う場面：

• 斜線がギザギザに見える
• 曲線が階段状に見える
• エッジを滑らかにする必要がある
• 解像度の高いスプライト（64x64以上）

アンチエイリアスを使わない場面：

• 非常に小さなスプライト（16x16以下）
• 意図的にピクセル感のある美的表現
• コントラストの高い場面（AAによってコントラストが下がる）
• パレットの色数が限られている（中間色が必要になる）

手動アンチエイリアスの手法：

1. ギザギザしたエッジを特定する
2. エッジと背景の中間色を見つける
3. エッジの「段差」に中間色のピクセルを置く
4. 幅1ピクセルのAAを使う（ぼやけた太いエッジは避ける）
5. 必要な箇所だけにAAを使う（すべてのエッジに必要なわけではない）

自動アンチエイリアス：

• 自動でエッジを滑らかにする機能を備えたツールもあります
• 注意して使ってください（意図したシャープさがぼやけることがあります）
• 手動AAのほうが細かく調整できます

5. ピクセルアートの色彩理論

HSV/HSBモデル：

• 色相：色の種類（赤、青、緑など）
• 彩度：色の強さ（鮮やかさと灰色みの度合い）
• 明度／輝度：明るさ（暗いか明るいか）

カラ―ランプの作成：

1. ベースカラー（中間色）から始める
2. シャドウを作る：明度を下げ、必要に応じて色相を寒色寄り（青／紫）にずらす
3. ハイライトを作る：明度を上げ、必要に応じて色相を暖色寄り（黄／白）にずらす
4. ベースカラーとシャドウの中間色を作る
5. ベースカラーとハイライトの中間色を作る
6. 結果：5色のランプ（深いシャドウ、シャドウ、ベース、ハイライト、明るいハイライト）

色相のシフト：

• シャドウ：青、紫、または補色寄りにずらす
• ハイライト：黄、オレンジ、または光源色寄りにずらす
• 単調なグラデーションではなく、鮮やかで生き生きとした色になります

コントラスト：

• 重要な要素に十分な明度差を持たせる
• 背景と前景のコントラストを確保する
• シルエットが黒一色でも判別できるようにする

色彩の調和：

• モノクロマティック：単一の色相のバリエーション
• 類似色：色相環で隣り合う色相
• 補色：色相環で反対に位置する色相
• トライアド：色相環上で等間隔に配置された3つの色相

6. プロフェッショナルなワークフロー

ワークフロー 1：ディザリングを使ったパレットの縮小

ユーザーのリクエスト：「このスプライトをディザリングを使って16色に減らしてください」

手順：

1. 現在のスプライト情報を取得します
2. 現在のパレットサイズを確認します
3. mcp__aseprite__quantize_palette を次の設定で使用します：
   • target_colors: 16
   • algorithm: "median_cut" または "kmeans"
   • dither: true（Floyd-Steinberg ディザリングを有効にします）
4. 結果を確認し、必要に応じて調整します

ワークフロー 2：フラットなスプライトに陰影を追加する

ユーザーのリクエスト：「左上から光が当たるように、このスプライトに陰影を追加してください」

オプション A - 自動で陰影を付ける（手早く仕上げる場合）：

1. mcp__aseprite__apply_auto_shading を次の設定で使用します：
   • light_direction: "top_left"
   • intensity: 0.3-0.7（好みに合わせて調整します）
   • style: "smooth"、"hard"、または "pillow"
   • hue_shift: true（鮮やかな仕上がりにします）
2. ツールが領域を自動で検出し、陰影を追加します
3. 結果を確認し、必要に応じて手動で調整します

オプション B - 手動で陰影を付ける（精密に仕上げる場合）：

1. スプライトの構造を分析します
2. ベースカラーを特定します
3. 影色を作成します（暗くし、色相をずらします）
4. ハイライト色を作成します（明るくし、色相をずらします）
5. 新しい色でパレットを更新します
6. 右下向きの面に影を描きます
7. 左上向きの面にハイライトを描きます
8. 濃い影にさりげない反射光を加えます

ワークフロー 3：ギザギザのエッジを滑らかにする

ユーザーのリクエスト：「このキャラクターのエッジを滑らかにしてください」

手順：

1. ギザギザした斜線や曲線を特定します
2. エッジの色と背景色を確認します
3. 中間色（その間の色を1～2段階）を作成します
4. エッジの段差にアンチエイリアス用のピクセルを配置します
5. 確認して調整します（滑らかにしすぎないようにします）

ワークフロー 4：レトロパレットに変換する（パレット全体の変換）

ユーザーのリクエスト：「これをNESパレットに変換してください」

手順：

1. レトロパレットの色を指定して mcp__aseprite__quantize_palette を使用します
2. 対象のパレットを指定します（例：NESの54色、Game Boyの4色、C64の16色）
3. アルゴリズムが各ピクセルを最も近いパレット色に割り当てます
4. ピクセルが新しいパレットのインデックスに再マッピングされます
5. 必要に応じてディザリングを適用し、色の変化を滑らかにします
6. すべての色が対象のパレットに一致していることを確認します

重要：set_palette ではなく、quantize_palette を使用してください。set_palette ツールはピクセルデータを再マッピングせず、カラーテーブルを置き換えるだけなので、インデックスモードでは色が正しく表示されません。

例：

quantize_palette(
  sprite_path: "sprite.aseprite",
  target_colors: 54,  # NES full palette
  algorithm: "median_cut",
  convert_to_indexed: true,
  dither: false  # or true for Bayer dithering
)

7. ディザリングパターンのリファレンス

2色パターン：

チェッカーボード（50%の混合）：

A B A B
B A B A
A B A B
B A B A

25%パターン：

A A B A
A A A A
B A A A
A A A A

75%パターン：

B B A B
B B B B
A B B B
B B B B

Bayer 2x2：

Threshold matrix:
0 2
3 1

If pixel value > threshold, use lighter color

Bayer 4x4：

 0  8  2 10
12  4 14  6
 3 11  1  9
15  7 13  5

注：包括的なパターンライブラリについては、dithering-patterns.md を参照してください。

8. 技術的な詳細

量子化パラメーター：

• 対象色数：2～256
• ディザリング：任意。アルゴリズムを指定します
• アルファの処理：透明度を保持するか、平坦化します

パレットの制約：

• RGBモード：パレットの制約はありません
• インデックスモード：最大256色
• グレースケール：256階調のグレー

パフォーマンス：

• 量子化：スプライトのサイズに応じて約100～500ms
• ディザリング：アルゴリズムとサイズに応じて約200～800ms
• 手動でのピクセル操作：1回あたり50ms未満

9. よく使われるパターン

パターン：手早く仕上げる 「見た目をよくして」というリクエストの場合：

1. パレットを確認します（色数が多すぎる場合は減らします）
2. 基本的な陰影を追加します（光源は左上から）
3. 曲線に部分的にアンチエイリアスを適用します
4. 必要に応じてコントラストを調整します

パターン：レトロな見た目に変換する 「レトロな見た目にして」というリクエストの場合：

1. 適切なパレット（4色、8色、または16色）に減色します
2. Ordered Dithering（Bayer）を適用します
3. アンチエイリアスを取り除き、エッジをシャープにします
4. ピクセル単位で正確に位置が揃っていることを確認します

パターン：滑らかなグラデーション 「色を滑らかにして」というリクエストの場合：

1. 色の分布を分析します
2. Floyd-Steinberg ディザリングを適用します
3. 必要に応じて、パレットを整理するために量子化を少し適用します
4. 滑らかに色が変化していることを確認します

他のスキルとの連携

• 仕上げる前のベースとなるスプライトは、pixel-art-creator から作成します
• アニメーションには pixel-art-animator を使用し、その後このスキルで仕上げます
• 調整が完了したら、pixel-art-exporter に引き継ぎます

エラー処理

量子化に失敗する場合：

• 目標の色数は 2～256 である必要があります
• スプライトにはコンテンツが必要です（空白でないこと）

ディザリングの問題：

• 十分な色深度が必要です
• 色数が非常に限られたパレットでは、うまく機能しない場合があります
• コンテンツによって、適したアルゴリズムは異なります

パレットの競合：

• インデックスカラー方式には厳しい制限があります
• インデックスカラー方式に変換するには、先に量子化が必要な場合があります

成功の指標

次の状態になれば、このスキルを適切に使用できています：

• ディザリングの適用によって、滑らかなグラデーションやテクスチャが作られている
• 見た目の品質を保ちながら、パレットの色数が削減されている
• シェーディングによって、奥行きと立体感が加わっている
• アンチエイリアスによって、ぼかさずにエッジが滑らかになっている
• 色が優れた色彩理論の原則に沿っている
• スプライトがプロフェッショナルで洗練された見た目になっている