輪郭線とジャギーの整え方 — なめらかに見える線の描き方

ドット絵を作っていて「形は合っているのに線がガタガタして見える」と感じたことはありませんか。 斜めの線がギザギザに割れる、輪郭が途中で太くなったり細くなったりする、丸いはずのものが角ばって見える。 これらはまとめてジャギーと呼ばれる現象で、腕の問題ではなく、 正方形の格子の上に斜めの線を置くという作業そのものが持つ性質から生まれます。

そして重要なのは、ジャギーはなくすものではなく、そろえるものだということです。 ドット絵で線がなめらかに見えている作品も、拡大すればすべて階段状になっています。 違いは階段の「刻み方」だけです。 この記事では、なぜギザギザに見えるのかという原理から始めて、段のそろえ方、崩れの直し方、 角度と曲線ごとの段の組み方、輪郭線を入れるかどうかの判断、輪郭色の決め方、 そして画像変換で出た輪郭を手作業で整える具体的な手順までを順にまとめます。

1. なぜ斜め線はギザギザに見えるのか

ドット絵のキャンバスは、縦横にきっちり並んだ正方形の格子です。 この格子の上で「段差なし」に引ける線は、実は3種類しかありません。 水平線、垂直線、そして正確に45度の斜め線です。 水平・垂直は1列まっすぐ並べるだけ、45度は1マスずつ斜めにずらすだけで、どこにも不規則な段差が生まれません。

ところが、それ以外のすべての角度は階段で近似するしかありません。 たとえば水平方向に3進むあいだに縦へ1下がる線（およそ18.4度）を引くなら、 横に3マス並べて1段下がる、という動きを繰り返すことになります。 この「3マスの平らな部分」と「1マスの段差」が交互に現れるのがドット絵の斜め線の正体です。 段差そのものは物理的に避けられません。ここが出発点です。

ジャギーが「目立つ」ときの条件

段差があること自体は問題ではありません。問題になるのは、段差が不規則なときだけです。 人の目は繰り返しのパターンを見つけるのが非常に得意で、 同じ長さの段が等間隔で並んでいれば、それを「一定の傾きを持った1本の線」として読み取ります。 逆に段の長さが2、3、2、5、3……と乱れていると、目はパターンを見つけられず、 長い段のところだけが「出っ張り」として認識されます。この出っ張りがジャギーの正体です。

具体的に問題が起きやすいのは次の3つの状況です。

• 段の長さがそろっていない — 2-2-3-2-4-2 のように長さが混ざると、3や4の箇所だけが目立って線が折れて見えます。
• 1回の段差が2ドット以上ある — 1ドットずつ下がるのではなく、いきなり2ドット飛ぶと、そこが「切れ目」に見えます。段差は原則1ドットずつです。
• 線の太さが揺れている — 同じ1本の線なのに1ドット幅の場所と2ドット幅の場所が混ざると、太い場所が濃く、細い場所が薄く見え、線が途切れたりコブができたように見えます。

言い換えると、なめらかに見せるためにやるべきことは 「段差をなくす」ではなく「段の長さと段差の高さと線の太さ、この3つを一定に保つ」ことです。 これがこの記事全体を通じた基本方針になります。

2. 段をそろえると、目が勝手に直線として補完する

ドット絵がなめらかに見える現象は、視覚の補完に支えられています。 画面上には角ばった正方形しか存在しないのに、規則的に並んだ段を見た脳は、 そこに「本当はまっすぐな線がある」と解釈します。 これは細かい網目のスクリーンで印刷された写真が、離れて見ると連続した階調に見えるのと同じ仕組みです。

段の長さと角度の対応

段の長さを決めることは、そのまま線の角度を決めることです。 水平方向に n ドット進むごとに1ドット下がる線は、角度でいえば arctan(1/n) になります。 よく使う値を整理すると次のようになります。

表を見ると分かるとおり、単純な繰り返しで作れる角度は意外と少なく、45度、33.7度、26.6度、21.8度、18.4度、14度あたりに限られます。 ドット絵の作品が独特の「型」を持って見えるのは、実際にはこの数種類の角度だけで構成されているからです。 逆に言えば、描きたい角度に一番近いものをこの表から選んで最後まで貫くのが、線をきれいに見せる最短ルートになります。 元の写真やイラストの角度を1度単位で再現しようとすると、必ず段が不規則になって崩れます。

