CheapTech LAB

初めにお読みください

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

Demo版で使用できる機能

  • 画像の読み込み（3枚まで）
  • 長方形 / 円形モザイク範囲の作成・移動・リサイズ・削除
  • モザイク強度設定、規約チェック、ステータス管理
  • ズーム・パン操作
  • 個別PNG書き出し、一括ZIP書き出し（ウォーターマーク入り）

Demo版で使用できない機能

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

Demo版の制限

  • 画像の読み込みは3枚まで（製品版は20枚）
  • 書き出したPNGにはウォーターマークが入ります
  • 一括ZIP内のPNGにもウォーターマークが入ります

Mosaic STUDIO は、複数の画像にモザイク範囲を設定し、個別PNGまたは一括ZIPとして書き出すためのローカル実行型ツールです。
画像をブラウザ上で読み込み、長方形・円形のモザイク範囲を作成し、ステータス確認、規約チェック、ウォーターマーク入り書き出しを体験できます。

本ソフトはブラウザ上で動作するHTMLツールです。インストール、ログイン、外部サーバーへのアップロードは不要です。

目次

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

1. 基本情報

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

2. 起動方法

  1. 配布ZIPファイルを任意のフォルダに解凍します。
  2. MosaicSTUDIO.html を Google Chrome で開きます。
  3. アルバム画面に画像を追加して作業を開始します。

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

3. ファイル構成

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

4. 主な機能

4.1 アルバム管理

  • 複数画像の読み込み
  • サムネイル一覧表示
  • 画像の追加・削除
  • ステータス表示（未確認 / 確認済み / 要修正）
  • ステータスフィルタ
  • 画像登録上限：3枚（Demo版）

4.2 モザイク編集

  • 長方形モザイク範囲の作成
  • 円形モザイク範囲の作成
  • 作成済み範囲の移動・リサイズ・削除
  • 前後画像への切り替え
  • 選択中範囲のDelete / Backspaceキー削除
  • Escapeキーによる編集画面・モーダルの終了

4.3 共通設定

  • モザイク強度の切り替え（自動 / 強め / カスタム）
  • カスタム強度の数値指定
  • 設定は全画像共通です

4.4 規約チェック

  • 現在画像のモザイクサイズ確認
  • 一括書き出し前の全画像チェック
  • 設定済み / 未設定 / 基準未満の件数表示
  • 基準未満の画像がある場合の警告表示

4.5 保存・読み込み・書き出し

  • 作業状態をJSONとして保存
  • 保存済みJSONから作業を再開
  • 現在画像のPNG書き出し
  • モザイク設定済み画像の一括ZIP書き出し

4.6 ズーム・パン

  • Ctrl / Cmd + ホイールでズーム
  • 倍率ボタンで表示倍率を指定（25% / 50% / 100% / 200%）
  • 「画面に合わせる」：画像全体が作業エリアに収まるよう自動調整
  • 「中央に戻す」：現在の倍率を維持したまま表示位置を中央に戻す
  • 移動ツールまたはスペースキー + ドラッグでパン

5. 基本操作

5.1 画像を追加する

  1. アルバム内の追加カードをクリックします。
  2. 画像ファイルを選択します。複数選択も可能です。
  3. または、アルバム画面へ画像ファイルをドラッグ＆ドロップします。
  4. 読み込んだ画像がサムネイル一覧に表示されます。

対応形式は、ブラウザで読み込める画像形式（JPEG / PNG / WebPなど）です。

5.2 画像を編集する

  1. アルバム内のサムネイルをクリックします。
  2. 編集画面が開き、選択画像がCanvasに表示されます。
  3. 長方形または円形ツールを選び、Canvas上をドラッグして範囲を作成します。
  4. 範囲内をドラッグすると移動できます。
  5. 四隅のハンドルをドラッグするとサイズを変更できます。
  6. 削除ツール、またはDelete / Backspaceキーで選択中の範囲を削除できます。

5.3 ステータスを設定する

  • 編集画面のステータス管理から「確認済み」「要修正」「未確認」を設定できます。
  • 設定したステータスはアルバムのサムネイルに反映されます。
  • アルバム上部のフィルタで、ステータスごとに表示を絞り込めます。

