Pakekora STUDIO - ブラウザで動くパッケージ画像コラージュツール

あるいは、お気に入りのイラストや画像を使って、架空のパッケージ風に仕上げて遊んでみたい時にも。

Pakekora STUDIO は、ブラウザだけでパッケージ風の画像を作れるローカルHTMLツールです。
人物画像、素材画像、テキストをレイヤーで重ねて、位置・サイズ・回転・重なり順を調整し、そのままPNGで書き出せます。

インストール不要、外部通信なし。
ZIPを解凍してHTMLを開くだけで、すぐに制作を始められます。

画像編集ソフトを立ち上げるほどではないけれど、販売用・告知用のパッケージ画像をさっと整えたい。
ちょっとしたパロディ画像や、架空パッケージ風のビジュアルを作って個人的に楽しみたい。
そんな時に使える、同人制作にも個人の遊びにも向いた小さな制作ツールです。

■ こんな方におすすめ
・同人ゲーム・CG集のパッケージ画像を自作したい方
・専用の画像編集ソフトを使わずに、画像と文字を重ねて仕上げたい方
・ブラウザだけで完結する、軽めの制作環境を探している方
・人物画像と素材画像を分けて管理しながら作業したい方
・販売ページ用、告知用、サンプル用の画像を手早く作りたい方
・お気に入りの画像を、架空パッケージ風にアレンジして楽しみたい方
・AVパッケージ風、ゲームパッケージ風などのレイアウトで遊んでみたい方

■ できること
画像を読み込み、キャンバス上にレイヤーとして配置できます。
人物画像と素材画像は別々に管理できるので、よく使う素材を整理しながら作業できます。

テキストレイヤーにも対応しているため、タイトルやコピー、ちょっとした注釈もブラウザ上で追加できます。
完成した画像はPNGとして書き出せます。

■ 主な機能
・画像レイヤーの追加・移動・拡大縮小・回転・反転
・テキストレイヤーの追加・編集(色・サイズ・太さ・影)
・レイヤーの表示切替・重なり順変更・複製・削除・透明度調整
・人物管理 / 素材管理の分離
・アルバムへのドラッグ&ドロップ読み込み
・アルバムサムネイル表示 / レイヤーサムネイル表示
・アルバムの並び替え(名前・サイズ・更新日・種類)
・アルバム表示カラム数変更
・画像サイズにキャンバスを合わせる機能
・作業状態をJSONで保存/読み込み
・完成画像をPNGで書き出し
・Undo / Redo対応(Ctrl+Z / Ctrl+Y)
・ズーム・パン操作
　└ Ctrl + マウスホイールでズーム
　└ スペースキー + ドラッグで移動
　└ ハンドツール対応
・キャンバスサイズ・背景色・透過背景の設定
・キャンバスサイズプリセット収録(全12種)

■ サイズプリセットについて
AVパッケージ風、ゲームパッケージ風など、制作時にも遊びにも使いやすいキャンバスサイズプリセットを収録しています。
もちろん、幅・高さを自由に設定して使うこともできます。

■ 動作環境
・推奨ブラウザ: Google Chrome 最新版
・対応端末: PC(Windows / Mac)
・スマートフォン・タブレットは非対応
・インターネット接続不要(完全ローカル動作)
・読み込んだ画像は外部サーバーに送信されません

■ 使い方
1. ZIPファイルを任意のフォルダに解凍
2. PakekoraSTUDIO.html を Google Chrome で開く
3. 人物画像・素材画像・テキストを追加
4. 位置やサイズを調整してパッケージ画像を作成
5. PNGで書き出して完成！

■ 体験版について
体験版では以下の制限があります。
・人物画像は3件まで登録できます
・素材画像は3件まで登録できます
・作業JSONの保存 / 読み込みは製品版のみ対応
・設定変更は製品版のみ対応
・PNG書き出しは体験できますが、ウォーターマークが入ります

■ ご注意
・本ツールはローカルHTMLアプリです。サーバー起動・ログインは不要です。
・画像を多く含む作業JSONはファイルサイズが大きくなる場合があります。
・本ツールはブラウザ上で画像を配置する補助ツールです。高度なレタッチや画像加工を目的とした機能はありません。
・他者のイラスト、写真、キャラクター画像などを使用する場合は、個人利用の範囲や公開可否をご確認ください。
・作成した画像の公開可否や販売サイトの掲載ルールは、利用者ご自身でご確認ください。
・本製品の改変・再配布はご遠慮ください。

■ 開発メモ・更新情報
Pakekora STUDIO の開発メモや更新の話は、noteのマガジンでも少しずつまとめています。
https://note.com/cheaptechlab/m/m0bbc6918c75f

使ってみて気になった点や、「こういう機能があると助かる」などがあれば、今後の改善の参考にできればうれしいです。

■ AI生成物の利用について
本作品の紹介画像(メイン画像・サムネイル画像・サンプル画像)の制作に画像生成AIを一部利用しています。
ツール本体(HTML/CSS/JavaScript)はAIを使用せず制作しています。