ボクセルメーカー (3Dドット絵エディタ)

このツールは、ブラウザだけで本格的な3Dボクセルアート（立体ドット絵）を制作できる無料のオンラインエディタです。インストール不要で、PCから即座に利用できます。

ボクセル (voxel) は "volume + pixel" の造語で、3D空間における立方体の最小単位を指します。マインクラフトやクロッシーロード、3D Dot Game Heroes などのゲームで広く使われており、近年では Roblox のアバター制作や NFT アート（The Sandbox など）でも標準的な表現様式となっています。

3Dビューポートはマウス操作で自由に視点を変えられ、配置/削除/塗替/スポイトの 4 ツールで直感的にボクセルを操作できます。データはすべてブラウザ内で処理され、サーバーへの送信は一切ありません。

ツール	機能	用途
🧱 配置	隣接面にボクセルを置く	基本の立体構築
🧹 削除	クリックしたボクセルを取り除く	形状の修正
🎨 塗替	既存ボクセルの色だけ変える	配色調整
💧 スポイト	クリックしたボクセルの色を取得	色の再利用

クリック前にはホバー中のセルに半透明のゴーストボクセルが表示され、どこに配置/削除されるかを事前に確認できます。立体物は奥行きの誤判定が起きやすいため、ゴースト表示で位置を確かめてからクリックするのが制作のコツです。

プリセット 4 段階に加え、任意サイズ (4〜64) を数値入力で指定できます:

サイズ	最大ボクセル数	おすすめ用途
8×8×8	512	アイコン、小道具、絵文字風キャラ
16×16×16	4,096	人物・乗り物・建物などのキャラクター
32×32×32	32,768	ディテールの細かい人物、メカ、建物
64×64×64	262,144	大規模な情景・ジオラマ作品

初心者には 8×8×8 から始めるのがおすすめです。512 ボクセル以内という制約により、まず全体のシルエットを決める習慣が自然と身につきます。慣れてきたら 16³ → 32³ とサイズを上げて、表情や装飾などのディテールを盛り込んでいきましょう。プリセット以外の値（例: 12, 24 など）も上部の数値入力欄から直接指定できます。

レンダリングは Three.js の InstancedMesh を使い、64³ = 262,144 個のボクセルまで 1 回のドローコールで描画します。グリッドサイズが大きくなるほど GPU 負荷は上がるため、ノートPC環境では 32³ 程度までを目安にすると快適です。

1980 年代のレトロゲーム機を意識した配色を含む 4 種類のプリセットを搭載しています:

• パレットA (16色 汎用カラー): 原色＋中間色をバランスよく配した万能パレット
• パレットB (4階調モノクログリーン): 1989 年頃の携帯型ゲーム機の緑色液晶を意識した 4 階調 (#0f380f, #306230, #8bac0f, #9bbc0f)。モノクロ風の渋い作品に最適
• パレットC (16色 レトロカラー): 1980 年代の家庭用ゲーム機 PPU から代表的な発色を選定。レトロ風キャラクターに
• パレットD (16色 パステル): 柔らかいトーンのパステルカラー。かわいい雰囲気のキャラ作りに

プリセット以外の色もカラーピッカーまたはHEX コード入力で自由に使えます。3D の場合、光の当たり方で同じ色でも明暗差が大きくなるため、隣接する明度の色同士をパレットに用意しておくと立体感が出しやすくなります。

レイヤー編集を有効にすると、指定したY座標の水平面 (1段) にのみボクセルを配置できるようになります。それ以外の層は半透明表示となり、現在編集中の層が明確に区別できます。

このモードは以下のような制作で特に便利です:

• 建築物の階層構造: 1階・2階・屋根を1段ずつ作っていく
• キャラクターのパーツ分け: 足→胴→頭の順に段を切り替えて作る
• 地形・マップ: 平地→丘→山と高さごとに塗り分け
• 隠れた内部の修正: 表面ボクセルに隠れて見えない内側の層を、特定 Y へジャンプしてピンポイントで編集

3D ボクセル制作の最大の難所は「奥のボクセルにアクセスできない」問題ですが、レイヤー編集で目的の Y へ移動すれば直接編集できます。

左右対称モードを有効にすると、X 軸を中心に左右反転したボクセルが自動で配置されます。たとえば左手にボクセルを置くと右手側にも同位置のボクセルが置かれます。

キャラクターや乗り物の多くは左右対称な構造を持つため、片側を作るだけで反対側も完成し、制作時間が体感で約半分になります。具体的にはこのような用途で効果的です:

• 人型キャラクター: 顔・両腕・両脚の正面シルエット
• 動物・モンスター: 翼・耳・牙などの対称パーツ
• 乗り物: 自動車・戦車・宇宙船の正面ビュー
• 建築物: 城門・神殿・対称的なファサード

髪型のカットや片手だけの武器など、非対称な要素はミラーモードをオフにしてから描き足してください。

完成した作品は 3 種類のフォーマットでエクスポートできます。それぞれ用途と対応ソフトが異なります:

形式	特徴	主な用途
GLB (glTF 2.0)	マテリアル・色情報を 1 ファイルに内包したバイナリ形式	Unity / Unreal Engine / Blender / Three.js / WebXR
.vox	MagicaVoxel ネイティブ形式。ボクセル情報を完全保持	MagicaVoxel での再編集、Goxel との相互運用
OBJ + MTL	テキストベースの古典的 3D 形式（隣接面の自動カリング付き）	汎用 3DCG ソフト、3D プリンタの入力

特に GLB は「3D の JPEG」とも呼ばれる現代の標準フォーマットで、Khronos Group が策定した glTF 2.0 をバイナリ化したものです。Unity・Unreal・Blender・Three.js などほとんどの 3D 環境で直接読み込めるため、迷ったら GLB を選んでください。

OBJ エクスポートの最適化: 隣接ボクセル同士で接している面は出力しません（greedy meshing の簡易版）。これにより、内部に空洞のない立体でもポリゴン数が大幅に削減されます。

制作途中の作品は JSON ファイルとして保存・読込ができます。JSON にはグリッドサイズと全ボクセルのパレットインデックスが含まれており、次回アクセス時に作業を再開できます。

JSON のスキーマは以下の通りです:

• version: フォーマットバージョン (現在 1)
• type: 識別子 ("voxel")
• size: グリッドサイズ (8 または 16)
• grid: 1次元配列。長さは size³。各要素はパレットインデックス (0=空)

テキスト形式のためファイルサイズが小さく、Git 等のバージョン管理にも適しています。Undo/Redo は最大 30 手まで遡れますが、それを超える戻し方が必要な場合はこまめに JSON 保存しておくと安全です。

• 左クリック: 選択中のツールを実行
• 右ドラッグ: カメラを回転（OrbitControls）
• マウスホイール: ズームイン/アウト
• Ctrl + Z: 元に戻す（最大 30 手）
• Ctrl + Y: やり直し
• エッジ表示: ON にするとボクセル間の境界線が描画され、隣接する同色ボクセルの区別がつきやすくなります

ボクセル制作初心者へのアドバイス:

1. まずシルエットを作る — 細部は気にせず、全体の形を 1 色で組み立てる
2. 主要パーツを色分け — 頭・体・手・足など、大きなブロックごとに別の色を割り当てる
3. 影と立体感 — 下面や陰になる部分に少し暗い色を置くと、ボクセルでも立体感が際立つ
4. カメラを回しながら — 正面だけでなく上下左右すべての向きから確認する。背面が空洞でも気にしない
5. 左右対称モードを活用 — 人型キャラなら 50% の工数で完成する

「ボクセル (voxel)」という用語の文献上の初出は1980年前後で、医療用 CT スキャンや科学計算分野で立体の最小単位を表す概念として定着しました。語源は volume + pixel の合成語です。

ゲーム分野では、1990年代の Comanche（NovaLogic, 1992）や Outcast（1999）が早期のボクセルレンダリング採用作として知られます。現代型のキューブベースのボクセルアートを世界的に広めたのは Minecraft（Mojang, 2009）で、その影響で 3D Dot Game Heroes（2009）、Crossy Road（2014）、Roblox など多数のヒット作が生まれました。

制作ツールでは MagicaVoxel（ephtracy 開発, 2015〜）が事実上のデファクトスタンダードとなっており、本ツールの .vox エクスポートもこのフォーマットに準拠しています。NFT 分野では The Sandbox や Cryptovoxels がボクセルアートをアバター・建造物の表現様式として採用しており、ピクセルアートに続く「新しい古典」として定着しつつあります。

本ツールは以下の Web 標準・ライブラリで構築されています:

• WebGL + Three.js: ブラウザ上で 3D グラフィックスを描画
• @react-three/fiber: React コンポーネントとして Three.js シーンを宣言的に記述
• InstancedMesh: 最大 4,096 個のボクセルを 1 ドローコールで描画。GPU 効率が極めて高く、ローエンドGPUでも 60fps を維持しやすい
• OrbitControls: マウスでの視点回転・ズーム・パン
• Raycasting: クリック位置から 3D 空間上のボクセル面を逆算。配置/削除の対象セルを正確に判定
• GLTFExporter: Three.js シーンを GLB バイナリ形式に出力

グリッドデータは Uint8Array（1次元配列、長さ size³）で保持しており、各要素はパレットインデックス（0=空、1〜255=色番号）です。Undo/Redo はグリッドのスナップショットをスタック管理する不変データ構造方式で、副作用なく確実に巻き戻せます。

すべての処理がクライアントサイドで完結するため、作品データがサーバーに送信されることはありません。