拡大と縮小、両方で確認する

段のそろい具合は拡大表示でしか判断できませんが、「なめらかに見えるかどうか」は等倍か縮小でしか判断できません。 みんなのデザインスタジオのデザイン編集モードには拡大縮小の機能があるので、 線を引いたら拡大して段の長さを数え、縮小して全体の印象を見るという往復を習慣にしてください。 拡大したまま作業を続けると、1ドットの違いを気にしすぎて全体のバランスを崩しがちです。 目安として、5分に1回は縮小して全体を眺めるくらいの頻度が適切です。

3. よくある3つの崩れ方と直し方

線が汚く見えるとき、原因はほぼ次の3パターンのどれかです。 自分の作品を見ながら、どれに当てはまるかを判定してみてください。

崩れている（2×2の塊）      正しい（角で接する）
■■・・・・                 ■■・・・・
■■・・・・                 ・・■■・・
・・■■・・                 ・・・・■■
・・■■・・                 ・・・・・・

4. 角度と曲線 — 段の組み方の具体パターン

ここでは、45度以外の角度や曲線を実際に打つときの段の組み方を、パターンとして整理します。 覚えてしまえば、迷う時間がかなり減ります。

中間角度は「2種類の長さを規則的に交互」で作る

2-2-2 と 3-3-3 のちょうど中間の角度を出したいとき、 「2.5ドットの段」は存在しないので、2と3を交互に並べます。つまり 3-2-3-2-3-2 です。 重要なのは交互であることを最後まで守ることで、 3-2-3-2-2-3-3-2 のように順番が崩れると、崩れた箇所だけが折れて見えます。

良い例（3-2-3-2）          悪い例（3-2-2-3-3-2）
■■■・・・・・・・         ■■■・・・・・・・
・・・■■・・・・・         ・・・■■・・・・・
・・・・・■■■・・         ・・・・・■■・・・
・・・・・・・・■■         ・・・・・・・■■■

同じ考え方で、より細かい角度も作れます。 2-2-3-2-2-3（3回に1回だけ3を入れる）なら 2-2-2 より少しだけゆるい角度になり、 3-3-2-3-3-2 なら 3-3-3 より少しだけ急な角度になります。 ポイントは周期をそろえることで、「3回に1回」と決めたらその周期を線の最後まで維持します。 周期が一定なら、たとえ長さが混ざっていても目はパターンとして受け取ります。

円と曲線は「8分の1だけ描いて折り返す」

円を描くときに全周を目分量で打つと、ほぼ確実に左右や上下で形が食い違います。 確実な方法は、円の8分の1（45度分）だけを丁寧に描き、残りを鏡像で写すやり方です。 手順は次のとおりです。

1. 中心と半径を決め、キャンバスに縦横のガイド線を引く。デザイン編集モードのガイド線機能を使うと中心がずれません。
2. 真上（12時の位置）から時計回りに45度分だけ打つ。このとき段の長さは、頂点付近で長く（平ら）、45度に近づくほど短く（1ずつ）なるように単調に減らします。たとえば 5-3-2-2-1-1 のように。
3. できた8分の1を、45度の対角線で折り返して4分の1にする。
4. 4分の1を左右に折り返して半円、さらに上下に折り返して全円にする。
5. 最後に、折り返しの継ぎ目（真上・真下・左右の端と、斜め45度の4か所）で段の長さが不自然に倍になっていないかを確認する。倍になっていたら1ドット削ります。

なお、直径が偶数ドットの円と奇数ドットの円では中心の扱いが変わります。 奇数（たとえば直径15ドット）なら中心は1マスに定まりますが、 偶数（たとえば直径16ドット）なら中心は4マスの交点になり、頂点の平らな部分が必ず偶数ドットになります。 小さい円ほど偶数径のほうが左右対称に作りやすいので、 8〜16ドット程度の小さな丸を打つときは偶数を選ぶと安定します。

S字カーブは「変曲点」で段の増減を切り替える

