CheapTech LAB

初めにお読みください

本ソフトはDemo版です。一部の機能が制限されています。

Demo版で使用できる機能

  • 画像読み込み（最大4件）
  • 画像の並び替え
  • レイアウト、ヘッダー、フッター、SAMPLE透かしの設定
  • PNG / JPEG / WebP書き出し（Demoウォーターマーク入り）

Demo版で使用できない機能

  • 作業JSONの保存
  • 作業JSONの読み込み

Demo版の制限

  • 画像の読み込み上限は4件です
  • 書き出した画像にはDemoウォーターマークが入ります
  • 製品版では最大100件まで読み込めます

Sample STUDIO は、DLsite / BOOTH / SNS 向けの販売用サンプル画像を作成するためのローカル実行型HTMLツールです。
複数の画像を読み込み、グリッドレイアウト、SAMPLE透かし、ヘッダー、フッターを設定して、販売ページに使いやすい1枚の画像として書き出せます。

本ソフトは画像編集ソフトではなく、販売用サンプル画像生成ツールです。自由配置や細かなレタッチではなく、少ない設定で整ったサンプル画像を作ることを目的としています。

目次

  1. 基本情報
  2. 起動方法
  3. ファイル構成
  4. 主な機能
  5. 基本操作
  6. 保存と書き出し
  7. 設定
  8. 注意事項
  9. トラブルシューティング
  10. 権利表記
  11. CHANGELOG
  12. THIRD-PARTY-NOTICES

1. 基本情報

製品名 Sample STUDIO
バージョン Demo（v1.0.0ベース）
制作 CheapTech LAB
推奨ブラウザ Google Chrome 最新版
実行方式 ローカルのHTMLファイルを直接開いて実行
対応端末 PC向け。スマートフォン・タブレットは非対応です。

2. 起動方法

  1. 配布ZIPファイルを任意のフォルダに解凍します。
  2. SampleSTUDIO.html を Google Chrome で開きます。
  3. 右側の画像リストへ画像ファイルを追加して作業を開始します。

本ツールはローカルファイルとして動作します。サーバー起動、インストール、ログイン、外部通信は不要です。

3. ファイル構成

SampleSTUDIO-Demo/
	SampleSTUDIO.html          アプリ本体
	README.html                この説明書（本ファイル）
	assets/
		css/
			sample-ui.css         アプリ画面用CSS
			sample-style.css      共通スタイル・説明書表示用CSS
		js/
			sample-ui.js          アプリ本体JavaScript
		fonts/                  同梱フォント・アイコンフォント

4. 主な機能

4.1 画像読み込み

  • クリックによる画像ファイル選択
  • ドラッグ＆ドロップによる複数画像の一括読み込み
  • 画像リストのサムネイル表示
  • 読み込み中の進行状況表示
  • 読み込み上限：4件（Demo版）

4.2 レイアウト

  • 列数、外側余白、画像間隔、角丸の設定
  • 1列から10列までのグリッドレイアウト
  • 画像のフィット / カバー切り替え
  • 画像位置の上 / 中央 / 下切り替え
  • 画像リストのドラッグ並び替え

4.3 テキストと透かし

  • ヘッダーテキストの設定
  • フッターテキストの設定
  • 文字色、サイズ、位置、太さの設定
  • SAMPLE透かしのテキスト、配置、サイズ、太さ、透明度の設定
  • 透かし配置は斜め、中央、繰り返しに対応

4.4 キャンバスと書き出し

  • DLsite、BOOTH、X、SNS向けのサイズプリセット
  • カスタムサイズ指定
  • 背景色と透過背景の設定
  • PNG / JPEG / WebP形式での書き出し
  • 書き出し中の進行状況表示

4.5 保存と復元

  • 設定内容のローカルストレージ保存
  • 作業JSONの保存（製品版）
  • 作業JSONの読み込み（製品版）
  • JSON内への画像データ埋め込み（製品版）

4.6 ズーム・パン

  • 25% / 50% / 100% / 200%の倍率指定
  • キャンバスを画面に合わせる表示
  • 表示位置のリセット
  • スペースキー + ドラッグによるパン

5. 基本操作

