イラレでドット絵を描くなら、先に「マス単位」を決める。Webに載せてもぼやけない手順

---

「Illustratorでドット絵って、そもそも作れるの？」

最初にその疑問を持つのは、ごく自然なことです。ドット絵といえば専用ツールを使うものというイメージが根強く、Illustratorは「スムーズな曲線を描くベクターツール」という印象が先行する。だから、ゲームUIやレトロ風のSNS素材を作りたいとき、あるいはLPのアクセントにドット絵のアイコンを置きたいと思ったとき、「自分の知っているツールでは無理かもしれない」と手が止まる。

ただ、実際にはIllustratorで作れます。問題は機能の有無ではなく、最初に「マス単位」を決めているかどうか、ただその一点です。

これを決めておかないと、どんなに丁寧に描いてもWebに書き出した瞬間にマスの境目がぼやける。逆に、最初の30秒でマス単位を決めておくだけで、あとの工程はずっと安定します。

---

イラレでドット絵を描くときは、マス単位を先に決める理由

ベクターとピクセルの違いが、ぼやけの原因になる

Illustratorが扱う図形は、ベクター形式です。ベクターとは、点と点の座標、そしてその間を結ぶ数式で形を表現する仕組みのこと。拡大しても縮小しても輪郭が崩れないのは、この「数式で描かれている」からです。

一方、Webに載せる画像はピクセル形式（ラスター形式）です。こちらは小さな四角いドット（ピクセル）を格子状に並べて色を表現します。

ドット絵制作でぼやけが起きるのは、この二つの形式の対応関係を決めないまま描き始めたときです。

ベクターで描いた正方形をピクセル画像に変換（ラスタライズ）するとき、その正方形の座標がピクセルの格子とぴったり合っていないと、境目のピクセルが複数の色を混ぜたような中途半端な値になります。これが「ぼやけ」の正体です。ドット絵のように意図した境目のシャープさが命の表現では、この問題が仕上がりに直結します。

マス単位を決めることで、ベクターとピクセルの対応が明確になる

マス単位とは、「ドット絵の1マスを、書き出したときに何ピクセル分にするか」を描く前に決めておく取り決めのことです。

たとえば「1マス＝2ピクセル」と決めてから描けば、Illustratorで作る各マスの正方形をすべて同じサイズで揃え、それがピクセルの格子にぴったり乗るように配置できます。書き出したときに「どのピクセルがどのマスに対応するか」が明確になるため、境目がぼやけません。

マス単位は、描き方の問題ではなく設計の問題です。最初に決めておかないと、あとから修正するのは非常に手間がかかります。

---

マス単位はどうやって決めるのか

使う場所の表示サイズから逆算する

マス単位を決めるときの基準は、「どこで使うか」です。

LPのアイコンとして使う場合、そのアイコンが画面上でどのくらいの大きさで表示されるかを先に確認します。SNSの投稿画像として使う場合は、各プラットフォームが推奨する表示サイズが基準になります。バナーなら、そのバナーの仕様サイズが出発点です。

「使う場所の大きさから逆算してドット絵を設計する」——この順番が、仕上がりの安定につながります。多くの場合、先に描き始めてから「思ったより小さく表示された」「大きくしたらぼやけた」という問題が起きる。それはマス単位を後から考えたことが原因です。

デザインを考える前に、まず「どこに・何ピクセルで表示されるか」を確認してください。その数字を持って、グリッドの設計に入る。この手順が、工数を最も短くします。

描きたい絵の細かさに合わせてマス単位を調整する

マス単位が大きいほど、1マスがPixelの上で目立ちます。粗さが強調されるため、ドット絵らしいレトロ感が出やすい。マス単位が小さいほど、細かい描写が可能になりますが、そのぶん塗るマスの数が増え、作業時間も伸びます。

「どのくらいの細かさで描くか」は、使う場所での表示サイズと照らし合わせて決めます。表示サイズが小さければ、細かく描いても潰れてしまうので、マス単位は大きめにとるほうが見栄えがよくなることもあります。

表示サイズと細かさのバランスを確認してから、マス単位を決定してください。

---

イラレでドット絵を描く基本的な手順

正方形を作り、グリッドに分割する

まず、長方形ツールで正方形を作ります。このとき、Shiftキーを押しながらドラッグすると正確な正方形が描けます。

次に、その正方形を選択した状態で「オブジェクト」メニュー → 「パス」 → 「グリッドに分割」を選びます。ダイアログが開くので、行と列の数を指定して「OK」をクリックすると、正方形が格子状に分割されます。

