【YouTube】ツールバーが動画を隠す割合を調べてみた|セーフティゾーンの検証

ヘッダ:Youtubeオーバーレイ検証

YouTubeでは、視聴環境や表示モードによって、ツールバーが 動画の上に被さるように表示(オーバーレイ)される場合があります。

このため「YouTube用に動画を作成する際は、できるだけオーバーレイ部分に 重要情報を置かないように意識しましょう」とよく言われるのですが、実際のことろ、画面のどの部分に、どのくらいの割合でオーバーレイされるのか正確な情報が見当たりませんでした。

そこで この記事では、現在一般的な「16:9」サイズの動画を再生する状況を想定し、視聴環境・表示モードごとのYouTubeのオーバーレイの挙動をまとめてみました。

注意

情報は2021年3月19日時点のものです。YouTubeの仕様変更により、改変される可能性がありますので、あらかじめご留意ください。

検証環境
  • 検証に用いた動画のアスペクト比:「16:9(1920×1080)」
  • パソコン:OS:Windows10、WEBブラウザ:Chrome、モニタ(3台):1920×1080(16:9) / 1680x1050(16:10) / 1280x1024(5:4)
  • スマホ:iPhone7(4.7inch/9:16)iOS:14.4 WEBブラウザ:Safali、アプリ:YouTube公式
  • 検証日:2021.03.19

「パソコン」環境のオーバーレイ

YouTube 表示モード

パソコンでYouTube動画を視聴する場合は、基本的にWEBブラウザからサイトを閲覧する形になり、以下の5つの表示モードが用意されています。

  • デフォルト:ブラウザのサイズに合わせて表示
  • シアターモード:ブラウザの横幅いっぱいに表示
  • ミニプレーヤー:小さな専用画面で表示
  • テレビで再生:家庭のテレビモニタに画面を表示
  • 全画面:全画面で表示

※パソコンでYouTubeをアプリのように表示できるPWA版もありますが 基本的に挙動は一緒です

デフォルト表示

PC:デフォルト

デフォルト表示の場合は「1. 最初に動画を再生した際」もしくは「2. マウスオンした時」に、ツールバーが画面下部にオーバーレイします。

特に「最初に動画を再生した際」は、オーバーレイが3秒間 強制表示されるため注意が必要です(一時停止した動画を再開する場合は すぐに消えます)。

管理人より
動画の冒頭3秒間は 画面下部に重要情報を置かないようにしましょう。
画面サイズによってマスク率が変化(10~17%)

デフォルト表示では、動画プレーヤーのサイズはブラウザ ウィンドウのサイズに合わせて自動的に調整され、オーバレイの割合も変化します。

通常サイズで 画面下10%程度。ブラウザを最小にした場合、マスク率が最も大きくなり、画面下部が約17%ほど隠れます。

シアターモード

シアターモード

シアターモードは、動画をブラウザの幅いっぱいに表示するモードです。デフォルト表示と同じく「1. 最初に動画を再生した際 ※」もしくは「2. マウスオンした時」に、ツールバーがオーバーレイします。

ブラウザの大きさに合わせてオーバーレイの割合が変化する点は デフォルト表示と一緒ですが、マスク率が異なります(0~10%)。

ミニプレーヤー

PC:ミニプレーヤー

マウスオン時(マウスカーソルを画面上に重ねた場合)、画面全体が薄暗くなり 中央に操作用アイコンがオーバーレイされます。

全画面表示

全画面16:9モニタ

全画面表示時は、表示するモニタのアスペクト比(縦横の割合)で変化します。

一般的なモニタとしては 横長の部類に入る「16:9(1920×1080)」モニタの場合、画面上下に約6%づつオーバーレイされました。

正方形に近い1280x1024(5:4)のモニタの場合は、上下のオーバーレイは 動画を隠すことがありません。

PC全画面 正方形

マウスオンした時「1. 画面上部に動画のタイトルが表示」され、また「2. 画面下部にツールバーが表示」されます。

管理人より
1680x1050(16:10)モニタでもオーバーレイは 画面から外れていました。

テレビで再生

テレビで再生

「テレビで再生」は、ネット回線を使って 家庭のテレビモニタにYouTube動画を表示させるモードです。一時停止、早送りなどの操作を行った際に、以下のようにオーバーレイします。

  • 画面全体が薄暗くなる(100%)
  • 画面上部に動画のタイトルが表示(約20%)
  • 画面下部に 再生シークバーと 関連動画のサムネイルの一部が表示(約25%)
  • 一時停止から動画を再開した際 オーバーレイ状態が3秒間継続
