文章はクリックして直接編集できます(ブラウザ上の一時的な編集用)。
編集後はブラウザの「印刷 → PDFとして保存」、または「名前を付けて保存」でファイル化してください。
VIDEO PRODUCTION SPEC ③(①の代替案)

③ストーリー動画(自動再生) 制作仕様書

寸又峡温泉 翠紅苑 ウェブサイト トップページ用|自動再生の背景動画(①背景ループの代替案)

動画の概要

尺(長さ)
60〜70秒(本案60秒)
音声
あり(環境音+BGM)。ただしデフォルトはOFF(ミュート)
再生方法
ページ読み込み時に自動再生/ループなし([もう一度見る]ボタンを設置)/背景として画面を覆うように表示

ウェブサイトのトップページを開いた瞬間に流れる、自動再生の背景動画です。「夢のつり橋」「大井川本線」「アプト式鉄道」「奥大井湖上駅」「季節の渓谷」という奥大井エリアでの旅の体験を前半約30秒で見せ、翠紅苑の暖簾をくぐる場面を区切りに、後半約18秒で客室・温泉・料理の体験を見せます。最後は寸又峡温泉場の全景から翠紅苑へズームし、「秘境の中にこの宿がある」ことを示して締めくくります。翠紅苑は主役ではなく、「この旅の拠点として、こういう宿があります」という着地点という位置づけです。音声は初期状態でOFFのため、音がなくても映像だけで物語が伝わることを前提に編集してください。動画はループせず最終フレームで止まり、ロゴ・コピー・予約ボタン・[もう一度見る]ボタンを画面に残します。

カット割り(絵コンテ)

タイムシーン内容音・演出
0.0〜9.0
(9.0秒)
① 夢のつり橋メイン体験 つり橋を渡るPOV視点(渡りきる達成感・スリル)から、ドローン俯瞰で湖面と橋の全景へ。 ページを開いて最初に目に入る最重要シーン。開始0.5〜1秒は動きを抑え、湖面のエメラルドグリーンが見える構図から始める。(音声ON時:風音・橋の軋み音)
9.0〜14.0
(5.0秒)
② 大井川本線・レトロ電車 レトロな電車が大井川鉄橋を渡る映像。 つり橋からエリア全体へ視点を広げるつなぎ。(音声ON時:走行音・汽笛)
14.0〜19.0
(5.0秒)
③ アプト式鉄道 車窓からの渓谷風景、または急勾配を上る列車の外観。 (音声ON時:車輪の音)
19.0〜26.0
(7.0秒)
④ 奥大井湖上駅見どころ ドローンで湖に浮かぶ駅の全景→ホーム・遊歩道など駅に降り立った目線のカット。 インパクト大なので長めの尺。(音声ON時:風・水音)
26.0〜30.0
(4.0秒)
⑤ 季節の渓谷素材要確認 紅葉・新緑など季節を感じる渓谷の風景。 季節ごとに訪れる理由を伝えるカット。該当素材がない場合は①または④の尺に振り替えてください。
30.0〜35.0
(5.0秒)
⑥ 翠紅苑玄関(暖簾)をくぐる追加 旅人の目線で翠紅苑の玄関に近づき、暖簾をくぐって館内へ入る。 「エリアの旅」から「宿での体験」へ切り替わる区切りのカット。暖簾が揺れる瞬間を丁寧に見せる。(音声ON時:エリアの音から宿の環境音へ移行)
35.0〜41.0
(6.0秒)
⑦ 客室でくつろぐ 窓辺の景色、お茶(川根茶)を淹れる所作など。 (音声ON時:静かなBGMへ移行し始める)
41.0〜47.0
(6.0秒)
⑧ 温泉に浸かる 歩き疲れを癒すご褒美として、露天風呂の湯面アップ→引きで全景。 (音声ON時:湯の流れる音)
47.0〜53.0
(6.0秒)
⑨ 料理を味わう 囲炉裏の炭火・器のディテール中心。一日を締めくくる食事。 (音声ON時:BGMへ完全に移行)
53.0〜60.0
(7.0秒)
⑩ クロージング温泉場全景 寸又峡温泉場の全景(ドローン)から、翠紅苑の建物へゆっくりズームしていく。 秘境の中に宿がある立地を見せて締める。ズームは徐々に減速し、最終フレーム(翠紅苑の建物)で静止して終了。ロゴ・コピー・予約ボタンは動画側に焼き込まず、実装側でHTML要素として重ねます(下記「実装側への依頼事項」参照)。(音声ON時:BGMのみで静かにフェードアウト)
■ ループしません。最終フレーム(翠紅苑の建物)で静止し、ロゴ・コピー・予約ボタン・[もう一度見る]ボタン(実装側のHTML要素)を表示し続けます

