描く・学ぶをひとつに。ドット絵エディタ＆134レッスン「PixelHub」をApp Storeでリリースしました

ドット絵を描くための道具と、上達するための道筋を、ひとつのアプリにまとめたい。その考えから開発した 「PixelHub - ドット絵エディタと学習講座」 を、App Storeで公開しました。

▶ App Storeで見る（2,000円・買い切り）　｜　製品ページ：PixelHub

📌 PixelHubの3行まとめ
① レイヤー、最大32色のパレット、選択ツール、アニメーションに対応した本格ドット絵エディタ
② 基礎からアイソメトリック、アニメーションまで進む11コース・134レッスンと、合計402問の実技
③ スプライトシートとタイミングJSONの書き出しまで、制作・学習・ゲーム利用を完全オフラインで完結

背景：描く機能と、学ぶ機能が離れている

ドット絵の制作環境には高機能なエディタがあり、学習情報も動画や記事として数多く公開されています。ただ、解説を読んだあとに別のアプリを開き、設定やキャンバスを作り直して練習し、完成した絵を見てもらうためにまた別の場所へ移る——という分断が起こりがちです。

反対に、初心者向けの学習アプリは手順を追いやすい一方で、自由制作に移った瞬間に機能が足りなくなることがあります。「学習用のおまけ」ではなく、学び終えたあとも毎日の制作に使える道具が必要でした。

PixelHubでは、レッスンで理解する → 実技で手を動かす → フィードバックで直す → 自由制作へ持ち帰るという流れを、ひとつのエディタの中で回せるようにしました。学習と制作で操作方法が変わらないため、レッスンで覚えた技術をそのまま自分の作品へ使えます。

学習用のおまけにしない、本格ドット絵エディタ

エディタには、ペン、消しゴム、スポイト、塗りつぶし、直線、矩形、色置き換えを用意しました。ブラシは1〜4ピクセルから選べます。矩形選択、なげなわ、マジックワンド、コピー、カット、ペースト、選択範囲の移動・反転・回転にも対応しています。

レイヤーを使えば、背景、キャラクター、装飾などを分けて編集できます。パレットは最大32色のインデックスカラー方式です。HSVによる色調整に加え、PICO-8やDawnBringerなどのプリセット、GPL形式のパレット読み込み・書き出しにも対応しました。色をパレット側で変更すると作品へ反映されるため、配色を試行錯誤するときも全ピクセルを塗り直す必要がありません。

スマートフォンでは、細かなピクセルを扱いながら画面全体も見渡す必要があります。そこでツールを増やすだけでなく、拡大率、選択状態、レイヤー、パレットの役割が見失われないように画面を構成しました。iPadの横向きでは3カラムのワークスペースを使い、キャンバスと制作情報を同時に確認できます。

フレームアニメーションを、ゲームで使える形まで

PixelHubは静止画だけでなく、フレームアニメーションにも対応しています。フレームの追加、複製、並べ替え、17〜1000msの表示時間、ループ範囲、前後フレームのオニオンスキンを備え、歩行、待機、攻撃といった動きを確認しながら作れます。

完成したアニメーションは、スプライトシートPNGとタイミング情報のJSONとして書き出せます。Unity、Godot、Webで取り込む際のヒントも同時に出力します。単に「動いて見える」だけで終わらせず、自作ゲームへ組み込めるところまでを制作フローに含めました。

当社は、iPhoneだけで映像を配置する「PicoMap」や、音楽データを制作する「MegaTune」など、専門的な制作工程をモバイルへ移すアプリを開発してきました。PixelHubでも、デスクトップ向けツールを小さくするのではなく、タッチ操作で迷いにくい制作単位へ組み直す方針を採っています。

11コース・134レッスンを、順番に進める

学習講座は、1ドットの置き方から始まり、線、形、光と影、質感、キャラクター、背景、アイソメトリック、アニメーションへ進む 11コース・134ユニットで構成しています。

各ユニットは「目標」「やさしい言葉での解説」「3つの具体的なステップ」「完成チェック」という同じ流れです。専門用語は先に意味を説明し、言葉だけを覚えるのではなく、キャンバス上で何が変わるのかを確かめます。

読むだけで終わらないように、各ユニットには3種類、合計402問の実技を用意しました。

• 修復：崩れた作例を直し、どこが問題なのかを見つける
• 仕上げ：CC0ライセンスの作例を完成させ、技法を再現する
• 創作：同じスケールと条件で、自分のオリジナルを描く

実技には、使用できるツール、編集回数の目安、段階的なヒントを設定しています。完成例をそのまま写すのではなく、限られた操作の中で「なぜこの1ドットを動かすのか」を考えられるようにするためです。10の章末試験には合計100問の知識問題を収録し、80点を合格ラインとして何度でも挑戦できます。

あいまいな採点ではなく、直す理由を説明する

ドット絵は小さなキャンバスで作るぶん、わずかな色差や1ピクセルの置き方が読みやすさを大きく変えます。しかし「なんとなく見づらい」という感想だけでは、次にどこを直せばよいか分かりません。

PixelHubの実技フィードバックは、使用色数、パレットの分離、コントラスト、視認性、ディザリング、ジャギー、バンディング、孤立ドット、パースの軸、仕上げの整理などを、ルールに基づいて検査します。AIが作品の好みを評価する仕組みではありません。検出した項目について、何が起きていて、なぜ直すと読みやすくなるのかを言葉で示します。

たとえばアンチエイリアスのレッスンでは、隣り合うドット間の明るさの受け渡しをリアルタイムに可視化します。上級者が感覚的に調整している関係を見える形にして、修正と結果を結び付けます。

8つの統合プロジェクトで、作品として残す

個別の技法を学んでも、それらを1枚の作品へまとめる段階には別の難しさがあります。そこで講座の節目に、アイコン、モンスター、キャラクター、風景、アイソメトリックの小物、ゲーム画面のモックアップ、8フレームのアクション、卒業制作という8つの統合プロジェクトを用意しました。

各プロジェクトには進捗マイルストーンとセルフレビューの観点表があります。何をもって完成とするかを自分で判断し、学んだ技法を組み合わせた作品を手元に残すための構成です。

学習設計では、計算パズル「Arithmetist」などで積み重ねてきた、短い課題、即時の反応、段階的な難易度設計の知見も生かしています。ただしPixelHubでは正解がひとつではありません。採点できる技術的な観点と、作者に委ねる表現上の判断を分けることを重視しました。

完全オフライン、登録不要で長く使える

PixelHubは、エディタ、講座、実技チェックを含むすべての機能がオフラインで動作します。アカウント登録は不要で、作品と学習記録は端末内に保存されます。通信環境や外部サービスの状態に左右されず、移動中でも制作と学習を続けられます。

買い切り2,000円で、追加課金や広告はありません。道具として繰り返し開き、少しずつ作品が増えていく使い方を前提にしています。

製品概要

会社概要

最初の1ドットから、ゲームで動くスプライトまで。PixelHubが、描きたい人の道具と学びの拠点になればうれしく思います。ご意見・ご要望はお問い合わせからお寄せください。

※ 記載の内容・仕様・価格は公開時点のものであり、予告なく変更される場合があります。