管理人より
テレビで表示した場合は、モニタ自体のオーバースキャンも考慮する必要があります。

「スマホ」環境のオーバーレイ

YouTubeアプリにおけるツールバー表示の挙動を検証してみました。スマホ版アプリでは、以下の2つの表示モードが用意されています。※ブラウザで閲覧した場合も 挙動は一緒でした

  • デフォルト:スマホのサイズに合わせて表示
  • 全画面:全画面で表示(自動で横位置に)
  • テレビで再生:家庭のテレビモニタに画面を表示
管理人より
「テレビで再生」は パソコン版の挙動と一緒なので ここでは紹介していません

デフォルト表示

スマホ:デフォルト表示

画面タップ時、画面全体が薄暗くなり 中央に操作用アイコンが表示されます。操作しない場合は1秒程度でオーバーレイは解除されます。

全画面

スマホ:全画面表示

画面タップ時、以下のようにオーバレイします

  • 画面全体が薄暗くなり 画面中央に操作アイコンが表示
  • 画面上部に動画のタイトルが表示
  • 画面下部に、再生シークバーと 関連動画のサムネイルの一部が表示

パソコン版の全画面表示とは異なり、画面全体にオーバーレイします(スマホのサイズにもよると思いますが)。

まとめ:YouTube用「セーフティゾーン」推奨値

以上の検証を踏まえて、16:9サイズの動画を前提とした場合の YouTube動画を作成時のセーフティゾーンを考えてみました。

  • アクションセーフ:97.5%
  • タイトルセーフ:95% ※テロップはこの範囲内
  • 動画の冒頭3秒間は「画面下部 17%」には重要な情報を置かない
  • 冒頭3秒以外でも「画面下部 17%」には できるだけ重要な情報を置かないよう考慮する※ただしそこまで神経質になる必要はない
基本は「アクション:97.5% / タイトル:95%」

「テレビで再生」モードを考慮すると、セーフティゾーンはテレビ放送と同じ基準(ARIB TR-B4)を用いるのがベストです。そこで基本的には「アクションセーフ:97.5% / タイトルセーフ:95%」が推奨値となります。

オーバーレイ回避は神経質になりすぎない

また、ツールバーのオーバーレイに関しては「できれば避けた方がよい範囲」「念のために避けた方がよい範囲」くらいに 柔軟に考えてよいかと思います。

オーバーレイが発生するのは「1. 動画の再生時(初回)」「2. 画面上にマウスオン時」「3. 画面をタップ時」に限られます。

1はともかく、2.3は 動画の視聴時に頻繁に起こるものではありません。また「PC版:ミニプレーヤー表示 / テレビで再生」や「スマホ版:全画面表示」では、オーバーレイ時に 画面全体が薄暗くなってしまうため、そもそもセーフティゾーンを云々しても意味がありません。

画面下部のオーバーレイに限定すると「PC版:デフォルト表示」で ブラウザを最小にした場合のマスク率が最も高くなっており(約17%)、ひとまずこの数値を 推奨値とすることにしました。しかし、こちらに関しては、上述の理由により、そこまで神経質に運用する必要ないかと思います。

関連記事
「アクションセーフ」と「タイトルセーフ」

動画の「セーフティゾーン」はなぜ必要?テロップ配置時の推奨値【2021年版】

ヘッダ画像:アクション配布

動画のセーフティゾーンを自動作成するPhotoshopアクション【無料配布】

Adobe製品の導入/更新を考えている方必見!

Adobe Creative Cloudの導入/更新を検討している方には ↓こちらの たのまな「アドビソフト + 動画講座受講セット」がおすすめです。

\ 主婦・社会人も登録可!商用OK!/

※講座の内容を詳しく知りたい方はこちら

動画講座に加えて、Adobeの全アプリが利用できる「コンプリートプラン」が付属し、なんと"学割価格"で利用できてしまいます。

【キャンペーン情報】現在「Adobeオンライントレーニング通信講座」が最大49.6%OFF価格で受講できるキャンペーン開催中!2021年6月30日(水)までの期間限定なのでお早めに!

  • 特別価格:39,980円(通常:78,800円 ほか)
  • 期間:2021年4月9日(金)~ 2021年6月30日(水)まで

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA