ドット絵 顔の描き方｜16x16/32x32の表情パターン

16x16の顔では、眉を1px下げるだけで印象が急に怒り寄りに見えることがよくあります（筆者の経験則です。
キャラクターの造形やパレットによって差が出ます）。
制作現場でも同様の傾向が観察されており、ドット絵の表情は、目・眉・口の置き方をどれだけ整理できるかで決まりやすいと言えます。
この記事は、16x16と32x32の小さな顔で、無表情から笑顔・怒り・悲しみ・驚き・困り顔までを描き分けたい初心者向けです。
各ピクセルを意図して置くドット絵だからこそ、1pxの差分には明確な意味があります。
準備セクション（準備：顔スプライトに向いたサイズと最小構成）や記事末の次のステップも合わせて参照してください。

詰め込みすぎて顔が潰れる、左右差で違和感が出る、口だけ変えても表情にならない。
そんなつまずきを避けながら、パーツ単位で印象をコントロールする考え方と、完成イメージを言語化するalt textの作り方まで、実制作の手順に沿って整理していきます。

ドット絵の顔はなぜ難しい？まず押さえたい表情の仕組み

ドット絵の顔が難しいのは、単に画像が小さいからではありません。
ドット絵は、低解像度の画像をそのまま縮めたものではなく、各ピクセルに役割を持たせて配置する表現です。
1pxの点が「ただの点」ではなく、目の位置であり、まぶたの角度であり、口角の傾きそのものになります。
だからこそ、普通のイラストなら誤差で済むズレが、ドット絵では造形の変更として見えてきます。

少ないピクセル数では、1pxの上下左右がそのまま顔立ちを変えます。
とくに16x16の顔は影響が直線的で、目の高さや間隔が1px動いただけで別人級に見えます。
実制作でも、目の間隔を1px詰めた顔は年上で集中している印象になり、逆に1px広げると幼く、少し間のびした表情に読まれました。
顔の中心にある目は、情報量が少ないほど印象の支配力が強くなるためです。

表情を読む仕組み自体は、ドット絵だけ特別というわけではありません。
人はまず、目・眉・口の組み合わせで感情を判断します。
怒りなら眉が下がり、目の形がきつくなり、口が締まる。
楽しさなら目尻が上がり、口角が持ち上がる。
悲しさなら眉の内側が上がり、目と口の重心が下がる。
ドット絵ではこの一般則を、限られた数のピクセルに圧縮して置くことになります。

顔の比率も、基準を知ってから崩すと安定します。
一般的な顔は、目が頭部の中間付近にあり、縦方向はおおまかに3分割で捉える考え方があります。
ただしこれはリアル寄りの作画基準で、ドット絵ではそのまま守る必要はありません。
むしろ小さなスプライトでは、頭や目を意識的に大きくしたほうが表情が読めます。
基準は「正解」ではなく、「どこを崩したか」を把握するための物差しとして持っておくと、デフォルメが安定します。

サイズごとに、使える表情の部品も変わります。
8x8では目は1pxか省略に近くなり、顔そのもので語れる情報は少なくなります。
この段階では、口の有無、輪郭の傾き、肌と髪の色の対比のほうが効きます。
16x16までくると、目・眉・口の最小構成が成立し、表情差分の練習に向いた密度になります。
32x32では、まぶたの厚み、頬の赤み、目のハイライト、鼻まわりの影まで使えるので、「笑顔」と「照れ笑い」、「怒り」と「不機嫌」のようなニュアンス差も乗せられます。

この違いは、言葉だけでも明確に説明できます。
たとえば16x16の通常顔で、眉を左右とも少し水平に置いていたとします。
そこから眉の外端だけを1px下げると、眉全体が内側へ圧をかける形になり、顔が一気に怒り寄りへ傾きます。
逆に目の形を大きく変えなくても、目尻を1px上げるだけで、視線が開いて楽しげな印象が出ます。
こうした差分は「描き足した」結果ではなく、「位置関係が変わった」結果です。
ドット絵の表情は線の量より配置の論理で決まります。

画像に説明文を付けるなら、その論理が伝わる書き方が向いています。
たとえば alt text なら、「16x16で眉外端を1px下げた比較。
左=通常/右=怒り寄り」と書くと、何が変化点で、どう読めるのかが一文で伝わります。
ドット絵の顔は見た目が小さいぶん、言語化すると観察ポイントが整理されます。
どの1pxが感情に効いているのかを言葉にできるようになると、感覚任せの修正が減り、狙った表情へ近づけやすくなります。

準備：顔スプライトに向いたサイズと最小構成

迷いを減らすには、最初に「どの大きさで、どこまで描くか」を決めてしまうのが近道です。
顔スプライトの入門なら、キャンバスは 16x16 か 32x32 のどちらかで始めると安定します。
16x16は目・眉・口の最小構成が成立し、1pxの差がそのまま表情の勉強になります。
32x32は同じ顔でもまぶたや頬、影の情報を足せるので、会話用の顔差分やアイコン寄りの表現まで視野に入ります。
いっぽうで 8x8 は補助的な練習サイズ と考えたほうが安全です。
ここまで小さいと目は1pxで置くか、いっそ省略する判断が増え、顔そのものより髪型や輪郭、配色で個性を出す比重が高まります。

