パネル開けツール 操作マニュアル 最終更新: 2026-06-10
初めて使う方は、本番配信の前に一度テストでパネルを作成 → 開封まで通しで試してみてください。

1. 全体の流れ

パネル開けツールは単一画面で完結する Web ツールです。以下の順序で操作します。

用語について

本マニュアルでは、画面中央の描画領域を「キャンバス」と呼びます。イラストの読み込み・境界線の描画・パネルの操作はすべてこのキャンバス上で行います。

ステップ やること 使うモード / 機能
1対象画像（一枚絵 / 透過素材）を読み込むイラスト読み込み
2境界線を描いてパネル領域を作る描画モード
3領域を抽出してパネルを生成する「領域抽出」ボタン
4パネルの設定（ラベル・必要回数など）を調整するパネル一覧テーブル
5ラベルの位置やスタイルを調整するラベル編集モード
6パネルをタップして開封していくパネル操作モード
※配信画面（OBS）や視聴者のブラウザでリアルタイムに開封を見せたい場合は配信URLを発行配信で公開（OBS・ライブ）
PC では 2 カラムレイアウト（左: キャンバス / 右: 設定パネル）、スマホでは下部ツールバー付きの 1 カラムで表示されます。

2. 画像読み込みと公開対象

2-1. 公開対象の選択

「イラスト読み込み」カードの「公開対象」トグルで、パネルで隠す対象の種類を選びます。

公開対象 説明
一枚絵（既定）通常の画像。境界線で区切ってパネル化します
透過素材背景透過の画像（立ち絵・SDキャラ・ロゴなど）。絵の輪郭でパネル化でき、背面に別の背景も敷けます（詳細は 3. 透過素材モード）
透過つきの画像（背景が透明な PNG など）を一枚絵モードのまま読み込むと、「透過素材モードがおすすめ」という案内が表示されます。公開対象が勝手に切り替わることはありません。案内のボタンでワンクリック切替できます。

2-2. イラストの読み込み手順

  1. 「対象画像」の「画像を選ぶ」をクリック
  2. パネルの下地にしたい画像を選択
  3. キャンバスに画像が表示される
画像はキャンバスサイズに合わせてリサイズされます。高精細な仕上がりにしたい場合は、大きめの画像を用意してください。

3. 透過素材モード

公開対象を「透過素材」にすると、背景透過の画像（立ち絵・SDキャラ・ロゴなど）を絵の輪郭どおりにパネル化できます。素材は複数並べられ、背面に別の背景画像を敷くこともできます。

3-1. 素材の読み込み

  1. 公開対象で「透過素材」を選択（透過つき画像を読み込むと切替を提案する案内も出ます）
  2. 「対象画像」の「素材を追加」をクリックし、背景透過の PNG などを選択
  3. 複数ファイルの同時選択や追加読み込みで、素材を何枚でも並べられます（立ち絵＋SDキャラの同時公開など）
読み込んだ素材は「素材1」「素材2」…のチップで一覧表示されます。チップをクリックで選択、「×」でその素材だけを削除できます。

3-2. 背景画像（任意）

「背景画像」の「背景を選ぶ」で、素材の後ろに敷く背景を読み込めます。キャンバスのサイズは背景画像に合わせて確保され、素材はその上に配置されます。「背景クリア」で背景だけを外せます。

3-3. 素材の配置（移動・リサイズ）

  1. 描画モードにする（透過素材モード中は配置ハンドルが常に表示されます）
  2. 素材の中央ハンドルをドラッグして移動（掴んだ素材が選択されます）
  3. 選択中の素材の四隅ハンドルをドラッグしてリサイズ

3-4. 素材での分割線のコツ

  • 分割線は素材を横切るだけで OK。外枠とつながっていなくても、絵の輪郭で閉じてパネルになります
  • 透明な部分はパネルになりません（絵の形どおりにパネルが生成されます）
パネル色モードの「モザイク」と組み合わせると、開封前の絵柄をモザイクで隠したまま見せられます。設定は 5-3. パネル色設定を参照してください。

4. 描画モード

モード切替で「描画モード」を選択し、キャンバス上に境界線を描きます。

