
目次
ArtCraftが、Adobeの制作アプリに代わる無料のオープンソースソフトとして話題になっています。小さなゲームを作っているなら、今ある素材のどの作業に使えるのかが気になるところです。
私たちはアニメーションのチュートリアルで使っているオレンジ色のロボットを、PhotoCraftで開いてみました。透過PNGの周囲に余白を足し、元のピクセルを変えずに書き出す作業です。PhotoCraft 0.7.0のブラウザ版で、この作業を完了できました。
2026年10月14日更新:公式のアプリ一覧は13本に増え、インストールと更新をまとめて管理するArtCraft Launcherも登場しています。以下のPhotoCraft画面とピクセル検証は10月11日の実測です。ダウンロードから始める方は、PhotoCraftのダウンロード・導入ガイドをご覧ください。
Brandon ThomasのArtCraftとは?
Brandon Thomasはソフトウェアエンジニアで、ArtCraftの創設者です。最初の紹介投稿では、Claudeの助けを借りてRustで7本の制作アプリを開発したと説明しています。現在はコミュニティも開発に参加しており、PhotoCraft 0.7.0のリリース記録には多くの貢献者が載っています。
公式のCrafting Appsページには現在13本が掲載されています。開発状況は2026年10月14日に確認した表示です。
| アプリ | 用途 | 開発状況 |
|---|---|---|
| PhotoCraft | ラスター画像編集/Photoshop | 初期アルファ版 |
| VectorCraft | ベクターイラスト/Illustrator | 開発中 |
| FilmCraft | 動画編集/Premiere Pro | 開発中 |
| LightCraft | 写真管理とRAW現像/Lightroom | 開発中 |
| PdfCraft | PDF文書/Acrobat | 初期アルファ版 |
| EffectCraft | モーショングラフィックスとVFX/After Effects | 開発中 |
| DesignCraft | ページレイアウト/InDesign | 開発中 |
| FigCraft | UIデザインとプロトタイプ | 初期アルファ版 |
| WordCraft | 文書作成 | 開発中 |
| SoundCraft | 録音とミキシング | 開発中 |
| DeckCraft | プレゼンテーション | 開発中 |
| CADCraft | CADと製図 | 開発中 |
| GridCraft | 表計算 | 開発中 |
公式のArtCraft LauncherはOSとプロセッサーに合うビルドを選び、アプリの更新を管理します。各アプリには単独のダウンロードもあるので、PhotoCraftだけをインストールすることもできます。
Adobe製品名は用途の目安です。同じ機能がすべて揃っているという意味ではありません。PhotoCraftのREADMEも初期アルファ版と説明しています。日常の編集環境に採用する前に、実際のプロジェクトのコピーで必要な作業を試しておくとよいでしょう。
同じブランドにはArtCraftのAI画像・動画スタジオもあり、画像から動画を作る機能も提供しています。編集アプリとAIスタジオは担当する工程が異なり、費用も分けて確認する必要があります。
PhotoCraftで透過キャラクターの周囲に余白を足す
入力は1254 × 1254の透過PNGです。立ち姿のキャラクターにパンチ、キック、ジャンプをさせるなら、周囲の余白が動きを画面に収める助けになります。今回はキャンバスを1600 × 1600に広げました。キャラクターを拡大縮小せず、上下左右に173ピクセルずつ透明な領域を追加します。
10月11日に公式のPhotoCraft 0.7.0 Webリリースをローカル配信して使いました。以下はその操作画面です。
元のPNGを開く
Openからロボットの入力PNGを選びます。背後の市松模様はPhotoCraftが透明部分を示すための表示で、画像には含まれません。
元の画像はすでに背景が切り抜かれています。今回の操作に背景除去は含まれません。JPEGや不透明なPNGを開いてキャンバスを広げても、元の背景は残ります。
Canvas Sizeで余白を追加する
Image → Canvas Sizeを開き、幅と高さをそれぞれ1600 Pixelsにします。Relativeはオフ、アンカーは中央、Canvas extension colorはTransparentにして、OKを押します。
Canvas Sizeはキャンバスの境界を変え、Image Sizeは画像を拡大縮小します。今回は描画部分のピクセルをそのまま残して余白を足したいので、Canvas Sizeを使いました。
同じ表示幅に収めると、拡張後のキャラクターは小さく見えます。キャンバスに空白が増えたためで、書き出したロボット自体のピクセルは変わっていません。
比較画像の薄い背景色は表示用です。ダウンロードできるPNGはどちらも透過です。次にAnimGenで動きを生成し、余白を追加するだけなら、入力設定のExpand Canvasも使えます。別のローカル画像を保存する必要はありません。他のツールでも使う編集済みの元画像を残したい場合には、PhotoCraftが役立ちます。
書き出し後の透明度を確かめる
File → Export → Quick Export as PNGを選びます。ダウンロードしたファイルは1600 × 1600でした。中央の元画像部分を比較すると、赤・緑・青・アルファの全チャンネルで差はゼロ。追加した外周はすべてアルファ値がゼロでした。
実際のPhotoCraft出力をダウンロードできます。テスト記録には設定、寸法、ファイルのハッシュを残しています。
余白は、モデルが動く手足を配置するための場所になります。大きく武器を振る動作や高いジャンプでは、生成された動き全体を見てから最終的な切り抜き範囲を決めてください。
キャラクターPNGを操作可能なゲームキャラクターへ
このロボットには、以前の操作可能なキャラクターの事例で待機、走り、パンチ、キックを用意しました。以下はそのGodotテストの録画です。これらのアニメーションは、今回のPhotoCraftでの編集より前に生成したものです。
次に使うツールは、手元の素材に合わせて選べます。
- キャラクターPNGが1枚ある場合:動きを生成し、必要なフレームを選んで透過形式で書き出します。透過アニメーション作成ページでこの流れを紹介しています。全身を収め、伸ばす手足や武器の周囲に余白を残してください。
- 動きのある動画がすでにある場合:無料の動画→スプライトシート変換ツールで使う範囲を選びます。元動画にアルファがあればフレームにも引き継げます。不透明な動画では背景除去が必要です。
- 完成したPNGフレームが揃っている場合:無料のsprite sheet makerでまとめます。PhotoCraftで各フレームを編集する場合も、キャンバスサイズとキャラクターの配置は揃えてください。1枚ずつ中央に寄せ直すと、再生時に位置がぶれることがあります。
この2つの無料ツールの操作画面は英語です。スプライトシートの作り方にはダウンロード用フレームとJSONの例があります。エンジン側はGodot 4への読み込み事例で、書き出したパッケージの読み込みと再生を確認できます。
無料の工程とクレジットが必要な工程
Crafting Appsは無料のオープンソースソフトです。今回のPhotoCraftでのPNG読み込み、キャンバス拡張、書き出しには、アカウントも生成クレジットも不要でした。上で紹介したAnimGenのブラウザツールも、既存フレームのパックと既存動画の変換を無料・アカウント不要で行えます。
新しい動きを生成する場合には、AIモデルの推論を使います。ArtCraftのAIスタジオには有料プランとクレジットがあり、AnimGenもモデルと設定に応じた生成費用を提示します(料金)。編集ソフトが無料でも、外部AIモデルの呼び出しまで無料になるわけではありません。
この記事では新しいアニメーションを生成していません。既存のキャラクターと動きを使っているため、画像編集の練習部分はそのまま無料で試せます。
開発者向けのCLIとMCP
PhotoCraftにはコマンドラインクライアントとMCPサーバーもあります。公式MCP文書では、ファイルへのアクセスをプロジェクトのフォルダに限定する方法を紹介しています。
photocraft-cli mcp --automation-read-root /path/to/game-art --automation-write-root /path/to/game-art
ネイティブのCLIをインストールした後、パスを自分の素材フォルダに置き換えます。これは文書にある自動化の選択肢で、今回のキャンバステストはブラウザ画面で操作しました。複数フレームに同じ処理を行う工程では、このインターフェースで編集してからパッカーに渡す方法を検討できます。生成と書き出しについては、AnimGenのMCPアニメーション事例もあります。
ロボットの画像で試す
元のPNGをダウンロードし、PhotoCraftで1600 × 1600へのキャンバス拡張を試して、私たちの出力と比べてみてください。
アニメーションのフレームがすでにあれば、生成を省いてsprite sheet makerでまとめられます。まだキャラクターの絵だけなら、操作可能なロボットの事例で4つの動作を用意し、ゲームの操作につなぐところまで確認できます。


