obsPaint 使い方・詳細ガイド

OBS Studio 連携から各ツールの詳細機能・カスタマイズ方法まで徹底解説

1. クイックスタート(OBS連携 3ステップ)

obsPaint を使用して OBS Studio の配信画面上に描画を表示させるための初期設定手順です。

Step 1

OBS Studio で「仮想カメラ」を開始する

OBS Studio を起動し、画面右下にある「コントロール」パネルから「仮想カメラ開始」をクリックしてオンにします。

💡 Point: obsPaint はこの仮想カメラ映像を背景プレビューとして取り込みます。OBSに現在映っている最終出力画面を見ながら直接描き込むことができます。
Step 2

obsPaint を起動し、仮想カメラを接続する

ダウンロードしたフォルダ内の obsPaint.exe を起動します。

起動時の待機画面で、カメラデバイス一覧から「OBS Virtual Camera」を選択し、「OBS仮想カメラを接続してプレビュー開始」ボタンをクリックします。

🔒 プライバシー安全設計: obsPaint は、起動時に勝手にカメラ映像を開くことはありません。配信者が意図しないプライベートなWebカメラ映像が不意に映ってしまう事故を防ぐため、必ずユーザーが明示的に選択・接続ボタンを押すまでカメラは起動しない設計になっています。
Step 3

OBS Studio にオーバーレイ用「ブラウザ」ソースを追加する

OBS Studio の「ソース」パネルで +(追加)をクリックし、「ブラウザ」を選択します。

プロパティ設定で以下のように入力します:

URL: http://localhost:3001/overlay
幅 (Width): 1920
高さ (Height): 1080
カスタムフレームレート: 60 (チェック推奨)
表示されていないときにソースをシャットダウン: チェックを外す (推奨)

設定後、ブラウザソースをシーンの最前面(一番上)に配置してください。

🎉 完了: これで連携完了です!obsPaint の画面上でペンやスタンプを描画すると、OBSの画面上に瞬時(1〜5ms)にリアルタイム反映されます。

2. 各描画ツールの使い方 & 設定

ツールバーから各ツールを選択するか、対応するショートカットキーを押して切り替えます。

🖌️

フリーハンドペン (ショートカット: P)

滑らかな筆圧・ベジェ曲線補間による手書きペンです。画面右上の設定から「外周縁取り(アウトライン)」をONにすると、黒などのフチが付き、どんな背景色の上でもくっきりと文字や線が際立ちます。

🖍️

蛍光マーカー (ショートカット: H)

半透明の乗算ブレンドで描画されるハイライターです。配信画面上の文字や注釈、重要なステータス部分の上から重ねて塗ることで、文字を隠さずに強調できます。

レーザーポインター (ショートカット: L)

描いた軌跡が指定秒数(デフォルト約1.2秒)で自然にふわっと消滅するポインター機能です。「ここを見て!」と一時的に注目させたいときに、画面を汚さずに指し示すことができます。

⏱️

自動フェード消去モード

ツールバーの時計アイコンをONにすると、ペンや図形、スタンプなどすべての描画が指定秒数(1秒・2秒・3秒・5秒・10秒)後に自動で消去されます。解説のたびに消去ボタンを押す手間が省けます。

📐

図形描画(直線 / 矢印 / 四角 / 円)

ドラッグ&ドロップで綺麗な幾何学図形を描画できます。矢印(A)は先端のはみ出し防止処理が施されており、四角形(R)や円(O)は注目エリアの囲み強調に最適です。

🔤

テキスト入力 (ショートカット: T)

画面をクリックすると文字入力欄が表示され、日本語IME変換にも完全対応しています。設定からフォントファミリー(Noto Sans JP、メイリオ、Outfit等)や縁取りの調整が可能です。

🎯

スタンプ・絵文字 (ショートカット: S)