実制作でも、新規案件の表情設計はまず16x16で固めてから32x32へ広げることが多いです。
その順番のほうが、どの情報を残してどの情報を捨てるかが明確になります。
最初から32x32で描き込むと、まつ毛や鼻筋や頬の影まで入れたくなりますが、あとで縮めたときに何が表情の核だったのか見えにくくなります。
16x16で成立する顔は、必要最低限の情報だけで感情を読ませる設計になっているので、32x32へ拡張しても芯がぶれません。

色数も最初は少なくて十分です。
たとえば 肌・髪・影の3〜5色 を基本に置けば、顔の差分制作には足ります。
ドット絵は各ピクセルを意図して置く表現なので、色数を増やすより、どの色がどの役割を持つかを固定したほうが顔の読みやすさが保てます。
アニメGIFとして書き出す前提でも、GIFは256色までという上限があるため、少色のドット絵と相性が合います。
最初から色を絞っておくと、表情差分を増やしてもパレット管理が破綻しません。

ベースは四角寄りの頭部から始める

顔の土台は、丸をきれいに取ろうとするより、少し四角いベース形 から入るほうが組みやすいのが利点です。
小さいサイズでは輪郭の1pxが顎にも頬にも見えるので、先に頭部の外形を決め、その内側に目と口を置く順番のほうが崩れません。
とくに初心者向けの最小構成では、正面顔で頭を大きめ に取り、胴体より顔の面積を優先したほうが表情が読み取りやすくなります。
リアルな比率に寄せるより、読ませたい情報を前に出す設計です。

目は頭部の中間付近を基準に置くと安定します。
ただしその比率を厳密に守るというより、「中間を基準にしつつ、デフォルメで少し上げ下げする」感覚で十分です。
16x16では目の高さが1px動くだけで幼さや緊張感が変わるので、中央付近に置いてから微調整したほうが収まりがよくなります。
眉と口は、最初から複雑な形にせず 1pxの短い線 で始めると差分化しやすくなります。
怒り・悲しみ・困り顔は、まずこの短い線の角度と位置の変化で作れます。

鼻はサイズによって扱いを割り切るのが実務的です。
16x16なら、鼻は 1pxの点で入れるか、省略 の二択で考えると迷いません。
目と口の間に1px置いただけで顔の中心線が出るなら採用、置いた瞬間に密度が上がりすぎるなら外します。
32x32では鼻先や鼻下の影で存在を出せますが、それでも表情の主役は目・眉・口です。
鼻を頑張って描くより、目の位置関係を整えたほうが顔全体の印象は安定します。

無表情の基準顔を先に作る

表情差分を作るときは、いきなり笑顔や怒り顔から始めないほうが整います。
最初に作るべきなのは、無表情の基準顔 です。
正面、頭大きめ、目は中央付近、眉と口は水平寄り。
この何も感情を足していない顔を1つ決めて、それを複製し、眉・目・口だけを差し替えていく流れにすると、どの変化が感情を生んだのか追いやすくなります。

この無表情ベース方式には利点がはっきりあります。
顔の輪郭、髪のボリューム、肌色の面積といった「表情ではない部分」を固定できるので、差分ごとの比較がしやすくなります。
笑顔を作ったのに別人に見える、怒り顔だけ年齢が上がって見える、といった事故の多くは、感情パーツ以外まで一緒に動かしてしまうことから起きます。
基準顔を複製して差分化すると、変更箇所が目・眉・口に限定されるため、表情の設計図として機能します。

32x32へ進むときも、16x16の基準顔をそのまま拡大コピーするのではなく、構成を引き継いで描き直すのが基本です。
16x16で決めた「目の間隔」「眉の角度」「口の重心」を保ったまま、32x32でまぶたや髪の影を足していくと、同じキャラクターのまま情報量だけを増やせます。
こうして最小構成のルールを先に決めておくと、表情の差分は感覚ではなく設計として積み上がっていきます。

ステップ1：無表情の基準顔を作る

表情差分の土台は、感情が乗っていない顔をどれだけ安定して置けるかで決まります。
ここで作る無表情は「何も描かない顔」ではなく、笑いにも怒りにも転ばない基準点です。
後で眉や口を1px動かしたとき、その変化だけを比較できる状態にしておくと、差分の意味がはっきり見えてきます。

輪郭は記号として先に固める

16x16の正面顔では、輪郭をリアルに丸めるより、1px線で頭をやや大きめに取るほうが顔として読み取られます。
頬から顎へ落ちる曲線も、なめらかさを追うより、階段状の段差が最短で済む形を選ぶのが基本です。
小さなキャンバスでは、きれいな曲線を再現しようとして段差を増やすと、輪郭だけで情報量を使い切ってしまいます。
角を少し残した四角寄りの頭部にしたほうが、内側に置く目と口の位置が安定します。

実制作でも、最初の基準顔は丸顔に寄せすぎず、上部に少し面を残した頭で始めることが多いです。
そのほうが髪のボリュームを足す余地も残り、顔の面積を確保できます。
小型スプライトでは頭を大きめに取ったほうが表情の主役である目が活きるので、胴体との自然な比率より、顔の記号性を優先した設計のほうが崩れません。

