CheapTech LAB

初めにお読みください

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

Demo版で使用できる機能

  • 人物画像の読み込み（3件まで）
  • 素材画像の読み込み（3件まで）
  • 画像レイヤー・テキストレイヤーの追加と編集
  • レイヤー操作、ズーム・パン操作
  • PNG書き出し（ウォーターマーク入り）

Demo版で使用できない機能

  • 作業JSONの保存
  • 作業JSONの読み込み
  • 設定変更

Demo版の制限

  • 人物画像は3件まで登録できます
  • 素材画像は3件まで登録できます
  • 書き出したPNGにはウォーターマークが入ります

Pakekora STUDIO は、ブラウザ上で画像とテキストをレイヤーとして配置し、パッケージ風のコラージュ画像を作成するためのローカル実行型ツールです。
Demo版では、人物画像と素材画像を分けて読み込み、キャンバス上で位置・サイズ・回転・反転・重なり順を調整し、ウォーターマーク入りPNGとして書き出す操作を体験できます。

本ソフトはブラウザ上で動作するHTMLツールです。インストール型アプリケーションではありません。

目次

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

1. 基本情報

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

2. 起動方法

  1. 配布ZIPファイルを任意のフォルダに解凍します。
  2. PakekoraSTUDIO.html を Google Chrome で開きます。
  3. 画面左側のツールから「人物」「素材」「テキスト」を選択して作業を開始します。

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

3. ファイル構成

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

4. 主な機能

4.1 画像レイヤー

  • 人物画像・素材画像の読み込み
  • キャンバス中央への自動配置
  • 移動、拡大縮小、回転
  • 左右反転、上下反転
  • フィット、カバー配置
  • 画像サイズにキャンバスを合わせる
  • 透明度調整
  • 長辺1200pxを超える画像は、読み込み時に自動縮小されます（透過PNG対応）

4.2 テキストレイヤー

  • テキスト追加
  • 本文、色、サイズ、太さの設定
  • 作成後の再編集
  • 移動、回転、透明度調整

4.3 レイヤー管理

  • レイヤー選択
  • 表示 / 非表示の切り替え
  • ドラッグによる重なり順の変更
  • レイヤー複製
  • レイヤー削除
  • Delete / Backspaceキーによる選択中レイヤー削除
  • 透明度の数値指定

4.4 ファイル操作

  • 新規作成
  • 作業JSONの保存（製品版）
  • 作業JSONの読み込み（製品版）
  • PNG画像の書き出し（Demo版はウォーターマーク入り）
  • キャンバスサイズ・背景色・透過背景・読み込み上限の設定（製品版）

4.5 素材管理

  • 人物画像と素材画像を別々に一覧管理
  • ドラッグ＆ドロップによる画像読み込み
  • 読み込み画像のサムネイル表示
  • サムネイルをクリックしてキャンバスに配置
  • 名前・サイズ・更新日・種類による並び替え
  • 一覧の表示カラム数変更
  • 人物・素材それぞれのスクロール位置を保持
  • 不要な素材の削除（使用中の素材は削除不可）
  • Demo版の登録上限は人物3件・素材3件です

4.6 ズーム・パン

  • Ctrl / Cmd + ホイールでズーム
  • インフォバーのズームボタンで倍率指定（25% / 50% / 100% / 200%）
  • 「画面に合わせる」「中央に戻す」ボタン
  • ハンドツール（移動）またはスペースキー + ドラッグでパン

4.7 テキスト影

  • テキストレイヤーに影を設定可能
  • 影色・ぼかし・X方向・Y方向を個別に指定
  • 編集画面と書き出し結果は完全一致しない場合があります

5. 基本操作

5.1 画像を追加する

  1. 左側の「人物」または「素材」ボタンを押します。
  2. 選択したカテゴリの管理画面が開きます。
  3. 追加エリアをクリックするか、画像ファイルをドラッグ＆ドロップします。
  4. 読み込んだ画像がサムネイル一覧に表示されます。
  5. サムネイルをクリックするとキャンバスに配置されます。

画像は外部サーバーには送信されません。ブラウザ内で読み込まれ、作業JSONへ保存する場合はData URL形式で埋め込まれます。

