ツール

CLIP STUDIO PAINT ドット絵|設定と描き方

更新: 森川 レイ
ツール

CLIP STUDIO PAINT ドット絵|設定と描き方

CLIP STUDIO PAINTでも、1px単位のドット絵はきちんと作れます。専用のピクセルアートツールほど自動で“pixel perfect”に整えてはくれませんが、1pxブラシ、グリッド、スナップ、塗り設定を最小限そろえれば、まずは32x32の顔アイコンを1つ仕上げるところまで迷わず進められます。

CLIP STUDIO PAINTでも、1px単位のドット絵はきちんと作れます。
専用のピクセルアートツールほど自動で“pixel perfect”に整えてはくれませんが、1pxブラシ、グリッド、スナップ、塗り設定を最小限そろえれば、まずは32x32の顔アイコンを1つ仕上げるところまで迷わず進められます。

この記事は、普段はCLIP STUDIO PAINTでイラストを描いていて、追加でドット絵も扱いたい人に向けた実践ガイドです。
私自身、通常の作業の合間に32x32の顔アイコンを作って設定をテンプレ化してからは、次回の着手までがぐっと短くなりました。

アンチエイリアス、ディザリング、バンディングといった基礎も、抽象論ではなくCLIP STUDIO PAINT上の操作に落として整理します。
書き出しではPNGとGIFを軸に、JPGを避ける理由や、64x64へ拡大するときに整数倍を守る考え方まで押さえれば、ピクセルの輪郭を崩さず運用できます。

CLIP STUDIO PAINTはドット絵制作に使える?向いている点と注意点

CLIP STUDIO PAINTは、そもそもイラスト・漫画・アニメーション制作を広くカバーする総合ソフトです。
その枠の中で、ドット絵制作もきちんと成立します。
結論から言えば、普段からCLIP STUDIO PAINTを使っている人にとっては、追加の導入コストなしでドット絵に入れるのが最大の強みです。
レイヤー構成、選択範囲、色の管理、既存のブラシ設定や素材管理までそのまま流用できるので、頭を切り替える量が少なく済みます。

この利点は、ゲーム用の試作スプライトを作る場面で特に効きます。
私自身、UIラフやキャラクター案をCLIP STUDIO PAINTの既存レイヤー管理のまま持っていて、そのまま小さなスプライトに落として当たりを取ることがあります。
こういうとき、PhotoshopやAsepriteへ持ち替えなくても、ラフ、配色検討、差分作成まで一つのファイル管理の延長で進められるのは実務上のメリットが大きいです。
静止画だけでなく、簡易的なアニメーション確認まで同じソフトで完結できるので、ドット絵を単独作品として作るというより、イラスト制作の一部として組み込む運用と相性があります。

一方で、純粋なピクセル編集の効率だけを見ると、専用ツールを検討する余地は残ります。
CLIP STUDIO PAINTは総合力で勝負するソフトであり、ドットを1ピクセルずつ最短距離で打っていく感覚や、ピクセルアート専用UIに最適化された操作密度は、Asepriteのような専用エディタのほうが前に出ます。
つまり、CLIP STUDIO PAINTは「ドット絵もできる総合制作環境」と捉えると納得感があり、「ピクセル編集専業の最速ツール」として見ると比較対象が変わってきます。

サイズ設計も、この使い分けを整理する軸になります。
実制作では、まず小さめの解像度で形を詰めるほうが判断が早く、練習なら32x32pxや64x64pxがちょうどよい入口です。
そこから背景込みの画面作りや横長レイアウトを試す段階では、192x108pxや320x180pxといった作例サイズが扱いやすく、ゲーム画面や壁紙風の構成を考えるときの目安になります。
CLIP STUDIO PAINTはこうした小解像度のキャンバスでも、普段の作画資産をそのまま引き継げる点が強いです。

最新バージョン情報を明記

CLIP STUDIO PAINTの現行系統は、Ver.5.0が2026年3月11日に提供開始され、その後、EX/PRO Ver.5.0.1が2026年3月13日に公開されています。
現時点の利用環境としてはこの表記を基準に見るのが自然ですを参照。

注意点

注意したいのは、Aseprite系でよく話題に出る“pixel perfect”な線補助の感覚を、そのまま期待しないほうがいいことです。
CLIP STUDIO PAINTでも1px単位の描画はできますが、斜線やカーブを引いたときに余分なドットを自動整理してくれる補助は限定的です。
輪郭線を引いたあと、二重に乗ったドットや詰まり気味の角を手で整える前提で見ておくと、作業の見積もりが狂いません。

この差は、特に小サイズのキャラクターで表に出ます。
32x32pxや64x64pxでは、1ドットの置き方で表情もシルエットも変わります。
専用ツールなら線を引く段階でノイズを減らせる場面でも、CLIP STUDIO PAINTでは仕上げの手直しが作業の一部になります。
その代わり、塗り分け、色替え、差分作成、上からの加筆修正は既存のレイヤー機能で流れるようにつながります。
ピクセル単位の線引き最適化より、制作全体の往復を減らす方向で強みが出るソフトだと言えます。