目は中央付近を基準に左右対称で置く

正面顔の基準を作る段階では、目の高さを先に決めます。
16x16なら、頭部の中間付近、具体的には高さ中央の前後1pxの範囲に置くと収まりが良くなります。
左右の目はキャンバス中央から等距離に配置し、まず完全な左右対称にします。
この時点でキャラクター性を出そうとして片目だけ上げたり、目の間隔を崩したりすると、無表情の比較軸が失われます。

目の最小形にはいくつか定番があります。
もっとも小さいのは1x1の点で、16x16では情報を絞った顔に向いています。
次に扱いやすいのが2pxの横線で、まぶたの存在を少し感じさせられるぶん、点目より表情差分を作りやすくなります。
もう一段だけ情報を足すなら、主ピクセル1つにハイライト1つを添える構成もありますが、これは基準顔の段階では少し主張が強めです。
無表情の土台としては、1x1か2px横線から始めると、あとで笑顔や驚き顔へ展開しやすくなります。

ここは並べて比べると差がすぐ見えます。
私は基準顔を作るとき、瞳を1px大きくした版と、白目に相当する明るい面を1px広げた版を横に置いて見比べます。
前者は視線の圧が強く出やすく、後者は目が開いて見えるぶん、無表情でも少し幼く抜けた印象になりやすいのが利点です。
どちらが正しいという話ではなく、同じ顔でも「どこを広げたか」で読み取りやすさの質が変わります。
基準顔の時点でこの比較をしておくと、あとから表情差分を作るときに、目の主張をどこまで残すか判断しやすくなります。

鼻と口は省略の境界を決める

鼻は16x16では主役になりません。
中心線の目印として必要なら1pxの点で置き、密度が上がるなら省略します。
鼻を描いたせいで目と口の存在感が弱まるなら、その鼻は削ったほうが顔全体の完成度が上がります。
基準顔では「鼻があるほうが顔に見えるか」ではなく、「鼻を入れても目と口のバランスが崩れないか」で判断すると迷いません。

口は1pxの横線から始めるのが基本です。
笑顔にも不機嫌にも傾いていない基準を作るには、長い口より短い口のほうが中立を保ちやすくなります。
無表情に見せるコツは、口の形そのものより、目から口までの距離と、口から顎までの余白の配分にあります。
上に寄せすぎると落ち着きがなく見え、下に落としすぎると間のびして見えます。
目・鼻・口の上下余白が均等に近いと、感情の偏りが少ない基準顔として機能します。

正面顔の比率は3分割を縮めて考える

人の顔には縦3分割の考え方がありますが、16x16ではそのまま当てはめません。
使うのは比率そのものではなく、眉・目・口の相対位置を整理するための考え方です。
小型の正面顔では、髪の生え際から眉、眉から鼻下、鼻下から顎までを厳密に分けるのではなく、上段に「額と髪」、中段に「眉と目」、下段に「鼻と口と顎」が圧縮されていると考えるとまとまります。

基準顔では、中段に視線の重心を集め、下段の口は少し短く置くと安定します。
つまり、目は頭の真ん中付近にあり、眉はそのすぐ上、口は下半分の中で少し上寄り、という関係です。
この言い方で位置関係を持っておくと、後で怒りなら眉を目へ近づける、驚きなら目と口の距離を広げる、といった差分の作り方が明確になります。
横幅も同様で、リアルな「目5つ分」の感覚をそのまま入れるのではなく、中央を軸に左右の目を同距離へ置き、目の間に呼吸できる空白を1段残す、くらいの把握で十分です。

左右反転でズレを炙り出す

基準顔が置けたら、そのまま次へ進まず左右反転チェックを入れます。
正面顔は対称のつもりでも、反転すると目の高さや口角のズレがすぐ見えます。
16x16ではこの1px差がそのまま「片側だけ眠そう」「少し皮肉っぽい」といった別の表情に変わります。

手順は単純で、通常向きの顔と反転した顔を並べ、まず目の高さを見ます。
片方だけ上に見えるなら、高い側か低い側のどちらかを1px補正します。
次に口を見て、端が上がって読めるか、中央がずれて見えるかを確認します。
口角がどちらかに寄っているなら、そのズレた側だけを1px戻します。
基準顔の段階では、左右差を「味」にしないことが肝心です。
差分を作る前に無意識の歪みを消しておくと、後で意図した変化だけが残ります。

この段階で顔が少し地味に見えるくらいでちょうどいいです。
基準顔は完成品というより、表情を受け止める定規です。
輪郭、目の高さ、口の長さ、鼻を置くか省くかが言語化できていれば、その後の笑顔も怒り顔も「何をどれだけ動かしたか」で組み立てられるようになります。

ステップ2：目・眉・口を1pxずつ動かして感情を作る

