📖 目次
1. クイックスタート（OBS連携 3ステップ）
obsPaint を使用して OBS Studio の配信画面上に描画を表示させるための初期設定手順です。
OBS Studio で「仮想カメラ」を開始する
OBS Studio を起動し、画面右下にある「コントロール」パネルから「仮想カメラ開始」をクリックしてオンにします。
obsPaint を起動し、仮想カメラを接続する
ダウンロードした ZIP ファイルを展開し、フォルダ内の obsPaint.exe をダブルクリックして起動します。
起動時の待機画面で、カメラデバイス一覧から「OBS Virtual Camera」を選択し、「OBS仮想カメラを接続してプレビュー開始」ボタンをクリックします。
OBS Studio にオーバーレイ用「ブラウザ」ソースを追加する
obsPaint 画面右上の「歯車アイコン（設定）」をクリックし、「OBS Studio ブラウザソースURL」欄にある「コピー」ボタンをクリックします。
次に、OBS Studio の「ソース」パネルで +（追加）をクリックし、「ブラウザ」を選択します。
プロパティ設定で以下のように入力します：
コピーしたURL（例: http://localhost:3001/overlay）1920108060 (チェック推奨)チェックを外す (推奨)設定後、ブラウザソースをシーンの最前面（一番上）に配置してください。
2. 各描画ツールの使い方 & スタイル設定
obsPaint は、ペン・図形・スタンプなどの各ツールに対し、共通の「3大スタイル」や「2色カラーシステム」を自在に組み合わせることができます。
3大描画スタイル（通常 / ネオン / グラデ）
全ツール共通でスタイルをワンクリック切替可能：
・通常 (Solid): シャープでくっきりとした基本描画。
・ネオン発光 (Neon / N): ガウスブラー拡散と主色オーラ・副色光芯によるバイカラー発光。太い線でも縞模様にならず、ネオン管やライトセーバーのような極上の光を放ちます。
・2色グラデーション (Grad / G): 主色から副色へ滑らかに移り変わる表現。
2色カラーシステム & ワンクリック反転 (X)
主色（メイン色）と副色（2色目 / 縁色 / グラデ色 / ネオン芯光）をパレットから個別に選択できます。X キーを押すだけで2色を一瞬で入れ替え可能。10色プリセットに加え、カラーピッカーで任意の色コードも指定できます。
不透明度 (Opacity) 調整 & 蛍光マーカー表現
10%〜100% のスライダーで透明度を自由に変更可能。半透明にして文字や注目箇所の上から重ね塗りすることで、従来の蛍光ペンのようなハイライターとしても自在に活用できます。
フリーハンドペン (ショートカット: P)
滑らかな筆圧・ベジェ曲線補間による手書きペンです。ペンを離した終端も綺麗な真円キャップで丸く描画されます。画面右上の設定から「外周縁取り（アウトライン）」のON/OFF、縁色・縁幅の調整が可能です。
ストローク消しゴム (ショートカット: E)
触れた線・図形・スタンプ・テキストを1画・1要素単位で瞬時に丸ごと消去します。線を擦る必要がなく触れるだけでサッと消せるため配信テンポを崩しません。消し残しゴミもゼロで、Ctrl+Z で元の色・グラデのまま100%完璧に元に戻せます。
図形描画（直線 / 矢印 / 四角 / 円）
直線（D）、先端はみ出し防止ヘッド付き矢印（A）、四角形（R）、円・楕円（C または O）を描画可能。四角や円は「半透明塗りつぶし」に対応し、ネオン発光やグラデーションもそのまま適用されます。
テキスト入力 (ショートカット: T)
画面をクリックして文字入力欄を表示し、キーボードから直接文字を書き込めます。日本語IME変換対応。設定からフォント（Noto Sans JP、メイリオ、Outfit等）や縁取り色・縁幅をカスタマイズ可能です。
スタンプ・絵文字・SVG自動着色 (S)
記号バッジ（✔, ✖, !, 矢印, ①②③など。丸数字も潰れずクリア）やカラー絵文字を配置可能。
さらにSVGベクタースタンプ（.svg）は、ユーザーが選んだ主色・グラデーションへの瞬時自動着色、外周縁取り、バイカラーネオン発光に完全対応しています。
カーソル強調・ポインター追従
配信者のマウスカーソル位置に発光リング（サイズ調整可能）またはカスタム画像（指差しアイコンなど）を追従表示し、視聴者にマウスの位置をわかりやすく伝えます。
自動フェード消去モード (ショートカット: L)
ツールバーの時計アイコンをONにすると、ペンや図形、スタンプなどすべての描画が指定秒数（1秒・2秒・3秒・5秒・10秒）後に自動でふわっと消去されます。一時的な指示や注釈に最適です。
3. セーブ & ロード & 起動時自動復元
配信枠ごとの解説図や固定テンプレート、途中のメモを名前をつけて安全に保存・管理できます。
名前付きセーブ & サムネイル一覧
画面右上のセーブボタンまたは設定から、任意の名前を入力して現在の描画内容を保存できます（件数無制限）。
保存されたデータは、16:9比率の鮮明なプレビューサムネイル、描画要素数、保存日時が表示されるカード一覧に並び、視覚的に探してワンクリックで読み込めます。既存セーブへのワンクリック上書き更新にも対応しています。
「置換ロード」と「合体（マージ）ロード」
セーブデータを読み込む際、用途に合わせて2種類の復元方法を選択できます：
- 置換ロード: 現在のキャンバスをクリアし、セーブデータの内容で完全に置き換えます。別の解説図へスパッと切り替えたいときに最適です。
- 合体ロード: 現在描かれている絵を残したまま、セーブデータの内容を追加で合成します。固定の解説枠線テンプレートを読み込んでから追加で書き込みたい場合に便利です。
起動時の前回描画自動復元 & JSON入出力
アプリやPCを終了・再起動しても、直前に描いていた内容（消去されていない描画）が自動的にキャンバスへ復元されます。誤ってアプリを閉じてしまった場合でも作業が失われません（設定モーダルからON/OFF切り替え可能）。
また、セーブデータをJSONファイルとしてダウンロード保存したり、別のPCで作成したJSONファイルを読み込むエクスポート/インポート機能も備えています。
4. カスタム素材（スタンプ・ポインター）の追加方法
obsPaint では、ユーザー独自のイラストやアイコン画像を簡単に追加して、スタンプやポインターとして使用できます。
📁 フォルダ構成 (user_data/)
obsPaint/
└── user_data/
├── stamps/ ← 好きな画像を入れるだけでスタンプに追加
│ ├── sample_star.svg (★SVGは自動着色対応！)
│ ├── my_chara_stamp.png
│ └── laugh.png
└── pointers/ ← 好きな画像を入れるだけでポインターに追加
├── finger_pointer.png
└── character_hand.png簡単な追加手順
- obsPaint 画面右上の設定ボタン（歯車アイコン）をクリックします。
- 「スタンプフォルダを開く」または「ポインターフォルダを開く」ボタンをクリックすると、対象フォルダがエクスプローラーで開きます。
- 使用したい画像ファイル（透過PNG、SVG、JPG、WEBP、GIF等）をフォルダ内にコピーします。
- 設定画面の「🔄 スタンプ・ポインター画像を再読み込み」ボタンをクリックすると、アプリを再起動することなく即座に一覧へ反映されます。
stamps/ フォルダに単色の .svg ファイルを配置すると、アプリ内で自動認識され、選択中の主色・グラデーション・アウトライン・ネオン発光が自動適用される高機能スタンプとして利用できます。 🎨 同梱サンプル素材と利用について
本ツールには作者（rit）制作のスタンプ画像およびポインター画像が初期同梱されています。個人の配信や動画制作、収益化配信での映り込み利用は完全フリーです（素材データ単体の二次配布・販売は禁止されています）。
5. キーボードショートカット一覧
配信中も左手キーボードで素早くツールを切り替えられるよう、直感的なショートカットが割り当てられています。
6. サブモニター活用テクニック
🖥️ サブモニターでの「配信モニター兼お絵かきボード」運用
obsPaint をサブモニター（1920×1080）に配置し、F11 キーでフルスクリーン表示にすることで、配信全体のプレビューモニターとして画面を確認しながら、必要なときにペンタブやマウスですぐに書き込める専用お絵かき端末として便利に活用できます。
7. よくある質問 (Q&A) & トラブルシューティング
Q. OBSの画面に描いた線が表示されません
以下をご確認ください：
- ポート番号の一致: obsPaint 画面右上の歯車アイコン（設定）を開き、「OBS Studio ブラウザソースURL」の「コピー」ボタンからコピーしたURLを OBS のブラウザソースに貼り付けているかご確認ください（ポートの空き状況により 3001 から 3002 等に変更される場合があります）。
- アプリの起動状態: obsPaint アプリが起動しているかご確認ください（内蔵WebSocket同期サーバーが動作している必要があります）。
- ソースの重なり順: OBS のソース一覧で、追加したブラウザソースがシーンの最前面（一番上）に配置されているかご確認ください。
Q. 初回起動時にWindowsファイアウォールの確認画面が出ました
obsPaint に内蔵された軽量同期サーバーが、同一PC上の OBS Studio（ブラウザソース）からのオーバーレイ通信を受け付けるためにポートを使用します。「アクセスを許可」を選択してください。
Q. カメラ一覧に「OBS Virtual Camera」が出てきません
OBS Studio 側で「仮想カメラ開始」がONになっているか確認してください。起動後に仮想カメラを開始した場合は、obsPaint 側の「一覧更新」ボタンを押すと最新のデバイス一覧が再取得されます。
Q. 描いた線が2重に見える（ゴースト現象）ことがあります
OBSの最終出力画面を仮想カメラとして取り込んでいる場合、手元で描いた線とカメラ映像として戻ってきた線が重なる現象です。
obsPaint は標準で「2重描画防止（Feedback Sync）」が有効になっており、ペンを離して描画が確定した瞬間に手元Canvasの線を透明化してカメラ映像で表示するため、通常は1重で綺麗に表示されます。設定画面で「2重描画防止」がONになっていることをご確認ください。
Q. 設定や追加したスタンプ画像、セーブデータはどこに保存されますか？
すべて obsPaint.exe と同じフォルダ内にある user_data/ フォルダに保存されます。フォルダごと別のPCにコピーしたりバックアップを取るだけで、設定やセーブデータをそのまま引き継ぐことができます。
Q. 商用利用や収益化配信で使っても大丈夫ですか？
はい、個人・法人問わず、YouTubeの収益化配信やTwitchのサブスク・ビッツ、企業案件配信等でも完全無料でご自由にお使いいただけます。クレジット表記も任意です。