変形時はツールプロパティの「補間方法」でハードな輪郭を選ぶとアンチエイリアスを抑えた変形が可能です。
ただし、書き出しや画像解像度変更ダイアログで英語ラベルとして 'Nearest neighbor' と常に表記されるとは限りません。
確実にピクセルを保持したい場合は、(1) 原寸のPNGをまず保存しておき、(2) 必要な整数倍(2x/4x等)で拡大するワークフローを推奨します。
公式の補間設定については CLIP STUDIO のサポートを参照し、補間アルゴリズムの概念は を参考にしてください。
[!NOTE]

練習段階では32x32pxか64x64pxで1体ずつ作り、構図込みの画面作りに進む段階で192x108pxや320x180pxへ広げると、ドットの置き方とレイアウトの感覚を分けて身につけられます。

要するに、CLIP STUDIO PAINTはドット絵制作に使えます。
しかも、ふだんCLIP STUDIO PAINTで描いている人ほど恩恵が大きいです。
イラストとドット絵を同じソフトで往復できること、ラフから仕上げまで資産を共有できること、簡易アニメまで一本化できることは、専用ツールにはない魅力です。
その一方で、ピクセル編集そのものの速さや自動補助を最優先するなら、Asepriteのような専用ツールが候補に残ります。
制作全体を一つにまとめたいか、ピクセル操作の効率を突き詰めたいかで、選び方が変わります。

まずやる設定:キャンバスサイズ・グリッド・1pxブラシ

キャンバスサイズの選び方

ドット絵は、描き始める前のキャンバス設計でほぼ勝負が決まります。
CLIP STUDIO PAINTで新規作成するときは、まず用途に合わせて小さく切るのが基本です。
練習用やスプライトなら32x32px、もう少し情報量を持たせたいアイコンやキャラクターなら64x64pxが基準になります。
小さいサイズはごまかしが効かないぶん、1ドットの意味を早い段階で掴めます。

背景や画面全体をドット風に組みたいなら、192x108pxや320x180pxが扱いやすい落としどころです。
横長の構図を試せて、壁紙風のレイアウトやゲーム画面のラフも作れます。
もともとイラスト寄りの感覚で入る人は、いきなり大きなキャンバスを開きがちですが、ドット絵では情報量を増やすほど判断箇所も増えます。
最初の1枚は、形を詰めること自体が目的になるサイズのほうが収まりがいいです。

既存イラストをピクセルアート化する発想なら、100x120pxのような中途半端に見えるサイズも機能します。
これは最初からドット絵を打つというより、元絵の情報をどこまで削れるかを見るためのサイズです。
人物の顔や上半身だけを単純化したい場面では、このくらいの寸法だと「残す線」と「捨てる線」の判断がしやすくなります。

私自身は、作業の入口を迷わないように、32x32、64x64、192x108、320x180の4種類を新規テンプレートに近い感覚で使い分けています。
小物や顔アイコンは32x32、少し描き込みたいキャラは64x64、画面作りは192x108か320x180という切り方にしておくと、サイズ選びで止まりません。

グリッド1:1とグリッドにスナップを有効化する

サイズを決めたら、次は1px単位で迷わず置ける表示環境にします。
CLIP STUDIO PAINTでは、まず[表示]→[グリッド]でグリッドを表示し、そのうえで[表示]→[スナップ]→[グリッドにスナップ]を有効にします。
ここで見るべきなのは、グリッドが「大きなマス目」ではなく、1ピクセルごとに区切られていることです。
グリッドサイズは1:1、つまり1px単位に合わせます。

この設定を入れる理由は単純で、ドット絵では1マスずれただけで輪郭も印象も変わるからです。
スナップを切ったままだと、見た目では同じ位置に置いたつもりでも、手元では半端な位置感覚で線を引いてしまい、あとから修正コストが増えます。
専用ソフトのような自動補助が前面に出る設計ではないぶん、CLIP STUDIO PAINTでは先にグリッドとスナップを整えて、人間側の判断をブレさせないほうが安定します。

表示倍率も同時に揃えておくと、ジャギの見え方を読み違えません。
確認に向くのは100%、200%、400%、800%のような整数倍です。
100%では全体の読みやすさを見て、400%や800%ではドットの詰まりや欠けを確認する、という往復が効きます。
非整数倍率の表示では、実際のピクセル配置とは違う見え方になりやすく、輪郭がにじんで見えたり、逆に崩れていない場所まで不安に見えたりします。
ドット絵の確認は、描く倍率より「見る倍率」を揃えるほうが先です。

ここで作業効率に直結するのが、サブツールの事前整理です。
私はドット絵用サブツールセットとして、1px、2px、消しゴム1pxの3点をまとめて作り、素材パレットに登録しています。
線を引く、面を取る、1ドットだけ削るという基本動作が一発で切り替わるので、毎回ブラシ設定を触る時間が消えます。
小さい作業ほど、こういう準備の差がそのまま手数の差になります。