長辺1200pxを超える画像は読み込み時に自動縮小されます。

5.2 テキストを追加する

  1. 左側の「テキスト」ボタンを押します。
  2. 本文、色、サイズ、太さを設定します。
  3. 「保存」を押すとテキストレイヤーが追加されます。

5.3 レイヤーを操作する

  • キャンバス上のレイヤーをドラッグすると移動できます。
  • 画像レイヤーは、選択枠の角ハンドルをドラッグすると拡大縮小できます。
  • 選択枠上部の回転ハンドルをドラッグすると回転できます。
  • レイヤーパネル上でレイヤー行をドラッグすると重なり順を変更できます。

5.4 キーボード操作

  • 矢印キー：選択中レイヤーを1px移動
  • Shift + 矢印キー：選択中レイヤーを10px移動
  • Delete / Backspace：選択中レイヤーを削除
  • Ctrl + Z / Command + Z：元に戻す
  • Ctrl + Y または Shift + Command + Z：やり直し
  • スペースキー + ドラッグ：キャンバスをパン（移動）

5.5 素材管理を使う

  1. 左側の「人物」または「素材」ボタンを押すと、それぞれの管理画面が開きます。
  2. 追加エリアをクリックしてファイルを選択します。複数選択可能です。
  3. または、管理画面へ画像ファイルをドラッグ＆ドロップします。
  4. 読み込んだ画像はサムネイル一覧に表示されます。
  5. サムネイルをクリックするとキャンバスに配置されます。
  6. 不要な素材は削除ボタンで削除できます。使用中の素材は削除できません。

Demo版の登録上限は人物3件・素材3件です。上限に達した場合は不要な画像を削除してください。

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

  • Ctrl / Cmd + ホイール：ズームイン・ズームアウト
  • インフォバー右側のボタンで倍率を指定できます（25% / 50% / 100% / 200%）
  • 「画面に合わせる」：全体が画面に収まるよう自動調整します
  • 「中央に戻す」：表示位置を中央にリセットします
  • 左側の「移動」ツールを選択し、ドラッグでキャンバスをパンできます
  • スペースキーを押しながらドラッグでもパンできます（テキスト編集中を除く）

6. 保存と書き出し

6.1 保存

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

6.2 開く

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

6.3 書き出し

Demo版でもPNG画像を書き出せます。ただし、書き出したPNGにはウォーターマークが入ります。

7. 設定

Demo版では、ナビゲーションの「設定」を押すと製品版機能であることを知らせる警告が表示されます。
キャンバスサイズ、背景色、透過背景、読み込み上限の変更は製品版で利用できます。

7.1 プリセット

  • AVパッケージ：1200 × 1800
  • AVパッケージ小：800 × 1200
  • ゲームパッケージ：1024 × 1024
  • ゲーム高解像度：2048 × 2048
  • DVD横：1280 × 720
  • DVD横HD：1920 × 1080
  • 縦長広告：1080 × 1920
  • バナー：1024 × 768
  • バナー大：1600 × 1200
  • パッケージ素材 4:5 小：640 × 800
  • パッケージ素材 4:5 中：1080 × 1350
  • パッケージ素材 4:5 大：1694 × 2118

7.2 読み込み上限

  • Demo版では人物3件・素材3件まで登録できます。
  • 製品版では人物・素材それぞれの登録上限を設定できます。
  • 製品版では5件刻みで5件から100件まで選択できます。

8. 注意事項

8.1 ローカル動作について

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

8.2 画像データについて

  • 読み込んだ画像は外部へ送信されません。
  • 製品版の作業JSONには画像データが含まれるため、第三者へ渡す場合は内容を確認してください。
  • 大きな画像や大量のレイヤーを使用すると、処理が重くなる場合があります。
  • 長辺1200pxを超える画像は読み込み時に自動縮小されます。透過PNG画像の透過は維持されます。
  • Demo版では人物3件・素材3件まで登録できます。

8.3 権利・利用上の注意

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

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

9.1 画像が読み込めない

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

9.2 JSONが開けない

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

9.3 PNGを書き出せない

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

10. 権利表記

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

11. THIRD-PARTY-NOTICES

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

PakekoraSTUDIO 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.