ホームページのトップの動画は、長さではなく最初の一秒で決まる

トップに動画を入れるべきかどうか、という相談をよくいただきます。ただ、実際に効き目を分けているのは、入れたかどうかではありません。開いた瞬間の一秒に、何が映っているかです。

そして動画がうまく働かなかった時の原因は、たいてい映像の質ではありません。再生されなかった、待たされた、縦で切れた。ほとんどがこの三つで説明がつきます。

最初の一秒に、何を置くか

動画は、開いた瞬間から再生されるとは限りません。読み込みが終わるまでの数百ミリ秒、端末の設定、通信の状態。そのあいだ画面に出ているのは、動画ではなく静止画です。

つまり訪問者が最初に見る一枚は、動画の一コマ目ではなく、その手前に置いた画像です。ここが空白のままだと、開いた瞬間に黒い帯が出て、それから映像が始まります。動画を入れたのに、印象が下がるのはこの形の時です。

置く画像は、動画の一コマ目と同じ絵にします。同じであれば、切り替わりが見えません。別の絵にすると、一秒のあいだに二度画面が変わり、それだけで落ち着かなくなります。

一秒で伝わらないものは、十五秒あっても伝わりません。尺を伸ばす前に、止まった一枚で成立しているかを見てください。

トップの動画のサイズは、秒数ではなく重さで決まる

サイズの相談は、たいてい「何秒がいいか」から始まります。ですが先に決めるのは、寸法と重さです。

寸法は、その動画が画面のどこまでを占めるかで決まります。全画面の背景なら長辺1920で足ります。上部の帯だけなら1280で十分です。撮影や編集から4Kのまま受け取って、そのまま置いてしまうのが最も多い失敗です。表示される大きさを超えた解像度は、画面の中では一切見えず、待ち時間だけが増えます。

尺は、背景として流すなら十秒から十五秒。人の目は、それ以上の長さを一度に見ていません。短く作って綺麗に繋げた方が、同じ容量で画質を上げられます。

そして音声トラックは外します。トップの動画で音が鳴ることはまずないのに、容量だけは載っているからです。

トップに動画を入れると、ページは重くなるか

結論から言うと、重くなるかどうかを決めているのは動画の容量そのものではありません。最初の一枚が出るまでを、動画の読み込みが待たせているかどうかです。

同じ容量の動画でも、静止画を先に出して動画を後ろで読み込む作りなら、体感はほとんど変わりません。逆に、動画が届くまで何も描かない作りだと、数メガバイトでも「重いサイト」になります。

だから測る値も、動画のメガバイト数ではありません。開いてから最初の一枚が出るまでの時間です。ここを見ずに容量だけ削ると、画質を落としただけで体感は変わらない、という結果になります。

削る順番は、寸法、尺、音声、最後に画質。この順に効きます。画質から手をつけるのは、いちばん見た目を損なう割に、いちばん効きません。

スマホの縦画面では、横長の動画の半分は見えない

トップの動画は、パソコンの横長で作られます。ですが実際に見られるのは、その多くが縦の画面です。

縦にはめ込むと、横長の左右は切り落とされます。中央の狭い帯だけが残る、と考えてください。ここに主題が入っていなければ、スマホで見た人には何も映っていないのと同じです。

だから編集の時点で、切られてよい範囲を左右に用意しておきます。主題は中央に置き、両端には情報を置かない。文字を入れるなら、なおさら中央の帯からはみ出させません。

予算があるなら、縦は別に書き出すのが確実です。同じ素材から縦だけ組み直すのは、撮り直しよりずっと安く済みます。

自動再生されない端末が、必ずある

ここは推測ではなく、こちらで実際に測った話です。Safari は、端末が低電力モードのとき、音のない動画でも自動再生しません。これは端末側の制御で、サイト側のコードでは上書きできません。同じページを Chrome で開くと再生されるため、「こちらでは映るのに、あちらでは止まっている」という食い違いが起きます。iPhone の低データモードでも同じことが起きます。

自動再生に必要な条件を全て満たしていても、この二つの設定が入っていれば再生されません。つまり、再生されない訪問者は必ず一定数います。

だから設計は逆から始めます。再生されなくても成立するか。止まった一枚が、そのまま一枚の写真として成立していれば、それでこのページは負けません。動画は、成立している画面に足される贈り物という位置づけになります。

触れた時に確実に再生されるようにもしておきます。ここで一つ落とし穴があります。スクロールは、Safari では再生を許す操作として数えられません。スクロールを合図にした作りは、直したつもりのまま直っていません。

SNSから開かれた時に、スクロールが引っかかる

InstagramやLINEのリンクから開いた時だけ、スクロールがかくかくする。Safariで開くと滑らか。この相談も動画のせいにされがちですが、原因は別のところにあります。

アプリの中のブラウザは、上にスクロールすると自分のツールバーを戻します。その時に、ページの高さの基準そのものが毎フレーム変わります。画面の高さを基準に組んだ帯があると、そのたびに全部の位置が計算し直されます。動画が重いのではなく、動画を置いた枠の作り方が原因です。

直し方は、読み込んだ時に高さを一度だけ測って固定し、画面を回した時にだけ測り直すことです。見た目は一ピクセルも変わりません。

この原因を突き止めた時、こちらは先に六回、推測でCSSを触って外しています。最後は、要素を一つずつ抜いたページを実機で順番に見て、一度で確定しました。自分のスマホで滑らかだったことは、確認したことになりません。

一年後に差し替えられる形で作る

トップの動画は、必ず古びます。季節が変わり、人が替わり、商品が替わる。半年後に「あの一箇所だけ差し替えたい」と思った時、作りようがなくて全部を作り直す、というのがいちばん高くつきます。

だから最初に、四つだけ決めて残しておきます。長辺の寸法。尺。主題を置く中央の帯の幅。静止画の作り方。この四つが書いてあれば、次の動画は誰が作っても同じ枠に収まります。

逆に言えば、この四つが決まっていない動画は、その一本きりの動画です。良く撮れていても、一年で使えなくなります。当方がブランド映像をお受けする時も、最初に確かめるのはこの四つで、絵の相談はその後です。

置くかどうかではなく、何を見せないかで決まる

ホームページのトップに動画を置く理由は、情報を増やすためではありません。減らすためです。一秒で一つだけ伝わる状態を作れるなら、動画はいちばん強い手段になります。三つ伝えようとした瞬間に、ただの重いページになります。

一秒目に何を見せるか。そして何を見せないか。決まっていれば、動画は十秒で足ります。

決めてから、置く。順番はそれだけです。