5.1 画像を追加する

  1. 右側の画像リストにある追加エリアをクリックします。
  2. 画像ファイルを選択します。複数選択も可能です。
  3. または、追加エリアへ画像ファイルをドラッグ＆ドロップします。
  4. 読み込んだ画像が画像リストとプレビューに表示されます。

画像は外部サーバーには送信されません。Demo版では最大4件まで読み込めます。

5.2 画像の順番を変更する

  • 右側の画像リストで画像行をドラッグすると、表示順を変更できます。
  • プレビューと書き出し結果は、画像リストの順番に従います。
  • 不要な画像は画像行の削除ボタンで削除できます。

5.3 レイアウトを調整する

  • 列数を変更すると、グリッドの列数が変わります。1列にすると縦並びのレイアウトになります。
  • 余白、間隔、角丸を変更すると、プレビューへすぐに反映されます。
  • フィット / カバーと位置指定で、画像の見せ方を調整できます。

5.4 ヘッダー・フッター・透かしを設定する

  1. 上部ナビゲーションの「設定」を開きます。
  2. キャンバスサイズ、背景、透かし、ヘッダー、フッターを入力します。
  3. 「保存」を押すと、設定がプレビューに反映されます。

ヘッダーとフッターは1行表示を前提としています。長いテキストはプレビュー上で省略される場合があります。

5.5 キャンバスを移動・拡大する

  • インフォバー右側のボタンで倍率を指定できます。
  • 「画面に合わせる」で、全体が画面に収まるよう自動調整します。
  • 「中央に戻す」で、表示位置をリセットします。
  • スペースキーを押しながらドラッグすると、キャンバスをパンできます。

6. 保存と書き出し

6.1 保存

Demo版では、ナビゲーションの「保存」を押すと製品版機能であることを知らせる警告が表示されます。
作業状態をJSONファイルとして保存する機能は製品版で利用できます。

6.2 開く

Demo版では、ナビゲーションの「開く」を押すと製品版機能であることを知らせる警告が表示されます。
保存済みJSONから作業状態を復元する機能は製品版で利用できます。

6.3 書き出し

「書き出し」は、現在のプレビュー内容を1枚の画像として保存する機能です。PNG / JPEG / WebPから形式を選択できます。Demo版で書き出した画像にはDemoウォーターマークが入ります。
ブラウザのダウンロード機能を利用して保存されます。

7. 設定

「設定」では、キャンバスサイズ、背景色、透過背景、透かし、ヘッダー、フッター、読み込み上限を設定できます。
設定内容と右パネルのレイアウト設定は、ブラウザのローカルストレージに保存されます。

7.1 サイズプリセット

  • DLsite：1000 × 1400
  • DLsite 正方形：1000 × 1000
  • BOOTH：1200 × 1200
  • X 横：1600 × 900
  • X 縦：1200 × 1600
  • SNS 縦：1080 × 1350
  • SNS ストーリー：1080 × 1920
  • カスタム：任意の幅・高さを指定

7.2 読み込み上限

  • Demo版では画像を最大4件まで登録できます。
  • 製品版では最大100件まで読み込めます。
  • 件数を多くすると、利用環境によって動作が重くなる場合があります。

8. 注意事項

8.1 ローカル動作について

  • 本ツールはGoogle Chromeでのローカル実行を主対象としています。
  • Firefox、Safari、Edge等での動作は保証対象外です。
  • スマートフォン・タブレットでの動作は保証対象外です。
  • ブラウザのセキュリティ仕様上、任意のローカルフォルダへ自動保存することはできません。
  • 画像、JSONはブラウザのダウンロード機能を通じて保存されます。Demo版ではJSON保存は利用できません。

8.2 画像データについて

  • 読み込んだ画像は外部へ送信されません。
  • 製品版の作業JSONには画像データが含まれるため、第三者へ渡す場合は内容を確認してください。
  • 大きな画像や大量の画像を使用すると、読み込み、保存、書き出しに時間がかかる場合があります。
  • Demo版では4件まで読み込みできます。