💡 Tip

400%で描いて100%で戻す、という往復を1セットにすると、拡大中は気づきにくいシルエットの崩れを拾いやすくなります。

1pxブラシ(点描ペン/硬い鉛筆)と設定項目

ブラシは、普段のイラスト用を流用するより、ドット専用に切り分けたほうが早く整います。
基本はペンか鉛筆サブツールを元にして、アンチエイリアスをOFF、ブラシサイズを1px、不透明度を100%に固定します。
線の端に中間色が入る設定や、筆圧で濃さが揺れる設定はドット絵と相性がよくありません。
1クリックで1色、1マスぶんだけ置ける状態まで削るのが正解です。

点描や点描ペン系のサブツールが入っているなら、そのまま使うのも有効です。
もともと点を打つ前提の挙動なので、1px配置との相性がいいです。
もし通常のペンや鉛筆を調整するなら、ブラシ先端が硬く、アンチエイリアスがかからず、サイズ変化も不透明度変化も起きない状態に揃えます。
筆圧によるサイズ変化がONのままだと、同じつもりで置いた線が細くなったり太くなったりして、1px運用が崩れます。
不透明度の筆圧連動も同じで、色ムラの原因になります。

補正系も絞っておくほうが噛み合います。
手ブレ補正や描画の安定化を強くかけると、ドットを置くつもりの操作が線として解釈され、意図しない太り方をすることがあります。
ドット絵では、描線を“整える”より“そのまま出す”ほうが扱いやすい場面が多いです。
線が勝手に丸まり、太さが変わり、端でにじむ挙動を消していくと、修正の起点がはっきりします。

このあたりは設定項目が多く見えても、実際に固定する内容は少数です。
1px、AAなし、不透明度100%、筆圧でサイズも濃さも変えない。
この4点を決めるだけで、普段のブラシとは別物になります。
CLIP STUDIO PAINTでドット絵を描くときに迷いが出るのは、機能が足りないからではなく、通常イラスト向けの可変要素が多いからです。
そこを先に止めておくと、1ドット単位の判断がそのまま画面に出ます。

基本ワークフロー:アウトラインからベース塗りまで

1pxで外形を取る

最初の1枚では、描き込みより先に1pxの外形だけで形を決めます。
順番を固定すると迷いが減ります。
まず1pxアウトラインで外形を置き、次にベース色で面を埋め、そのあと影やハイライトに入る前に輪郭と面の境界を掃除し、色替えや塗り分け維持はCLIP STUDIO PAINTの「透明ピクセルをロック」で進める、という流れです。
この順番にしておくと、どこで形が崩れたのかを追いやすくなります。

外形で見るべきものは、目や口の細部ではなくシルエットです。
ドット絵は情報量が少ないぶん、輪郭の読み取りやすさがそのまま完成度に出ます。
顔なら髪のボリューム、頬の張り、首の有無。
キャラ全身なら頭身、肩幅、脚の開き、持ち物の突き出し方。
この段階で「誰に見えるか」「何を向いているか」が取れていれば、後から色数を絞っても崩れません。

直線はCLIP STUDIO PAINTのShift操作で先に通してしまうと、横線や縦線がぶれません。
斜線は長く流すより、短い階段として置いたほうがドット絵らしい角が残ります。
たとえば3-2-1のように段差を詰めていくと、丸みを出しながらも輪郭がだれません。
ここで階段の幅が途中で急に変わると、見た目にノイズが出ます。
髪の外周や頬から顎に落ちるラインは、1本ずつ眺めるより、100%に戻して塊で見るほうが判断が速いです。

私自身、32x32の顔アイコン練習では、外形だけで数分使います。
目を入れたくなるのをこらえて、髪型と顔の向きだけで読める状態まで持っていくと、その後の作業時間が短くなります。
15〜20分で1枚仕上げる練習ルーチンでも、最初の外形が弱いと、色を足しても読みにくい顔のままです。
逆に輪郭だけで雰囲気が取れていれば、4〜8色でも十分に顔として立ちます。

ベース塗り

外形が取れたら、次はフラットなベース色で面を埋めます。
ここではまだ影もハイライトも入れません。
髪、肌、服、装飾のように、大きな色面を先に分けて、どこが何のパーツかを一目で読める状態を作ります。
ドット絵の初手で立体感を急ぐと、面の整理が遅れて、輪郭の良さを自分で壊しがちです。

塗りつぶしでは設定が結果をそのまま左右します。
バケツや自動選択を使うときは、Anti-aliasingをOFF、Area Scaling(拡張)もOFFにして埋めるのが前提です。
ここが入ったままだと、境界に中間色や余計な拡張が発生して、せっかく1pxで置いた輪郭の周りがにじみます。
ドット絵で欲しいのは、輪郭線の内側をきっちり1マス単位で塗ることです。
境界が少しでもぼやけると、あとで手動で1ドットずつ直す手間が増えますし、どこまでが線でどこからが塗りなのかも曖昧になります。

