【ドット絵の基礎・作り方】初心者向けに描き方を解説！

2016年4月10日2022年5月30日

悩む人

ドット絵を作りたい。
描き方とおすすめのソフトを教えて！

案内人

この記事ではこんな疑問や悩みを解決します！お任せください

この記事ではドット絵の描き方を解説していきます。

ジョン齊藤

イラスト経験ゼロの僕が、1からドット絵を作ります！

ドット絵作成に使うソフト	高機能ドット絵エディタ「EDGE」
書くもの	ペンギン

それでは、早速見ていきましょう。

photo by Adrian Scottow

ドット絵とは

ドット絵 (Pixel Art) とはデジタル上で画像を表現する方法です。昔の限られたコンピューター処理で映像をレンダリングするための技術として使われだしました。

1980年代のファミコン、PCゲームによく使われてる懐かしい感じもする技法です。

といってもスマートフォンのストアからドット絵を使ったゲームを探してみると、根強いファンが居るようでまだまだ現役で使われているようです。そして筆者自身もドット絵のゲームが好きだから試しに作ってみたいというのがあります。

今回ご紹介する記事を書きながらドット絵を自作して、ゲームエンジンUnityに組み込んでゲームの中で使っていきたいと思います。

1pixel (ドット) 単位で描かれる

pixel (ピクセル) はデジタルでグラフィックを表現するための最小の単位です。画素とも呼ばれています。

小さな点の集まりで画像が表現されていて、点を拡大すると四角形の集まりになっている事がわかります。この1つの点が1ドットです。

ドット・ピクセル・画素数の違い】

これらの表現は似ているようで多少意味が違います。比較してみましょう。

「ドット」小さな点の事
「ピクセル」　小さな点の事 (色を含める)
「画素数」ピクセルの総数 (英:pixel = 日:画素)

ドット絵に使用するソフト・高機能ドット絵エディタ「EDGE」

筆者は画像編集する時はGIMPというソフトウェアを使用しています。
GIMPでもドット絵を描けないこともないですが、なんとなくドット絵作成に特化したソフトがいいと思ったので探してみました。
このソフトウェアを利用する時に迷ってしまうのがソフトウェア選びですよね。こういったソフトウェアはいくつか種類があると思うのでまずはどんなソフトウェアを求めているのか大まかに決めておくとすんなり自身に合ったソフトが選べるはずです。

今回のソフト選びのために決めたポイント

フリーソフトであること
日本語のソフト
出来るだけ高機能

「EDGE」というソフトに決めました！高機能ドット絵エディタです。「EDGE」にはもう一つ種類があり「EDGE」があります。これはおそらくバージョンの違いではなく無料 (EDGE) か有料 (EDGE2) かという違いみたいです。ちなみに「EDGE2」には体験版があります。

早速ダウンロード

EDGE – TAKABO SOFT

「EDGE」操作方法

zipファイルを解凍し実行ファイルを起動するとこのような画面になります。

ドット絵といってもやはり多機能というだけあって設定項目が多いので設定をみていきましょう。

「拡大」
「ウィンドウのスクロール」
「自由曲線の描画」
「直線の描画」
「四角形の描画」
「四角形の描画 (中塗りつぶし)」
「円形」
「円形 (中塗りつぶし)」
「ベジェ曲線」
「ぼかす」
「文字列の描画」
「スプレー」
「同色範囲の塗りつぶし」
「矩形領域の選択」
「円形領域の選択」
「自由選択」
「直線に囲まれた領域の選択」
「同色範囲の選択」
「色の選択」

ショートカットキー

「Ctrl」＋Z … 戻る

「ドット絵」ペンギンを作る

イラスト全般素人ですがとりあえずドット絵というものを描きたいと思います。ドット絵のテクニックのようなものは描きながらその都度身に着けていくというスタイルにします。

基礎的ポイント

描き方は2通りある

大きくわけて2通りあるみたいです。最初に線画を描き後で別レイヤーに色付けするという方法と最初に描く物のシルエット一色で中塗りしてから後で細かな色分けをしていくという方法。

とりあえず今回は下書きとして線画を描いてから後で色を加えていくという方法でいってみようと思います。

1pixelでも印象はガラリと変わる

ドット絵はたった一つの小さい点で絵全体の構成を左右してしまいます。ピクセルを置く位置、そして色のバランスです。

▼ドット絵で線の角度を変えるにはこのような描き方をします。
線を描く時のポイントは規則正しくドットを打つという事です。

ペンタブを使い手書きで書いた線
「1ドット」ずつ並べる
「2ドット」ずつ並べる
「3ドット」ずつ並べる
「4ドット」ずつ並べる

アンチエイリアス

ドット絵は少ない画素数で表現するのでたった一つのドット配置をずらしたりなくしたりするだけでガラッと印象が変わるのです。色の配色は結構重要なポイントです。

ドット絵を描いていきます

それではペンギンのドット絵を描いていきます。コツとしてはレイヤーを分けながら描いてしあげていくという事です。

ドット絵でなくてもイラストにも言える事だとは思いますが、まずは大まかな全体像をの下絵をドットで描いて、次のレイヤーではもう少し細かくかいてどんどん細分化していき形を作ります。

キャラだったら後々動作するという事を想定しながら描くと良いかもしれません。今回の下絵が鳥っぽいのは最初鳥にするつもりが初心者には難しそうだったので鳥からペンギンに変更したという経緯からです。(笑)

一応本物のペンギンの写真を見て参考にしてみました。レイヤをいくつも重ねて修正していきだいたいの形の完成です。

レイヤを分けて修正していきたい時はコピーしたいレイヤの絵をコピーして新しいレイヤーに貼り付ければOKです。レイヤーを管理するためのダイアログはメニューから「表示」→「レイヤ管理ウィンドウ」で起動します。

「影」・「アンチエイリアス」の付け方

だいたいの色付けが出来たのでさらに表現の幅を広げるために影やアンチエイリアスをつけたいと思います。アンチエイリアスとは色の境界線を滑らかにしてドットのカクカク感を減らして表現を増やすという目的の技法です。
影を付けるといってもあまりよくわからないので「右上から太陽が当たっている」というイメージで作りっていきます。

アンチエイリアスというのは・・