8.3 プレビューと書き出しについて

  • プレビューはHTMLとCSSで表示し、書き出し時のみCanvasで描画します。
  • ブラウザやフォント描画の差により、プレビューと書き出し結果が完全に一致しない場合があります。
  • 長いヘッダー・フッター文字は、画像外へはみ出さないよう短めの文字数で設定してください。

8.4 権利・利用上の注意

  • 本ツールで使用する画像・ロゴ・文字・素材等については、利用者自身が必要な権利を確認してください。
  • 実在の商品、企業、ブランド、商標、人物等と誤認される表現には注意してください。
  • 第三者の権利を侵害する目的での利用は避けてください。

9. トラブルシューティング

9.1 画像が読み込めない

  • 画像ファイルを選択しているか確認してください。
  • ファイル形式がブラウザで表示可能な形式か確認してください。
  • ファイルサイズが非常に大きい場合は、画像を軽量化してから再度読み込んでください。
  • 登録上限（Demo版は4件）に達している場合は、不要な画像を削除してください。

9.2 JSONが開けない

  • Demo版ではJSON保存・JSON読み込みは製品版のみの機能です。
  • 製品版では、Sample STUDIOで保存したJSONから作業状態を復元できます。

9.3 画像を書き出せない

  • ブラウザのダウンロード許可設定を確認してください。
  • 非常に大きなキャンバスや多数の画像を使用している場合は、サイズや画像数を減らしてください。
  • JPEG形式では透過背景は白背景として書き出されます。
  • Demo版では書き出した画像にDemoウォーターマークが入ります。

9.4 動作が重い

  • 読み込む画像数を減らしてください。
  • 元画像の解像度を下げてから読み込んでください。
  • キャンバスサイズや書き出し形式を見直してください。

10. 権利表記

Sample STUDIO 本体の著作権は CheapTech LAB に帰属します。
同梱されている第三者コンポーネントは、各提供元のライセンス条件に従います。
© 2026 CheapTech LAB

11. CHANGELOG

SampleSTUDIO CHANGELOG
======================

[1.0.0] - 初回リリース
----------------------
### 追加
- ローカルHTML実行に対応
- 複数画像の読み込みに対応
- 画像リストのサムネイル表示に対応
- ドラッグによる画像順の並び替えに対応
- DOMベースのグリッドプレビューに対応
- 列数、余白、間隔、角丸の設定に対応
- フィット / カバーと画像位置指定に対応
- ヘッダー、フッター、SAMPLE透かしに対応
- 背景色と透過背景に対応
- PNG / JPEG / WebP書き出しに対応
- 作業JSONの保存・読み込みに対応（製品版）
- 設定のローカルストレージ保存に対応
- 進行状況表示に対応
- ズームとパンに対応

12. THIRD-PARTY-NOTICES

Sample STUDIOには、以下の第三者コンポーネントが含まれています。各コンポーネントは、それぞれのライセンス条件に従って利用されています。

SampleSTUDIO Third-Party Notices
================================

This software includes third-party libraries, fonts, and icon fonts.
Each component is distributed under its own license or terms.

1. destyle.css
--------------
Version: 4.0.1
License: MIT License
Project: https://github.com/nicolas-cusan/destyle.css

Copyright (c) Nicolas Cusan

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

2. M PLUS Rounded 1c
-------------------
Resource: Web font
Provider: Google Fonts / M+ FONTS Project
License: SIL Open Font License 1.1
Google Fonts page: https://fonts.google.com/specimen/M+PLUS+Rounded+1c
License: https://openfontlicense.org/

3. Open Sans
------------
Resource: Web font
Provider: Google LLC
License: SIL Open Font License 1.1
Notes: Distributed under the SIL Open Font License 1.1, which permits bundling and redistribution in commercial products.

4. Material Symbols
-------------------
Resource: Icon font
Provider: Google Fonts / Google Material Design Icons
License: Apache License 2.0
Guide: https://developers.google.com/fonts/docs/material_symbols
License: https://www.apache.org/licenses/LICENSE-2.0

Notes
-----
- Fonts and icon fonts are bundled locally in this product.
- No Google Fonts CDN request is required for normal use.
- All rights and licenses remain with their respective authors and providers.
- Please refer to each project or provider for the original source, latest license information, and applicable terms.