お断り

以下の記事で紹介するMonaca Educationの機能「ドット絵エディター」は、2024年5月時点ではベータ版（試用版）として提供しています。記事公開後、画面、機能や操作性が変更される場合があります。

ドット絵エディター（Monaca Education）

ドット絵エディターは、Webブラウザ上で動作するツールです。キャンバスのサイズを指定して、ドット絵を描くことができます。Monaca Educationに組み込まれた機能であり、単体では利用できません。利用するためには、まず、Monaca Educationにログインする必要があります。

Monaca Educationへのログインには、アカウントが必要です。Monaca Educatinのアカウントを持っていない方は、こちらをご覧ください。

はじめてのMonaca Education（一般向け）

https://edu.monaca.io/start

起動

Monaca Educatinにログインし、ダッシュボード画面でプロジェクトを作成するか、既存のプロジェクトを選択して、Monaca Education IDEを開きます。

画面上の「ツール」メニューから、「ドット絵エディター」をクリックして、起動します。

ドット絵エディタによる作画

サイズの選択

最初に、縦・横にいくつドット（正方形のマス）を並べるか、指定します。これは途中で変更できません。よく考えて決めてください。別のサイズの画像を作りたい場合は、新しい画像を作り直します。

トランプの柄のような抽象的な図形や、ゲームの小さなキャラクターであれば、16✖️16で描けます。

ロゴマークなど、もう少し複雑な意匠を作りたい場合は、32✖️32程度の大きさにすると良いでしょう。

イラスト（ピクセルアート）を描く場合は、もっと大きなサイズを指定します。最大で、128✖️512のサイズまで指定できます。

ドット絵エディターの画面構成

ドット絵エディターの画面の部品を説明します。

カラーパレット

画面の右側には、色を指定するためのカラーパレットが表示されています。

カラーパレットには、デフォルトで20色表示されています。

カラーパレットで色を選択した上で、ブラシや塗りつぶし、直線ツール（※下で紹介します）を使い、絵を描きます。

なお、カラーパレットの一番下のスライダーを使うと、それぞれの色味を暗くすることができます。

描画ツール

カラーパレットの反対側、画面の左側には、絵を描くためのツールが並んでいます。

以下では、ツールそれぞれの機能を簡単に紹介します。

ブラシ

「ブラシ」は、絵筆のツールです。ブラシをクリックして選び、カラーパレットで色を指定したあと、キャンバスをクリックすると、そのクリックしたドットに色が付きます。

ドラッグすると、ドラッグした軌跡にあたるドットに、選択した色が付きます。

塗りつぶし

「塗りつぶし」は、文字通り、指定した色でキャンバスの領域を塗りつぶします。画像を作成した最初に、キャンバス全面を同じ色で塗りつぶすことができます。

また、クリックしたドットと同じ色の範囲を、新たな色で上塗りすることができます。1回の操作である部分の色を塗り替えたい場合に便利です。

グリッド表示

キャンバスを、１つ１つのドットを表す罫線で区切ります。囲碁や将棋の盤のような表示になります。

ドットの数を数えながら、絵を描くときに便利です。

元に戻す

編集した手順を取り消し、１つ前の状態に戻します。

クリア

それまでに編集した全ての内容を取り消し、最初の状態にします。初めからやり直したい場合は、「クリア」を選んでください。

続いて、ツールの右側です。

消しゴム

「消しゴム」をクリックで選んでから、キャンバスのドットをクリックすると、そのドットの色が白に変わります。

直線

「直線」を選んだあと、キャンバスの上で1回クリックし、ドラッグしてから、マウスボタンを離します。ドラッグを始めた点から、ドラッグを終えた点までの範囲のドットに、指定した色が付きます。

ブラシサイズ

1回のクリックで塗りつぶす範囲の大きさを決めます。

ブラシサイズが１なら、１つのドットの色を決めるだけです。

ブラシサイズの値を大きくすると、まとめて一連のドットを同じ色に変更できます。

太い線を引いたり、広い領域を塗ったりする場合に便利です。

やり直し

「元に戻す」の操作で戻した操作を、もう１度やり直します。試行錯誤するときに利用する機能です。

画像の追加

手元のPC（Monaca Educationを動かしているPC）から、ファイルを読み込んで、キャンバスに表示し、編集できるようにします。

作成した画像ファイルの保存・ダウンロード

作成した画像ファイルは、Monaca Educationのプロジェクトの中に保存することができるほか、Monaca Educationを操作しているコンピュータにダウンロードすることができます。

画面左上の、3本の横棒のボタン（※「ハンバーガーメニュー」などと呼ばれることがあります）をクリックして、保存先を選択します。

いったん保存した上で、後でまた編集したい場合は、画像ファイルを手元のコンピュータにダウンロードしてください。その上で、ドット絵エディターの画面で開き直して、「画像の追加」ボタンで貼り付けるようにします。

gifファイルの作成機能

複数の画像を作成し、並べることで、gifアニメーションを作ることもできます。

画面左側の描画ツールの下にある、一群のツールは、gifアニメーションを作るためのツールです。

今回は説明を省略します。

デジタル画像と画素

コンピュータのディスプレイでは、「色（光）を持つ点」をたくさん並べることで、画像を表示しています。この１つ１つの「色（光）を持つ点」を画素（ピクセル）といいます。

ドット絵（ピクセルアート）は、この考え方を使って絵を描いていることになります。

昔のディスプレイは解像度が低く（＝１つの画面の中に並べられるピクセルの数が少ない）、画像を表示するための性能も不足していたため、1枚の画像のためのピクセル数も多くありませんでした。

そのため、モザイク画のような表現にならざるを得なかったのですが、現在ではディスプレイの解像度も、画像表示の性能も上がって、制限はありません。

それでも、ドット絵（ピクセルアート）が、１つのアートのスタイルとして愛されているというのは、とても興味深いですね。

最後に、2点、作例を示しておきます。ちょっとした省略や強調で、思いのほか多様な表現ができ、とても楽しいツールです。