基準顔ができたら、ここからは顔パーツを1pxずつ動かして感情の向きを決める工程に入ります。
16x16でも32x32でも、表情差分の読み取りは目・眉・口の3点でほぼ決まります。
とくに小さい顔では、線を足すことよりどの端を上げたか、どの端を下げたかのほうが効きます。
目は、まず目尻の上下が軸です。
目尻を1px上げると、同じ横幅の目でも軽さや楽しさが出ます。
反対に目尻を1px下げると、沈んだ感じや悲しみが乗ります。
怒りを作りたいときは、目尻だけでなく上まぶたの線を見せるかどうかも効きます。
上まぶたの線があると視線が締まり、まぶたが目を押さえつけているように読めるので、少ないドットでも圧が出ます。
驚きは逆で、まぶたの主張を弱め、瞳を小さくして白目の比率を増やすと一気に開眼方向へ振れます。
楽しさなら瞳をやや大きく、白目を減らし気味にすると視線がまとまり、表情が散りません。
悲しみでは、目尻を下げたうえで瞳を少し小さめに置くと、力が抜けた印象に着地します。

このとき意識したいのは、瞳サイズと白目比率が感情の強度まで左右することです。
瞳が大きい顔は親しみや幼さに寄り、白目の面積が増える顔は緊張や驚きに寄ります。
32x32ではこの差をはっきり描き分けられますが、16x16でも「黒い部分を1px増やすか、明るい部分を1px残すか」で方向は変わります。
無表情の延長に見えてしまうときは、線の本数より明暗の比率を見直したほうが早く直せます。

眉は、角度を絵文字のように大げさに描くというより、2点の高低差で作ると安定します。
内端と外端のどちらを1px動かしたかで、感情の分岐がはっきりします。
怒りは眉内端を1px下げるのが基本です。
眉頭が目に近づくことで、視線が中央に集まり、顔全体が攻撃的に締まります。
困り顔は逆で、眉外端を1px下げると読めます。
外側だけが落ちることで、中央は保たれたまま頼りない表情になります。
驚きは、内端か外端の片方ではなく眉全体を1px上げるほうが素直です。
眉と目の距離が開くだけで、顔が上へ引っ張られたように見えるからです。

実務では、口だけ笑顔にしても読めない場面がよくあります。
口角を上げたのに、なぜか無表情か皮肉っぽく見える。
そういうときは眉外端を1pxだけ上げると、笑顔として一気に読めることが多いです。
口の情報だけでは「機嫌がいい」のか「口元だけ動いている」のか判別しづらくても、眉の外側が少し持ち上がると、顔全体が同じ方向へそろいます。
小さい顔ほど、この連動が効きます。

口は見た目以上に役割が広く、口角の上げ下げ1pxだけでなく、中央をへこませるかどうか、さらに線で描くか影で描くかで年齢感まで変わります。
もっとも中立なのは短い横線です。
そこから口角を左右とも1px上げれば笑顔寄り、下げれば不満や悲しみ寄りになります。
中央を1pxへこませると、単純な線口より感情が濃くなります。
上げ口で中央をへこませるとにっこり感が増し、下げ口で中央をへこませると泣きそうな口元になります。

描き方の選択も印象を変えます。
口を線で描くと、記号としての明快さが強く、幼い顔やゲーム的な読みやすさに向きます。
下唇の影で描くと、口そのものを輪郭線で囲わずに済むので、少し年齢が上がった印象や落ち着いた表情になります。
たとえば怒り顔で口を太い線にするとマンガ的な強さが出ますが、下唇の影だけで抑えると、静かな不機嫌さに寄ります。
同じ「口が下がっている」でも、線口か影口かで温度が変わるわけです。

ここで覚えておくと便利なのが、1px操作は単独より連動で効くというルールです。
口だけ変えても伝わらないときは、眉か目尻を最低1px連動させます。
笑顔なら口角を上げるだけで終わらせず、眉外端か目尻も少し上げる。
怒りなら口角を下げるだけでなく、眉内端を下げる。
悲しみなら口角を下げるだけでなく、目尻も下げる。
驚きなら口を開き気味に見せるだけでなく、眉全体を上げて白目比率を増やす。
読める表情は、複数の部位が同じ感情の方向を指しています。

言葉のBefore/After

眉内端を1px下げる前後は、文章にすると差がよく見えます。
下げる前は「まっすぐ見ている顔」です。
下げた後は「視線が中央に集まり、相手をにらんでいる顔」に変わります。
眉そのものは1pxしか動いていなくても、目との距離が詰まるので、顔全体の緊張が上がります。
怒り顔がぼんやりする原因は、口より先にここが立っていないことが多いです。

口角を各1px上げた前後も同様です。
上げる前は「短い横線の口で、感情が止まっている顔」です。
上げた後は「口元にだけ機嫌の方向が生まれた顔」になります。
ただし、口角だけだと笑顔として弱いことがあります。
そのとき眉外端を1px上げると、顔全体が持ち上がって「笑っている」と判断できる形になります。
現場ではこの1px追加で差分が採用ラインに乗ることが珍しくありません。

画像想定のalt text指示

画像の説明文は、何をどう変えた比較なのかがひと目で伝わる書き方にします。
ひとつは「眉外端のみ1px下げた例（困り顔寄り）」です。
もうひとつは「口を線→影に切替えた例」です。
前者は「外端のみ」という条件が入ることで、困り顔の作り方が眉全体の下降ではないと伝わります。
後者は、形ではなく描き方の違いを見せる画像だと明示できます。

用語補足

