背景動画

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

背景動画

ファーストビューの背景に動画を敷くと、静止画では出せない空気感・世界観を一瞬で伝えられます。店舗の雰囲気、製品が動く様子、街の風景――「言葉より先に見せたい」ものがあるサイトで強力な手法です。デモは自前の動画ファイルを流す方法と、YouTubeを背景化する方法の2本立てです。

ただし背景動画は、ページ上で最も重いリソースになりがちです。演出効果と引き換えに何を背負うのか――導入判断まで含めて考えどころの多い部品です。

今回は掲載内容の説明を簡易化させ、印象づける背景動画を作りました。

サイトの動作が重い場合はYouTubeリンクを利用されると良いかもしれません。

おさえておきたいところ

ギャラリーを使う目的と使いどころはこんな感じです。

       目的：掲載内容の説明を簡易化させ、印象づける
使いどころ：掲載内容の説明を簡易化させ、印象づける

画面全体に背景動画を流す

YouTubeを使って、画面全体に背景動画を流す

実務メモ（2026年追記）

技術面の前提として、自動再生にはmutedとplaysinlineが必須です（音付き自動再生はブラウザにブロックされます）。そのうえで実務の主戦場は軽量化で、動画は短尺ループを数MB以内に圧縮し、posterで初期画像を指定、モバイルでは静止画に差し替えるのが定石です。表示速度の指標（LCP）に直撃する部品なので、導入判断は計測とセットで。またYouTube背景は手軽な半面、読み込みが重く表示の制御にも限界があるため、本番では自前ホスティングに軍配が上がります。

• 動画の上に載せる文字は、半透明のオーバーレイを敷いてコントラストを確保する
• prefers-reduced-motionでは動画を止めて静止画を見せる配慮を
• 「動画がなくても成立するデザイン」を先に作り、動画は上乗せにする
• 軽い演出で済むケースは動く背景のCSSアニメーションが代替になります

次回の予定

ユーザーにアクションを起こさせるボタンを作ってみようと思います＼＼\٩( ‘ω’ )و //／／