この段階では、色数も絞っておくと判断がぶれません。
顔アイコンなら、肌、髪、目、服、輪郭、アクセントで収まる配色から始めると、情報の優先順位が見えます。
最初からグラデーション寄りにせず、1パーツ1色のつもりで置いてみると、「このパーツは本当に必要か」が判断できます。
ベース塗りで読めないものは、影を足しても読めないことが多いです。

ℹ️ Note

塗りつぶし直後は、そのまま影入れに進まず、輪郭の内側に1ドットだけ残った穴や、角に刺さった余分なピクセルを先に取ると、後工程の修正量が減ります。

影とハイライトの前に入れるクリンナップでは、外形線の太り、塗り残し、階段の乱れをまとめて整えます。
ここは地味ですが、顔なら頬と髪の境目、キャラなら袖口と胴体の接点のように、境界が詰まりやすい場所を見直すだけで読みやすさが変わります。
影を入れる前に面が整理されていると、後から暗色を置いたときもノイズではなく形として効きます。

透明ピクセルロックでの塗り替え

ベースが入ったら、塗り分けを崩さずに色を動かす段階に入ります。
ここで効くのがCLIP STUDIO PAINTの「透明ピクセルをロック」です。
ラスターの色面レイヤーでこれをONにすると、すでに塗ってある領域の中だけに描画が限定されます。
つまり、髪の面を保ったまま色相を振る、肌の内側だけに影を入れる、服の色だけ差し替える、といった作業を、はみ出しを気にせず進められます。

ドット絵では1ドットのはみ出しが目立つので、透明ピクセルロックの恩恵が大きいです。
たとえば髪のベース面を作ってからロックし、暗色で下側だけをなぞれば、輪郭の外へ色が漏れません。
肌レイヤーを別にしておけば、頬だけ少し赤みを足す、鼻筋の1列だけ明るくする、といった調整も手数が少なく済みます。
色替えのたびに選択範囲を取り直さなくていいので、小さな絵ほどテンポが落ちません。

この機能は「影入れのため」だけでなく、ベース塗り後の比較にも向いています。
髪色を寒色に振るか暖色に振るか、服を明るくするか落ち着かせるかを試すとき、塗り分けそのものは固定されているので、見ている差分が色だけになります。
シルエットと配色を切り分けて考えられるため、何が原因で読みにくいのかを整理しやすくなります。

なお、整数倍で拡大して確認したい場面では、変形時の補間方法をハードな輪郭寄りにしておくと、ピクセルの角がそのまま立ちます。
16x16を4倍にすれば64x64としてブロック状に確認でき、32x32を4倍にした128x128も同じ発想で扱えます。
原寸の密度を崩さずに見たいときは、この考え方で通したほうが後の修正箇所を見誤りません。

具体例:32x32の顔アイコン配置レシピ/64x64キャラのブロック分割

32x32の顔アイコンでは、顔の中に全部を詰め込もうとしないことが先です。
読み取らせる情報は、髪型、顔の向き、目の位置、表情の強弱くらいで十分です。
私がよくやる手順は、まず頭の外形を取り、前髪か輪郭側の髪束でシルエットに差を作り、首と肩を最小限だけ入れて「顔だけ浮いている」状態を避ける、というものです。
そのうえで肌と髪をベース塗りし、目は左右対称に置くより、向きに合わせて片側を強く見せます。
目を2つ並べるより、片目と眉の角度で感情を出したほうが、32x32では読み取りやすくなります。

このサイズは、練習の回転数を上げるのにも向いています。
15〜20分で1枚、4〜8色で顔を読む訓練を続けると、どの情報が必要でどこが削れるかが体に入ります。
髪のハイライトを凝るより、前髪の切れ込みを1ドット変えたほうが印象が動く、といった判断が見えてきます。
短時間で終える前提にすると、描き込むより選ぶ感覚が強くなり、ドット絵の基礎がつきます。

64x64のミニキャラでは、顔アイコンより一段広いので、最初から全身を「ブロック」で分けて考えるとうまくまとまります。
頭、胴、腕、脚、持ち物を別の塊として置き、関節や装飾は後から差し込みます。
ここでも先に輪郭、次にベース塗り、そのあとクリンナップという順番は変えません。
64x64になると描ける量が増えるぶん、ベルトやボタンのような小物を足したくなりますが、先に見るべきなのは遠目での姿勢です。
立っているのか、走っているのか、片手を上げているのかが100%表示で読めなければ、小物は情報過多になります。

