キービジュアル動画差し替えマニュアル

対象箇所

以下のHTMLで表示されている トップのキービジュアル動画が対象です。

<ul class="bxslider clearfix">
  <li>
    <video autoplay muted loop playsinline preload="auto">
      <source src="～.webm" type="video/webm">
      <source src="～.mp4" type="video/mp4">
    </video>
  </li>
</ul>

全体の流れ（最初に全体像）

Adobe Stock で動画を購入
MP4動画を用意
Squoosh で WEBM に変換
ファイル名をルールに沿って変更
サーバー（テーマフォルダ）にアップロード
HTML内の動画パスを差し替え
表示確認（PC / SP）

① 動画素材の準備（Adobe Stock）

動画は以下から購入します。
👉 https://stock.adobe.com/jp

推奨条件

用途：Web / ヒーロービデオ
解像度：フルHD（1920×1080）で十分
※ 4Kは容量が大きくなりすぎるため非推奨
尺：5〜10秒程度（ループ前提）

購入後、MP4形式でダウンロードしてください。

② WEBM形式への変換（Squoosh）

MP4だけでなく、WEBMも必須です。
（Chrome / Edge での軽量再生対策）

使用ツール

👉 https://squoosh.app/

変換手順

Squoosh に MP4 をドラッグ
右側の設定で以下を指定

推奨設定（WEBM）

Format：WebM
Codec：VP9
Quality：60〜70
Resize：不要（元がフルHDならそのまま）

「Download」で WEBM を保存

③ ファイル名ルール（重要）

ルール

拡張子以外は同じ名前にする
英数字・アンダースコアのみ
日本語ファイル名は使わない

OK例

hero_simulation_01.mp4
hero_simulation_01.webm

④ 動画ファイルのアップロード先

以下のテーマフォルダ内に配置します。

/wp-content/themes/INTES/image/

※ メディアライブラリにはアップしません

⑤ HTMLの差し替え方法

変更前

<source src="<?php echo esc_url( get_template_directory_uri() ); ?>/image/AdobeStock_361274869.webm" type="video/webm">
<source src="<?php echo esc_url( get_template_directory_uri() ); ?>/image/AdobeStock_361274869.mp4" type="video/mp4">

変更後（例）

<source src="<?php echo esc_url( get_template_directory_uri() ); ?>/image/hero_simulation_01.webm" type="video/webm">
<source src="<?php echo esc_url( get_template_directory_uri() ); ?>/image/hero_simulation_01.mp4" type="video/mp4">

👉 拡張子だけ違って、ファイル名は完全一致させてください。

⑥ 属性は変更しない（超重要）

以下の video タグの属性は 削除・変更しないでください。

<video
  autoplay
  muted
  loop
  playsinline
  preload="auto"
  width="100%"
  height="auto"
>

理由

muted：自動再生に必須（iOS対策）
playsinline：スマホで全画面にならない
loop：キービジュアル用
autoplay：ファーストビュー用

⑦ 表示確認チェックリスト

PC

自動再生される
カクつきがない
ループが自然

スマートフォン

自動再生される（音は出ない）
全画面に切り替わらない
レイアウトが崩れない

よくあるミス ❌

ミス	原因
動画が表示されない	WEBM or MP4 のどちらかが欠けている
自動再生しない	`muted` を消している
真っ黒になる	ファイル名の不一致
重い	動画サイズ・ビットレートが高すぎる

補足（安心ポイント）

2つの形式（WEBM + MP4）を用意しているため、主要ブラウザは全対応
動画を差し替えても JS / CSS の修正は不要
ファイルを戻せば 即元に戻せる

キービジュアル動画 差し替えマニュアル