「ドット絵を描いてみたいけど、何から始めればいいかわからない」
そんな方におすすめなのが、スマホでドット絵が描けるアプリ「Dottie」です。
この記事では、Dottieの基本的な使い方から、簡単なキャラクターの描き方までを解説します。
Dottieとは
Dottieは、スマホで本格的なドット絵（ピクセルアート）が描けるアプリです。
特徴
| 機能 | 説明 |
|---|---|
| シンプルなUI | 直感的に操作できる |
| レイヤー機能 | パーツごとに分けて描ける |
| アニメーション | 動くドット絵も作れる |
| 豊富なツール | ペン、塗りつぶし、図形など |
| PNG出力 | 高解像度で書き出し可能 |
ダウンロード
画面の見方
メイン画面
┌─────────────────────────────────┐
│ ← 戻る Dottie 💾 📤 │ ← ヘッダー
├─────────────────────────────────┤
│ │
│ │
│ キャンバス │ ← 描画エリア
│ (グリッド表示) │
│ │
│ │
├─────────────────────────────────┤
│ 🖊️ 🧹 🪣 ⬜ ⭕ 📏 │ ← ツールバー
├─────────────────────────────────┤
│ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ │ ← カラーパレット
└─────────────────────────────────┘
主なツール
| アイコン | ツール | 用途 |
|---|---|---|
| 🖊️ | ペン | 1ピクセルずつ描く |
| 🧹 | 消しゴム | ピクセルを消す |
| 🪣 | 塗りつぶし | 同じ色の領域を一括で塗る |
| ⬜ | 四角形 | 四角を描く |
| ⭕ | 円 | 円を描く |
| 📏 | 直線 | 直線を描く |
| 🔲 | 選択 | 範囲を選択して移動・コピー |
| 💧 | スポイト | キャンバス上の色を取得 |
基本操作
ピクセルを描く
- ペンツールを選択
- 色をパレットから選ぶ
- キャンバスをタップ
長押しすると連続で描けます。
ズーム・スクロール
| 操作 | 方法 |
|---|---|
| ズームイン | ピンチアウト（2本指で広げる） |
| ズームアウト | ピンチイン（2本指で縮める） |
| スクロール | 2本指でドラッグ |
細かい部分を描くときはズームインしましょう。
色を変える
- パレットの色をタップ → その色に切り替え
- パレットの色を長押し → カラーピッカーで編集
取り消し・やり直し
| 操作 | 方法 |
|---|---|
| 取り消し（Undo） | 画面左下の矢印ボタン |
| やり直し（Redo） | 画面右下の矢印ボタン |
間違えても大丈夫！何度でもやり直せます。
レイヤーを使う
レイヤーは「透明なシート」のようなもの。パーツごとに分けて描くと、後から編集しやすくなります。
レイヤーの使い方
レイヤー構成例（キャラクター）：
レイヤー3：顔（目、口）
レイヤー2：体（服、手足）
レイヤー1：輪郭・ベース
──────────────
背景
レイヤーの操作
| 操作 | 方法 |
|---|---|
| レイヤー追加 | ＋ボタン |
| レイヤー削除 | 長押し → 削除 |
| レイヤー順序変更 | ドラッグ＆ドロップ |
| 表示/非表示 | 👁️アイコンをタップ |
レイヤーを使うメリット
❌ レイヤーなし
- 体を描き直すと顔も消える
- 色の変更が大変
✅ レイヤーあり
- 体だけ描き直せる
- 顔はそのまま
- 色の変更も楽
簡単なキャラクターを描いてみよう
16×16ピクセルでシンプルなキャラクターを描いてみましょう。
Step 1: キャンバスを作成
- 新規作成
- サイズ：16×16を選択
- 背景：透明
Step 2: 輪郭を描く（レイヤー1）
黒色で顔の輪郭を描きます。
□□□□□■■■■■■□□□□□
□□□■■□□□□□□■■□□□
□□■□□□□□□□□□□■□□
□■□□□□□□□□□□□□■□
□■□□□□□□□□□□□□■□
■□□□□□□□□□□□□□□■
■□□□□□□□□□□□□□□■
■□□□□□□□□□□□□□□■
■□□□□□□□□□□□□□□■
■□□□□□□□□□□□□□□■
□■□□□□□□□□□□□□■□
□■□□□□□□□□□□□□■□
□□■□□□□□□□□□□■□□
□□□■■□□□□□□■■□□□
□□□□□■■■■■■□□□□□
□□□□□□□□□□□□□□□□
コツ：まず丸い形を意識して、角を落としていく
Step 3: 顔を塗る（レイヤー1）
肌色で輪郭の内側を塗りつぶします。
- 塗りつぶしツールを選択
- 肌色を選ぶ
- 輪郭の内側をタップ
Step 4: 目を描く（レイヤー2）
新しいレイヤーを追加して、目を描きます。
目の描き方（3×3ピクセル）：
■■■ ← 黒（上まぶた）
■○■ ← 白目＋黒目
□■□ ← ハイライト
コツ：
- 左右対称になるように
- 目の間は2〜3ピクセル空ける
Step 5: 口と頬を描く（レイヤー2）
口：黒で1〜2ピクセル
頬：ピンクで2×1ピクセル
Step 6: 髪を描く（レイヤー3）
新しいレイヤーで髪を描きます。
髪のコツ：
- ベースの色を塗る
- 暗い色で影を入れる
- 明るい色でハイライト
完成！
基本的なキャラクターの完成です。
ドット絵のコツ
1. 小さいサイズから始める
初心者におすすめのサイズ：
- 16×16：アイコン、シンプルなキャラ
- 32×32：やや詳細なキャラ
- 64×64：中〜上級者向け
大きいサイズは難しいので、まずは16×16から。
2. 色数を絞る
❌ 色が多すぎる
→ ごちゃごちゃして見える
✅ 色数を絞る（8〜16色）
→ まとまりのある見た目に
3. アウトライン（輪郭線）の色
❌ 真っ黒の輪郭線
→ 硬い印象
✅ 暗めの茶色や青
→ 柔らかい印象
肌には暗めの茶色、服には暗めの青など、パーツに合わせた輪郭色を使うと◎
4. 光源を意識する
光が左上から来ている場合：
💡
↘
┌──┐
│明│←左上が明るい
│ │
│暗│←右下が暗い
└──┘
ハイライト（明）とシャドウ（暗）で立体感が出ます。
5. 参考にする
好きなゲームのドット絵を観察してみましょう。
- どんな色を使っているか
- アウトラインはあるか
- 影の付け方は
「真似する」ことが上達の近道です。
作品を保存・共有する
PNGで保存
- メニュー → エクスポート
- PNGを選択
- 拡大倍率を選ぶ（1x, 2x, 4x…）
- 保存
倍率について
- 1x：元のサイズ（16×16なら16px）
- 4x：4倍サイズ（16×16なら64px）
- 8x：8倍サイズ（16×16なら128px）
SNSに投稿するなら4x〜8xがおすすめ。
SNSでシェア
- 保存したPNGを選択
- 共有ボタン
- Twitter、Instagram等を選択
ハッシュタグ例
#ドット絵 #pixelart #Dottie #16x16 #ゲーム風
アニメーションを作る
Dottieでは、動くドット絵も作れます。
基本の流れ
- フレーム1を描く
- フレームを複製
- 少しだけ変化をつける
- 繰り返し
- 再生して確認
簡単なアニメ例：まばたき
フレーム1：目を開いている
フレーム2：目を半分閉じる
フレーム3：目を閉じる
フレーム4：目を半分閉じる
フレーム5：目を開いている
5フレームで自然なまばたきができます。
GIFで書き出し
- メニュー → エクスポート
- GIFを選択
- フレームレートを設定
- 保存
よくある質問
Q: グリッドを非表示にしたい
A: 設定 → 表示 → グリッド表示をOFF
Q: 背景色を変えたい
A: レイヤーパネル → 背景レイヤー → 色を選択
Q: 描いた絵が小さすぎる
A: エクスポート時に倍率を上げて保存。または最初から大きめのキャンバスで描く。
Q: 対称に描きたい
A: 設定 → ミラーモード → ON で左右対称に描けます。
まとめ
Dottieでドット絵を始めるポイント：
| ステップ | 内容 |
|---|---|
| 1 | 16×16の小さいキャンバスから |
| 2 | レイヤーを使ってパーツ分け |
| 3 | 色数は少なめ（8〜16色） |
| 4 | 輪郭→塗り→影の順で描く |
| 5 | 好きな作品を参考にする |
ドット絵は、制限があるからこそ奥が深いアート。
少ないピクセルでいかに表現するか、それがドット絵の面白さです。
ぜひDottieで、あなただけのドット絵を描いてみてください！
質問やフィードバックは、アプリ内の「お問い合わせ」からお気軽にどうぞ。