ブロック分割の感覚で言うと、頭部は最優先、胴体は服の種類がわかる程度、腕と脚はポーズが伝わる程度までに抑えると破綻しにくくなります。
剣や杖のような持ち物は、本体より少し誇張して長さや角度を出したほうが、小さな画面で埋もれません。
ドット数が増えたから細部を増やすのではなく、読ませたい要素にピクセルを再配分する感覚です。
32x32が「何の顔か」を伝える設計なら、64x64は「誰がどんな姿勢か」を伝える設計に変わります。

仕上げのコツ:影・ハイライト・アンチエイリアス・ディザリング

手動アンチエイリアス:1px中間色の置き場所

ドット絵の仕上がりを左右するのは、影を何段入れるかより、輪郭の角をどう見せるかです。
手動アンチエイリアス(Anti-aliasing)は、線をぼかす処理ではなく、階段状に見える角へ1pxの中間色を意図的に差し込む作業だと考えると判断がぶれません。
置く場所は、直線部分ではなく、斜線と曲線が接続する折れ目や、急に段差が切り替わる角です。
たとえば髪の外周が「横に2、下に1、横に1、下に1」と折れていく箇所では、暗い輪郭色と明るい地色のあいだに1pxだけ中間色を置くと、ギザギザが消えるのではなく、目に入る硬さだけが弱まります。

ここで避けたいのは、輪郭に沿って中間色を並べ続けることです。
そうすると線が太って見え、ドットの芯が曖昧になります。
私は、AAを入れる候補を見つけたら、その1pxが「角を和らげている」のか、「線をにじませている」のかで切り分けます。
前者なら残し、後者なら消します。
ドット絵のAAは自動処理の代用品ではなく、視線の流れを整える最小限の補助です。

影やハイライトも同じ発想で扱うとまとまります。
ハイライトは描き込みのために足すのではなく、読み取りの優先順位を上げるために置きます。
髪の束感や金属の反射を見せたい場面でも、白や最明色を広く置く必要はありません。
8色パレットで髪を詰めていたとき、仕上げでハイライトを1pxずつ2か所だけ足したことがあります。
面積はほとんど増えていないのに、前髪の流れと頭頂の丸みが一気に読めるようになりました。
塗りのバランスを崩さずに効くのは、そういう最小手数の調整です。

2色ディザリング:チェッカーと短線の使い分け

ディザリング(Dithering)は、色を増やさずに中間の質感を作るための技法です。
基本になるのは、2色のあいだをチェッカー状に交互配置する1x1パターンです。
明るい面から暗い面へ一段だけなじませたいとき、この配置はもっとも均等に見えます。
ただし、広い面積へそのまま敷くとザラつきが前に出ます。
布、壁、地面のようにテクスチャを少し感じさせたい面には向きますが、肌や顔のように形の読み取りを優先したい場所では、かえってノイズになります。

そこで使い分けたいのが、短い2x1ラインです。
たとえば暗色2ドット、明色2ドットを短く散らすと、チェッカーより流れが出ます。
髪の束、服の折り返し、斜面の影移行のように、面に方向性がある場所ではこちらのほうが落ち着きます。
チェッカーは均質、短線は方向づけ、と覚えておくと選びやすくなります。

大事なのは、パターンを混在させる範囲です。
チェッカーと短線を同じ小領域に詰め込むと、視線がパターンそのものに引っ張られます。
私なら、境界の近くは1x1チェッカーでつなぎ、そこから少し離れた面の内部は2x1短線で流れを作る、という順で分けます。
こうすると中間調が出ても、表面がざわつきません。
CLIP STUDIO PAINTで作業していると、通常イラストの感覚でグラデーションに寄せたくなりますが、ドット絵では「どのパターンを何マス置くか」が質感そのものになります。

💡 Tip

ディザリングを入れてよくなったかは、パターン単体ではなく、100%表示で面として読めるかで決まります。拡大時にきれいでも、原寸で砂目だけが残るなら引き算したほうが整います。

色数設計:4→8→16色の段階戦略

色数を絞る理由は、制約をかけるためではありません。
面の役割を整理し、どこを読ませたいのかを強制的に決めるためです。
色が多いほど情報量は増えますが、小さなキャンバスではその増加分がそのまま読解性につながりません。
むしろ、近い色が並ぶことで輪郭と面の差が弱まり、印象が散ります。

出発点として扱いやすいのは4色から8色です。
肌、髪、服、輪郭といった大枠を置き、必要なら影色を共有して回します。
この段階では、質感よりも面の切り分けが優先です。
顔アイコンや小さなミニキャラなら、ここで十分に成立する絵が多いです。
私もラフ段階ではまず少色で組み、各パーツが「何色ないと読めないのか」を見ます。
髪に3色必要なのか、2色で足りるのか、服の影は輪郭色と兼用できるのか、そうした判断が先に立つと、後から色を足しても迷いません。

8色で足りなくなるのは、素材感を分けたいときです。
金属だけ反射を立てたい、肌だけ赤みを差したい、背景とキャラの温度差をつけたい、といった要求が出ると16色が視野に入ります。
ただし、16色は「細かく塗れる」という意味ではなく、「役割を分業できる」という意味で増やします。
髪専用のハイライト色、肌専用の中間色、金属専用の白を持たせると、同じ1pxでも意味が変わるからです。
逆に、増えた色がどの面にも薄く使われている状態なら、色数だけ増えて設計は進んでいません。

