動画の概要
再生方法
ページ読み込み時に自動再生/常時ループ/背景として画面を覆うように表示
ウェブサイトのトップページを開いた瞬間に流れる、常時再生の背景動画です。宿泊のメイン目的である「夢のつり橋」を起点に、寸又峡エリアの見どころ(アプト式鉄道・奥大井湖上駅)を経て、翠紅苑の建物へとたどり着く流れになっています。前版(15秒)では1カット2〜3秒となり景色を認知しきれなかったため、本版では尺を25秒に延ばし、カット数は増やさず1カットあたり4〜6秒を確保しています。最後の2.5秒は静止画に近い状態でキャッチコピーを表示し、その後また冒頭へループします。
カット割り(絵コンテ)
| タイム | シーン | 内容 | カメラワーク・演出 |
0.0〜6.0秒 (6.0秒) |
① 夢のつり橋最重要 |
つり橋を渡るPOV視点。眼下にエメラルドグリーンの湖面。 |
開始0.5〜1秒ほどは動きを抑えて静止気味に。そこから静かに前進を始める。全カット中もっとも長い尺を確保。ページを開いて最初に目に入るカットのため、湖面の色がはっきり見える構図を優先。 |
6.0〜10.5秒 (4.5秒) |
② アプト式鉄道 |
アプト式鉄道の車窓からの風景、または渓谷を走る列車の外観。 |
つり橋の景色から、寸又峡エリア全体へ視点を広げるつなぎのカット。 |
10.5〜16.0秒 (5.5秒) |
③ 奥大井湖上駅見どころ |
接岨湖に浮かぶ奥大井湖上駅の全景。 |
つり橋に次ぐインパクトのあるスポットのため、長めの尺を確保。ドローンのゆっくりとした旋回または前進で、湖に浮かぶ立地が伝わるように。 |
16.0〜20.0秒 (4.0秒) |
④ 温泉場全景→翠紅苑 |
寸又峡温泉場の全景から、翠紅苑の建物へズームしていく。 |
「エリアの魅力」から「宿」へ視点を橋渡しするカット。 |
20.0〜22.5秒 (2.5秒) |
⑤ 翠紅苑・外観 |
翠紅苑の外観(夕景・灯りが灯り始める時間帯が望ましい)。可能であれば湯けむりを一瞬差し込む。 |
静かなズームアウトで着地。次の静止へ動きを落ち着かせていく。⑥と同一カットで続けるため、外観は合計5.0秒見える。 |
22.5〜25.0秒 (2.5秒) |
⑥ 静止+コピー表示要相談 |
⑤の外観カットのまま、ほぼ静止した状態で保持。 |
静止に入ってから0.3〜0.5秒後に、キャッチコピー1行を薄くフェードイン(文言は別途ご連絡)。 |
↻ 25.0秒の時点で①の冒頭へクロスフェード(0.4〜0.5秒)してループ
演出面でのお願い
- 1カットあたり4〜6秒を基調にしてください。尺を延ばした目的は景色をしっかり認知してもらうことなので、空いた時間に別カットを追加することは避けてください(カット数は上記5カットのまま)。
- 全体を通して、動きは「静かに・ゆっくり」を基調にしてください。手持ち風の激しい揺れや素早いパン・ズームは避け、旅館らしい落ち着いたトーンを優先します。背景の上にキャッチコピーやボタンが重なるため、画面内の動きが少ないほど文字が読みやすくなります。
- つり橋カットは、最初の0.5〜1秒だけ動きを抑えることで、絶景の構図をしっかり見せてから動き出す演出にしてください。
- ⑤→⑥(外観の動き→静止)の切り替えは唐突にならないよう、動きを徐々に落ち着かせながら静止に入るようにしてください。
- ループの継ぎ目(25.0秒→0.0秒)は、色調・明るさをできるだけ揃えたうえで、0.4〜0.5秒のクロスフェードで違和感なくつなげてください。
- 素材は撮影済みです。上記のカット割りに合わせて、素材の中から最適なカットの選定・トリミングをお願いします。1カット4〜6秒を確保できる素材が不足する場合は、事前にご相談ください。
- ②アプト式鉄道のカットは、②ストーリー動画で使用するカットとは別の素材・別アングルを使用してください(同じ絵の繰り返しを避けるため)。
サイズ・納品仕様
背景として画面いっぱいに敷く動画のため、デスクトップとスマホで画面の縦横比が異なります。同じ素材をそのまま両方に使うとスマホでは左右が大きく切れるため、下記2サイズでの書き出しをお願いします。コストを抑えるため、撮影・編集は1本のマスター素材で行い、被写体とコピー・ロゴの位置を中央のセーフエリア内に収めたうえで、書き出し時に2サイズにトリミングしていただく形を想定しています。
デスクトップブラウザ用
1920×1080px
16:9
セーフエリア
主要な被写体・コピー・ロゴは、画面中央の4:5(1080×1350px相当)の範囲内に収めてください。中央クロップで2サイズとも破綻しないようにするためです。
形式
MP4(H.264)を基本とし、必要に応じてWebM等の軽量版もご相談させてください
音声
なし(ミュート前提)
ファイルサイズ
全訪問者が読み込む動画のため、ウェブ表示速度への配慮として可能な限り軽量化をお願いします。尺が25秒に延びた分、ビットレートの調整が重要になります(目安は別途ご相談)。動きの少ないカット構成は圧縮が効きやすいため、上記の演出方針はファイルサイズ面でも有利です。
ポスター画像(静止画)
動画の読み込み前や、通信環境によって動画を再生しない場合に表示する静止画を、デスクトップ用・スマホ用の各サイズで1枚ずつ書き出してください(①夢のつり橋の冒頭フレーム、またはそれに近い構図)。JPEGまたはWebP。
参考:実装側(コーディング会社)への依頼事項
以下は動画制作会社様への依頼事項ではなく、ウェブサイト実装を担当するコーディング会社への依頼内容です。ご参考までに記載しています。
「物語を見る」ボタンの設置位置
ヒーロー動画の右下(画面下部中央のスライド位置インジケーターと重ならない位置)
表示タイミング
動画再生開始から1〜2秒後にフェードイン。以降は25秒間(ループ中)常時表示し続ける(ループのたびに同じタイミングで再フェードイン)
デザイントーン
白抜き文字+半透明の黒背景のピル型ボタン(例:「▶ 物語を見る」)。予約ボタン等のメインCTAと競合しないよう、目立たせすぎない控えめな見た目にする
タップ領域・配置の注意
タップ領域は最低44×44pxを確保する。スマホでは画面下端のホームインジケーターと重ならないよう、下端からの余白(セーフエリア)を空ける
動画の読み込み・モバイル対応
video要素にposter属性で上記ポスター画像を指定し、動画の読み込み完了まで静止画を表示する。スマホ用・デスクトップ用は画面幅に応じて出し分ける。通信量節約設定(Save-Data)が有効な場合などは、動画を読み込まずポスター画像のみを表示する対応も検討する。
クリック時の挙動
②ストーリー動画(60秒)を自作オーバーレイで再生する。詳細は「②ストーリー動画 制作仕様書」を参照