4-1. 描画ツール一覧

アイコン ツール名 操作方法
━直線ドラッグで直線を引く
✏フリーハンド自由に線を描く
◯楕円ドラッグで楕円を描く
♡ハートドラッグでハート型を描く
☆星ドラッグで星型を描く
↶一つ戻す直前の描画を取り消す
🖐移動・回転描いたプリセット図形を選択して移動 / 拡大縮小 / 回転

4-2. 描画の手順

  1. 描画モードになっていることを確認
  2. 使いたいツール（直線 / フリーハンド / プリセット図形）を選択
  3. キャンバス上でドラッグして境界線を描く
  4. プリセット図形の位置を調整したい場合は「🖐（移動・回転）」を選択し、図形をドラッグで操作
  5. 間違えたら「↶（一つ戻す）」で取り消し
コツ: イラスト全体を囲む外枠は最初から用意されています。内部を区切る境界線を描いていきましょう。境界線が閉じていない（隙間がある）と、意図しない領域が生成される場合があります。

4-3. パネルクリア

「パネルクリア」をクリックすると、描画した線とパネルがすべて削除されます。背景画像は保持されます。

5. 線とラベルのスタイル

右カラム（スマホではキャンバス下部）で線やラベルの見た目を変更できます。変更はすでに描画済みの線やラベルにもリアルタイムに反映されます。

5-1. 線スタイル

設定項目 説明
線の色カラーピッカーで境界線の色を変更
線の太さスライダーで 1px – 12px に調整
線種実線 / 破線 / 点線 から選択。破線・点線でも領域抽出は実線として扱われるので、隙間から色が漏れることはありません

5-2. ラベルスタイル

設定項目 説明
ラベルの色カラーピッカーでラベル文字色を変更
ラベルのフォント丸ゴ（デフォルト）/ Yomogi（手書き）/ Yu Gothic / Noto Sans から選択
フォントの太さスライダーで調整
フチの太さスライダーでフチ幅を調整 + 「黒フチ」チェックで ON/OFF

5-3. パネル色設定

設定項目 説明
パネル色モード「ランダムパステル」「単色」「モザイク」から選択
単色カラー単色モード選択時にカラーピッカーで色を指定
モザイク粗さモザイクモード選択時にスライダーでブロックの粗さを調整（大きいほど粗い）

モザイクについて

  • モザイク: 開封前のパネルを、対象画像をモザイク化した状態で隠します。なんとなく雰囲気は見せつつ正体は隠せます
  • 対象画像を読み込んでいるときに有効で、透過素材モード（絵の輪郭のパネル）とも組み合わせられます
  • 透過素材モードで「単色」（黒など）を選ぶと、いわゆるシルエット公開になります。

6. 領域抽出とパネル設定

6-1. 領域抽出

  1. 描画モードで境界線を描き終えた状態で「領域抽出」をクリック
  2. 境界線で区切られた領域が自動検出され、パネルとして生成される
  3. 各パネルにはランダムなパステルカラー（または設定した単色）が塗られる
再度「領域抽出」を押すと、パネル設定（ラベル・必要回数など）はリセットされます。設定を済ませた後は誤って押さないようご注意ください。

6-2. パネル一覧テーブル

領域抽出後、右カラムに各パネルの設定テーブルが表示されます。

列 説明
ラベルパネル上に表示されるテキスト（自由に編集可能）
画像パネルに重ねて表示する画像を設定
増加量1 タップあたりのカウント増加量（デフォルト: 1）
必要回数パネルが開封されるまでに必要なタップ回数
カウント現在のタップカウント（手動で変更可能）
ラベル名は配信で視聴者に見えるテキストです。用途に応じて変更してください。

7. ラベル編集モード

  1. モード切替で「ラベル編集モード」を選択
  2. キャンバス上のラベルをクリックして選択
  3. ドラッグで位置を移動
  4. ハンドルでリサイズ・回転が可能
ラベルのフォント・色・フチなどは5. 線とラベルのスタイルセクションで一括変更できます。

8. パネル操作モード（本番）

配信やイベントで実際にパネルを開封していくモードです。