CLIP STUDIO PAINTで試行するときは、前のセクションで触れた「透明ピクセルをロック」を使うと、面を保ったまま配色の比較を進められます。
少色で成立する絵は、色替えの段階でも崩れにくく、どの色が画面で働いているかが把握しやすくなります。
最初から16色を配るより、まずは4色で骨格、次に8色で立体感を確認し、必要なら16色で質感を整える、と段階的に増やすのが判断しやすいワークフローです。

曲線・斜線のドット配置Before/After

曲線と斜線は、ドット絵で“うまさ”が出やすい箇所です。
崩れて見える原因の多くは斜めそのものではなく、階段(段差)のリズムが途中で乱れることにあります。
以下では、Before(段差が不規則で視線が止まる状態)とAfter(段差の長さに規則性を持たせて滑らかに見せる配置)の違いを、具体例を交えて説明します。
Afterの実例では、3-2-1のように段差を少しずつ詰めることで丸みを出す手法を使います。
一方で、刀身や槍などの長い斜線では等間隔で欠きドットを作る(例:横へ一定数進んだら1段下げる)ことで傾きを伝えるのが有効です。
詰まりと空きが不規則だと波打って見えるため、意図的にリズムを揃えることを優先してください。

よくある失敗:バンディング、ぼやけ、線のガタつき

Bandingの見分け方と崩し方

バンディング(Banding)は、輪郭に沿って影色や中間色が帯のように並び、境界が濁って見える状態です。
ドット絵では立体感を足したつもりでも、実際には「輪郭のすぐ内側に同じ形の線をもう一本なぞった」だけになっていることが多く、これが面の読みやすさを落とします。
髪の外周、頬の影、服の裾まわりで起こりやすく、拡大して見ると整っているようでも、原寸では輪郭が太ったように見えます。

典型例は、暗色を外周にぴったり沿わせて1px幅で連続させる配置です。
輪郭線、影色、その内側のベース色が平行に走ると、境界が二重三重になって形がぼけます。
回避するときは、影を輪郭と同じ長さで追いかけないことが出発点です。
影は段差で切る、色の接触面を少しずらす、必要なところだけ1マス食い込ませる、といった崩し方のほうが立体として読めます。
ディザリングでなじませる方法もありますが、境界全体に広げると帯感が増えるので、使うなら狭い範囲に留めたほうが締まります。

私が仕上げ前に必ずやるのは、100%と800%を往復して、輪郭に沿って連続している影の帯を探す手順です。
100%では顔や腕の読みやすさを見て、800%では帯になっている箇所だけを拾います。
そこで影がべったり並んでいたら、同じ長さで消すのではなく、1px飛ばしに再配置して接触面をずらします。
輪郭の真横に5ドット並んでいた影を、2ドット置いて1ドット空け、別の場所に1ドット移すだけで、境界が呼吸できるようになります。
面の情報は残したまま、帯だけを壊す感覚です。

CLIP STUDIO PAINTで作業していると、通常イラストの癖で「境界はなめらかにつないだほうが自然」と考えがちですが、ドット絵ではその判断が逆に働きます。
滑らかさは色数や配置の整理で作るもので、輪郭沿いに影色を並べることでは生まれません。
バンディングを崩すときは、線を足すより、輪郭と影の距離を意図的にずらすほうが結果が安定します。

にじみ・ぼやけの原因チェックリスト

(補足)CLIP STUDIO の公式TIPSやサポートページにも類似の設定・トラブルシューティングが掲載されています。
参考: CLIP STUDIO TIPS

原因を切り分けるときは、次の項目を見ると早いです。

  • 通常ブラシをそのまま使っていないか確認してください。
  • ブラシのアンチエイリアスがONになっていないか確認してください。
  • 1pxの硬いブラシではなく、筆圧や濃度変化の残るペンを使っていないか確認してください。
  • 非整数倍率で表示していないか確認してください。
  • 拡大や変形の途中で補間が入っていないか確認してください。
  • バケツ塗りの境界検出やArea Scalingが塗り漏れ・はみ出しを生んでいないか

通常ブラシで描くと、1クリックが1マスに固定されず、線の端に半端な色が入ります。
その状態を拡大すると、ドット絵というより「小さい絵を雑に拡大した画像」に見えます。
前のセクションで触れた設定を崩さず、1pxの硬いブラシで置くことが前提です。
変形を使う場面でも、CLIP STUDIO PAINTでは補間方法を「ハードな輪郭」に寄せておかないと、せっかく立てたエッジが鈍ります。
整数倍で見ているのに線が眠く見えるなら、描画そのものより途中の補間を疑ったほうが近道です。

