【Illustrator】拡縮に強いドット絵の作り方

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Illustrator（イラストレーター）を使ってドット絵を描く方法をイラレ初心者の方に詳しく解説します。ビットマップ系のグラフィックソフトと違い、ベクター形式のドット絵が作成できるので、拡大・縮小・回転をしても劣化しない汎用性抜群のドット絵が作成可能！

これからIllustratorでドット絵作成を始めたい方にオススメのコンテンツですよ。

この記事の目次

イラレを使ったドット絵の描き方

Illustratorでドット絵を描く方法を詳しく解説します。
ドット絵初心者の方でも作成できますよ。

Illustratorを導入しましょう

当記事の内容を実践するにはIllustratorが必須です。
未導入の方はIllustrator公式サイトからダウンロードしておきましょう。（7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

ドット絵を描く下準備をする

STEP.1

新規ドキュメントを作成

Illustratorを立ち上げて新規ドキュメントを作成。

サンプルは [ Web ] → [ Web(大) ] を選択しました。
1920 x 1080pxのドキュメントです。

単位はピクセル、カラーモードはRGBカラー、初期設定のままです。

STEP.2

グリッドを表示・設定

ドット絵を描く為のガイドとなるグリッドを表示しましょう。

イラレ画面上部の [ 表示 ] → [ グリッドを表示 ] をクリック。
ショートカットは [ Ctrl + ￥ ] (Mac：⌘ + ￥)

[ Ctrl + K ] (Mac：⌘ + K) で環境設定を開きます。
左メニューの [ ガイド・グリッド ] の項目を選択し、グリッドと分割線の設定をしましょう。

例えば1辺が1pxのドット絵にしたい場合は
グリッド：10px　分割線：10
1辺が5pxのドット絵にしたい場合は
グリッド：50px　分割線：10

サンプルは1px平方のドット絵にしたいのでグリッド：10px　分割線：10の設定を適用します。

ついでに単位も変更しておきましょう。
環境設定の左メニュー内にある [ 単位 ] をクリックし、一般の単位を [ ピクセル ] にします。

設定後は [ OK ] をクリック。

STEP.3

スマートガイドを有効化

キッチリとグリッド内にドットを描く為に [ 表示 ] → [ スマートガイド ] を有効化します。更に [ グリッドにスナップ ] にチェックを入れておきましょう。

以上でドット絵作画の下準備が整いました。

直接ドット絵を描く

STEP.1

新規ドキュメントを作成

[ 長方形ツール ] をアクティブにします。
※ショートカットは [ M ]

塗り：お好きな色
線：無し

STEP.2

グリッドを表示・設定

長方形ツールでドラッグするとグリッドに合わせて正方形が描けます。
サンプルのグリッドサイズは1x1pxで設定。

[ バウンディングボックス ] が有効化されていると連続でドットを描く際、邪魔になります。
Illustrator画面上部の [ 表示 ] → [ バウンディングボックスを隠す ] をクリックしておくのがオススメです。

※ショートカットは [ Shift + Ctrl + B ] (Mac：Shift + ⌘ + B)

STEP.3

スマートガイドを有効化

例えばハートを描くなら、まず黒色で線画部分のドットを描きます。

次にハートの中身を描いてハイライト部分のドットも追加すれば完成です。

ハートにグレーの部分を追加するとHPが減少している表現も簡単に作れます。

STEP.3

スマートガイドを有効化

剣やポーション、文字のドット絵も作成してみました。ドット絵特有のレトロで温かみのある雰囲気がイラストレーターでも再現可能ですよ。

ドット絵のゲームUI素材

【Illustrator】商用利用可能なドット絵のゲームUI素材20選【ベクターイラスト】

ベクター形式で作られたドット絵のゲームUI素材を厳選しました。全て商用利用可能！レトロゲーム風のグラフィック作成に最適ですよ！

下絵を参考にドット絵を描く

STEP.1

新規ドキュメントを作成

下絵の画像を配置します。サンプルはドラッグ＆ドロップで配置し、[ 埋め込み ] をしています。

下絵の不透明度は少し下げておき、下絵レイヤーはロックしておきましょう。

ドット絵描画用の新規レイヤーを作成し、アクティブにします。

STEP.2

グリッドを表示・設定

[ 長方形ツール ] で線画を作成します。
※長方形ツールのショートカットは [ M ]

線画の色はお好みで設定して下さい。

STEP.3

スマートガイドを有効化

次はベースの塗りを作成しましょう。下絵レイヤーは不要なので非表示にしておきます。
ついでに線画の色も変更しました。

STEP.3

スマートガイドを有効化

最後に既に作成済みのベースの塗りの色を影やハイライトの変更したら完成です。サンプルのドット絵の作成時間は10分程度です。
普通のイラスト作成と違って、ドットを打ち込んでグラフィックを作成するのも楽しいですよ！

なお、作成したドット絵を背景透過のPNG形式やJPEG形式等でサクッと書き出す方法はコチラの記事で詳しく解説しています。

ハイクオリティなドット絵フォント素材

【商用可】高品質なドットフォント素材30選【Illustrator】

ベクター形式で作られたドットフォント素材を厳選しました。全て商用利用可能なAI/EPS形式の素材です。拡縮しても劣化しない便利な素材を活用してみませんか？

キッチリした倍率で拡大・縮小する