アンチエイリアス（Anti-aliasing）は、輪郭のギザギザを中間色の1pxで和らげる技法です。
通常のイラストでは有効ですが、本章の表情差分では基本的に未適用のまま進めます。
理由は単純で、1pxの上下そのものを読ませたいからです。
輪郭をなじませると、目尻を上げたのか、眉を下げたのか、口角を触ったのかがぼやけます。
表情づくりの段階では、まず記号としての強さを優先し、その後で必要な場所だけ整える流れのほうが崩れません。

表情パターン5選：笑顔・怒り・悲しみ・驚き・困り顔

5つの定番表情は、基準顔からの差分として並べると覚えやすくなります。
小さな顔では「どこを何px動かしたか」がそのまま感情の辞書になるので、まずは笑顔・怒り・悲しみ・驚き・困り顔を固定パターンとして手に入れるのが近道です。
各表情ごとに、目・眉・口の1px操作をそのまま使える形で整理します。
16x16では最小差分、32x32では同じ骨格に描き込みを足す構成です。

先に全体像を一覧化しておきます。Before/Afterを言葉で添えておくと、修正時に迷いません。

画像を用意するなら、説明文は比較条件まで含めると伝達力が上がります。
16x16用は「16x16の5表情セット」、32x32用は「32x32の5表情セット（まぶた・頬・ハイライト入り）」としておくと、サイズ差と描き込み差が一目で伝わります。

笑顔：目尻1px上＋眉外端1px上＋口角各1px上

笑顔は口角だけで作るより、目と眉を同じ方向へ持ち上げたほうが安定します。
小さい顔では、口元だけ上がっている状態が皮肉や作り笑いにも見えるからです。
目尻を1px上げ、眉外端を1px上げ、口角を左右それぞれ1px上げる。
この3点がそろうと、顔全体が上向きの流れになります。

1px操作リストとしては、目は「横線の外端を上へ1pxずらして軽い弧にする」、眉は「外端のみ1px上げて中央は据え置く」、口は「短い横線の両端を各1px上げる」です。
16x16ではこれ以上足すと騒がしくなるので、3部位だけで止めるのがちょうどいい形です。
32x32では上まぶたにゆるいカーブを足し、頬に1pxの明るい色を置き、瞳のハイライトを小さく入れると、同じ笑顔でも柔らかさが増します。

私が差分を量産するときも、笑顔はまずこの3点から始めます。
Asepriteで基準顔をLink Celsやレイヤー管理を使い、目・眉・口だけ別セルで差し替えると、笑顔の強さを段階的に増やせます。
会話用の32x32差分では、頬の明部を入れるかどうかで「にっこり」と「満面寄り」の境目を調整しやすくなります。

怒り：眉内端1px下＋目上まぶた線追加＋口の厚みを薄く

怒りの主役は眉頭です。
眉内端を1px下げるだけで、視線が中央に集まり、顔に圧が出ます。
そこに上まぶたの線を1本足して目を少し細く見せると、にらみの方向が固まります。
口は下げすぎるより、厚みを薄くして横に締めたほうが、静かな怒りから強い怒りまで転ばせやすくなります。

1px操作リストは、目が「上まぶた側に1pxの線を追加して開き量を抑える」、眉が「内端だけ1px下げる」、口が「上下2pxぶんある口なら1pxぶん削って薄くする、線口なら長さを保ったまま硬く見せる」です。
16x16では眉内端下げと口の薄化だけでも成立しますが、目の上側に1px加えると怒りの読まれ方が一段締まります。
32x32ではまぶたの影、瞳上部にかかる暗さ、鼻根まわりの影を少し入れると緊張感が増します。

怒り顔で失敗しやすいのは、口を大きく変えすぎて怒鳴り顔になってしまうことです。
怒っている表情の幅は広いので、まず眉内端を下げて、口は薄く短く保つほうが運用しやすいのが利点です。
ゲーム用の顔差分でもこの順序のほうが管理しやすく、同じ怒りでも「不機嫌」「苛立ち」「激怒」に枝分かれさせやすくなります。

悲しみ：眉外端1px下＋目尻1px下＋口中央を1px下げて弧状に

悲しみは、怒りと逆方向の緊張で作ります。
眉外端を1px下げ、目尻も1px下げると、顔の外側が落ちて見えます。
そこに口中央を1px下げた弧を加えると、沈んだ感情として読めます。
口角だけを下げるより、中央を落としたほうが「泣きそう」「しょんぼり」の成分が出ます。

1px操作リストでは、目は「外端を1px下げて下がり目に寄せる」、眉は「外端だけ1px下げる」、口は「横線の中央1pxを下げて浅い下弧にする」です。
16x16では線の長さを短く保ち、下げ幅を増やしすぎないことが判断材料になります。
下げすぎると年齢が上がって見えたり、口だけが浮いたりします。
32x32では下まぶたの丸み、下瞼の影、頬の縦方向の落ちたラインを少し加えると、感情の重さが増します。

悲しみは、口より先に目尻と眉外端の方向がそろっているかを見ると崩れません。
表情差分を並べたとき、悲しみだけ口の情報量が多いと浮いて見えます。
目と眉を先に落としてから口中央を触ると、同じキャラクターのまま感情だけが変わった状態になります。

