| name | px-character |
| description | ドット絵のキャラを打つときの px 単位の具体値。`*.sprite.json` のキャラ・NPC・魔物・四足動物を描く・直す・自己批評するとき、立ち絵や歩き・アイドルのコマ(別冊 animation.md)や会話ウィンドウの顔グラを作るとき、「髪や輪郭が硬い・矩形に見える」「顔が不気味」「無個性・人形に見える」「棒立ち・動きが硬い」「体がちぎれて見える・腕が胴に溶ける」「動物の首がねじれて見える」と言われたときに読む。工程(シルエット→フラット→陰影→sel-out→清掃)、サイズ別の頭身・色数・目・手の目安表、塊の打ち方(走り・面取り・毛先・房)、ポーズ、服、顔(別冊 faces.md)、四足動物、lint が見ない項目の検証を出す。人を置く判断の順序は /figure-drawing、色の予算・タイル・背景・小物は /retro-pixel、格子に乗せない塗りは /smooth-render、画風は /visual-dict の仕事。 |
| sync | 2026-08-18T00:00:00.000Z |
px-character — キャラスプライトの造形
キャラクター 1 体を画素へ落とす手つき。核はこれ:
下手なスプライトの原因の大半は、形の把握と整合性の失敗。技法(AA・ディザ・sel-out)は
形の力を増幅するだけで、形の欠陥を救わない。(Pixel Logic)
まずこの 3 つだけ守れば形になる: ①単色シルエットで何者か読める ②光源が 1 つ
③パーツがちぎれていない。残りは細部の精度を上げる話で、外しても絵は死なない —
以下の数値は優先順位と交換条件であって、満たさないと減点される項目の一覧ではない。
いつ引くか・いつ引かないか
引く: *.sprite.json のキャラ・生き物・NPC・魔物を描く・直すとき。
歩き・アイドル等のフレームを作るとき(→ animation.md)。キャラ案を自己批評するとき。
「髪や輪郭が硬い」「顔が不気味」「無個性・人形に見える」「動物が歪む」と言われたとき。
引かない(守備範囲の近い skill との住み分け):
- 人を置く判断の順序(画風に依らない) →
/figure-drawing。
判断の順序はあちら、px 単位の具体値はこちら
- 色の予算・パレット宣言・タイル地形・背景・小物 →
/retro-pixel(上位)。
パレットはあちらの工程 2 で宣言済みの hex を使い、ここで色を発明しない
- 画素の格子に乗せない絵(およそ 48 画素から上)の塗り →
/smooth-render
- 画風(題材・色 3 つ・やらないこと) →
/visual-dict
- 描き出し・批評ループの回し方 →
/render-loop
ここは、ドット絵のキャラを打つときの px 単位の具体値
(サイズ別の予算・塊の打ち方・顔・服・四足動物)。
担当の切り分けは 1 行で: スプライトは 48px まで px-character / なめらかに塗る絵は
48px から /smooth-render / 顔グラはキャンバス寸法に関わらず px-character。
retro-pixel の「小さい人を打つ」節はこちらへ移した。
衝突したら: 人の注文 > /visual-dict の画風 > /retro-pixel の色予算・パレット >
この skill。ただしキャラの造形工程・頭身・顔・手・ポーズはこの skill が正 —
他の skill のキャラ記述と食い違ったらこちらに従う。
描く前に決める 3 つ
- 最小キャンバスは「最も細かく表現が必要な箇所」から逆算する — 手・口・表情・
持ち物のうち何を見せたいか 1 つ特定する。それが 2px 未満に潰れるサイズなら、
その箇所を省略するかサイズを上げる。重要でないシンボルは捨てる覚悟を持つ
- 光源は 1 つ(既定は左上=engine 全体の統一)。以後の陰影・sel-out・ハイライトの
全部がこれに従う。変えるなら ANATOMY.md に記録する
- メイン色 1+対照的なサブ色 1。メイン=面積の大半か最重要の特徴を塗る色。
主要色は 2〜3 色まで。hex は宣言済みのパレット(
*.palette.json か ANATOMY.md の表)
から引き、ここで色を発明しない
工程 C0〜C5
**既にあるスプライトを 1〜3px 直すときは工程に戻らない。**直す箇所の節だけ引いて、
最後に lint を回す。C0 から回すのは新しい 1 体を起こすときだけ。
retro-pixel の 6 工程は場面レベル。この C 工程は、その工程 5「多産→選別」の中で
キャラ 1 体・1 案を作るミクロ工程。
| retro-pixel(場面) | ここ(キャラ 1 体) |
|---|
| 1 ANATOMY.md | ← 「決める 3 つ」もここに書く |
| 2 パレット宣言 | ← キャラのランプも宣言済み |
| 4 コードで生成 | キャラの rows は例外 — 1 文字ずつ手で置く |
| 5 多産→選別 | 案ごとに C0〜C5 を回す |
| 6 描き出し批評 | ← 下の検証チェックリストを持ち込む |
- C0 形の宣言 — 何者か(職業・種族・役割)と見せたい特徴 1〜2 個を 1 行で書く
- C1 シルエット — 単色 1 色(墨)で外形だけ。単色で何者か読めなければ C2 に
進まない — 色や陰影では後から救えない。判定は実寸で、全画素を墨に潰して行う
- C2 フラット — 陰影なしのローカル色で領域を塗る。塗って C1 より読みにくく
なったら領域数が多すぎる — 領域を減らす
- C3 陰影 — 暗を 1〜2 段だけ。影は「暗い領域の形」として描く — 輪郭を内側へ
なぞる同心円(ピロー塗り)は禁止。光源と反対側の面・凹み・重なりの奥に置く
- C4 sel-out — 受光側の輪郭だけを、その内側の色の暗色版へ昇格する。
影側の輪郭は墨のまま。外周(背景に接する縁)に AA を打たない(ハローになる)
- C5 ハイライト+清掃 — ハイライトは光源側のみ、肌・布なら総面積 5% 以下
(発光体・濡れた面・金属・宝石はこの割合を超えてよい)。最後に
bin/fge sprite を回す(orphan・jaggy・banding は機械が見る)
- コマを作るなら → animation.md(方向 → キーフレーム → 中間コマ)
平塗り+PxShade 委譲案を必ず 1 案含める — C2 で止め、C3〜C5 相当を
PxShade.shadeDoc(ふち光・接地影・ディザ)に任せる案。実戦(internet_dungeon)では
手打ちの階調が破綻し、「明度階調+シルエット+最明点 1 点」へ切り替えた方が勝った。
48px 級の複雑なポーズに限り、2 倍の格子で下描きして 2×2 → 1 文字へ手で間引いて
から清掃してよい(atelier 内のみ。成果物は実寸)。
サイズ別のよくある値(人型のとき)
**この表は外れてよい。**外れると何が起きるか(潰れる・読めない)を承知の上なら外す。
人型でない物(虫・機械・幽霊・抽象)には当てはめない。
| 縦 | 頭身(頭:胴:脚) | 色数 | 目 | 手 | 輪郭 |
|---|
| 16px | 2 (1:0.5:0.5) | 4〜8 | 1px 点×2、間隔 1〜2px | 省略か 1px の示唆 | 墨。sel-out 任意 |
| 24px | 2 (1:0.5:0.5) | 6〜10 | 1×2px。白目なし | ミトン 2×2 | 墨+sel-out |
| 32px | 2〜3 (3 なら 1:1:1) | 8〜12 | 1×2 か 2×2。白目可 | ミトン。指は明度差 | sel-out 必須 |
| 48px | 3〜4 | 12〜16 | 黒目+ハイライト 1px | 親指+人差し指を分離 | sel-out+AA 少量 |
- 人型なら頭は全高の 1/3 以上。リアル等身は縦 48px 超から(それでも顔に最も画素を割く)
- 32px 以下は手足を実寸の比率より 2〜5 割大きく描く(実寸で潰れるため)
- 1 マテリアルのランプは 3 段(最大 5 段)。色数は lint-sprite の上限(12 色、
32px 超は 16 色)を超えない
- 実寸の物差し: FF・DQ 風 16×24 / MOTHER 風 15×25 / オクトパストラベラー風 18×32 /
GBA ポケモン風 32×56(スタイルの目安としてだけ使う)
- 大写しの顔(縦 48px 超)は部品まで降りる — 目・鼻・口・髪の行の割り当ては
faces.md の 48px 級の節が正
塊の打ち方 — 「硬い」「矩形」を避ける
サイズ別の数を守っても、塊の形が不格好だと全部が台無しになる。輪郭はこの順で打つ。
- 1 画素が 1 つの意味を持つ大きさで打つ — 首は 1px、肘や膝は 1px の段差、
かかとは 1px の出っぱり。意味を割り当てられない画素は置かない
- **曲線は走り(1 段あたりの画素数)を単調に変化させる。**増えるなら増えっぱなし、
減るなら減りっぱなし。
6,3,2,1,1,1,2,4,4 は滑らか、6,3,1,2,1,2,1,4,4 は 1 と 2 が
往復してジャギーになる
- 同じ走りを 3 回以上続けるとそこは直線に読まれる。同方向の直線を続けてよいのは
16px で 4px・32px で 6px・48px で 8px まで。超えるなら途中に 1px の段を入れる。
これは有機物(体・髪・布・生き物)の輪郭の話 — 人工物(武器・鎧・建材・機械)と、
直線を画風に選んだ絵は対象外で、硬さが欲しい所は直線のまま通す
- 1 本の輪郭で使う走りは 3 種類まで(
3,2,1 系)。4 種以上混ざると不揃いに見える
- **角には 1px の面取りを入れる。**角のまわりを
3,2,1,1,2,3 の順に置くと角が消える。
2px 以上の面取りは丸くなりすぎ
- 頭頂・肩口など水平線が出る場所は、左右で高さを 1〜2px ずらす
- **毛先は
3→2→1px。**走り 1 を 2 段以上続けると尖る — 鋭さが欲しいならそれでよく、
柔らかくしたいなら 3,2,2 で止める
- 房を等幅・等間隔で並べない(「くし」に見える)。幅を
6,4,3,2 のように変える。
房の溝は暗色 1px で、根元まで通さず房の長さの半分で止める
- **解像度が上がるまで房を増やさない。**16px で 5 房に割ると、どの房も走り 1〜2 しか使えず
必ず尖る(16px は塊 1 個 + 動く房 1 個・色 2 で足りる)
- 生え際を水平に通さない。中央を 1px 下げた山型にし、左右の高さも 1px ずらす
- 髪と肩・首の間に 1〜2px の隙間を作る。塊が箱に見えなくなる
- ハイライトは点をばらまかず、長さの違う帯(
5,3,2px)。輪郭から 1px 内側に置き、
輪郭線に触れさせない。影も同じ長さの帯が並ぶと金属に見える
髪型はシルエットに出る量がすべて。頭(縦 21 × 横 22px)に対し、縦か横に 4px 以上
はみ出さない髪型は、遠目では全部同じに見える — 短刈り・普通の短髪 0〜+2 /
逆立て・高いポニーテール 上 +5 / ボブ 横 +4 / ツインテール 横 +10 / 長い巻き髪 下 +8〜+20。
髪の階調は 6 段まで使える。うち暗い 2 段は輪郭と毛先、最明色は頭の前上部に
1〜2px 幅の途切れた帯として置く(連続した線にしない)。前髪の房は 3〜5 本。
服 — 平坦に見せない
低解像度では輪郭でなく色が形を定義する。
- **胴の単色は最後の手段。**縦に 3 帯(肩・胸・腰)へ割る。いちばん安いのは
腰の 1 行を全幅の暗い色で敷くこと。これだけで上下が別の服に分かれて見える
- 胸に 2〜3px 幅の前立てか帯。縁に 1px の濃い色を入れる
- **模様の下限は実測でボーダー 2px 幅・市松 1px。**1px の縞は動くとちらつく。
水玉とチェックは 16〜32px では成立しない(点が孤立してノイズになる)
無地の広い面は 1px の市松で埋め、片側に 3px 幅の影の列を置く
- 差し色は服の面積の 1 割以下の高彩度色を 1 か所(靴の 2px 帯・襟)。
最下 1〜2 行を別色にするだけで靴に読める。袖口や裾を 1 行だけ明るく折り返す
- **切り替えを左右対称の直線だけにしない。**斜め・非対称の切り替えを 1 か所入れる
- **輪郭の外に出したものだけが遠目に効く。**胴の幅は 16×32 級で 8px しかない。
スカーフは首に巻いた 1 行ではほぼ見えず、風下へ 3〜5px 伸ばした尾にして初めて読める。
帽子・マント・フード・ポニーテールも、輪郭を割る形だけが仕事をする
- 地味さは彩度不足ではなく周囲との差の問題。シャツと肌、シャツとズボンの明度を離す
四足動物
そろえるのは投影(向き・光源・接地)、崩すのは重心と付属物(髪・布・持ち物・尻尾)。
この 2 つを混同しない — 下の「記号に寄せる」は投影の話で、人型の「非対称の一点」は
重心の話。適用範囲が違うので衝突しない。
ここは四足動物のとき(人型は下の「ポーズ」)。
人間と同じ手を使わない。ポーズを付けず、記号に寄せる方が可愛くなる。
顔と体の向きを必ずそろえる — 「顔は正面・体は横」は 1 つのシルエットに 2 つの投影が
同居するので、脳が「首がねじれている」と読む(計測した 4 例とも向きは一致)。
姿勢はサイズで選ぶ。16px=正面のお座り / 32px=真横の立ち / 48px=斜め 45 度。
16px で正面のお座りが定石なのは、左右対称なので歪みが原理的に起きず、脚を 2 本しか
描かなくてよく、頭を大きく取れるから(実測 13×18px の猫で 頭 : 胴 = 1 : 1)。
- **胴は一枚の塊のまま、最下 1〜3 行だけを切り欠いて脚にする。**脚を 4 本の棒として
生やすと机に見える(実測は馬で最下 1 行、猫で 3 行)
- **背中を水平の直線にしない。**肩の後ろで 1〜2px 沈み、腰へ向かって 2〜3px 上がる弧
(実測で高低差 5px)
- 脚は 16px で 2 本、32px でも 2〜3 本。前脚を前寄り・後脚を後ろ寄りに置き、中央を 6〜8px 空ける
(等間隔が机に見える原因)。太さ 2〜4px、長さは全高の 20〜28%
- 首は描かない。頭を胴の上に乗せて背中の線を破る(頭頂が背中より 3px 高い)
- **尻尾は四足を「物」から「動物」に変える最大の非対称要素。**短くしない
- 種の識別に効く順は 耳 > 胴の長さ > 尻尾 > 鼻先の長さ。
猫=小さい三角が頭の高い位置 / 犬=大きく、垂れる / ウサギ=長い
- 可愛さは 2〜2.5 頭身・目は顔の高さの 1/3・顔の中央より下・輪郭は直線を使わず丸み・脚は短く太く
顔・目・手
顔の作り込み(32px 帯・48px 帯・会話の顔グラ・キャラごとの描き分け)は
faces.md。ここは全サイズ共通の芯だけ。
目の大きさを決めるのはスプライトの高さではなく、顔(肌)の縦幅(実測 19 例で閾値が一致):
| 顔の縦幅 | 目 |
|---|
| 3〜4px | 1×1 |
| 5〜6px | 1×2 の縦長。両目の間隔は 2px |
| 5px 以上で明度を 2 段割ける | 2×2 のうち 1px を白か明色 |
| 10px 以上 | 2×3 の 3 段(まつ毛・虹彩・白) |
- **単色ベタの 2×2 は目でなく「四角い穴」に読まれる。**2px 幅を使うなら 4 画素のうち
最低 1 画素を別の明度(白目かハイライト)に割く。割けないなら 1×2 の縦長へ落とす
- 目は最も注目される部位。スペースが無ければ潰れた 1px を無理に置かず、
目を省略して影で示す
- 年齢は目の大きさでなく位置で作る。頭の縦中心より 1〜2px 下で幼く、上で大人びる。
両目の間隔も 1px で印象が変わる — 決めてから置く
- 手はベタのミトン形から始める。指を描くなら親指+人差し指を優先(掴む・指す・
摘むはこの 2 本で読める)。指の分離は輪郭線でなく明度差で
- パーツを隣接させない — 口の上下に 1px の空き。顎や鼻と接すると読めない
- スペースが足りないときは目を動かさず、周辺(耳・輪郭)を動かして空ける
ポーズ(人型のとき)
- 動きの軸(line of action)を 1 本の曲線で決め、その上に形を掛ける。
現実より少し強く曲げると意図が伝わる
- 立ちはコントラポスト: 肩の線と腰の線を逆方向に 1px ずつ傾ける。
直立でも左右対称にしない — 非対称の一点(持ち物・髪の房・腕)を必ず入れる
- 左右非対称を 1px で作る — 片足を 1px 前へ、肩を 1px 下げる。ただし
16px では 1px の傾きは読まれない — この帯の崩しは肘の曲げと髪のはねの塊で作る
- **関節で軸を折る。**腕も脚もまっすぐな棒にしない。肘・膝で 1px ぶん向きを変え、
腕は肩から生やして先細りさせ、手は塊として置く
- 誇張は 2〜3 箇所に集中し、「ちょうど良い」と思った量からさらに 3 割押す。
硬い物(武器・鎧・帽子のつば)の形は残し、柔らかい物(布・髪)を削って調整する
- 腕は胴と分ける — 胴と腕の間に 1〜3px の背景の抜けを作るか、1px の暗色で
境界を入れる。抜けが無い腕は、幅があっても腕に読まれない。
隣り合う塊はどこでも 1px あけるか明るさの段を 1 つ変える(同じ色で接すると溶ける)
- 後ろ姿の手がかりは 3px で出す — 髪の生え際 1px・肩の傾き 1px・かかと 1px。
予算が足りないならどれを削るか先に決める
- 持ち物は性格でなく役割を伝える別の軸
色・面の質感(retro-pixel との差分だけ)
**人形っぽさ=ポーズ・重心 / 無機質さ=面の質感。**別々に直す。
- 明度が使えるならパーツの分離は明度差でやる — 色相差は実寸で潰れる。
判定はグレースケール化。明度の段が残っていない 2〜4 色のパレットでは色相差が唯一の手段で、
そのときは色相を離してよい
- 隣接するパーツに同じ色を使わない(混ざって 1 つの物に見える)
- **材質が増えたら明るさの段を配り直す。**隣り合う材質を同じ段に置かない。
段が足りなければ面積の小さい材質から譲る
- 肌の影は暗くするだけでなく赤みを足す
- 高彩度×高明度の組は使わない。彩度のピークはランプの中央に置く
- 陰影は 2 段まで(光側 1 段明・影側 1 段暗)。光源は左上
- **16 色級以上なら体にディザを撒かない。**面積が小さいと市松は濁って見えるだけ
(中間色を作れない 2〜4 色の予算では、階調を作る手はディザしかない)。使うなら
2 色の境目に 2〜4px 幅の市松を 1 帯だけで、面の内側には敷かない。32px 以上で、
16px・顔・肌・幅 2px 以下の細い物には入れない。例外は透けている物
(網の紗・薄い布・ガラス)で、体ではなく持ち物に打つ
連結性 — 全フレーム 4 連結 1 成分が既定
非透明画素は全フレームで 4 連結(上下左右)の 1 成分につなぐ。斜めだけの接触は
実寸で「ちぎれ」に見える(1 ドットのずれが体の崩壊に読まれる)。
検査は bin/fge sprite の connect(注意止まり。意図して離した絵は
"lint-sprite": "対象外(connect) — 理由" と書く)。
- 持ち物は持ち手(手)と必ず接続し、それ以外の部分を体から 1px 離す —
柄・杖先など手以外の部分の話で、持ち手まで離すと武器が浮いて見える。
ミトンを持ち物と体の間に置いて橋にする
- **持ち物を輪郭に食い込ませない。**柄は体の外形の外を通し、握り手だけ 1px の暗い点。
重なる所は柄を 1 段暗くして後ろへ送る
- 弓の弦のような 1px の線が手・腕を横切る行は、線を隠して手を前に描く
(線は上下で本体につながっていれば 1 成分が保てる)
検証チェックリスト
機械が見る項目を目視で数え直さない: orphan・connect(4 連結の塊の数)・jaggy・
banding・色数・パレット一致は bin/fge sprite の仕事。ここは lint が見られない
項目だけ。
**崩しは欠陥として数えない。**非対称・傾き・はみ出し・不揃いは、この skill が
積極的に作れと言っている物。批評で「崩れている」と数え上げて全部直すと、
左右対称で直立した人形に戻る。数えるのは下の項目だけにする。
外すと壊れやすい順(上ほど、外すと絵が死ぬ)
- 技法での挽回 — シルエットが読めない絵に AA・ディザ・sel-out を足しても
救えない。C1 に戻る方が速い
- ピロー塗り — 輪郭を内側へなぞる同心円の影。影は光源から決める
- 1 発描き — 描き直しは前提(実戦では 1 体 15 版)。案は atelier/ に
.a .b .c で積み、assets/ への昇格は人間の判断に委ねる
- 全周黒アウトライン — 受光側は sel-out へ昇格する(太い黒縁を画風に選んだ絵は別)
- 外周 AA — 背景へのハローになる。透過の縁には打たない
- 明度を使えるのに色相差だけでパーツを分ける — 実寸で潰れる
顔(32px 帯・48px 帯・顔グラ・描き分け)は faces.md。
アニメーション(方向・コマ・歩き)は animation.md。
