ホームページに置く動画の決め方|置き場所・尺・音と、YouTube埋め込みの選び分け

ホームページに置く動画は、置き場所と音を先に決める

結論から書きます。サイトに置く動画は、作ってから置き場所を考えると失敗します。順番が逆です。

どのページのどこに置くか。音を出すか出さないか。この2つが決まって、はじめて尺と構成が決まります。

私たちは広島で動画制作会社をやっています。2022年の設立以来、累計300本以上を作ってきました。Webサイトのトップページに置くアニメーションや、LP用の短い動画も手がけています。

よくあるのが、こういう相談です。「展示会で流した3分の動画を、ホームページのトップにも置きたい」。置く作業自体は数分で終わります。ただ、トップページに来たばかりの人が、その3分を見る確率はほとんどありません。

置き場所が変われば、見ている人の状態が変わります。状態が変われば、必要な尺も中身も変わる。1本を全ページで使い回せる場面は、思っているより少ないです。

置き場所ごとに、見ている人の温度が違う

同じサイトの中でも、ページによって来訪者の状態は違います。私たちが設計の目安にしている表を出します。

右端の列を見てください。役割が全部違います。1本で全部まかなおうとすると、どのページでも中途半端になります。

LP用の制作サンプルでは、LPのデザインを踏襲したアニメーションを作り、15秒に情報を圧縮しました。株式会社オクヒラ様では、Webサイトのトップページに掲載するメインアニメーションを制作しています。どちらも、置く場所が先に決まっていた案件です。

予算が限られるなら、最初の1本はどこに置くか

1本だけ作る場合、私たちはサービス紹介ページに置くものを勧めています。

トップのファーストビューは、効果が見えにくい場所です。サイトの印象は良くなります。ただ、問い合わせが増えたかどうかの検証が難しい。対してサービスページの動画は、そのページからの問い合わせ数で判断できます。最初の1本は、数字で良し悪しを言える場所に置いたほうが、2本目の話が進みます。

音ありの自動再生は、設計の前提にできない

ここが発注側といちばんズレる箇所です。

ブラウザは、音の出る動画を勝手には再生しません。Chromeの公式ドキュメント(Autoplay policy in Chrome)には、音声付きの自動再生が許可される条件が挙げられています。ユーザーがそのサイトを操作した後、過去の視聴傾向を示す指標がしきい値を超えている場合、サイトをホーム画面やPWAとして追加している場合。そして「ミュートされた自動再生は常に許可されます」と書かれています。

サイトを開いた瞬間に音が流れる前提で作ると、大半の人には無音で届きます。

実務上の結論は単純です。自動再生させる動画は、音なしで成立する作りにしてください。

• ナレーションに頼らない。要点は画面の文字で出す
• 字幕は最初から入れる。後付けは修正回数を1回使う
• 効果音でタイミングを取る構成にしない
• 音ありで聞いてほしい動画は、再生ボタンを押させる置き方にする

最後の行が抜けがちです。社長メッセージやインタビューは、音が本体です。これを背景の自動再生枠に入れると、何も伝わらないまま流れ続けます。ポスター画像とタイトルを置いて、クリックで再生させる形にしてください。

私たちのサイトのトップも、この考え方で作っています。背景で流れている動画は約30秒、音なし、ループです。動きを抑える設定をブラウザに入れている人には、静止画のまま表示されるようにしています。

YouTube埋め込みか、サーバー直置きか

次に決めるのが、動画の置き方です。やり方は2通りあります。

選び分けの基準は1つです。その動画を「動画として見せたい」のか、「ページの一部にしたい」のか。

見せたい場合はYouTubeで足ります。サービス解説、導入事例インタビュー、採用動画。再生ボタンを押して見るものです。視聴データも管理画面で取れます。

ページの一部にしたい場合は直置きになります。ファーストビューの背景、商品カットのループ、見出しの横で小さく動く映像。ここにYouTubeのロゴや関連動画が出ると、デザインが崩れます。

直置きで気をつけるのは容量です。背景ループなら、目安として数MB以内に収めてください。私たちのサイトのトップに置いている動画は、30秒で約5.7MBです。解像度を720pまで落とし、音を外して、この数字に収めました。表示を待たせないよう、先に静止画を出して、動画はその後ろで読み込ませています。

確認するときは、スマートフォンの回線で見てください。事務所の光回線で「軽い」と判断すると、現場でずれます。

発注のときに、一緒に頼んでおくもの

納品後に追加で頼むと、修正回数を1回使うことになります。発注の段階で、次の6つを伝えてください。

• 置くページのURL(まだ無ければ、ワイヤーフレームか手書きの図)
• 表示サイズ(画面の横幅いっぱいか、本文の中の枠か)
• 音を出すかどうか
• 自動再生させるか、クリックで再生させるか
• 必要な書き出し(Web用の軽いMP4と、ポスター用の静止画1枚)
• スマートフォンでの見え方(横型のまま出すか、縦型を別に作るか)

5つ目のポスター用静止画は、よく忘れられます。動画が読み込まれるまでの数秒、そこに何が映るかを決める1枚です。用意しないと、真っ黒な四角が表示されます。

ワウハウス株式会社様では、パンフレットの構成・デザインデータを踏襲して動画化しました。サイトやパンフレットのデザインがすでにある場合、そのトーンに合わせたほうが、ページに置いたときになじみます。手元のデータを渡していただけると、制作期間も短くなります。

費用の目安も書いておきます。私たちのアニメーション動画は、スタータープランが50,000円(税別)、お持ちの素材を使うスタンダードプランが150,000円、完全オリジナルデザインのプレミアムプランが300,000円です。修正は2回まで料金に含まれます。3回目以降は別途ご相談ください。納期は最短2週間が目安です。

相談する

置き場所が決まっていない段階でも構いません。「トップに何か動画を置きたい」という状態から、一緒に整理します。打ち合わせはオンラインで行い、広島市内であれば訪問でも対応します。