別の方法として、長方形グリッドツールを使う方法もあります。ツールバーから長方形グリッドツールを選んでダブルクリックすると、グリッドのサイズと分割数を指定するダイアログが開きます。直接グリッドを描き出せるため、すでに分割数のイメージが決まっているときはこちらが速いです。

どちらの方法でも、できあがるのは格子状に並んだ正方形の集まりです。

格子のマスに色を塗る

グリッドができたら、各マスを選択して色を塗っていきます。

ダイレクト選択ツール（白い矢印）でマスを個別に選択し、スウォッチまたはカラーパネルから塗りの色を指定します。ドット絵は「1マスに1色」が基本なので、グラデーションは使わず単色で塗ります。

描きたい絵をマスに置き換えていくイメージで、1マスずつ色を決めながら進めます。はじめてドット絵を作るなら、りんご、マグカップ、家のようなシンプルで直線の多いモチーフが扱いやすいです。

線を消し、影は色で表す

すべてのマスを塗り終わったら、全体を選択して線（ストローク）を消します。ストロークカラーを「なし」に設定してください。

ドット絵に輪郭線や影を加えたいときは、黒い線ではなく、隣のマスの色を少し暗くすることで表現します。色だけで立体感や輪郭を表現するのが、ドット絵らしい仕上がりのポイントです。

---

描いている途中に確かめるべきこと

ピクセルプレビューで書き出したときの見え方を確かめる

描いている最中は、常にピクセルプレビューを使いながら作業することをおすすめします。

ピクセルプレビューは、「表示」メニュー → 「ピクセルプレビュー」で切り替えられます。これをオンにすると、アートワークがラスタライズ（ピクセルに変換）されたときにどう表示されるかをリアルタイムで確認できます。

画面を大きく拡大すると、ピクセルグリッドが表示され、マスの境目がどのように見えるかが分かります。マスの境目がにじんでいたり、隣のマスに色がはみ出しているように見えるときは、図形の座標がピクセルグリッドからずれているサインです。

ピクセルプレビューをオフにした状態でいくら丁寧に描いても、書き出したときに初めて問題に気づくことになります。描きながら確かめる習慣をつけると、書き出し後の修正がほぼなくなります。

ピクセルグリッドに揃える設定を使う

Illustratorには、パスやシェイプの辺をピクセルグリッドに揃える設定があります。「環境設定」または変形パネルから設定できます。

この設定をオンにすると、図形を動かしたり作成したりしたときに、直線の辺が自動的にピクセルグリッドにスナップします。マスを1個ずつ座標を調整する手間が省けるため、作業がスムーズになります。

ただし注意点があります。曲線と斜めの線は、この設定をオンにしてもシャープになりません。 ピクセルグリッドに揃えるのは直線の辺だけです。曲線・斜め線の扱いについては次のセクションで説明します。

---

直線と曲線・斜めの線で見え方が変わる

直線の辺はシャープに見える

ドット絵の大部分は正方形のマスで構成されているため、ほとんどの輪郭は直線です。直線の辺はピクセルグリッドに揃えやすく、書き出したときもシャープに見えます。

「家」や「マグカップの胴体部分」のような、水平・垂直の線で構成されるシンプルなモチーフが、はじめてドット絵を作るときに扱いやすい理由はここにあります。

曲線と斜めの線は階段状に見える

曲線や斜めの線を表現するとき、ドット絵では「マスを階段状に塗って表す」方法を使います。滑らかな曲線は存在せず、段差の連なりで曲がっているように見せるのがドット絵の表現です。

ピクセルグリッドに揃える設定をオンにしても、曲線と斜めの線は完全にシャープにはなりません。これはベクターの曲線をピクセルに変換する構造上の特性です。

曲線・斜めの線を描きたいときは、マス単位の大きさを調整しながら「どのくらいの段差なら自然に見えるか」を確かめることが大切です。ピクセルプレビューで拡大して確認しながら、階段の形を整えてください。

---

大きく使いたいときの注意点

マス単位の整数倍で拡大する

作ったドット絵を大きく使いたいときは、マス単位の整数倍で拡大します。

マス単位が「1マス＝2ピクセル」なら、2倍・4倍・6倍というように、整数倍で拡大します。このように拡大すると、すべてのマスの大きさが揃ったまま、ドット絵のシャープさを保てます。

中途半端な倍率で拡大するとマスがそろわなくなる

マス単位の整数倍ではない倍率——たとえば1.5倍や2.3倍——で拡大すると、各マスの大きさが揃わなくなります。あるマスは3ピクセル、隣のマスは4ピクセルというように不均一になり、ドット絵がにじんだように見えます。

