日本語ゴシック・黒帯テロップで動画字幕を作る方法｜テキスト・タイトル・字幕の追加とスタイル設定
日本語ゴシック体・太字・黒帯背景でバラエティ番組風のテロップを動画に追加する方法を解説。Noto Sans JP・Zen Kaku Gothic New・M PLUS Rounded 1c など 14 種類のフォント、カラー、アウトライン、ドロップシャドウ、サイズ・位置・タイミング調整まで網羅。日本語字幕・ニューステロップ風スタイルもブラウザ完結で制作できます。
テキスト機能の概要
VideoBuffのテキスト機能では、動画上にリッチなテキストオーバーレイを追加できます。日本語フォントを含む 14 種類のフォントが利用可能で、テロップ、字幕、タイトルなどさまざまな用途に対応します。
テキストはタイムライン上で他のクリップと同様に扱えるため、表示タイミングや長さを自由に調整できます。フォントサイズ、色、背景、アウトライン、ドロップシャドウなどの豊富なスタイリングオプションにより、プロフェッショナルな見た目のテキストを簡単に作成できます。
テキストの追加
テキストを追加するには、まずテキストトラックを作成します。トラックヘッダーの「+」ボタンからテキストトラックを選択するか、ツールバーのテキスト追加ボタンを使用します。
テキストクリップがタイムラインに配置されたら、インスペクターパネルでテキスト内容を入力します。クリップの長さをドラッグで調整することで、テキストの表示時間を制御できます。
複数のテキストクリップを同一トラックまたは別トラックに配置して、異なるタイミングで異なるテキストを表示させることも可能です。
フォントとスタイリング
フォントファミリーはNoto Sans JP、Zen Kaku Gothic New、M PLUS Rounded 1cなどの日本語フォントに加え、Inter、Roboto、Montserratなどの欧文フォントから選択できます。フォントサイズは12pxから200pxまで設定可能で、テロップからタイトルまで幅広いサイズに対応します。
太字（Bold）と斜体（Italic）の切り替えが可能で、テキストの配置は左揃え・中央揃え・右揃えから選べます。行間や文字間隔の調整も行えるため、視認性の高いテキストデザインを実現できます。
カラーとエフェクト
テキストの色はカラーピッカーで自由に設定でき、半透明も指定可能です。背景色をアルファ値付きで設定することで、テロップ風の帯付きテキストを作成できます。
アウトライン（縁取り）は色と幅を個別に設定でき、背景が複雑な映像でもテキストの視認性を確保します。ドロップシャドウは色・ブラー量・X/Yオフセットを調整でき、テキストに立体感と読みやすさを加えます。
これらのエフェクトを組み合わせることで、バラエティ番組風のテロップからシンプルな字幕まで多様な表現が可能です。
黒帯テロップ風スタイル（バラエティ番組・ニューステロップの作り方）
バラエティ番組やニュース風のテロップ — 黒帯背景に白文字の太字日本語ゴシック体 — を作るには、以下の組み合わせを使います。
まずフォントを Zen Kaku Gothic New または Noto Sans JP の Bold に設定。文字色は白、背景色は黒で完全不透明（アルファ 1.0）に。アウトライン（縁取り）は細め（1〜2px）の白を入れるか、無しで省略しても構いません。ドロップシャドウは控えめに（ブラー 3〜4px、Y 方向に少しオフセット）。位置は下部中央、Y 座標を 0.80〜0.85 に設定します。
これが日本のテレビテロップの定番スタイル。背景がどんな映像でも読みやすい、高コントラストでクリーンな見た目になります。ニューステロップ風にしたい場合は、フォントを Noto Sans JP に固定し、太字の代わりにレギュラーウェイトでサイズを少し抑えると、新聞紙面に近いトーンに寄せられます。逆にバラエティ番組風にしたい場合は、フォントを Zen Kaku Gothic New の太字に上げ、サイズも大きめ（48〜72px）に取ることで、強い視覚インパクトを出せます。
黒帯背景の代わりに黄色背景に黒文字（強調テロップ風）、白背景に黒文字（テロップ枠風）といったバリエーションも、背景色とアウトラインの組み合わせで簡単に作れます。
テキストの位置調整
テキストの位置はX座標とY座標で指定し、それぞれ0から1の正規化された値を使用します（0.5がセンター）。これにより、書き出し解像度に依存しない位置指定が可能です。
インスペクターパネルのスライダーを操作するか、数値を直接入力して正確な位置を指定できます。テキストの位置はタイムラインの再生位置とは独立しているため、クリップの表示期間中は常に同じ位置に表示されます。
画面の上部中央にタイトルを配置したり、下部にテロップを配置したりと、用途に応じた自由な配置が行えます。
技術解説：テキストレンダリング
テキストのレンダリングにはCanvas 2D APIを使用しています。フォントはGoogle Fontsからプリロードされ、レンダリング時に文字化けや代替フォントへのフォールバックが発生しないよう制御されています。
書き出し時も同じCanvas 2Dのテキストレンダリングパイプラインを使用するため、プレビューと書き出し結果が一致します。アウトラインはstrokeTextメソッドで、ドロップシャドウはCanvasのshadow APIで実装されており、ブラウザのGPUアクセラレーションを活用した高速なレンダリングが行われます。