8-1. 基本操作

  1. モード切替で「パネル操作モード」を選択
  2. 開封したいパネルをタップ / クリック
  3. タップごとにカウントが増加
  4. 必要回数に達するとパネルが開封され、下のイラストが見えるようになる

8-2. 配信での使い方の例

  1. あらかじめ描画モードでパネルを作成・設定しておく
  2. 配信中に「パネル操作モード」に切り替える
  3. 視聴者のコメント等に応じてパネルをタップして開封
  4. 必要に応じて「現状を画像保存」/「現状をコピー」で途中経過や結果を記録
開封の様子を配信画面や視聴者のブラウザにリアルタイムで見せたい場合は 10. 配信で公開（OBS・ライブ）を参照してください。

9. 画像保存 / コピー

キャンバス下部のボタンで現在の状態を出力できます。

ボタン 説明
現状を画像保存キャンバスの現在の状態を PNG ファイルとしてダウンロード
現状をコピーキャンバスの現在の状態をクリップボードにコピー
ブラウザによってはクリップボードへのコピーが制限される場合があります。その場合は「現状を画像保存」で PNG ダウンロードをご利用ください。

10. 配信で公開（OBS・ライブ）

作成したパネルを OBS のブラウザソースとして配信画面に出し、エディタやスマホからの操作でリアルタイムに開封できます。透過素材モードなら背景透過のオーバーレイとして、配信シーンの上にキャラと仕切り線だけを重ねられます。OBS が使えない配信向けに、視聴者がブラウザで見られるライブ URL も同時に発行されます。

10-1. 配信URLの発行

  1. パネルの作成・設定（領域抽出まで）を済ませる
  2. キャンバス下の「配信で公開」をクリック
  3. 「配信URLを発行」を押すと、「OBS ブラウザソース用」「視聴者用ライブ」「手元コントロール用」の3つの URL が発行される
発行後にパネルを作り直した（再抽出した）場合は、もう一度発行してください（URL は新しくなります）。配信URLは最終操作から14日で失効します。

10-2. OBS への設定

  1. OBS で「ソース → 追加 → ブラウザ」を選択
  2. 発行された OBS URL を「URL」欄に貼り付け
  3. 幅・高さをダイアログに表示されるキャンバスサイズ（またはその等倍比率）に合わせる
オプション 説明
透過透過素材モードで発行すると既定で ON。背景を含めず、キャラと仕切り線だけが配信シーンに重なります。OFF にすると背景込みで表示
仕切り線を輪郭の外まで表示透過 ON のとき選択可。通常は絵の輪郭でカットされる仕切り線を、描いた長さのまま表示します

10-3. 手元コントロール

手元コントロール URL をスマホで開く（QR コードを読み取る）と、パネルごとの＋／−ボタンでカウントを操作できます。変更は OBS とエディタの両方へ即時反映されます。

配信中は PC が OBS やゲームで塞がっていることが多いもの。手元コントロールならエディタの画面を開いたままにする必要がなく、スマホだけでパネルをめくれます。

手元コントロール URL には操作用の鍵が含まれます。視聴者や配信画面に絶対に公開しないでください（OBS 用 URL は公開されても操作はできません）。

10-4. 視聴者用ライブ URL

視聴者がブラウザで開くと、開封の様子をリアルタイムで見られるページです。上部に開封数のプログレスバーが表示されます。操作はできない URL なので、コメント欄や概要欄で配って問題ありません。

IRIAM など OBS のような画面合成ができない配信アプリでは、この URL を視聴者に共有する方式が便利です。配信画面に出せなくても、視聴者は手元のブラウザでリアルタイムに開封を追えます。

10-5. ライブ同期

  • 発行後、エディタの「パネル操作モード」でのタップがそのまま OBS に反映されます
  • パネル一覧テーブルでのカウント・必要回数・ラベルの変更も同期されます
  • ダイアログの「このエディタの操作をライブ同期する」を OFF にすると、一時的に同期を止められます

11. セーブ / ロード

現在の線・パネル設定・画像（対象画像・背景画像）の状態をまとめて保存・復元できます。素材の配置や公開対象の設定も含まれます。

