【無料】みとのオーバーレイ作業室｜16スキン＋無地・文字入り透過PNG

配信の背景・装飾枠・文字を、自分の画面に合わせて編集できる無料ツールです。

■できること

・16種類のスキン＋色を選べる無地背景

・枠の追加、移動、サイズ調整、独立した見出し枠

・枠ごとの文字入力、改行、フォント、サイズ、色、配置、太字、字間調整

・スキンに合う推奨フォントの呼び出し

・OBSの余白の数値から枠のサイズと位置を計算

・背景の中央／外側のぼかしと、文字用下地の透明度調整

・背景と枠の透過PNG、選択した枠だけのPNG、SVG書き出し

・配置JSONの保存と読み込み

■はじめ方

1. ダウンロードしたZIPを右クリックして「すべて展開」します。ZIPの中から直接開かず、展開したフォルダーを使ってください。

2. フォルダー内の「はじめる.html」をブラウザで開きます。追加インストールは不要です。「Brave HTMLドキュメント」などの表示でもHTMLファイルなので問題ありません。ほかのファイルも必要なため、HTMLだけを移動しないでください。

3. 背景のスキンを選びます。無地を選ぶと背景色も変更できます。

4. 編集したい枠を選び、ドラッグで移動、右下のハンドルでサイズを調整します。「枠に表示する文字」で見出しやお知らせを入力できます。ゲーム画面を見せる枠は「透明（ゲーム・カメラ用）」を選んでください。市松模様の部分が透明になります。

5. 「背景と枠PNG（OBS用）」で画像を保存します。枠を1個だけ使いたい場合は、その枠を選んで「選択枠PNG」で保存します。

6. OBSのソース一覧で「＋」→「画像」からPNGを追加し、ゲームキャプチャなどより上に並べます。透明な枠の内側から下の映像が見えます。出力は1920×1080です。

7. 後から編集できるように「配置JSONを書き出す」でも設定を保存します。再開するときは「配置JSONを読み込む」を使います。PNGだけでは編集設定を戻せません。

編集内容はOBSへ自動反映されません。変更後はPNGを再度書き出し、OBSで使う画像を更新してください。

詳しい操作は同梱の「最初にお読みください.txt」をご覧ください。画面付きの詳しい使い方はこちら（note・無料）：

https://note.com/mito_minazuki/n/nb0b1dfedeff8

■対応・注意点

Windows／Microsoft Edgeで動作確認済み。ユーザーテストでも作成できたことを確認しています。

フォントはPCにインストールされたものを使用し、未導入の場合は代替書体になります。PNGには文字が焼き込まれます。

OBSへの自動反映・動画背景・ライブコメント受信機能はありません。

背景・装飾にはAI生成画像を使用しています。

■利用条件

個人・法人・収益化配信で利用できます。画像の加工、AIを利用したツール改造も可能です。

通常利用のクレジットは任意。名前や商品ページのリンクを添えていただけると嬉しいです。

ご自身で改変したツール・素材に限り、無料で再配布できます。事前連絡は不要ですが、配布ページと同梱の説明書などに原作者「水無月みと」と、改変版であることを明記してください。未改変のツール・素材をそのまま再配布することは許可していません。

自作発言、クレジットのない再配布、無断での有料再配布・販売は禁止します。詳細は同梱の利用規約.txtをご確認ください。

■サポート

BOOTHの「ショップへのお問い合わせ」からご連絡ください。可能な範囲で対応しますが、返信時期、すべての環境での動作、改造版への対応をお約束するものではありません。主な対応状況はこのページでお知らせします。

■更新履歴

v0.1.4 初回配布準備版：文字入力・字間・見出し枠・スキン連動フォント対応。

使い方は上記のnote記事で紹介しています。説明動画もYouTubeで公開予定です。

YouTube：https://www.youtube.com/@mito-workroom