髪の毛や布のなびきのようなS字は、途中で曲がる向きが変わります。 この切り替わる場所を変曲点といい、ここでは段の長さが一番長くなるのが正解です。 つまり 1-1-2-3-4-4-3-2-1-1 のように、中央でいったん平らに近づいてから逆向きに曲がり始めます。 変曲点で段が短いままだと、そこが角になってS字が「く」の字に見えてしまいます。

5. 輪郭線を「入れる」か「入れない」かの判断

ここまでは線をきれいに引く話でしたが、そもそも輪郭線を入れるべきかどうかは、題材によって答えが変わります。 主な方式は3つあります。

6. 輪郭線の色 — 真っ黒より対象色を暗くしたほうが自然な理由

輪郭線を入れると決めたら、次は色です。 初期設定として真っ黒（#000000）を選びたくなりますが、多くの場合これは最善ではありません。 理由は3つあります。

理由1: 黒だけが浮いて、内部の明暗が潰れる

人の目は画面内で一番暗い場所を基準に明暗を読みます。 輪郭に真っ黒を使うと、それが基準になり、内部の影とベース色の差が相対的に小さく感じられます。 結果として、せっかく明度差をつけた立体表現がのっぺり見えてしまいます。 輪郭を「一番暗い色」ではなく「その物体の中で一番暗い色」に留めておくと、 内部の明暗の差がきちんと読み取られます。

理由2: 素材感が消える

肌も金属も布も葉っぱも、すべて同じ真っ黒で囲むと、 それぞれのパーツが「同じ材質のシールを貼り合わせたもの」に見えます。 輪郭色をモチーフごとに変えるだけで、肌はやわらかく、金属は硬く、葉はみずみずしく見えるようになります。 輪郭は形を示すだけでなく、材質を語る要素でもあるのです。

理由3: 現実の影は黒くない

物体の縁が暗く見えるのは、その面が光から背いているからです。 光から背いた面には空や周囲からの反射光が回り込むので、完全な黒にはなりません。 この事実をドット絵に持ち込むと、輪郭色は「暗く、わずかに色味を持ち、少し寒色寄り」になります。

具体的な作り方

実践的な数値としては、次の3つを同時に適用します。

1. 明度をベース色から25〜35%落とす — 影の色（20%落とし）よりさらに1段暗い位置です。落としすぎると黒と変わらなくなるので、40%以上は避けます。
2. 彩度を5〜15%上げる — 明度を落とすだけだと色が灰色に近づくため、彩度を補って色味を残します。
3. 色相を寒色側（青・紫方向）へ10〜20度ずらす — 影に空の光が回り込む効果を再現します。

真っ黒を使ってよい場面

例外もあります。次のような場合は真っ黒が正解になります。

• アイコンやロゴ — 遠くから瞬時に識別できることが最優先の場合。可読性は輪郭のコントラストがそのまま効きます。
• 背景が非常に明るい、または白の場合 — 明度差を最大に取りたいときは黒が最も確実です。
• 色数が極端に少ない場合 — 8色以下では、モチーフごとに輪郭色を用意する余裕がありません。共通の暗色1色で全体を囲むほうが合理的です。ただしその1色も、完全な黒より「非常に暗い紺」や「非常に暗い茶」にすると画面が締まります。

7. 自動変換で出た輪郭を手作業で整える手順

みんなのデザインスタジオで画像をアップロードすると、色番号つきの設計図ドット絵に変換されます。 この段階の輪郭は「元画像の輪郭を格子に落としたもの」なので、 前の章までで説明した崩れ（段のばらつき、太さの揺れ、曲率の乱れ）がそのまま残っています。 そこを手で整えると、同じ元画像から作ったとは思えないほど印象が変わります。手順は次のとおりです。