塗り漏れやはみ出しも、ぼやけの一部として見えることがあります。
バケツで塗ったのに輪郭の内側に白い隙間が残る、逆に外へ1pxだけ染みる、といった症状です。
これは塗りつぶし側のArea Scalingや境界検出が、ドット絵の厳密な境界と噛み合っていないときに起きます。
AAや拡張を切って境界を厳密に拾うだけで収まるケースは多く、細い形では選択範囲で囲ってから流し込んだほうが速い場面もあります。
線画の内側だけを塗り直したいときは、CLIP STUDIO PAINTの「透明ピクセルをロック」も相性がいいです。
既存の面にしか触れなくなるので、ぼやけた輪郭の外へ色が増殖しません。

[!WARNING]

ぼやけが線の問題なのか、表示の問題なのか判断がつかないときは、まず原寸のPNGを保存してから整数倍で拡大し、ピクセルが均一なブロックとして並ぶか確認してください。均一でなければ、描画設定や変形時の補間で中間色が入っている可能性があります。

pixel perfect不在時の手動クリーンアップ術

線のガタつきは、描き慣れていないから起こるというより、Aseprite系で見慣れたpixel perfectの自動補正がCLIP STUDIO PAINTでは前面に出ていないことが大きいです。
斜線を引いたときに重複ドットを自動で間引く補助が弱いため、輪郭はどうしても手で整える工程が残ります。
ここを面倒と見るか、形を選別する時間と見るかで仕上がりが変わります。

手動で整えるときは、長い線を一気に滑らかにしようとしないことです。
横線と縦線は短い直線の組み合わせで作り、斜線は階段の長さを揃えます。
途中で1pxだけ飛び出したドット、角に詰まった余計な1px、平行に走るはずの線幅が一瞬だけ太る箇所を優先して削ると、見た目が落ち着きます。
描き足して直すより、不要な1pxノイズを外すほうが効果が大きい場面は多いです。

角の処理も差が出ます。
たとえば袖口や靴先のような小さな角では、丸めたいのか尖らせたいのかを先に決めないと、1pxの迷いがそのままガタつきになります。
丸めるなら段差のリズムをそろえ、尖らせるなら先端に向かって情報を減らします。
どちらでもない中途半端な角がもっとも荒れて見えます。
私は輪郭の違和感を感じたとき、まず角を見ます。
面の中央よりも、端の1pxのほうが印象を支配するからです。

CLIP STUDIO PAINTを使ってこの手修正を進めるなら、ラフ線をそのまま清書にせず、クリーンアップ用の時間を別に取る前提でいたほうが噛み合います。
変形時に「ハードな輪郭」でエッジを保つことはできますが、pixel perfectのように描いている最中の重複ドットまで自動で整理してくれるわけではありません。
だからこそ、仕上げでは100%で形を読み、拡大でノイズを消し、また100%へ戻す往復が効きます。
ドット絵の線は、一本の線として引くというより、不要なドットを取り除いて線に見える状態へ寄せていく感覚に近いです。

書き出しと拡大表示:ドットを崩さず保存する方法

PNG/GIF/JPGの選び分け

ドット絵の保存形式は、制作そのものと同じくらい見た目を左右します。
静止画の基本はPNGです。
可逆圧縮なので、保存を繰り返しても輪郭に余計なにじみが乗らず、透過もそのまま持てます。
アイコン、立ち絵、タイル、UIパーツのように、1pxの境界が見た目を支える絵ではPNGが軸になります。

GIFは用途がはっきりしている形式です。
色数は最大256色までに収まる前提なので、静止画の保存先としてはPNGより制約が強い一方、簡易アニメや軽量なループ表現ではまだ選ぶ意味があります。
歩行モーションや点滅のような短いアニメを見せたいときは扱いやすく、読み込み先を選びにくいのも利点です。
ただし、色数の上限に近い絵をそのまま流すと、不要な中間色やディザリングが増えて帯域を食います。
ドット絵でアニメGIFを作るときは、元の配色を整理したうえで書き出したほうが、見た目もデータ量も落ち着きます。

JPGはドット絵には向きません。
不可逆圧縮なので、輪郭のきわに圧縮ノイズが入り、黒い線のまわりににじんだ色が出やすくなります。
写真やグラデーション主体の絵では成立しても、ドット絵では1pxの意味が崩れます。
原寸では平気に見えても、拡大すると角が濁って見えるので、保存先として選ぶ理由はほぼありません。

私自身、SNSに載せる前の静止画はPNGで残す前提にしています。
たとえば32x32の絵を4倍の128x128PNGで出しておき、投稿前にテスト用の非公開投稿でにじみ方を見ます。
制作データ側が整っていても、投稿先の再圧縮で輪郭が鈍ることがあるからです。
このひと手間を入れるだけで、原寸のドットが保たれているのか、投稿後に別物になっているのかを切り分けられます。

整数倍拡大(ニアレスト相当)の基本

