はじめる

実践デザインガイド

YouTube終了画面テンプレート:クリックできる要素のために余白を残す

空いたくぼみのあるチャコール色の建築的な板と、琥珀色の縁を持つ台に載ったアイボリーの円盤。

終了画面の画像に「次も見る」と書いてあっても、視聴者がクリックできるとは限りません。YouTubeのインタラクティブな要素はStudioで追加します。動画内にサムネイル用の四角を描くだけでは作れません。

このチュートリアルでは、11月15日にCiyoで制作した架空のAlder Workshopの背景と、その後に行うStudioの設定を分けて説明します。YouTubeの現在の終了画面ガイドを参照しています。動画のアップロード、チャンネル設定、クリック率の測定は行っていません。

先に結論

背景を作る前に、実際の終了画面要素を計画します。編集した動画の最後に要素を置く余白を残し、動画を書き出してからYouTube Studioで本物の要素の位置と時間を設定してください。背景との重なりをプレビューします。画像に描き込んだ図形だけでは、おすすめ動画やチャンネル登録のボタンにはなりません。

1. 動画が終了画面を利用できるか確認する

YouTubeによると、終了画面は条件を満たす25秒以上の動画の最後の5〜20秒に表示できます。標準的な16:9動画では最大4要素で、ほかの縦横比では少ない場合があります。「子ども向け」に設定した動画など、使えない状況もあります。

テンプレート制作前に、その動画に適用される最新の要件を確認しましょう。この記事の1920 × 1080の背景と12秒の終わり方は実演上の選択であり、すべての動画に対する必須仕様ではありません。

動画に合う次の行動を1つ選びます。架空の修理動画は、別の修理動画とチャンネル登録へ誘導します。空の枠を増やせばよい終わり方になるわけではありません。

2. 要素を配置する余白を確保する

計画用のコピーに要素の位置を下描きし、見出しや固定テキストをその範囲から外します。動画カードと登録要素の背後には広く落ち着いた領域を作り、おすすめが背景に埋もれないようにします。

Alder Workshopの文言は「Choose your next repair」です。右に大きな空き領域、左下に別の領域を設けています。正確な配置はStudioの実際の要素枠と照合する必要があります。下描きでは、すべての端末で同じ表示になるとは保証できません。

架空の終了画面で決めた役割分担
部分背景の役割後でStudioで行うこと
見出しおすすめを隠さず次の行動を説明する要素の表示中も読めるか確認する
動画領域周囲に分かりやすい余白を作る実際の動画要素を追加して置く
登録領域独立した落ち着いた領域を残す実際の登録要素を追加して置く
時間編集上で安定した終わりを保つ要素の実際の開始・終了時刻を設定する

3. 注釈のない背景と計画用コピーを別々に作る

承認済みの文言、出力サイズ、要素を置く予定の領域をCiyoに渡します。偽のサムネイルやYouTubeの模倣画面を入れない背景を依頼してください。位置の注釈は別の計画版に置き、動画編集者が最終構図と比較できるようにします。

想定する修正に対応できる元データを使います。ラスター背景は動画に配置でき、編集可能な元データの文字や図形は別々に変更しやすくなります。実際に受け取れたファイルを確認してください。キャンバスのプレビューだけではSVGや編集プロジェクトを受領したとはいえません。

実際のCiyoの会話では、注釈のない背景と、注釈付きの計画版が作られました。ダウンロードした2枚のPNGはいずれも正確に1920 × 1080です。見出しと主催者の文言は予定する動画・登録領域から離れていますが、YouTube Studio内での位置確認はしていません。SVGは別途コードとして返され、以下から入手できます。

キャンバス上にあるのはラスターのプレビューであり、SVGテキストの直接編集ではありません。元のレンダリング環境にGeorgiaがなく、代替フォントが使われました。別の機器で開くと字幅が変わる可能性があるため、編集に使う前に受け渡し先の実際の表示を確認しましょう。

終了画面背景の制作プロンプト
[動画]の最後の[秒数]に使う[幅×高さ]の背景を作ってください。正確な見出し:[文言]。[実際のYouTube要素]のための余白を残します。位置ガイドは別の計画用コピーに置き、注釈のない納品版には含めないでください。文字を将来の要素枠から離します。対応するファイルを返し、編集上の制約を説明してください。偽のYouTube画面を作ったり、画像自体がクリック可能だと示唆したり、動画をアップロードしたりしないでください。

4. 実際の動画編集で終わり方を確認する

注釈のない背景を動画の最後に配置します。動くトランジションの直後に終了せず、選択肢を理解できるだけの安定した時間を残してください。話し声が続く場合は、次の動画への誘導が、まだ聞く必要のある文と競合しないかを確認します。

終わりに入るカットと抜けるカットを見ます。静止画では穏やかな背景も、忙しい場面の後では唐突に感じられることがあります。おすすめの背後の細かな動きが注意を奪う場合もあります。装飾アニメーションが情報を増やさなければ、静止版を残しておきましょう。

個人制作なら動画要素1つと登録要素1つから始めます。シリーズを編集する場合は、背景の元データ、時間、配置メモを一緒に保管します。縦横比や最後のショットが変わったら、実際の終わりを再確認してください。

5. Studioで本物の要素を追加し、プレビューする

編集した動画を権限のあるチャンネルの手順で扱えるようになったら、Studioのエディタと終了画面の操作から対応する要素を追加します。実際の時間と位置を設定し、最後をプレビュー再生してください。このガイドがアカウント操作を代行することはありません。

実際の枠と注釈付きデザインを比べます。カードが見出しを隠すなら背景を修正するか、利用可能な操作の範囲で要素を動かしてください。インタラクティブな重なりのない静止スクリーンショットだけで承認しないようにします。

YouTubeは、視聴環境によって表示が変わる、表示されない場合がある、視聴者が非表示にできる、と説明しています。テンプレートは対応する体験のための背景であり、表示保証ではありません。誘導する行動は後の自分の分析で評価してください。この架空例は成果データを示していません。

YouTube終了画面テンプレートについての質問

背景画像だけでボタンをクリックできるようになりますか?

いいえ。YouTube Studioで実際の対応要素を追加します。描いた枠やラベルは動画画像の一部のままです。

最後は必ず12秒必要ですか?

いいえ。実演の編集上の選択です。現在のYouTubeでは、条件を満たす動画の最後の5〜20秒に終了画面を置けます。自分の動画と最新の要件を確認してください。

カードの下に重要な締めの情報を置けますか?

重要な文言は実際の要素の位置から離してください。背景だけを見ず、Studioのプレビューで一緒に確認しましょう。

全員に同じ終了画面が表示されますか?

いいえ。利用可否と見え方は視聴環境によって変わり、視聴者が隠す場合もあります。YouTubeの現在の説明に従ってください。

使いやすい終わり方を計画する

承認済みの見出しと予定する要素をCiyoに持ち込みましょう。背景を作り、実際のStudio要素と合わせて確認してください。