community-labo / youtube

インタビュー動画の
画面設計と番組素材

普段の編集画面のレイアウトと、場面転換2種、見出しの出入り。使う色は青・白・黒の3色だけで、イエローはワイプの細い帯とノード1つだけのアクセント。モチーフはブランドガイドのシグネチャー（円ノードのつながり）。動画素材はすべて1920×1080・60fps・アルファ付き。

#0F1B3D 黒（ネイビー） #1432A0 → #3F74EC #FFE14D イエロー（アクセント） #FFFFFF ホワイト #2B5CE6 ロイヤルブルー

組み上がり

30秒のサンプル

素材を実際に重ねた30秒の架空インタビュー。映像は見立て、話す内容も仮のもの。3つの質問を3カット（明るい室内 → Zoom → 屋外）でつなぎ、見出し・チャンネル名・字幕・場面転換を全部入れてある。音は付けていない。

普段の編集画面

layout
編集画面のレイアウト
映像は見立て。実際は撮ったインタビュー映像が入る
左上

質問の見出し

白フィルの角丸ピルに、グラデーションの枠線（#1432A0 → #2B5CE6 → #3F74EC）。話が変わるたびに差し替える。

  • 位置左64 / 上52
  • 高さ・文字84px / 38px 太
  • 枠線4px グラデ
右上

チャンネル名

出しっぱなしにする要素。撮影環境ごとに3パターン用意した（下）。位置と文字サイズは共通。

  • 位置右64 / 上66
  • 文字38px 太
  • 透過PNGchannel-*.png
下部

字幕

中央寄せ。箱は文字幅に合わせて伸縮し、角は直角。1行におさまる長さで区切る。

  • 位置中央 / 下92
  • 文字44px 太 白
  • 箱黒 78%

チャンネル名の3パターン

黒文字
dark ／ 既定
黒文字

明るい室内など、背景が白〜淡いとき。ごく薄い白のにじみで背景から浮かせている。

白文字
light ／ Zoom収録
白文字

背景が暗いとき。黒のにじみを敷いて、白文字が飛ばないようにしている。

枠つき
plate ／ 屋外
枠つき

空と地面のように明暗が同居して背景が読めないとき。左上の見出しと同じ白ピル＋グラデ枠線で確実に読ませる。

場面転換の途中
場面転換が入るところ。イエローの細い帯 → 黒 → グラデーションのブルー の順に覆う

場面転換

transition
入り 0.53s 保持 1.25s 抜け 0.62s

標準版

2.40s / 60fps

ロゴ組みが入る本編用。チャンネル名の下にキャッチコピーが入る（既定は「関係性が価値になる時代」、TAG="…" ./render.sh で差し替え）。章が大きく切り替わるところに。

  • transition_alpha.movProRes 4444
  • transition_alpha.webmVP9 / 透過
  • transition_png-seq.zipPNG連番
入り 0.35s 保持 抜け 0.35s

短尺版

0.80s / 60fps

ロゴなしのワイプだけ。話題が変わる普通のつなぎはこちらを主に使う。Notionのチェックリストの「0.5〜1秒」に合わせた尺。

  • transition-quick_alpha.movProRes 4444
  • transition-quick_alpha.webmVP9 / 透過
  • transition-quick_png-seq.zipPNG連番

見出しの出し方

heading
開く 0.40s 文字 0.30s

出るところ

0.70s / 60fps ＋ 静止PNG

ピルが左から軽く開き、少し遅れて文字がふわっと出る。出しっぱなしにする間は、このクリップの後ろに静止PNGをつなぐ。

  • heading-in_alpha.movProRes 4444
  • heading-in_still.png表示中・透過
  • ./render.sh heading-in "文言"書き出し
保持 閉じる 0.42s

消えるところ

0.50s / 60fps

文字が消えてからピルが左へ閉じる。出るところの逆順。./render.sh heading "文言" なら出る〜消えるが1本（4秒）でつながった版も出せる。

  • heading-out_alpha.movProRes 4444
  • heading_alpha.mov1本つなぎ版・4秒
  • heading-out_png-seq.zipPNG連番

編集ソフトでの置き方

01
映像の上のトラックに置く

アルファ付きなので、素材トラックに重ねるだけ。下のカットが透けて見える区間が入り・抜けにあたる。

02
覆っている間にカット点を置く

標準版なら開始0.6〜1.7秒あたり、短尺版なら0.4秒あたり。画面がネイビーで覆われている間に前後のカットをつなぐ。

03
見出しと字幕は位置を動かさない

layout_overlay.png（透過）を一度置いて位置を合わせ、以降は文言だけ差し替える。方向を変えたいときは ?dir=r で場面転換だけ左右反転できる。

上のプレビューは、前後のカットに見立てた無地（白→黒。見出しは黒地）の上に重ねたもの。実素材は背景が透明なので、実際は撮った映像がそのまま出る。編集に使うのは .mov（ProRes 4444） か PNG連番。GIF・MP4版は半透明を持てないため確認専用。
配色は ?theme=brand でNotionのブランド正本（ネイビー＋朱色）にも切り替えられる。

素材のダウンロード

場面転換・標準版（2.4秒）
場面転換・短尺版（0.8秒）
見出し・出るところ（0.7秒）
見出し・消えるところ（0.5秒）
見出し・1本つなぎ（4秒）
画面レイアウト（静止画）
チャンネル名（透過PNG）

編集に使うのは .mov（ProRes 4444） か PNG連番。webmはWeb埋め込み用、mp4とgifは確認専用。