5.4 モザイク強度を変更する

  1. ナビゲーションの「設定」を開きます。
  2. 自動 / 強め / カスタムからモザイク強度を選択します。
  3. カスタムを選んだ場合は、数値入力で強度を指定できます。

モザイク強度は全画像共通です。個別画像ごとの強度設定ではありません。

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

  • Ctrl / Cmd + ホイール：ズームイン・ズームアウト
  • 倍率ボタン：25% / 50% / 100% / 200%に変更
  • 画面に合わせる：全体が見える倍率に調整
  • 中央に戻す：表示位置を中央へ戻す
  • 移動ツール：ドラッグでパン
  • スペースキー + ドラッグ：一時的にパン

6. 保存と読み込み

6.1 保存

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

製品版では、読み込んだ画像、モザイク範囲、ステータス、共通設定などをJSON内に保存できます。

6.2 開く

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

7. 書き出し

7.1 個別PNG書き出し

編集画面の「書き出し」は、現在開いている画像をPNGとして保存する機能です。
書き出し前に確認モーダルが表示され、モザイク設定の有無や規約チェック結果を確認できます。

  • 現在画像にモザイク範囲がある場合のみ書き出せます。
  • ファイル名は元ファイル名に _mosaic.png を付けた形式になります。
  • Demo版では書き出したPNGにウォーターマークが入ります。

7.2 一括ZIP書き出し

ナビゲーションの「一括書き出し」は、モザイク設定済み画像をまとめてZIPとして保存する機能です。
モザイク未設定の画像はZIPに含まれません。

  • モザイク設定済み画像が1枚以上ある場合のみ書き出せます。
  • ZIP名は mosaic-output-YYYY-MM-DD-HHMMSS.zip 形式です。
  • ZIP内のPNG名は元ファイル名に _mosaic.png を付けた形式です。
  • 同名ファイルがある場合は _2、_3 のように連番が付きます。
  • Demo版ではZIP内の各PNGにウォーターマークが入ります。

7.3 規約チェックについて

規約チェックは、モザイクサイズが基準を満たしているかを確認する補助機能です。
基準未満の画像がある場合は警告が表示されますが、書き出し対象が存在する場合は利用者の判断で書き出しできます。

本機能は審査通過を保証するものではありません。最終的な確認は利用者自身で行ってください。

8. 注意事項

8.1 ローカル動作について

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

8.2 画像データについて

  • 読み込んだ画像は外部へ送信されません。
  • 製品版の作業JSONには画像データが含まれるため、第三者へ渡す場合は内容を確認してください。
  • 大きな画像や大量の画像を使用すると、処理が重くなる場合があります。
  • Demo版では画像を最大3枚まで登録できます。

8.3 権利・利用上の注意

  • 本ツールで使用する画像・素材等については、利用者自身が必要な権利を確認してください。
  • 第三者の権利を侵害する目的での利用は避けてください。
  • 各販売サイト・公開先の規約や審査基準は、利用者自身で必ず確認してください。

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

9.1 画像が読み込めない

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

9.2 JSONを保存・読み込みできない

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

9.3 PNGを書き出せない

  • 現在画像にモザイク範囲が設定されているか確認してください。
  • ブラウザのダウンロード許可設定を確認してください。
  • 非常に大きな画像の場合は、処理に時間がかかる場合があります。

9.4 ZIPを書き出せない

  • 少なくとも1枚の画像にモザイク範囲が設定されているか確認してください。
  • ブラウザのダウンロード許可設定を確認してください。
  • 高解像度画像を多数処理する場合は、完了までしばらくお待ちください。

10. 権利表記

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

11. THIRD-PARTY-NOTICES

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

MosaicSTUDIO Third-Party Notices
================================

This software includes third-party code, 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

2. JSZip
--------
Version: 3.10.1
License: MIT License
Project: https://stuk.github.io/jszip/
Notes: Bundled into the application JavaScript.

3. 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/

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

5. 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, icon fonts, and bundled JavaScript code are included 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.