ドット絵を拡大するときの原則は、整数倍で、補間なし(ニアレストネイバー相当)です。
2倍、4倍、8倍のように拡大すれば、元の1pxがそのまま2×2、4×4、8×8のブロックとして並びます。
輪郭は階段状のまま残りますが、それがドット絵の情報です。
ここで通常の補間を入れると、中間色で角がならされて、せっかく整えたエッジが眠くなります。

CLIP STUDIO PAINTでは、変形時の補間方法として「ハードな輪郭」を使うと、アンチエイリアスを抑えた拡大に寄せられます。
ドット絵を大きく見せる場面では、この考え方を基準にすると失敗が減ります。
制作中に原寸のまま保存しておき、見せる用だけを整数倍で拡大する流れも扱いやすいのが利点です。
書き出しや画像サイズ変更の段階では、ツール側の処理で余計な補間が入らないかを意識し、必要なら原寸PNGを基点にして拡大工程を分けたほうが、輪郭を守れます。

非整数倍は避けたいところです。
3.5倍のような半端な倍率では、あるピクセルは3マスぶん、別のピクセルは4マスぶんに広がる形になり、ブロックの大きさがそろいません。
線の太さが場所ごとに揺れて見え、意図していないギザつきが出ます。
SNSのサムネイル用でも壁紙用でも、先に最終サイズを決めるより、元絵を何倍で見せるかを決めるほうが筋が通ります。

[!NOTE]

ドット絵の拡大で迷ったら、先に「原寸を残す」「見せる用は2x・4x・8xで作る」の2段階に分けると整理できます。元データと表示用データを分けるだけで、途中のぼやけを追跡しやすくなります。

用途別チェック

壁紙にする場合は、表示解像度に対して元絵をどう整数倍で置くかが先に決まります。
たとえば小さな横長キャンバスを作って背景として使うなら、画面いっぱいに無理に引き伸ばすより、整数倍で拡大したうえで余白や繰り返し配置を考えたほうがドットが崩れません。
CLIP STUDIO TIPSでもピクセルアート壁紙の例として320x180pxのような小さな基準サイズが扱われていますが、こうした比率は整数倍で展開しやすく、レイアウトも組みやすいのが利点です。

SNS投稿では、画像そのものより投稿先の自動再圧縮が曲者になります。
タイムライン上ではきれいに見えても、サムネイルや一覧表示で別の縮小処理が入り、輪郭だけにじむことがあります。
そこで効くのが、原寸の確認とテスト投稿の切り分けです。
32x32を4倍の128x128PNGで出しておき、投稿後の表示でドットが均一なブロックに見えるかを見れば、制作工程の問題なのか、投稿先の圧縮なのかが読み取れます。
SNS向けは「大きく出せば安心」ではなく、整数倍で作った画像が相手先でどう扱われるかまで含めて仕上がりです。

ゲーム素材では、保存形式だけでなく、取り込んだ先のスケーリング設定まで揃っていないと意味がありません。
UnityやGodotのようなゲームエンジンでは、テクスチャの拡大方法がポイント系か、なめらかに補間する設定かで見え方が変わります。
素材をPNGで正しく保存していても、エンジン側が線形補間のままだと、表示時点でぼやけます。
スプライト、UI、タイルセットのどれでも、拡大方法がニアレストネイバー相当、またはポイント指定になっていることが前提です。

アニメGIFを書き出す場面では、色数256色上限を意識して、元から色を整理したほうがまとまります。
短いループなら便利でも、陰影の途中色や自動ディザリングを増やすと、ドット絵らしい面の切れ味が鈍ります。
動かすコマ数より、1コマごとの配色を締めたほうが見栄えは安定します。
静止画はPNG、軽いアニメはGIF、そしてJPGは避ける。
この線引きができていると、完成データをどこへ持っていっても崩れにくくなります。

どんな人にCLIP STUDIO PAINTが向くか

普段からCLIP STUDIO PAINTで描いている人にとって、ドット絵は新しい制作文化というより、既存の道具箱を少し組み替えて始める作業に近いです。
線画、配色、レイヤー整理の考え方をそのまま持ち込めるので、学び直しより転用の比率が高い。
まずはCLIP STUDIO PAINTで小さなサイズを仕上げ、必要が出たら専用ツールへ広げる流れが、いちばん無駄がありません。

私自身も、最初からAseprite系に寄せるより、CLIP STUDIO PAINTで32x32を作って、次に64x64までまとめる手順をよく取ります。
その段階ではキャラの見え方、色の整理、静止画としての完成度を詰めるほうが先だからです。
そこからアニメの量産や大量スプライトの管理が必要になった時点で、専用ツールを足すと役割分担がきれいに決まります。
ツール選びは優劣ではなく、どこで速度差が出るかを見ると判断しやすくなります。

シェア

森川 レイ

デジタルアート系メディアでツールレビューを5年以上執筆。ドット絵制作ツールからゲームエンジンまで、クリエイター向けツールの実用的なワークフロー提案を専門とする。