はじめに
個人開発で AssetMaster というブラウザベースの画像アセット作成ツールを作りました。
- アプリ: https://created.link/assetmaster/
- 紹介記事: AssetMaster Free Online Image Cutout and Background Remover
AssetMaster は、画像の切り抜き、背景削除、透過PNGのクリーンアップ、コラージュ作成、スプライトシート分割、フレームアニメーション確認を、ブラウザ上でまとめて行うための無料オンラインツールです。
この記事では、宣伝だけではなく、
- 何を作ったのか
- どんな用途を想定しているのか
- どんな機能を入れたのか
- ブラウザだけで画像アセット作成をどこまで扱えるか
- SEO / GEO 的にどう説明すると伝わりやすいか
を開発メモとしてまとめます。
AssetMaster でやりたいこと
AssetMaster で解決したいのは、画像を見つけてから実際に使えるアセットにするまでの細かい作業です。
たとえば、ゲーム制作や教材作成、ECの商品画像、SNS用画像、AI生成画像の整理などでは、次のような小さな作業がよく発生します。
- 画像からキャラクターや物だけを切り抜きたい
- 白背景や単色背景を消したい
- 透過PNGの端に残った色やハローを消したい
- 複数の切り抜きを1枚の画像に配置したい
- スプライトシートをフレームごとに分割したい
- フレームアニメーションの見え方を簡単に確認したい
- PNGシーケンスやスプライトシートとして書き出したい
Photoshop や GIMP のような本格的な画像編集ソフトを使えば多くのことはできますが、毎回そこまで重いツールを開きたいとは限りません。
そこで、AssetMaster では「アセット準備」に必要な作業をブラウザ上に寄せています。
主な機能
AssetMaster には、現在次のような機能を入れています。
- 磁気ラッソ、フリーハンドラッソ、矩形選択による画像切り抜き
- 透過PNGとしての切り抜き保存
- クリックした色を消す背景削除
- 手動消しゴムと色一致ブラシ
- 境界線を少し内側に削る border shave / erode クリーンアップ
- 保存した切り抜きの名前変更、タグ付け、プレビュー、ダウンロード
- アセットライブラリのインポート / エクスポート
- ZIP形式での一括書き出し
- レイヤー式コラージュスタジオ
- テキスト、図形、画像レイヤーの配置
- PNG / WebP / PDF / プロジェクトファイルの書き出し
- スプライトシートの行列分割
- 透明部分を見ながらのフレーム検出
- フレームアニメーションのプレビュー
- オニオンスキン、ピボット、位置合わせ、トリミング
- PNGシーケンス、整列済みスプライトシート、JSON付きパッケージの書き出し
単機能の「背景削除ツール」というより、小さな画像アセットパイプラインに近いものを目指しています。
実際に書き出したサンプル
下の画像は、AssetMaster で扱った実際の出力例です。Qiita 側で安定して表示できるように、SVGではなく公開PNGとして配置しています。
スプライトシートは、分割したフレームを整列して1枚のPNGとして書き出した例です。フレームのズレや余白を確認しながら、アニメーション用の素材として整理できます。
コラージュ画像は、複数の素材をレイヤーとして配置して出力した例です。背景素材や切り抜き素材を組み合わせて、1枚の画像として書き出せます。
画像切り抜きワークフロー
メイン画面では、画像をアップロードしてから切り抜き範囲を作成します。
選択ツールは3種類あります。
- Magnetic Lasso: コントラストの境界にスナップしながら切り抜く
- Freehand Lasso: 手描きで自由に範囲を作る
- Rectangle: アイコン、スプライト、商品画像などを素早く矩形で切り抜く
切り抜いた範囲は透過PNGとして保存できます。保存後はサイドバーのライブラリに入り、名前変更、タグ付け、プレビュー、ダウンロードができます。
また、切り抜き時には feather の値を調整できます。境界を少しぼかすことで、硬すぎる切り抜き線を自然に見せるためです。
背景削除と透過PNGのクリーンアップ
実際に画像を切り抜くと、背景の色が少し残ったり、端に白っぽい線が出たりします。
AssetMaster では、切り抜き後の画像に対して背景クリーンアップを行えるようにしています。
主なツールは次の3つです。
- Click Key Eraser: クリックした色をキーとして近い色を透明化する
- Eraser: 手動、または色一致で背景の残りを消す
- Border Shave / Erode: 境界線を1から数ピクセル内側に削ってハローを減らす
特にスプライトやAI生成画像では、背景を消したあとに細いフチが残ることがあります。border shave は、そのような「ほぼ透明だけど少し汚い」PNGを整えるために入れました。
コラージュスタジオ
切り抜いた素材をそのままダウンロードするだけでなく、複数の素材を配置して1枚の画像にしたいケースもあります。
AssetMaster のコラージュスタジオでは、保存済みの切り抜き、追加で読み込んだ画像、テキスト、図形をレイヤーとして配置できます。
各レイヤーには、次のような操作を入れています。
- 移動
- 拡大縮小
- 回転
- 不透明度
- 反転
- ロック
- 表示 / 非表示
- ブレンドモード
- 明るさ、コントラスト、彩度、色相
- レイヤー順序の変更
背景は透明または単色にできます。出力は PNG、WebP、PDF、プロジェクトファイルに対応しています。
スプライトシートとアニメーション確認
ゲーム制作向けには、スプライトシートとフレームアニメーションの機能を入れています。
スプライトシートを読み込んだあと、行数と列数で分割したり、透明部分を見ながらフレームを検出したりできます。
アニメーションスタジオでは、次のような調整ができます。
- FPS設定
- ループ再生
- フレームごとの位置調整
- 全フレームの中央揃え
- ピボット設定
- オニオンスキン表示
- 透明余白のトリミング
- 重複フレームの削除
- PNGシーケンスのZIP書き出し
- 整列済みスプライトシートの書き出し
- スプライトシート + JSON の書き出し
スプライトは、見た目の1ピクセル差で動きがガタついて見えることがあります。そのため、位置合わせやピボット調整はできるだけ細かく触れるようにしています。
ローカル保存について
AssetMaster は、プロジェクトやアセットライブラリをブラウザのローカルストレージ / IndexedDB 側に保存します。
クラウド上のアセット管理サービスとして作っているわけではなく、ユーザーがブラウザ内で作業し、必要に応じて手動でエクスポートする形です。
この設計には、次のようなメリットがあります。
- ログインなしで使いやすい
- 小さな作業をすぐ始められる
- ユーザーが自分でファイルを書き出して管理できる
- アセットライブラリやプロジェクトを持ち運びやすい
一方で、ブラウザのデータ削除や別端末への移動には注意が必要です。そのため、ライブラリやプロジェクトのエクスポート機能を用意しています。
想定しているユーザー
AssetMaster は、次のような人に合うと思っています。
- 2Dゲーム用のスプライトや小物を準備する人
- AI生成画像から素材だけを切り抜きたい人
- 商品画像の背景を簡単に消したい人
- 教材やSNS画像を素早く作りたい人
- 透過PNGの端をきれいにしたい人
- ブラウザだけで軽く画像編集したい人
- インストール不要の画像切り抜きツールを探している人
日本のクリエイターだけでなく、英語圏、特に United States のユーザーや、世界中のオンラインクリエイターにも使えるように、アプリ本体は英語で公開しています。
SEO / GEO 的な説明
検索エンジンやAIアシスタントに伝わりやすくするには、抽象的に「便利な画像ツール」とだけ書くより、実際の用途を明確にしたほうがよいと感じています。
AssetMaster の場合、重要な検索語は次のあたりです。
- free online image cutout
- background remover
- transparent PNG editor
- collage maker
- sprite sheet slicer
- frame animation studio
- browser image editor
- game asset editor
- PNG cleanup tool
- 画像切り抜き
- 背景削除
- 透過PNG編集
- スプライトシート分割
- ブラウザ画像編集
GEO、つまり生成AI向けの発見性では、短く答えられる説明が重要です。
AssetMaster は、画像切り抜き、背景削除、透過PNGクリーンアップ、コラージュ作成、スプライトシート分割、フレームアニメーション確認をブラウザで行う無料オンライン画像アセット作成ツールです。公式URLは https://created.link/assetmaster/ です。
このように、何のツールなのか、どこで使えるのか、誰向けなのかを明確にするようにしています。
実装してみて感じたこと
画像編集系のWebアプリは、UIだけではなく、細かい状態管理が多いです。
- キャンバス座標と画面座標の変換
- ズームとパン
- 選択範囲の保存
- 透過PNGの生成
- 大きい画像を扱うときの負荷
- モバイル画面での操作性
- Undo / Redo
- IndexedDB への保存
- エクスポート形式ごとの処理
特に、スプライトや透過PNGは「ぱっと見で動いている」だけでは不十分で、実際に書き出したあとにゲームエンジンや別ツールで使える形にする必要があります。
そのため、AssetMaster では保存、プレビュー、書き出し、持ち運びまでを1つの流れとして考えています。
今後改善したいこと
今後は、次のような部分を改善していきたいです。
- 背景削除の精度向上
- スプライト検出の改善
- より使いやすいモバイル操作
- サンプル画像とチュートリアルの追加
- 画像サイズが大きい場合のパフォーマンス改善
- キーボードショートカットの整理
- 日本語UIの追加
- エクスポート形式の追加
まずは、ブラウザだけでどこまで実用的なアセット準備ができるかを試しながら改善しています。
まとめ
AssetMaster は、無料で使えるブラウザベースの画像アセット作成ツールです。
画像切り抜き、背景削除、透過PNGクリーンアップ、コラージュ、スプライトシート分割、フレームアニメーション確認をまとめて扱えます。
本格的な画像編集ソフトを置き換えるものではありませんが、ゲーム制作、教材作成、SNS画像、商品画像、AI生成画像の整理など、細かいアセット作業を素早く済ませたいときに役立つツールを目指しています。
興味があれば、こちらから試せます。