✔、✖、!、?、矢印、①②③などの記号バッジや、🔥、✨、🎯、💡などのカラー絵文字を画面にポンと配置できます。サイズ変更にも対応しています。

💫

カーソル強調・ポインター追従

配信者のマウスカーソル位置に発光リング(サイズ調整可能)またはカスタム画像(指差しアイコンなど)を追従表示し、視聴者にマウスの位置をわかりやすく伝えます。

3. カスタム画像(スタンプ・ポインター)の追加方法

obsPaint では、ユーザー独自のイラストやアイコン画像を簡単に追加して、スタンプやポインターとして使用できます。

📁 フォルダ構成 (`user_data/`)

obsPaint/
└── user_data/
    ├── stamps/      ← 好きな画像をここに入れるだけでスタンプに追加
    │   ├── my_chara_stamp.png
    │   └── laugh.png
    └── pointers/    ← 好きな画像をここに入れるだけでポインターに追加
        ├── finger_pointer.png
        └── character_hand.png

簡単な追加手順

  1. obsPaint 画面右上の設定ボタン(歯車アイコン)をクリックします。
  2. 「スタンプフォルダを開く」または「ポインターフォルダを開く」ボタンをクリックすると、対象フォルダがエクスプローラーで開きます。
  3. 使用したい画像ファイル(透過PNG推奨、JPG、SVG、WEBP、GIF等対応)をフォルダ内にコピーします。
  4. アプリ側で自動的に読み込まれ、スタンプ一覧やポインター選択欄に即座に表示されます。

4. キーボードショートカット一覧

配信中も片手で素早くツールを切り替えられるよう、直感的なショートカットが割り当てられています。

Pフリーハンドペン
H蛍光ペン (マーカー)
Lレーザーポインター
E消しゴム
A矢印ツール
R四角形 (Rect)
O / C円・楕円 (Circle)
Tテキスト入力
Sスタンプピッカー
Ctrl + Z元に戻す (Undo)
Ctrl + Yやり直し (Redo)
Delete / BS描画を一括全消去
F11フルスクリーン切り替え

5. サブモニター活用テクニック

🖥️ サブモニターでの「配信モニター兼お絵かきボード」運用

obsPaint をサブモニター(1920×1080)に配置し、F11 キーでフルスクリーン表示にすることで、配信全体のプレビューモニターとして画面を確認しながら、必要なときにペンタブやマウスですぐに書き込める専用お絵かき端末として便利に活用できます。

6. よくある質問 (Q&A) & トラブルシューティング

Q. OBSの画面に描いた線が表示されません

以下をご確認ください:

  • OBS側のブラウザソースURLが http://localhost:3001/overlay に正しく設定されているか。
  • obsPaint アプリが起動しているか(内蔵WebSocketサーバーが動作している必要があります)。
  • OBSのブラウザソースがシーンの最前面(一番上)に配置されているか。

Q. カメラ一覧に「OBS Virtual Camera」が出てきません

OBS Studio 側で「仮想カメラ開始」がONになっているか確認してください。起動後に仮想カメラを開始した場合は、obsPaint 側の「一覧更新」ボタンを押すと最新のデバイス一覧が再取得されます。

Q. 描いた線が2重に見える(ゴースト現象)ことがあります

OBSの最終出力画面を仮想カメラとして取り込んでいる場合、手元で描いた線とカメラ映像として戻ってきた線が重なる現象です。
obsPaint は標準で「2重描画防止(Feedback Sync)」が有効になっており、ペンを離して描画が確定した瞬間に手元Canvasの線を透明化してカメラ映像で表示するため、通常は1重で綺麗に表示されます。設定画面で「2重描画防止」がONになっていることをご確認ください。

Q. 商用利用や収益化配信で使っても大丈夫ですか?

はい、個人・法人問わず、YouTubeの収益化配信やTwitchのサブスク・ビッツ、企業案件配信等でも完全無料でご自由にお使いいただけます。クレジット表記も任意です。