販売用のサンプル画像、毎回手作業で並べていませんか?
CG集、写真集、コスプレ作品などの販売ページでは、複数の画像を見やすく並べたり、SAMPLE透かしを入れたり、DLsite / BOOTH / SNS 向けにサイズを整えたりする作業が意外と手間になります。
Sample STUDIO は、そうした販売用サンプル画像づくりをブラウザだけで完結できるローカルHTMLツールです。
複数画像を読み込み、グリッド配置・SAMPLE透かし・ヘッダー・フッター・書き出しサイズを調整して、販売ページや告知に使いやすい1枚の画像として書き出せます。
インストール不要、外部通信なし。
ZIPを解凍してHTMLを開くだけで、すぐに制作を始められます。
画像編集ソフトを立ち上げるほどではないけれど、販売ページ用のサンプル画像をさっと整えたい。
毎回の画像配置や透かし入れの手間を少し減らしたい。
そんな時に使える、同人制作や個人制作に向いた小さな制作ツールです。
■ こんな方におすすめ
・CG集、写真集、コスプレ作品などの販売用サンプル画像を作りたい方
・複数画像を見やすく並べたサンプル画像を短時間で作成したい方
・DLsite、BOOTH、SNS投稿用にサイズを整えた画像を書き出したい方
・Photoshopなどの画像編集ソフトを使わず、ブラウザだけで完結するツールを探している方
・毎回の販売ページ作成で、画像配置や透かし入れの手間を減らしたい方
■ できること
複数の画像を読み込み、指定した列数のグリッドに自動で並べられます。
画像の間隔、外側余白、角丸、表示方法を調整しながら、販売ページ向けのサンプル画像を作成できます。
SAMPLE透かし、ヘッダー、フッターにも対応しているため、作品名や補足テキストを入れたサンプル画像もブラウザ上で整えられます。
完成した画像は PNG / JPEG / WebP として書き出せます。
■ 主な機能
・複数画像の読み込み
・画像リストのサムネイル管理
・ドラッグによる画像の並び替え
・1列から10列までのグリッドレイアウト
・外側余白、画像間隔、角丸の設定
・カバー / フィット表示の切り替え
・画像位置の上 / 中央 / 下切り替え
・SAMPLE透かしの設定
・透かし配置(斜め / 中央 / 繰り返し)
・透かしの文字サイズ、太さ、透明度設定
・ヘッダー / フッターテキストの設定
・文字色、サイズ、位置、太さの設定
・背景色 / 透過背景の設定
・DLsite / BOOTH / X / SNS向けサイズプリセット
・カスタムサイズ指定
・PNG / JPEG / WebP書き出し
・作業状態をJSONで保存 / 読み込み
・設定の自動保存
・ズーム / パン操作
■ サイズプリセット
・DLsite 1000×1400
・DLsite 正方形 1000×1000
・BOOTH 1200×1200
・X 横 1600×900
・X 縦 1200×1600
・SNS 縦 1080×1350
・SNS ストーリー 1080×1920
・カスタムサイズ
■ 動作環境
・推奨ブラウザ: Google Chrome 最新版
・対応端末: PC(Windows / Mac)
・スマートフォン・タブレットは非対応
・インターネット接続不要(完全ローカル動作)
・読み込んだ画像は外部サーバーに送信されません
■ 使い方
1. ZIPファイルを任意のフォルダに解凍
2. SampleSTUDIO.html を Google Chrome で開く
3. 画像を追加して表示順やレイアウトを調整
4. 必要に応じて透かし、ヘッダー、フッター、サイズを設定
5. PNG / JPEG / WebPで書き出して完了！
■ 体験版について
体験版では以下の制限があります。
・画像の読み込みは4件まで
・作業JSONの保存 / 読み込みは製品版のみ対応
・書き出し画像にはDemoウォーターマークが入ります
■ ご注意
・本ツールはローカルHTMLアプリです。サーバー起動・ログインは不要です。
・本ツールは画像編集ソフトではなく、販売用サンプル画像生成ツールです。
・自由配置、細かなレタッチ、画像の個別加工を目的とした機能はありません。
・高解像度画像や多数の画像を処理する場合、動作が重くなることがあります。
・画像を多く含む作業JSONはファイルサイズが大きくなる場合があります。
・作成したサンプル画像の公開可否や販売サイトの掲載ルールは、利用者ご自身でご確認ください。
・本製品の改変・再配布はご遠慮ください。
■ 開発メモ・更新情報
Sample STUDIO の開発メモや更新の話は、noteのマガジンでも少しずつまとめています。
https://note.com/cheaptechlab/m/m3a3db64ecacb
使ってみて気になった点や、「こういう機能があると助かる」などがあれば、今後の改善の参考にできればうれしいです。
■ AI生成物の利用について
本作品の紹介画像(メイン画像・サムネイル画像・サンプル画像)の制作に画像生成AIを一部利用しています。
ツール本体(HTML/CSS/JavaScript)はAIを使用せず制作しています。
Sample STUDIO は、そうした販売用サンプル画像づくりをブラウザだけで完結できるローカルHTMLツールです。
複数画像を読み込み、グリッド配置・SAMPLE透かし・ヘッダー・フッター・書き出しサイズを調整して、販売ページや告知に使いやすい1枚の画像として書き出せます。
インストール不要、外部通信なし。
ZIPを解凍してHTMLを開くだけで、すぐに制作を始められます。
画像編集ソフトを立ち上げるほどではないけれど、販売ページ用のサンプル画像をさっと整えたい。
毎回の画像配置や透かし入れの手間を少し減らしたい。
そんな時に使える、同人制作や個人制作に向いた小さな制作ツールです。
■ こんな方におすすめ
・CG集、写真集、コスプレ作品などの販売用サンプル画像を作りたい方
・複数画像を見やすく並べたサンプル画像を短時間で作成したい方
・DLsite、BOOTH、SNS投稿用にサイズを整えた画像を書き出したい方
・Photoshopなどの画像編集ソフトを使わず、ブラウザだけで完結するツールを探している方
・毎回の販売ページ作成で、画像配置や透かし入れの手間を減らしたい方
■ できること
複数の画像を読み込み、指定した列数のグリッドに自動で並べられます。
画像の間隔、外側余白、角丸、表示方法を調整しながら、販売ページ向けのサンプル画像を作成できます。
SAMPLE透かし、ヘッダー、フッターにも対応しているため、作品名や補足テキストを入れたサンプル画像もブラウザ上で整えられます。
完成した画像は PNG / JPEG / WebP として書き出せます。
■ 主な機能
・複数画像の読み込み
・画像リストのサムネイル管理
・ドラッグによる画像の並び替え
・1列から10列までのグリッドレイアウト
・外側余白、画像間隔、角丸の設定
・カバー / フィット表示の切り替え
・画像位置の上 / 中央 / 下切り替え
・SAMPLE透かしの設定
・透かし配置(斜め / 中央 / 繰り返し)
・透かしの文字サイズ、太さ、透明度設定
・ヘッダー / フッターテキストの設定
・文字色、サイズ、位置、太さの設定
・背景色 / 透過背景の設定
・DLsite / BOOTH / X / SNS向けサイズプリセット
・カスタムサイズ指定
・PNG / JPEG / WebP書き出し
・作業状態をJSONで保存 / 読み込み
・設定の自動保存
・ズーム / パン操作
■ サイズプリセット
・DLsite 1000×1400
・DLsite 正方形 1000×1000
・BOOTH 1200×1200
・X 横 1600×900
・X 縦 1200×1600
・SNS 縦 1080×1350
・SNS ストーリー 1080×1920
・カスタムサイズ
■ 動作環境
・推奨ブラウザ: Google Chrome 最新版
・対応端末: PC(Windows / Mac)
・スマートフォン・タブレットは非対応
・インターネット接続不要(完全ローカル動作)
・読み込んだ画像は外部サーバーに送信されません
■ 使い方
1. ZIPファイルを任意のフォルダに解凍
2. SampleSTUDIO.html を Google Chrome で開く
3. 画像を追加して表示順やレイアウトを調整
4. 必要に応じて透かし、ヘッダー、フッター、サイズを設定
5. PNG / JPEG / WebPで書き出して完了！
■ 体験版について
体験版では以下の制限があります。
・画像の読み込みは4件まで
・作業JSONの保存 / 読み込みは製品版のみ対応
・書き出し画像にはDemoウォーターマークが入ります
■ ご注意
・本ツールはローカルHTMLアプリです。サーバー起動・ログインは不要です。
・本ツールは画像編集ソフトではなく、販売用サンプル画像生成ツールです。
・自由配置、細かなレタッチ、画像の個別加工を目的とした機能はありません。
・高解像度画像や多数の画像を処理する場合、動作が重くなることがあります。
・画像を多く含む作業JSONはファイルサイズが大きくなる場合があります。
・作成したサンプル画像の公開可否や販売サイトの掲載ルールは、利用者ご自身でご確認ください。
・本製品の改変・再配布はご遠慮ください。
■ 開発メモ・更新情報
Sample STUDIO の開発メモや更新の話は、noteのマガジンでも少しずつまとめています。
https://note.com/cheaptechlab/m/m3a3db64ecacb
使ってみて気になった点や、「こういう機能があると助かる」などがあれば、今後の改善の参考にできればうれしいです。
■ AI生成物の利用について
本作品の紹介画像(メイン画像・サムネイル画像・サンプル画像)の制作に画像生成AIを一部利用しています。
ツール本体(HTML/CSS/JavaScript)はAIを使用せず制作しています。