テレプロンプター
原稿を貼り付けて速度を調整し、全画面でなめらかにスクロールできます。
テレプロンプターとは？
テレプロンプターは、動画収録、ライブ配信、スピーチ、カメラに向かう発表で原稿を読みやすくする補助ツールです。原稿を大きな文字で表示し、一定の速度でスクロールするため、話し手は手元のメモを見下ろさず、視線をカメラ付近に保ちやすくなります。ブラウザ上のテレプロンプターは、原稿の貼り付け、速度、文字サイズ、行間、全画面、ミラーモードをすぐ調整できる点が便利です。ミラーモードは反射式プロンプター用、全画面表示は録画時の余計な表示を避けるために使います。単に文字を流すだけでなく、話すリズムと視線を安定させるための道具です。
使い方
使い方
- 左側のエディタに原稿を貼り付けます
- 速度、フォントサイズ、行間、ミラーモードを環境に合わせて調整します
- スタートを押してスクロールを開始し、一時停止やリセットで先頭に戻ります
- 録画、プレゼン、ライブ配信時はフルスクリーン表示をご活用ください
表示設定
- 録画前に速度、フォントサイズ、行間、ミラーモードをテストしてください。快適な設定は距離や画面サイズによって異なります。
- 段落を短めにし、原稿に間を入れると、スクロールのリズムが自然な話し方に合います。
利用シーン
仕組み
なめらかなスクロールは requestAnimationFrame によって駆動されます。各アニメーションフレームごとに、ユーザーが設定した速度値と前フレームからの経過時間に基づいてスクロール量を計算し、script コンテナに transform: translateY(-Npx) を適用します。transform ベースのスクロールは GPU コンポジタースレッド上で処理されるため、毎フレームの layout を発生させる scrollTop の書き出しとは異なり、控えめなハードウェアでも 60fps の動きを維持できます。 読み上げ速度はおよそ speed = 読み上げ単語数/分 × 平均単語幅(px) / 60 で求められ、150 wpm のナレーションで平均単語幅 50 px の場合、約 125 px/s のスクロール速度が必要です。フォントサイズ、行間、ビューポートの幅はすべて同じ速度設定でも実効 wpm を変えるため、録画前に簡易キャリブレーションを行うことをお勧めします。ミラーモードは script コンテナに transform: scaleX(-1) を適用し、カメラが邪魔されずに45度のビームスプリッター式テレプロンプターガラス越しに読める水平反転テキストを生成します。 全画面表示は element.requestFullscreen() を使用し、ブラウザの UI や通知が録画に侵入できないようにします。document.fullscreenchange で Esc キーによる退出を追跡します。原稿とすべてのユーザー設定（速度、フォントサイズ、行間、ミラー）は変更のたびに localStorage に保存されるため、ページ更新時にリハーサルの状態を完全に復元できます。ホイールや touchstart による手動スクロール入力はアニメーションループを一時停止し、進行カウンターを再同期します。これにより、ライブ配信中にヘッドをリセットせずに手動調整が可能になります。
- スクロールループ: 60fps で requestAnimationFrame により transform: translateY(-Npx) を適用。GPU 上でコンポジット処理され、フレームごとの layout は発生しない
- 速度式: scrollPxPerSecond = wpm × averageWordWidthPx / 60。150 wpm、50 px/word の場合、約 125 px/s
- ミラーモード: レンズの前に45度で設置したビームスプリッター式プロンプターガラス用に transform: scaleX(-1) を適用
- 全画面表示: element.requestFullscreen() と document.exitFullscreen() を使用し、fullscreenchange イベントで Esc キーを追跡
- 状態保存: localStorage に原稿、速度、フォントサイズ、行間、ミラーフラグを保存し、ページ更新でリハーサルを復元
- 手動オーバーライド: wheel と touchstart イベントでアニメーションループを一時停止し、新しいスクロール位置に進行率パーセンテージを再同期
- フォントサイズの目安: 視距離 1 メートルあたり約 24〜32 px で、目の疲れなしに原稿を読みやすい
使用例
120 wpm で 3 分の基調講演オープニング
原稿の長さ: 360 語（120 wpm で約 3 分）
フォントサイズ: 56 px | 行の高さ: 1.6 | ミラー: オフ
スクロール速度: 120（120 wpm に対応）
「皆さんおはようございます。本日は、この四半期で私たちのチームのソフトウェア開発を変えた
3 つのことについてお話しします……」150 wpm で YouTube チュートリアルを収録
原稿の長さ: 6 分テイク用に 900 語
フォントサイズ: 42 px | 行の高さ: 1.5 | ミラー: オフ
スクロール速度: 150（やや速め、自然なナレーションのテンポ）
フルスクリーン: オン、ブラウザ UI を非表示にして OBS で原稿のみをキャプチャビームスプリッターガラスでミラーモード
セットアップ: 17 インチのプロンプターガラスを 45 度、話し手は 1.2 m 先
フォントサイズ: 64 px（距離 1 m あたり約 32 px）
行の高さ: 1.8 | ミラー: オン（ガラス越しに正しく読める）
スクロール速度: インタビュー向けに 100 wpmライブ配信の Q&A で手動ペース
原稿: 箇条書きの要点、セクションあたり約 200 語
フォントサイズ: 48 px | ミラー: オフ | スクロール速度: 80
視聴者の質問を読み上げる際に一時停止を押し、
再開すると止めた位置から原稿が続きます。よくある質問
テレプロンプターの速度はどのように制御しますか？
スライダーで WPM（毎分単語数）またはピクセル毎秒を設定します。自然な話し方なら 150〜180 WPM、テンポの速いコメンタリーなら 200 以上が目安です。読み上げ中は矢印キーやホイールスクロールで調整できます。実装によっては調整中に自動で一時停止します。
実機のテレプロンプター用にテキストをミラー反転できますか？
はい。ミラー切り替えでテキストを水平方向に反転させ、ハードウェア式テレプロンプターの斜めガラスに映したときに正しく読めるようにします。実機を使わない場合はミラーをオフのままにしてください。
読む位置を見失った場合は？
スペースキーで一時停止します。手動でスクロールバックするか、ナビゲーションで段落にジャンプしてください。実装によっては一時停止からのカウントダウン（3-2-1 で自動再開）に対応しており、収録中もスムーズに復帰できます。
原稿はアップロードされますか？
いいえ。原稿はすべてブラウザ内で処理されます。送信もログ記録も行いません。エディターはデフォルトで自動保存しないため、バックアップとして外部（テキストファイルや文書ファイル）に保存してください。
カメラとの距離に合わせて文字を大きくするには？
目から画面までの距離に応じてフォントサイズを調整します。目安は、1m（スマホでの近距離）で 36〜48pt、2〜3m（一般的な Web カメラ収録）で 60〜80pt、部屋を挟んだ TV では 100pt 以上です。画面上のサイズが見え方そのものとなるため、収録前にテストしましょう。
長い文書をインポートできますか？
はい。プレーンテキストであれば貼り付けられます。Markdown、RTF、Word 文書はあらかじめプレーンテキストに変換してください（多くのエディターには「テキストとしてコピー」機能があります）。数時間にわたる非常に長い原稿は、スクロール位置の混乱を避けるため複数のセグメントに分割してください。
タブレットでも動作しますか？
はい。横向きのタブレットは手頃なテレプロンプターとして優秀です。三脚アームやタブレット用テレプロンプターホルダーで固定してください。撮影中のポップアップを避けるため、使用中はシステム通知をオフにしましょう。