ボタン 説明
セーブ現在の状態を JSON ファイルとしてダウンロード
ロード保存した JSON ファイルを読み込んで状態を復元
配信前にセーブしておくと、トラブル時に素早く復旧できます。こまめなセーブを推奨します。

12. スマホでの操作

スマホでは画面下部に固定ツールバーが表示されます。

ボタン 説明
描画描画モードに切替
ラベル画像ラベル編集モードに切替
パネルパネル操作モードに切替
戻す直前の描画を取り消し
抽出領域抽出を実行
スマホでは設定パネル（線のスタイル・パネル一覧など）はキャンバスの下にスクロールして表示されます。

13. 配信前 最終チェック

  • 対象画像（一枚絵 / 透過素材）を読み込み済み
  • （透過素材モード）背景画像・素材の配置を調整済み
  • 境界線を描き終え、領域抽出済み
  • 各パネルのラベル名を設定済み
  • 必要回数・増加量が意図通り
  • パネル色やラベルスタイルを調整済み
  • テストで数パネル開封して表示を確認済み
  • （OBS配信の場合）配信URLを発行し、OBS のブラウザソースで表示・同期を確認済み
  • セーブで状態を保存済み
配信中の事故防止のため、必ず事前にテストでパネル開封まで通しで確認してください。

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

14-1. 領域がうまく抽出されない

  • 境界線が閉じていない（隙間がある）可能性があります。線を太くするか、隙間を埋めてから再抽出してください
  • 一枚絵モードでは、線がキャンバスの端（外枠）まで届いているか確認してください
  • 透過素材モードでは、分割線が素材を横切っていれば外枠に届いていなくても OK です

14-2. パネルをタップしても反応しない

  • 「パネル操作モード」になっているか確認してください
  • 描画モードやラベル編集モードではタップしてもカウントされません

14-3. ラベルが見えない / 小さい

  • ラベルの色が背景と同化していないか確認してください
  • フォントの太さやフチの太さを調整すると視認性が向上します
  • ラベル編集モードでラベルをリサイズして大きくできます

14-4. 画像が保存 / コピーできない

  • ブラウザによってはクリップボードへのコピーが制限されます。「現状を画像保存」で PNG ダウンロードをお試しください

14-5. セーブデータが読み込めない

  • ファイルが正しい JSON 形式か確認してください
  • 別のツールで出力した JSON は互換性がない場合があります

14-6. 素材が絵の輪郭でパネル化されない

  • 公開対象が「透過素材」になっているか確認してください
  • 画像に透過があるか確認してください。JPG は透過情報を持てないため、背景が透明な PNG を使用してください
  • 分割線が素材（透明でない部分）を横切っているか確認してください

14-7. OBS・ライブページに表示されない / 同期しない

  • 配信URLは最終操作から14日で失効します。「セッションが見つかりません」と出る場合は再発行してください
  • 発行後にパネルを作り直した場合、古い URL には反映されません。再発行して OBS の URL を貼り替えてください
  • エディタの操作が反映されない場合は、発行ダイアログの「このエディタの操作をライブ同期する」が ON か確認してください
  • OBS 側で表示が止まった場合は、ブラウザソースのプロパティで「現在のページを再読み込み」を試してください

15. 支援のお願い（任意）

このツールが配信のお供になったり、ちょっと役に立ったら、HydeyTools の Booth ページから「金額を上乗せして応援（BOOST）」でご支援いただけるとうれしいです。

ツール本体は今後もずっと無料で提供を続けます。サーバ運用・新機能開発のはげみになります。

🔗 https://hydeytools.booth.pm/items/8429098

※ ダウンロード自体は ¥0 で可能です。BOOST はあくまで任意の応援機能です。

16. お問い合わせ

不具合のご報告・ご質問は以下までお願いします。

※ 個人運用のため、返信が遅くなる場合があります。あらかじめご了承ください。

不具合報告テンプレート

以下の項目のうち分かるものだけでもご記入いただけると助かります。

・発生した内容：
・発生手順：
・利用環境（PC/スマホ・ブラウザ）：
・スクショ or 動画（あれば）：
© HydeyTools — パネル開けツール 操作マニュアル