拡大するときは必ず整数倍を使う、これを習慣にしてください。

---

ドット絵制作でつまずく場面と確かめ方

つまずく場面	起きること	確かめ方・対策
描く前の準備	マス単位を決めずに描き始める	使う場所の表示サイズから逆算して、マス単位を決める
描いている途中	書き出したときの見え方が分からない	ピクセルプレビューで見て、ピクセルグリッドが表示される大きさまで拡大して確かめる
直線と曲線の表現	曲線や斜めの線がギザギザに見える	マスを階段状に塗って曲線を表す。ピクセルグリッドに揃える設定は直線の辺だけをシャープにする
拡大して使う	マスの大きさがそろわない	マス単位の整数倍で拡大する。中途半端な倍率は避ける
グリッドを作る	分割の方法が分からない	「グリッドに分割」メニューを使うか、長方形グリッドツールでグリッドを作成する

---

既存のキャラクターやロゴを描くときの考え方

オリジナルのモチーフで作る

ドット絵を作るとき、既存のキャラクターやロゴは参照・模写せず、オリジナルのモチーフで制作することをおすすめします。

理由は著作権と商標権への配慮です。既存の著作物をドット絵にして使用することは、権利者の許諾がない場合、著作権侵害となる可能性があります。商標登録されたロゴを模したものも、同様のリスクがあります。

りんご、マグカップ、家、星、矢印——シンプルなモチーフほど、ドット絵として描きやすく、汎用性も高いです。オリジナルモチーフで作ることで、作った素材を安心して制作物に使えます。

なお、著作権・商標権の可否判断は法的判断を含みます。最終的な判断は、担当の法務部門または専門家にご確認ください。

---

イラレでドット絵、始める前に気になること——よくある質問

イラレとPhotoshopのどちらでドット絵を作るべき？

Illustratorを使い慣れている方は、Illustratorでドット絵を作ることができます。この記事で紹介している方法は、Illustratorのグリッド分割・ピクセルプレビュー・ピクセルグリッドスナップを組み合わせたものです。どちらのツールを選ぶかは、普段の制作環境と用途に合わせて判断してください。

---

書き出した画像がぼやけるのはなぜ？

マス単位を決めずに描いたり、マス単位の整数倍ではない倍率で拡大したりすると、書き出した画像がぼやけることがあります。マス単位を明確に決め、ピクセルプレビューで確かめながら作業することで、ぼやけを防ぐことができます。

---

細かいドット絵にしたいときはどうする？

マス単位を小さくすることで、細かいドット絵を作ることができます。ただし、マス単位が小さいほど塗るマスの数が増え、作業の手間も増えます。描きたい絵の細かさと、作業の手間のバランスを考えて、マス単位を決めてください。

---

作ったドット絵を大きくして使えるか？

マス単位の整数倍で拡大すれば、ドット絵を大きくして使うことができます。中途半端な倍率で拡大するとマスの大きさがそろわなくなるため、必ず整数倍で拡大してください。

---

好きなキャラクターをドット絵にしてもいい？

既存のキャラクターをドット絵にすることは、著作権の問題になる可能性があります。オリジナルのモチーフでドット絵を作ることをおすすめします。なお、これは法的助言ではありません。最終的な表現の可否は、担当の法務部門または専門家にご判断ください。

---

---

ドット絵制作で迷ったときは

LPやバナーの制作なら、制作会社に相談する

ドット絵を単体のイラストとして作るのと、LPやバナーの一部として機能させるのとでは、考えることが変わります。

LPに組み込むとき必要なのは、ドット絵そのものだけではありません。「何ピクセルで表示されるか」「周囲のビジュアルとトーンが揃っているか」「モバイルとPCで見え方が変わらないか」——こうした問いに答えながら、ドット絵を全体のデザインに落とし込む必要があります。

描き方の手順を把握しても、「このドット絵、LPで使っていい絵になっているか」という判断は別の問いです。SNSで目を引くレトロなビジュアルも、LPの文脈で浮いていれば離脱の原因になります。ブランドイメージを統一するためには、パーツを作る技術と、それを全体に組み込む設計の両方が揃っている必要があります。

ドット絵を含めたビジュアル全体の設計について、「そもそも方向性が合っているか確かめたい」という段階から相談できる制作会社を探しているなら、次の問いを自分に投げかけてみてください。

今夜、資料を閉じる前に——「このドット絵、明日のMTGで自信を持って見せられるか」。答えが少し揺らぐなら、それが相談するタイミングです。

今のLPが「どこで・なぜ」成果を落としているのか。その一点を一緒に見るところから始めます。