演出面でのお願い

サイズ・納品仕様

背景として画面いっぱいに敷く動画のため、デスクトップとスマホで画面の縦横比が異なります。同じ素材をそのまま両方に使うとスマホでは左右が大きく切れるため、下記2サイズでの書き出しをお願いします。コストを抑えるため、撮影・編集は1本のマスター素材で行い、被写体とコピー・ロゴの位置を中央のセーフエリア内に収めたうえで、書き出し時に2サイズにトリミングしていただく形を想定しています。

デスクトップブラウザ用
1920×1080px
16:9
スマホブラウザ用
1080×1440px
3:4
セーフエリア
主要な被写体・コピー・ロゴは、画面中央の4:5(1080×1350px相当)の範囲内に収めてください。中央クロップで2サイズとも破綻しないようにするためです。⑩クロージングの最終フレーム(翠紅苑の建物)も、このセーフエリア内に収まる構図でお願いします。
形式
MP4(H.264)を基本とし、必要に応じてWebM等の軽量版もご相談させてください
音声
あり(環境音+BGM)。再生時の初期状態はミュート
ファイルサイズ
トップページを開いた全訪問者が読み込む動画のため、ウェブ表示速度への配慮として可能な限り軽量化をお願いします。60〜70秒と尺が長いため、ビットレートの調整が特に重要です(目安は別途ご相談)。読み込みながら再生を始められるよう、MP4のfaststart設定(先頭から順次再生できる書き出し)に対応してください。
ポスター画像(静止画)
動画の読み込み前や、通信環境によって動画を再生しない場合に表示する静止画を、デスクトップ用・スマホ用の各サイズで1枚ずつ書き出してください(①夢のつり橋の冒頭フレーム、またはそれに近い構図)。JPEGまたはWebP。

参考:実装側(コーディング会社)への依頼事項

以下は動画制作会社様への依頼事項ではなく、ウェブサイト実装を担当するコーディング会社への依頼内容です。ご参考までに記載しています。

再生方法
ページ読み込み時に本動画(③)を自動再生する。video要素に autoplay・muted・playsinline を指定し、loop は指定しない(ブラウザの自動再生ルール上、ミュートでないと自動再生されないため)。
動画の表示
トップページのメインビジュアル領域を覆うように、背景として表示する(object-fit:cover)。上にキャッチコピー等のHTML要素を重ねる。
音声ボタン
初期状態はミュート。画面隅に音声ON/OFFの切替ボタンを常時表示する。
終了時の挙動
再生終了後は最終フレーム(翠紅苑の建物)で静止させ、ロゴ・コピー・予約ボタン・[もう一度見る]ボタンをHTML要素としてフェードイン表示する(動画には焼き込まない)。予約ボタンは実際にクリックできる本物のボタンとして実装する。
[もう一度見る]ボタン
クリックで動画を冒頭(0秒)から再生し直す。再生中はCTA類を非表示に戻すか、控えめに表示し続けるかは別途協議。
読み込み・モバイル対応
poster属性でポスター画像を指定し、スマホ用・デスクトップ用は画面幅に応じて出し分ける。読み込み完了まではポスター画像を表示する。通信量節約設定(Save-Data)が有効な場合などは、動画を読み込まず静止画のみを表示する対応も検討する。