驚き：瞳を1px縮小or白目1px拡大＋眉全体1px上＋口を縦2pxの楕円風に

驚きは、5表情の中でも読ませやすい部類です。
白目の比率を1px広げるだけで、顔が一気に反応したように見えます。
実際の制作でも、驚きは「何に反応したか」が伝わる前に、まず目で感情が読まれます。
眉は内端外端どちらかではなく、全体を1px上げるのが素直です。
口は横線をやめて、縦2pxの楕円風にすると開口感が出ます。

1px操作リストは、目が「瞳を1px縮める、または白目部分を1pxぶん広げる」、眉が「左右とも全体を1px上げる」、口が「1px横線を縦2pxの小さな開口に変える」です。
16x16では白目比率の増加だけでも驚きとして読まれることが多く、ここに眉全体上げを合わせるとほぼ迷いません。
32x32では瞳孔の縮み、上まぶたと眉の距離、口内の暗色を足すことで、声が漏れるような驚きに寄せられます。

制作の現場で何度も感じるのは、驚きは単独要素でも成立しやすい一方、困り顔はそうはいかないという点です。
驚きは白目比率を1px増やした時点で反応として読まれますが、困り顔は眉外端だけ下げても「眠そう」「悲しい」に寄りやすく、口角をフラットに保つか少し落とす要素までそろえて、ようやく困っている顔として安定します。

困り顔：眉外端1px下＋口角フラットor各1px下＋目はやや横長で力弱く

困り顔は、派手な変化ではなく「頼りなさ」を作る表情です。
眉外端を1px下げるのが出発点ですが、それだけでは悲しみや疲れ顔にも見えます。
そこで口角を上げずにフラットに保つか、左右を各1px下げて、目を少し横長にして力を抜くと、困惑や弱気の方向へまとまります。

1px操作リストは、目が「縦の開き量を減らして横長寄りに見せる、黒目の主張を弱める」、眉が「外端だけ1px下げる」、口が「口角を上げず水平を保つ、または左右各1px下げる」です。
16x16では眉外端下げとフラット口の組み合わせが最小構成です。
口角まで下げると困り感は強まりますが、悲しみに寄りすぎるときはフラットで止めるとちょうどよくなります。
32x32では上まぶたを少し下げ、瞳の位置を気持ち下に感じるように置き、頬線を足さずに力の弱さを保つと、困惑の空気が出ます。

困り顔は、読ませるのに2要素必要になりやすい表情です。
眉外端1px下げだけでは意味が割れますが、口角をフラット化した瞬間に「助けを求める顔」へまとまります。
小さな顔では、この2点セットをひとつの記号として覚えると再現性が上がります。

完成判定用のチェックリストも置いておきます。差分を横並びにしたとき、全部の顔が別の感情として読めるかを見るためのものです。

• 笑顔は、口角だけでなく目尻か眉外端も上方向にそろっている
• 怒りは、眉内端が下がり、目の開きが少し抑えられている
• 悲しみは、眉外端と目尻が下がり、口中央が落ちている
• 驚きは、白目比率または瞳サイズの変化があり、眉全体が上がっている
• 困り顔は、眉外端下げに加えて口角がフラットか下がり気味で、悲しみと区別できる
• 16x16版は要素を足しすぎず、1px差分の方向が読める
• 32x32版はまぶた・頬・ハイライトを足しても、元の1px骨格が崩れていない

この5パターンが固まると、実際の差分制作では「笑顔寄りの困り顔」「怒りを抑えた不満顔」のような中間表情も作りやすくなります。
基準になるのは、感情名そのものより、目・眉・口がどの方向へ1px動いたかです。

サイズ別のコツ：16x16と32x32で何を変えるべきか

16x16と32x32は、同じ「顔を描く」という作業でも、設計思想が別物です。
16x16ではまず記号として読めることが先で、32x32ではその記号に少しだけ空気感を足せます。
この順番が逆になると、16x16は潰れ、32x32は散ります。
サイズが上がったから描き込み量を増やすのではなく、どこまで情報を増やしても顔の芯が崩れないかで判断するとまとまります。

16x16は「増やす」より「削る」で整える

16x16では、目は1x1か簡易2px、眉と口は1px線が基本です。
このサイズで表情を読ませる役目は、質感ではなく配置差にあります。
笑顔なら目尻と口角の上方向、怒りなら眉内端の下方向、悲しみなら眉外端と目尻の下方向、といった具合に、まずは向きの記号をはっきり出します。
ここでまぶたや頬や細かな影まで入れたくなるのですが、16x16では追加情報が表情の補強ではなくノイズになりやすく、1pxの主役が埋もれます。

実際、16x16で顔が崩れるときは「足りない」より「入れすぎ」が原因であることが多いです。
目の上下に線を足したり、口に厚みを出したり、頬色を置いたりすると、各パーツの距離が詰まって判読性が落ちます。
そこで私は、情報を増やす前にまず削ります。
目の形を凝るより黒1pxをどこに置くか、口の曲線を頑張るより1px線をどの高さに置くか、という発想に切り替えると、16x16は急に安定します。

32x32はニュアンスを足せるが、各要素は1pxずつで止める

