重要なUIを隠さずに字幕を配置する方法
実演が、ようやく役立つ瞬間に達します。視聴者が見つけたかったボタンを、カーソルがクリックします。まさにその瞬間、2行の字幕がボタンを覆います。字幕は付き、言葉も正しいのに、不可欠な指示は隠れています。
これは、画面録画とレイアウトの承認後に、字幕を加えることが多いために起きます。その時点で、フレーム下部にはツールバー、結果の通知、場合によっては装飾的な見出しまであります。字幕レイヤーには、無理なく置ける場所が残っていません。
動画の字幕は、製品デモの構図に参加する一要素として計画する必要があります。役割は、聞こえる情報を残すことです。同時に、実演を役立つものにする視覚的な証拠と共存しなければなりません。一つの衝突を避けて移すだけでは、始まりにすぎません。本当の仕事は、変化する流れ全体を読めるようにすることです。
字幕と、ほかの文字を分ける
字幕は、発話や関連する音声情報を表します。注釈は、画面の何かを特定します。シーンの見出しは、現在のセクションの話題を伝えます。UIテキストは、製品自体に属します。見た目は重なりますが、役割を入れ替えるべきではありません。
架空の分析ツールのチュートリアルを想像します。ナレーターは「月単位の比較を選びます」と言い、字幕がその文を記録します。操作部品の横には「比較期間」という注釈を付けるかもしれません。UI自体には「Previous month」という選択肢があります。三つを同じ目立ち方で見せる必要はありませんが、見出しがあるからと字幕を取り除けば、発話による説明の一部も失われます。
先に、編集上のテキストレイヤーを書き直します。発話の字幕は保ち、実際のUIラベルで選択値を示し、注釈は本当に曖昧さを解消するときだけ残します。字幕トラックへ別の役割を押し付けずに、競合を減らせます。
見た目の違いにも一貫性を持たせます。字幕は予測できる読書領域に置き、小さな注釈は対象に結び付けたままにできます。字幕をクリック可能なUI部品のように見せないでください。どの言葉が製品に属し、どれが編集で追加されたものかを、推測させるべきではありません。
Netflixの確立された例
Netflixの一般的なタイムドテキストの指針は、画面内の文字との重なりを避けるよう求めています。強制表示字幕のドキュメントには、既存ラベルを覆わず、翻訳をその上に配置した実例があります。再生操作が出るときの字幕位置の変更も説明しています。この原則は映画以外にも応用できます。使える字幕の空間は、文字、映像、プレーヤーの状態の関係で決まります。Netflix：強制表示字幕を理解する
左の例では、下部の英語の場所と日付を見せたまま、スペイン語を上部に置いています。製品チュートリアルでも、視聴者が確認すべき操作部品と結果を中心に、同じ判断をしてください。
この例が、二種類の情報を保っていることに注目します。元のラベルを消して翻訳を解決するわけでも、翻訳を小さすぎる文字にして構図を解決するわけでもありません。製品の字幕でも、必要なら周囲の映像を組み替える同じ柔軟さが必要です。
時間に沿って、見せる必要のあるものを整理する
一つのセーフエリアの長方形では、製品デモを表せません。重要な操作対象は、上部から始まり、開いたメニューへ移り、下部近くに通知を出すかもしれません。空けておくべき領域は、タスクとともに変わります。
字幕の配置を決める前に、短い出来事の一覧を作ります。各出来事で、操作対象、結果の状態、その状態を解釈するために必要な文字を特定します。単純なクリップに、フレームごとの表は不要です。字幕が出ると予想される領域と実演が衝突する瞬間に、気付く必要があるのです。
分析ツールの例では、比較のドロップダウンが右上にあり、結果は下部のグラフの凡例に出るかもしれません。下部の字幕は、選択中には問題がなくても、解釈するときには問題になります。構図を変えるか、自然な区切りで意図的に字幕の位置を変えるべきだと分かります。
字幕でカーソルを追わないでください。絶えず位置を変えると、読む場所が予測できなくなり、文の途中で新しい衝突を起こす場合があります。チュートリアルのまとまったセクションごとに、少数の安定した領域を使う方を選びます。
字幕を小さくする前に、製品の構図を変える
字幕が重要な操作部品を覆うと、文字サイズを下げたくなります。スクリーンショットを保てて、重なりも解決したように見えます。しかし、明らかな重なりを、特に小さな画面での、見えにくい読みにくさへ置き換えています。
構図の中で、製品の切り取りを動かしたり、拡縮したりしてみます。録画の下に適度な余白を置けば、安定した字幕領域を作れます。関連するUIを大きくするよう狭く切り取り、別の場所に字幕の余地を残すこともできます。これらの変更は、両方のレイヤーを同時に改善することがよくあります。
大きな字幕帯の上にデスクトップ全体を置き、そのせいで全ラベルを小さくしないでください。どんな犠牲を払っても空間を予約することが目的ではありません。シーンの情報の優先順位に従って、空間を配分することです。欠ける領域が実演する操作と無関係なら、製品録画は部分表示でかまいません。
本当にUI全体が必要なら、最初に別の全体表示を置き、その後で接写する方法を検討します。操作部品の場所を示してから、操作へ寄ります。視聴者は、2行の発話の下でデスクトップ全体を調べずに、位置を把握できます。
文の区切りに合わせて位置を変える
文の途中で字幕が下から上へ飛ぶと、視聴者は続きを探す必要があります。新しい字幕イベント、シーン、タスクの段階に合わせれば、位置の変更を追いやすくなります。
ナレーションを、意味のある点で区切ります。「月単位の比較を選びます」は選択の段階に置けます。「グラフは先月の同じ期間との比較になりました」は結果の段階に属します。分けることで、結果にフレーム下部が必要な場合に、字幕領域を動かす妥当な機会ができます。
改行も重要です。Netflixの一般ガイドは、強く結び付いた言葉を分けず、言語上のまとまりに沿って字幕を区切ることを勧めています。製品動画への教訓は明快です。任意のテキスト枠の幅によって、製品名、数値と単位、否定語とそれが限定する文を、分断しないでください。Netflix：タイムドテキストの一般要件
配信先の字幕の制限内で、読みやすい句を保ちます。見た目に対称な改行でも、製品名を割ったり、数値から単位を切り離したりする場合があります。
実際のプレーヤーに合わせてオープン字幕かクローズド字幕を選ぶ
すべての字幕形式やホスティング先が、スタイルや位置の情報を保つわけではありません。字幕エディターでは位置を指定できても、最終プレーヤーは独自のルールを使うかもしれません。残せない挙動を前提に設計する前に、配信までの流れを試します。
たとえばWistiaは、アップロードしたWebVTTファイルをSRTへ変換し、その変換ではスタイルや位置の指示に対応しないと説明しています。元の形式が持つ表現力だけに頼らず、プラットフォームの挙動を確かめるべき具体的な理由です。Wistia：トランスクリプトと字幕
配信先が配置を制御するなら、動画自体に適切な領域を残します。厳密な位置の編集用ラベルが必要なら、字幕トラックをデザインしたタイトルレイヤーのように扱わず、別の視覚的な注釈として保ちます。
オープン字幕は画像に埋め込まれ、常に表示されます。クローズド字幕は独立したトラックで、対応するプレーヤーでは視聴者が表示を切り替えられます。この選択は、配置と保守の両方に影響します。焼き込めば正確な位置をより制御できますが、視聴者は隠せず、翻訳や訂正には動画の再書き出しが必要です。別トラックなら独立して変更できますが、位置は配信先のプレーヤーに依存します。文字のないマスターと字幕ファイルを保ち、実演を作り直さずに配信方法を変えられるようにします。
再生操作が見える状態で確認する
製品映像は、下端をステータスバー、ファイルのタブ、完了メッセージに使うことがよくあります。プレーヤーも、同じ場所をタイムラインと操作に使うかもしれません。字幕を加えると、同じ空間を要求する第三の要素が生まれます。
実際のプレーヤーを、一時停止中、再生中、終わり近くで確認します。ポインターを重ねると操作部品が出る場合は、その状態を試します。スマートフォンでは、タップによって出る操作を確認します。操作部品が消えた後のきれいなスクリーンショットだけでは、通常の使用中も実演が読めると確かめられません。
字幕が自動で動くからといって、安全な場所へ動くと思わないでください。プレーヤーが字幕をタイムラインの上へ持ち上げ、そのまま製品の通知を覆う場合があります。ファイルとプレーヤーは、それぞれ単独では妥当に動いていても、組み合わせると失敗するのです。
重要な結果が一瞬しか出ないなら、操作部品が出そうな領域から離すか、その後に安定した結果を見せます。これは、別のウィンドウで手順を追いながら一時停止する人にも役立ちます。停止したときには、指示を確認しやすくなるべきです。
停止した結果に必要な空間を確保する
Netflixの一時停止の例を詳しく見てください。字幕は、進捗バーと操作行のすぐ上にあります。プレーヤーが映像下部のかなりの帯を使い、読める領域も一緒に上へ移っています。
製品チュートリアルでは、最も役立つ確認が、まさにその帯に出ることがあります。書き出し完了、リンクコピーの通知、保存済みのメッセージは、端の近くによく現れます。視聴者が結果を確認しようと停止すると、同時に操作部品が出て、字幕を通知の上へ押し上げるかもしれません。
収録前に、結果が占める領域を考慮します。配信先プレーヤーの操作を開き、字幕が出る場所を特定し、見せるべき製品状態と比べます。衝突するなら、構図内で録画を動かすか、結果が高い位置になるよう、近くへ切り取ります。字幕を上げるだけでは、次に重要なUI行を覆う場合があります。
一時的な通知が消えた後も、最終状態を残します。書き出しなら、短いトースト通知に加え、結果のファイルや関連する完了項目を見せます。別のウィンドウで手順を追う人は、安定した結果に戻れます。操作部品が出る前の狭い時間内に通知を捉えることを求めるより、確実です。
操作と結果が別々の隅にあるなら、意図した二つの画面として扱います。まず操作を示し、その後、安定した字幕領域のある、明確な結果のフレームを与えます。説明を読むことと完了を確認することの、どちらかを選ばせるべきではありません。
修正例：レポートの書き出し
映像に、レポートエディター、右下の「Export」ボタン、同じ隅のダウンロード確認が映っているとします。クリック中、ナレーションが書き出し形式を説明します。下部の字幕は、ボタンも確認も覆います。
最初の修正では、避けられる競合を減らすべきです。形式の説明を少し早め、形式選択が見えている間へ移します。その選択部分へ近く切り取ります。次に、短い発話と、操作対象を避けた位置の字幕で、書き出し操作を示します。
クリック後は、実際の結果のファイルや確認が読める画面を保持します。本当の証拠が隠れるなら、UIの上へ巨大な装飾的「Success」を加えないでください。別タイトルが役立つなら、位置と優先順位を分けます。
次に、平均的な字幕だけでなく、その部分で最も長い字幕を確認します。もう1行増えるだけで、衝突が戻る場合があります。翻訳後も同じです。最も短い英語文でしか成立しない配置は、まだ安定した構図ではありません。
起こり得る最も長い字幕をレイアウト確認に含める
よくある確認の誤りは、モックアップに整った例文を選ぶことです。実際の発話記録には、後から製品名、技術的な句、行を増やす条件が出てきます。承認した配置は、担うべき素材で一度も試されていなかったのです。
レイアウトの評価には、実際の発話記録のイベントを使います。最長のもの、短いもの、最も重要な結果と重なるものを含めます。複数言語を予定するなら、同じ文字を繰り返した人工的な文字列ではなく、確認済みの代表的な翻訳を含めます。実際の言葉は実際の改行を生み、文字組みが苦しくなる場所を明らかにします。
動く背景全体で、コントラストも確認します。暗いナビゲーションの帯では明確な字幕も、後ろに白いメニューが開くと消えるかもしれません。控えめな背景処理でコントラストを安定させられますが、それ自体が視覚的な場所を使います。文字だけで判断せず、その占有範囲とUIを合わせて試します。正しい処理は、下の証拠を保ちながら、読み続けられるものです。
タスクの一部として字幕を確認する
綴りの確認と、衝突の確認は別です。完全に書き起こした文でも、重要なものを覆うことがあります。見た目が優雅な字幕にも、誤った金額や製品名が入ることがあります。両方に注意が必要です。
まず、字幕の文を音声と承認済みの用語に照らして比べます。その後、想定する表示サイズで字幕付き動画を見ます。UIと字幕を同時に読む必要がある瞬間をすべて特定します。そこで停止し、組み合わせたフレームを確認します。
最後に、動画を使って、実演したタスクを実行するか説明してもらいます。操作部品を見落としたら、隠れていたのか、小さすぎたのか、登場が速すぎたのか、字幕で別の名前になっていたのかを調べます。原因によって、必要な変更は異なります。
観察は具体的に保ちます。「クリック中に字幕がExportを覆っていた」なら行動できます。「字幕が不自然に感じる」では、次の編集者は推測するしかありません。正確な瞬間を短くまとめる方が、一般的なスタイルの好みを長く並べるより、通常は有用です。
次の収録では、早い段階で空間を作る
最良の修正は、収録前にできることがよくあります。重要な操作部品がフレームの端へ寄りすぎない位置に、ウィンドウを置きます。製品で可能なら、無関係なパネルを隠します。ワークフローを誤って伝えずに、関連する結果がコンパクトで読みやすくなる、現実的なデータを使います。
重要な操作の周囲に、数秒の安定した映像を計画します。字幕をトランジションの途中へ押し込まず、自然に合わせる余地が編集に生まれます。必要な確認や生成ファイルを含め、結果を完全に収録してから止めます。
字幕付きの製品デモでは、説明を読み、証拠を確認できるべきです。同じピクセルを奪い合い、どちらかが勝つ必要があってはいけません。配置、タイミング、切り取り、配信を一緒に考えれば、字幕はチュートリアルの教え方の一部になり、最も重要なUIは、必要とされる瞬間に見えるままになります。