イラレで作成したドット絵はベクター形式なので拡大・縮小・回転しても劣化する事がありません。
ベースが1ピクセル平方のドット絵を10ピクセル平方に拡大したい時など、キッチリと倍率を指定して拡大・縮小する方法を解説します。

STEP.1

新規ドキュメントを作成

拡大したいドット絵を [ 選択ツール ] で選択します。
※ショートカットは [ V ]

STEP.2

グリッドを表示・設定

ツールバーの [ 拡大・縮小ツール ] 上をダブルクリックします。
※拡大・縮小ツールのショートカットは [ S ]

拡大・縮小のダイアログ画面が開きます。
[ 縦横比を固定 ] にチェックを入れ、拡縮率を入力しましょう。

例えば1px平方を5px平方に拡大したい時は500%
10px平方を1px平方にしたい時は10%

サンプルは1px平方を10px平方にしたいので1000%を入力しました。
設定後は [ OK ] をクリック。

STEP.3

スマートガイドを有効化

以上で元のドット絵を正確に10倍サイズに拡大できました。ビットマップでドット絵を描くと拡大・縮小を行った際に劣化が起きますが、Illustratorならベクター画像として作成できるので劣化が一切発生しませんよ。

ベクター形式のドット絵素材

商用利用可能で高品質なベクター形式で作られたドット絵素材を厳選しました。
制作時間の短縮とクオリティアップの両方が実現できますよ！

#01 8px food pixel art icons set.

食べ物や調理に関わるアイテムのドット絵アイコンがメインに収録されたベクター素材です。他にも汎用的なアイコンが収録されていますよ。

ダウンロードする

#02 Set of 8-bit pixel graphics icons. Isolated vector illustration.

レトロゲームによく合うアイコンが大量に収録されたベクターイラスト素材です。ライフのハートアイコン、回復薬のボトル、武器、コイン、宝石など、汎用的なUI素材が一式収録されていますよ。

ダウンロードする

#03 RPG風ドット絵　フィールドマップ

ドラクエのフィールドマップを模したドット絵素材です。Illustratorがあれば各パーツを個別編集できるので、アイコンやイラスト素材として活用可能です。

ダウンロードする

#04 Pixel Art Interface

ゼルダの伝説のようなアクションRPGなどに適したドット絵のゲームUI素材です。ゲージのパーツが端と引き伸ばし用のパーツに分かれており、細かい所まで作りこまれています。

ダウンロードする

#05 Pixel space arcade game elements with icons.

レトロなアーケードシューティングゲームを模したドット絵のゲームUI素材セットです。縦シュー、横シュー、どちらのゲーム制作にも活用できます。

ダウンロードする

#06 Pixel vector alphabet design, stylized like in 8-bit games.

ファミコン版のメタルスラッグのような質感のドット絵フォントです。アーケードのアクションゲームなどに最適ですね。メガクラッシュと言えば個人的にやはりグラディウスIIIが思い浮かびます。

ダウンロードする

#07 Pixel vector alphabet design, stylized like in 8-bit games.

ミリタリー系のレトロゲームのタイトル画面で見かけるような配色のドット絵風フォント素材です。しっかりと立体感のあるデザインで作られており、インパクト大ですよ。

ダウンロードする

商用利用可能なドット絵素材

商用利用可能で高品質なベクター形式で作られたドット絵素材を厳選しました。レトロな世界観を作る上で欠かせないドット絵素材を活用されてみませんか？

【商用可】高品質なドットイラスト素材50選【Illustrator】

【商用可＆高品質】ドット絵アニメーション素材50選【Illustrator】

ワンランク上のテンプレート素材

Illustratorのスキルアップをする上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減するだけでなく、スキルアップの教材としても活用できますよ！

AI形式で作られた高品質なフライヤーのテンプレート50選です。画像と文字を差し替えるだけ、超短時間でハイクオリティなフライヤーが作成可能！
様々なフライヤーのテンプレート50選

デザイン制作を学ぶ導入編としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートでレイアウトや余白、文字サイズを簡単に研究可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

ロゴ作成とIllustratorの相性は抜群！
ロゴ制作の効率化だけでなく、アイディアやデータの作り方を学習・研究するための良質な教材だらけですよ。
ハイクオリティなロゴテンプレート50選

単なる白黒のテキストを高品質なロゴのようなグラフィックにできるエフェクトです。
ロゴ・見出しなどキャッチなオリジナルタイトルを一瞬で作成できる優秀な素材ばかり！
商用利用が可能で高品質なテキストエフェクト50選

継ぎ目が無い高品質な背景素材50選です。
全て商用利用OK！作品の密度を一気に高める事ができる汎用性の高い素材ばかりです。
商用利用できる高品質なシームレス背景パターン58選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Illustrator（イラストレーター）を使ってドット絵を作成する方法でした。
ベクター形式のドット絵なので拡大・縮小・回転を行っても劣化しないのが最強に便利です。

もちろん作成したドット絵はIllustratorだけでなく、Photoshopやその他Adobe製品でも簡単に流用する事ができます。イラレなら手軽にドット絵が作れるので興味がある方は是非お試しください。

ではまた！

InDesignは活用されていますか？

Illustratorだけでなく、InDesign（インデザイン）も活用されているでしょうか？
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はAdobe公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート42選はコチラ！

Illustratorの操作方法

イラレ基本操作