クリエイティブな配信を、
もっと楽しく、もっと美しく。
Pick Up
最新のリリース作品をご紹介します。
Products
制作したツールやアセットの一覧です。
音Sync (OtoSync) 使い方ガイド
OBSで動く高度なリップシンクツールの導入から設定までの手順です。
Step 1 OBS WebSocketの設定
音Syncはマイクの音量を取得するために、OBSの「WebSocket」機能を使用します。まずはOBS側でこの機能をオンにしてください。
- OBSのメニューバーから「ツール」＞「WebSocket サーバー設定」を開きます。
- 「WebSocket サーバーを有効にする」にチェックを入れます。
- 「サーバーパスワードを表示」ボタンを押し、パスワードをコピー（またはメモ）しておきます。
Step 2 ブラウザソースの追加
ダウンロードした index.html をOBSの画面に直接ドラッグ＆ドロップするか、ソースの「＋」ボタンから「ブラウザ」を追加して「ローカルファイル」として読み込みます。
- プロパティ画面で、幅に 1200 、高さに 800 と入力してOKを押します。
ブラウザソースの入力サイズは上記の「1200×800」のままにしてください。後でOBSの画面上で自由に縮小・配置できるため、このサイズが一番設定しやすく綺麗に表示されます。
追加後、ソースを右クリックして「対話」を選ぶと、設定パネルを直接操作できるようになります。
Step 3 接続とマイクの選択
「対話」ウィンドウを開き、「接続・マイク」タブで初期設定を行います。
- パスワード： Step 1で確認したWebSocketのパスワードを入力します。
- マイクソース： 一覧から、現在OBSで使用しているマイクを選択します。（反応しない場合は 🔄 ボタンを押して再取得してください）
※パスワードを入力して「接続成功」の緑色の表示が出ればOKです。
Step 4 アバター画像の登録
「画像設定」タブから、アバターの画像をアップロードします。画像データはブラウザの内部(IndexedDB)に自動で圧縮保存されます。
アップロードする画像は、すべて「画像サイズ（解像度）」と「縦横比」を完全に同じにしてください。サイズが異なるとアニメーション時に顔が歪んだりズレたりします。
高度な設定を開くと、まばたきや半開き（高度なリップシンク）用の画像も登録できます。
Step 5 動きの自動調整（キャリブレーション）
「動きの調整」タブを開き、あなたの環境に合わせたマイク感度を設定します。
- 「🎙️ マイクを自動調整する」ボタンをクリックします。
- 画面の指示に従い、無音状態と発声状態（「あーー」と声を出す）を測定します。
- 完了すると、あなたの声に最適な「スレッショルド（反応感度）」と「ブースト」が自動で設定されます。
最後に、画面下部の「💾 変更を保存して適用」ボタンを忘れずに押してください。
Step 6 設定パネルを隠す（クロップ）と配置
設定が完了したら、「対話」ウィンドウを閉じます。OBSのプレビュー画面上には、まだ左側に設定パネルが表示されています。
キーボードの Alt キー（Macは Option キー）を押しながら、ソースの左端の赤い枠を右へドラッグして、パネル部分を切り抜いて（クロップして）ください。
パネルが見えなくなったら、あとは通常の画像と同じように、四隅の赤い四角をドラッグして好きな大きさに拡大・縮小し、画面の端など好きな位置に配置してください！
コラボ機能（複数アバターの追加）
TRPGやコラボ配信などで、別のアバターを追加で配置したい場合は以下の手順を行います。
- OBSで新しくブラウザソースを作成し、同じ
index.htmlを指定します。 - プロパティ画面の下部にある「カスタムCSS」の一番下に、専用のコード（例:
:root { --avatar-id: 2; }）を貼り付けます。
※コードは音Syncの「コラボ」タブからコピーできます。 - ソースの「対話」を開くと、新しいアバターとして個別に画像や動きを設定できるようになります。
★ 接続パスワードなどのシステム設定は、メインアバターから自動で引き継がれるため再入力は不要です！
よくある質問 (FAQ)
Q. 声を出してもアバターが動きません（メーターが反応しません） ▼
・OBS上でマイクがミュート（赤いアイコン）になっていないか。
・音Syncの「接続・マイク」タブで、正しいマイクソースが選ばれているか。
・パスワードが間違っていて「🔴 未接続」になっていないか。
マイクが一覧にない場合は、マイク一覧の横にある「🔄」ボタンを押して再取得してください。
Q. 画像を保存した後、ファイル名が「データベースの保存画像」になります。 ▼
横に「✅ 保存済み」と表示されていれば、画像データは安全に内部に保存されており、問題なく動作します。別の画像に変えたい場合のみ、新しくファイルを選択してください。
Q. アニメーションすると画像が縦に伸びたり歪んだりします。 ▼
画像編集ソフト（Photoshopやクリスタなど）で、使用するすべての画像のサイズを完全に一致させてから再度アップロードしてください。