32x32になると、まぶた線、頬色1px、ハイライト1px、中間色によるやわらかい段差が使えます。
ここで初めて、無表情と笑顔の差を「線の方向」だけでなく「機嫌の良さの気配」でも見せられます。
たとえば笑顔なら、上まぶたを1pxだけ整理し、頬に1pxだけ明るさを入れ、瞳に1pxだけハイライトを置くと、同じ骨格でも愛嬌が出ます。
怒りや悲しみでも、目の周辺に薄い中間色を挟むだけで緊張感や沈み方が自然に見えてきます。

ただし、32x32で許されるのは「描き込めること」ではなく「補助線を置けること」です。
追加要素は最大でも各1pxずつ、という感覚で扱うと破綻しません。
まぶたを太くし、頬を広く染め、ハイライトを複数入れ、さらに影色まで増やすと、せっかくのドット絵らしい抜けが消えて、縮小時に一気に重く見えます。
32x32は余白があるようでいて、顔パーツ周辺の密度上限は意外と低いです。

32x32で私が毎回気を遣うのが、目のハイライト1pxの位置です。
これを入れた瞬間に顔の愛嬌が一段上がりますが、左右で高さが1段でもズレると、視線が泳いで見えたり、妙に落ち着かない顔になります。
そのため、ハイライトは左右同段を徹底しています。
形より位置の一致を優先したほうが、わずか1pxでも効き方が安定します。

詰め込みを防ぐための判断基準

小さい顔ほど、新規ドットを置く判断にルールが必要です。
そこで有効なのが、「何を足すか」より先に「何を削るか」を決めるやり方です。
32x32で頬色を1px入れるなら、輪郭沿いの中間色をひとつ減らす。
まぶた線を足すなら、目の白目の情報量を少し抑える。
こうして総量を増やしすぎないようにすると、主役の表情差分が埋まりません。

対角線のアンチエイリアスも最小限で十分です。
特に目尻や口角まわりで対角AAを入れすぎると、表情の輪郭がぼやけます。
小サイズの顔で読ませたいのは「きれいな斜線」ではなく「上がった・下がった・開いた・閉じた」です。
斜めを滑らかにすることより、方向が一目で伝わることのほうが優先順位は上です。

16x16と32x32の使い分け早見表

同じ表情でも、使える要素の範囲はサイズで変わります。判断の目安を表にすると次のようになります。

図版を入れるなら、alt textは「16x16と32x32の同一表情の比較（描画要素の違いに注釈）」としておくと内容が伝わります。
読者に見せたいのは、上位サイズほど豪華になることではなく、同じ感情をどの要素で支えているかの差です。
16x16は記号性の精度、32x32は記号性を壊さない範囲の肉付け、と捉えると判断がぶれません。

よくある失敗と対策

情報を詰め込みすぎて潰れる

初心者がまず引っかかるのは、表情を強くしたくて要素を足しすぎることです。
とくに16x16では、目を大きくし、眉を太くし、口にも厚みをつけ、さらに頬色や中間色まで入れると、顔の中で主役が渋滞します。
目だけ大きすぎる状態もその典型で、視線は集まるのに感情の方向は読めません。
小さい顔では「どの部位が目立つか」より「どの差分が記号として残るか」が優先です。

制作上の目安として、筆者は16x16の表情差分で1表情あたりの加筆を最大3px程度に抑えることが多いです（これは個人的なワークフローであり、必ずのルールではありません）。

この考え方は、口だけ変更しても伝わらない問題にもそのまま効きます。
口を笑顔形にしたのに無表情っぽく見えるときは、口の作り込み不足ではなく、眉か目尻が止まったままだからです。
私は最低でも1部位、眉か目尻を必ず連動させます。
実作業でも「2部位変更」を基準にすると、感情の読み取り精度が安定します。

詰め込みすぎは、形だけでなく配色でも起こります。
不要な中間色を増やしたり、斜めに沿って連続したAAを置いたりすると、輪郭が細って情報が潰れます。
16x16では曲線をきれいに見せようとして崩れるケースも多く、口や目尻に丸みを作ろうとして斜めを伸ばすと、表情の芯が消えます。
丸い口、やわらかい目元をそのまま再現するのではなく、上がる・下がる・開くといった象徴形に置き換えたほうが、小さい顔では伝達力が残ります。

崩れの原因が見えないときは、左右非対称も疑うべきです。
片側の目尻や口角だけが1px高いと、それだけで顔全体が歪んで見えます。
こういうときは反転して確認するとズレがすぐ見つかります。
高さの異なる端点を1pxだけ補正し、目高と口高の基準線へ戻すと、急に落ち着くことがよくあります。

アンチエイリアスの入れすぎ

アンチエイリアスは、入れた瞬間に上手くなった気分になりやすい要素ですが、小さい顔では罠になりやすいのが利点です。
AA（Anti-aliasing）は角の段差1箇所に中間色1pxまで、くらいのつもりで扱うとちょうど収まります。
それ以上を足すと、線のエッジが溶けて、表情の記号性が落ちます。
顔パーツは輪郭の美しさより、意味が一目で読めることが先です。

