初めて使う方は、本番配信の前に一度テストでパネルを作成 → 開封まで通しで試してみてください。
1. 全体の流れ
パネル開けツールは単一画面で完結する Web ツールです。以下の順序で操作します。
用語について
本マニュアルでは、画面中央の描画領域を「キャンバス」と呼びます。イラストの読み込み・境界線の描画・パネルの操作はすべてこのキャンバス上で行います。
| ステップ | やること | 使うモード / 機能 |
|---|---|---|
| 1 | 背景イラストを読み込む | イラスト読み込み |
| 2 | 境界線を描いてパネル領域を作る | 描画モード |
| 3 | 領域を抽出してパネルを生成する | 「領域抽出」ボタン |
| 4 | パネルの設定（ラベル・必要回数など）を調整する | パネル一覧テーブル |
| 5 | ラベルの位置やスタイルを調整する | ラベル編集モード |
| 6 | パネルをタップして開封していく | パネル操作モード |
PC では 2 カラムレイアウト（左: キャンバス / 右: 設定パネル）、スマホでは下部ツールバー付きの 1 カラムで表示されます。
2. イラスト読み込み
- 「背景画像」の「ファイルを選択」をクリック
- パネルの下地にしたい画像を選択
- キャンバスに画像が表示される
画像はキャンバスサイズに合わせてリサイズされます。高精細な仕上がりにしたい場合は、大きめの画像を用意してください。
3. 描画モード
モード切替で「描画モード」を選択し、キャンバス上に境界線を描きます。
3-1. 描画ツール一覧
| アイコン | ツール名 | 操作方法 |
|---|---|---|
| ━ | 直線 | ドラッグで直線を引く |
| ✏ | フリーハンド | 自由に線を描く |
| ◯ | 楕円 | ドラッグで楕円を描く |
| ♡ | ハート | ドラッグでハート型を描く |
| ☆ | 星 | ドラッグで星型を描く |
| ↶ | 一つ戻す | 直前の描画を取り消す |
| 🖐 | 移動・回転 | 描いたプリセット図形を選択して移動 / 拡大縮小 / 回転 |
3-2. 描画の手順
- 描画モードになっていることを確認
- 使いたいツール（直線 / フリーハンド / プリセット図形）を選択
- キャンバス上でドラッグして境界線を描く
- プリセット図形の位置を調整したい場合は「🖐（移動・回転）」を選択し、図形をドラッグで操作
- 間違えたら「↶（一つ戻す）」で取り消し
コツ: イラスト全体を囲む外枠は最初から用意されています。内部を区切る境界線を描いていきましょう。境界線が閉じていない（隙間がある）と、意図しない領域が生成される場合があります。
3-3. パネルクリア
「パネルクリア」をクリックすると、描画した線とパネルがすべて削除されます。背景画像は保持されます。
4. 線とラベルのスタイル
右カラム（スマホではキャンバス下部）で線やラベルの見た目を変更できます。変更はすでに描画済みの線やラベルにもリアルタイムに反映されます。
4-1. 線スタイル
| 設定項目 | 説明 |
|---|---|
| 線の色 | カラーピッカーで境界線の色を変更 |
| 線の太さ | スライダーで 1px – 12px に調整 |
4-2. ラベルスタイル
| 設定項目 | 説明 |
|---|---|
| ラベルの色 | カラーピッカーでラベル文字色を変更 |
| ラベルのフォント | 丸ゴ（デフォルト）/ Yomogi（手書き）/ Yu Gothic / Noto Sans から選択 |
| フォントの太さ | スライダーで調整 |
| フチの太さ | スライダーでフチ幅を調整 + 「黒フチ」チェックで ON/OFF |
4-3. パネル色設定
| 設定項目 | 説明 |
|---|---|
| パネル色モード | 「ランダムパステル」または「単色」を選択 |
| 単色カラー | 単色モード選択時にカラーピッカーで色を指定 |
5. 領域抽出とパネル設定
5-1. 領域抽出
- 描画モードで境界線を描き終えた状態で「領域抽出」をクリック
- 境界線で区切られた領域が自動検出され、パネルとして生成される
- 各パネルにはランダムなパステルカラー（または設定した単色）が塗られる
再度「領域抽出」を押すと、パネル設定（ラベル・必要回数など）はリセットされます。設定を済ませた後は誤って押さないようご注意ください。
5-2. パネル一覧テーブル
領域抽出後、右カラムに各パネルの設定テーブルが表示されます。
| 列 | 説明 |
|---|---|
| ラベル | パネル上に表示されるテキスト（自由に編集可能） |
| 画像 | パネルに重ねて表示する画像を設定 |
| 増加量 | 1 タップあたりのカウント増加量（デフォルト: 1） |
| 必要回数 | パネルが開封されるまでに必要なタップ回数 |
| カウント | 現在のタップカウント（手動で変更可能） |
ラベル名は配信で視聴者に見えるテキストです。用途に応じて変更してください。
6. ラベル編集モード
- モード切替で「ラベル編集モード」を選択
- キャンバス上のラベルをクリックして選択
- ドラッグで位置を移動
- ハンドルでリサイズ・回転が可能
7. パネル操作モード（本番）
配信やイベントで実際にパネルを開封していくモードです。
7-1. 基本操作
- モード切替で「パネル操作モード」を選択
- 開封したいパネルをタップ / クリック
- タップごとにカウントが増加
- 必要回数に達するとパネルが開封され、下のイラストが見えるようになる
7-2. 配信での使い方の例
- あらかじめ描画モードでパネルを作成・設定しておく
- 配信中に「パネル操作モード」に切り替える
- 視聴者のコメント等に応じてパネルをタップして開封
- 必要に応じて「現状を画像保存」/「現状をコピー」で途中経過や結果を記録
8. 画像保存 / コピー
キャンバス下部のボタンで現在の状態を出力できます。
| ボタン | 説明 |
|---|---|
| 現状を画像保存 | キャンバスの現在の状態を PNG ファイルとしてダウンロード |
| 現状をコピー | キャンバスの現在の状態をクリップボードにコピー |
ブラウザによってはクリップボードへのコピーが制限される場合があります。その場合は「現状を画像保存」で PNG ダウンロードをご利用ください。
9. セーブ / ロード
現在の線・パネル設定・背景画像の状態をまとめて保存・復元できます。
| ボタン | 説明 |
|---|---|
| セーブ | 現在の状態を JSON ファイルとしてダウンロード |
| ロード | 保存した JSON ファイルを読み込んで状態を復元 |
配信前にセーブしておくと、トラブル時に素早く復旧できます。こまめなセーブを推奨します。
10. スマホでの操作
スマホでは画面下部に固定ツールバーが表示されます。
| ボタン | 説明 |
|---|---|
| 描画 | 描画モードに切替 |
| ラベル画像 | ラベル編集モードに切替 |
| パネル | パネル操作モードに切替 |
| 戻す | 直前の描画を取り消し |
| 抽出 | 領域抽出を実行 |
スマホでは設定パネル（線のスタイル・パネル一覧など）はキャンバスの下にスクロールして表示されます。
11. 配信前 最終チェック
- 背景画像を読み込み済み
- 境界線を描き終え、領域抽出済み
- 各パネルのラベル名を設定済み
- 必要回数・増加量が意図通り
- パネル色やラベルスタイルを調整済み
- テストで数パネル開封して表示を確認済み
- セーブで状態を保存済み
配信中の事故防止のため、必ず事前にテストでパネル開封まで通しで確認してください。
12. トラブルシューティング
12-1. 領域がうまく抽出されない
- 境界線が閉じていない（隙間がある）可能性があります。線を太くするか、隙間を埋めてから再抽出してください
- 背景画像の端まで線が届いているか確認してください
12-2. パネルをタップしても反応しない
- 「パネル操作モード」になっているか確認してください
- 描画モードやラベル編集モードではタップしてもカウントされません
12-3. ラベルが見えない / 小さい
- ラベルの色が背景と同化していないか確認してください
- フォントの太さやフチの太さを調整すると視認性が向上します
- ラベル編集モードでラベルをリサイズして大きくできます
12-4. 画像が保存 / コピーできない
- ブラウザによってはクリップボードへのコピーが制限されます。「現状を画像保存」で PNG ダウンロードをお試しください
12-5. セーブデータが読み込めない
- ファイルが正しい JSON 形式か確認してください
- 別のツールで出力した JSON は互換性がない場合があります
13. お問い合わせ
不具合のご報告・ご質問は以下までお願いします。
- 📧 メール: aoyama.hyde2@gmail.com
- 🐦 X（旧 Twitter）: @AoyamaHyde
※ 個人運用のため、返信が遅くなる場合があります。あらかじめご了承ください。
不具合報告テンプレート
以下の項目のうち分かるものだけでもご記入いただけると助かります。
・発生した内容： ・発生手順： ・利用環境（PC/スマホ・ブラウザ）： ・スクショ or 動画（あれば）：