Webデザインネタ（背景動画）

動画を1st View（トップビュー）にすると気分が上がりますね。

だいぶ昔からある手法ですけど、いざ、自分の制作環境でやるとジワジワと気分が上がります。小市民的幸せに浸っております。
動画は僕が撮った写真20枚を1分程度のスライドショーにしただけどの何の変哲もない動画ですが、それでも動画だと気分が上がるぅ。一枚の画像よりイメージが広がるから良いですね〜！

Vimeoにアップした動画を使う

重複しますが、Webページのトップページの1st View（一番上の画）に動画を背景画像として埋め込んでみました。動画はVimeoの有料版で一番安いプランにアップした動画のリンク（iflame）を貼ってみました。最初は少し戸惑ったものの、すんなり配置出来、動画の上にWebページタイトルやマーク等も自由に配置できました。　動画の上に置くタイトルやマーク等は絶対位置での配置になるんですね。

Web制作はSTUDIOで制作しています。以前はHTMLとCSSを習ってやっていたんですが工数が多すぎて、個人でやるには現実的じゃないと思い、ノーコードのSTUDIOに移行しました。

音声はカットしました。

再生環境によっては音声が邪魔というか迷惑に場合もあるし、写真の代わりに配置する背景動画でしたので音声はカットしました。サイトに接続していきなり音声が出るのは僕はあんまり好きじゃないです。

背景動画のタイトルは動画自体には入れる・入れない？

Webの背景動画の場合、動画自体にタイトルを入れると再生する環境によっては表示が一部隠れてしまう場合があるので、タイトルなどはWebデザインの方で配置した方が後々都合がいいです。もちろん、背景動画じゃない掲載動画の場合はその限りじゃありません。タイトルの位置は背景動画に映る人の顔にかからない場所にしました。ただ、それも再生環境では場所が微妙に違ってきます。

無料版のYouTubeを使う場合とどう違うのか？

Vimeoじゃなく無料版のYouTubeでも出来るのですが、YouTubeでやると動画を埋め込んで上手くいったとしても、ちょっとしたマウス操作でYouTubeマークや再生ボタンなどが現れてしまいます。またループ設定をしないでいると、再生が終わった後に次の動画の再生リストが現れたりするので、格好悪いんですよね。地元の大きな神社のWebサイトもYouTube動画を使っているんですが、PCでは格好いいのですけど、スマホで見るとYouTubeマークとか出てしまいます。

Vimeoの動画だと上記の問題が無いようです。僕も検証しまくっている訳じゃないけど、そういう話です。

お客様にのプレビューのリンクを送って見てもらいました。

「これは良いですね。最初の頃の一枚の写真だけよりずっと良いですね。ただ、これ以上いろいろされると請求書が怖くなるので、凝るのはこの辺りでそろそろ終わりにしてもらえませんか？」と言われましたwww

2021年、有料会員だったときのメルアドとPWでログインしてみたら、なんとまだアカウントが残っていた。

Vimeoは2021年の時、短期間入っていたときのアカウントが残っていました。それでアップグレード適用で、年払いで月々1200円計算のプランが年払いで月々900円プランになりました。更にびっくりなのは、その時にアップしていた動画がまだ残ってました。

Vimeoの埋め込みの方法。以下に親切な記載があります。

https://embedsocial.jp/blog/embed-customize-vimeo/

記・2025-0214