ありがちなのは、目尻、口角、あご先、輪郭の斜めに全部AAを入れてしまうパターンです。
すると上がった目尻なのか、下がった目尻なのかが曖昧になります。
笑顔と困り顔の差は本来1pxの向きで決まるのに、その段差をぼかしてしまうと判読が鈍ります。
ぼやけた顔になると、丁寧に作ったつもりの中間色が、むしろ邪魔な層になります。

曲線を無理に作って崩れる問題も、ここに直結します。
ドット絵の斜めは、長いカーブを追うより短い階段で構成したほうが崩れません。
1-1-2のような短いステップで段差を組めば、少ないピクセルでも方向がはっきり残ります。
丸みを再現しようとして中間色を足すより、段差のリズムを整えたほうが表情の判別は安定します。
とくに16x16の口は、なめらかな曲線を目指した瞬間に形が溶けやすく、象徴形へ割り切ったほうが結果が良くなります。

Asepriteのようなドット向けツールで拡大表示していると、AAを置いた瞬間はきれいに見えます。
しかし等倍に戻すと、必要だったのは滑らかさではなく輪郭の強さだったと気づくことが多いです。
私は等倍と反転を往復しながら、AAが「整える1px」なのか「濁らせる1px」なのかを見ます。
後者なら迷わず消したほうが、顔の印象は締まります。

画像想定のalt text指示

この失敗例を図版で見せるなら、alt textは「AAを入れすぎた例（ぼやけ）と最小限AAの比較」が適しています。
何を比べている画像なのか、読まれなくても内容が頭に入る書き方です。

図版の中身としては、同じ顔を左右に並べ、片方は目尻や口角や輪郭に中間色を入れすぎて輪郭が眠くなった例、もう片方は角1箇所にだけ1pxのAAを置いた例にすると差が明快です。
ここに左右非対称の失敗も混ぜるなら、片側だけ目の高さが1pxズレた例を添えると、初心者が見落としやすい崩れ方まで一度に伝えられます。
口だけ笑顔形に変えたのに感情が弱い例と、眉外端も連動させた修正版を並べる構成も有効です。

画像の狙いは、きれいな仕上がりを見せることではなく、なぜ崩れるのかを視覚で理解させることにあります。
とくに16x16では、目だけ大きすぎる、曲線を無理に作る、AAを入れすぎる、左右非対称のまま進める、といった初歩的な失敗が見た目に直結します。
文章だけで伝わりにくい差を、1px単位の比較として見せると、修正の勘所が掴みやすくなります。

次のステップ：顔差分から歩行スプライト・会話用立ち絵へ

ここまでで作った無表情の基準顔は、そのまま次の制作の親データになります。
実務ではまず基準顔を複製し、表情ごとにファイルかレイヤーを分けて管理すると、修正の起点がぶれません。
私は neutral / happy / angry / sad / surprised / troubled のように名前を固定しておくことが多いですが、この形にしておくと、あとで口だけ差し替えたい場面でも迷わず戻れます。
差分制作で毎回いちから描き直すより、無表情のコピーから編集する運用を徹底したほうが、左右差や輪郭の崩れが出にくく、修正も一段ずつ追えます。

会話用のフェイスに広げるなら、32x32以上の余白を使ってニュアンスを足していく段階です。
目・眉・口の骨格はそのままにして、頬色を1px置く、上まぶたを足す、瞳に小さなハイライトを入れる、といった拡張をすると、同じ笑顔でも機嫌の良さや照れの温度が分かれてきます。
基準顔の構造が固まっていれば、追加要素は飾りではなく補強として機能します。

この差分管理は、歩行スプライトにもそのまま接続できます。
歩行中の全コマで顔を描き替えるのではなく、通常顔をベースに、笑顔のときだけ目尻が1px上がったフレームを混ぜる、困り顔の場面だけ眉の外端が落ちた顔を差し込む、という軽い表情アニメにすると、動きの印象が急に生きます。
Asepriteならフレームとレイヤーを分けて持てるので、体の動きは共通に保ちつつ、顔だけ差し替える流れが作れます。
短い表情ループなら、間を少し長めに見せるフレームを混ぜるだけでも感情の読み取りが変わります。

SNSアイコンへ流用するときも、考え方は同じです。
32x32の顔は拡大表示される前提で見栄えを整えがちですが、完成前には必ず等倍と拡大の両方で見て、1pxの位置が崩れていないかを確認したいところです。
拡大時に整って見えても、等倍では目の高さや口角のズレがそのまま印象差になります。
アイコン用途では顔の判別速度がそのまま強さになるので、情報を足すより、基準顔からズレていないかを見るほうが効きます。

図版を入れるなら、無表情から5差分へ展開し、そこから32x32の会話用フェイスへ広げる流れが一目で分かる構成が向いています。
alt text は 「無表情→5差分→32x32拡張のフロー図」 としておくと、画像を見なくても意図が伝わります。

顔差分が安定してきたら、次は「1枚の完成顔」を描く段階ではなく、「基準顔をどう増やすか」の設計に意識を移すと制作が伸びます。
表情は単発の絵ではなく、会話ウィンドウ、歩行、アイコンと横展開できる部品です。
無表情の1枚を丁寧に作れたなら、その時点で次のキャラクター制作の土台はもうできています。