JavaScriptなしの初期値
この初期値は対話型計算機が使う値と同じです。JavaScriptがブロックされている場合は、1行をそのままOBSにコピーしてください。
各行はブラウザソースがキャンバスと等しいことを前提とします。歌詞領域はキャンバスから四辺の余白を引いた範囲なので、余白が大きいほど読める領域は小さくなります。
| キャンバス | ソース | 歌詞領域 | フォント | アンカー |
|---|---|---|---|---|
| 1920×1080 | 1920×1080 | 1760×920 | 32–48px | bottom-center |
| 1080×1920 | 1080×1920 | 920×1760 | 36–56px | bottom-center |
| 1080×1080 | 1080×1080 | 952×952 | 32–48px | bottom-center |
ソースをキャンバスに合わせる
最も多いサイズの間違いは、1つのブラウザソースを1920×1080と1080×1920の間で引き伸ばすことです。それはアンカーを動かし、歌詞をプラットフォームUIに切り込ませます。拡大縮小せず、向きごとにソースを作り直してください。
フォントは9つのアンカーにわたり12–96pxの範囲にあります。狭い縦キャンバスでは大きな文字が先にあふれるため、縦の初期値は横より小さく始まります。
覆わないこと
カメラ、楽器、コメント、ギフト、通知、字幕、プラットフォーム操作は歌詞を置く前に確保します。まずこれらの領域を印しておき、残った場所に歌詞領域を落とし込みます。
スマホ優先のシーンでは下3分の1はたいていコメントとギフトに使われます。だから縦の初期値は横よりアンカーが高い位置になります。
計算はローカルのみ
この計算機はキャンバスサイズやOverlay URLを一切アップロードしません。ブラウザ内でレシピを計算し、更新すると忘れます。
幅、高さ、フォント、アンカーだけをOBSにコピーします。Overlay URL自体は、このツールのスクリーンショットではなくブラウザソースの入力欄に入れます。
ツールを使う
1920×1080 → ソース 1920×1080、フォント 32–48px、アンカー bottom-center。1080×1920 → ソース 1080×1920、フォント 36–56px、アンカー bottom-center。
手順
- 01キャンバスを選ぶ
1920×1080、1080×1920、またはOBS出力に合う任意サイズを使います。
- 02余白を設定する
最も長い歌詞行が端に触れないよう余地を残します。
- 03ソースと領域を読む
ソースはキャンバスと同じで、領域はキャンバスから余白を引いた値です。
- 04ソースサイズをOBSにコピーする
Overlayの背景は透明のままにし、向きの間で拡大縮小しません。
よくある質問
ブラウザソースはキャンバスと一致すべきですか？
はい。幅と高さが一致するとアンカーが予測しやすくなります。
私のOverlay URLをアップロードしますか？
しません。計算はローカルで、サーバーには何も送られません。
横型と縦型で1つのソースを使い回せますか？
いいえ。引き伸ばさず、向きごとにソースを作り直してください。