1. 変換方式を先に見直す — 手作業に入る前に、方式1（標準・知覚色差）／方式2（イラスト・シンプル）／方式3（高コントラスト）を切り替えて比較します。 輪郭をはっきり出したいイラスト系の題材なら方式2や方式3のほうが、変換直後から線が整っていることが多く、手直しの量が減ります。 最初の1分の比較が、あとの30分の手作業を節約します。
2. ノイズ除去で孤立ドットを先に落とす — 輪郭のまわりに1ドットだけぽつんと違う色が残っていると、それが段の判定を狂わせます。 ノイズ除去を「弱」または「中」にかけて、まず孤立ドットを減らします。 ただし「強」にすると細い線や小さな模様まで消えることがあるので、輪郭が主役の絵では弱〜中に留めるのが安全です。
3. 減色して輪郭色を1〜2色に絞る — 変換直後は輪郭付近に中間色が何色も生まれています。 減色の2ステップ（使用数の少ない色の削減／似た色の統合）とカスタム手動減色を使って、 輪郭に使われている色を1〜2色にまとめます。作業しやすい総色数の目安は15〜25色です。 輪郭色が3色以上に散っていると、次の工程で「どれが輪郭か」を判断できません。
4. 色ごとのハイライト表示で輪郭だけを見る — 輪郭色を選んでハイライト表示すると、その色が使われている位置だけが浮き上がります。 この状態で見ると、途切れている場所、余計に太い場所、飛び地になっている場所が一目で分かります。 通常表示では絵の内容に目が引っ張られて気づけない崩れが、ここで見つかります。
5. 拡大してから、長い直線部分の段をそろえる — まずは絵の中で一番長い斜め線から着手します。 段の長さを数え、一番多い長さを基準に決めて、ペンと消しゴムで例外を修正します。 長い線ほどジャギーが目立つので、ここを直すだけで全体の印象が変わります。
6. 2×2の塊（ダブルドット）を消す — 段の変わり目を順に見て、2×2になっている箇所の内側を1ドットずつ消します。 線が細くなる方向に削るのが原則です。
7. 曲線部分の段の増減をなだらかにする — 丸い部分を探し、段の長さが単調に増減しているかを確認します。 行ったり来たりしている箇所を1〜2ドット直すだけで、丸さが戻ります。
8. 輪郭色を最終決定する — 形が整ったら、輪郭色を真っ黒から「ベース色より明度25〜35%暗い色」に置き換えます。 塗りつぶしツールを使うと、同じ色でつながった輪郭をまとめて置き換えられます。
9. 縮小して確認し、必要なら戻る — 拡大表示のまま完成としないでください。 縮小して等倍に近い状態で眺め、まだ折れて見える場所があれば5〜7を繰り返します。

どこまで直すべきか

すべての線を完璧に整えようとすると、キャンバスが大きい作品では終わりません。 優先順位をつけるなら、次の順です。

1. モチーフの外周（シルエット） — 一番遠くからでも見えるので、投資対効果が最も高い場所です。
2. 顔まわりや、絵の主役となるパーツの輪郭 — 見る人の視線が最初に集まります。
3. 長さ8ドット以上の直線・曲線 — 短い線のジャギーはほとんど知覚されません。
4. 内部の細かい模様 — ここは最後で構いません。時間がなければ手を付けなくても、作品の印象はほとんど変わりません。

逆に言えば、長さ5ドット未満の線の段のばらつきは直さなくてよいということです。 短い線は目がパターンを探す前に終わってしまうため、そもそもジャギーとして認識されません。 限られた時間は長い線に使ってください。

8. まとめ

ドット絵の線をきれいに見せるためにやることは、次の5つに集約されます。

1. 段差はなくせない。そろえる。 段の長さ、段差の高さ（原則1ドット）、線の太さ、この3つを一定に保つ。
2. 角度は表から選ぶ。 45度・33.7度・26.6度・21.8度・18.4度・14度を基本とし、中間は2種類の長さを規則的な周期で交互に並べて作る。
3. 曲線は段の長さを単調に増減させる。 同じ長さは最大2回まで。円は8分の1を描いて折り返す。
4. 輪郭は入れるかどうかを題材とサイズで判断する。 小さいほど輪郭が必要。立体感を出したいなら影側だけの選択的アウトライン。
5. 輪郭色は真っ黒を避ける。 ベース色から明度を25〜35%落とし、彩度を5〜15%上げ、色相を寒色側に10〜20度ずらす。

この5つを頭に入れたうえで、手持ちの作品を1つ開き、拡大して一番長い斜め線の段を数えてみてください。 長さがバラバラなら、そこがその作品で最も改善効果の大きい場所です。 数ドットの修正で線の見え方が変わることを一度体験すると、 以降は変換した直後の設計図を見ただけで「どこを直せばいいか」が分かるようになります。