ホームページ制作で失敗しないために知るべきこと

ホームページで目を引く要素の一つとして動画があります。
以前は様々な方法が試みられてきましたが、近年ではyoutubeを利用することが一般的です。

youtubeにアップした動画をホームページに掲載します。
アップしたのち、当該動画のページを開きます。
動画の下、右側に「共有」というボタンがあります。
このボタンを押すと、共有する方法の選択が開きます。

ここで、左端の「埋め込む」をクリックします。
動画の埋め込み画面が開きます。

右側にHTMLコードが表示されています。
右下の「コピー」をクリックするとコードがコピーされますので、埋め込みたいページのソースの埋め込みたい位置に貼り付けます。

レスポンシブ対応

実は、この操作だけですと、レスポンシブに対応できない事があります。
レスポンシブ対応では、youtubeのコードのiframeを取り囲むようにdivを設定する方法が良く使われます。

<div class="youtube">
<iframe width="560" height="315" ... ></iframe>
</div>

ここで、padding-top: 56.25%; のところは、利用する動画の縦横比によって変更します。
（多少の違いは、上下に少し黒い枠が出る程度なので神経質にならなくても大丈夫です）

ショートの場合

最近youtubeでも広まってきた縦型のショート動画ですが、さすがにこの場合はかなり違ったスタイルの指定になります。
最初からスマートフォンでも表示できる幅に制限しても問題ないでしょう。
と言いますか、あまり大きく表示すると、パソコンのとき高さがありすぎてしまいますから。

いろいろなサイトを見ていると、背景画像として動画が表示されている事があります。
これもやり方は異なりますが、youtubeの埋め込みの一種で実現できます。
ただし、こちらは普通にhtmlとcssだけでは困難です。

今回は比較的手軽に実現できるjQueryのプラグインを使う方法をご紹介しましょう。

jQueryプラグインの「jquery.mb.YTPlayer」を利用することで、背景への埋め込みができます。
「jquery.mb.YTPlayer」を検索することで、説明しているサイトや入手情報が簡単に見つけられます。
詳細は検索していただくとして、ここでは「そもそもjQueryのプラグインとは何？」という所について説明します。

既にいくつかjQueryのプラグインを活用されている経験がおありの方は、以下はスキップしていただいて構いません。
「jquery.mb.YTPlayer」を検索して、ご活用ください。

JavaScriptとは

そもそもこれまでホームページに関する記事をいくつか書いてきましたが、jQueryについて説明したことはあませんでした。
このため、「jquery.mb.YTPlayer」の解説を見ても、意味不明な用語や、説明の無い概念を前に困惑されてしまうかもしれません。

まずはjqueryの前に、ホームページの３大要素「HTML」「CSS」「JavaScript」について説明しましょう。
「HTML」はホームページを記述する言語で、「CSS」については以前の記事で解説していますので、そちらをご覧ください。

「JavaScript」は主にホームページに動的な要素を追加するために利用されます。
フォームから入力したとき、ポップアップでエラー表示が出たり、何かボタン操作をしたとき、ページが更新されていないのに、新たなコンテンツが出て来たり消えたりするのは、このJavaScriptが関係しています。

jQueryとは

JavaScriptは高機能ですが、それをさらに使いやすくするために使われます。

JavaScriptを使うためにはプログラムを組む必要がありますが、様々なプログラムをあらかじめ用意し、ホームページ制作者の負担を軽減してくれます。
本来なら長く大きなプログラムを書く手間を省き、簡単なコードで実現できるようにしています。

利用するには
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
のように一般に提供しているサイトのスクリプトを埋め込むか、jqueryのサイトからダウンロードして
<script src="js/jquery-3.3.1.min.js"></script>
のように設定します。

jQueryプラグインとは

様々な機能を追加してくれるjQueryですが、もちろん万能ではありません。
より具体的で専門的な機能については、jQueryプラグインと呼ばれる形で追加します。

jQueryは共通のものとして提供されていますが、jQueryプラグインはその提供元が制作したものとは限りません。
（通常は違っています）
これはWindowsはMicrosoftが提供していますが、Windowsで動くアプリはアドビなど違う会社や個人から出ているのと似たような話です。

今回話題に挙げた「jquery.mb.YTPlayer」も例外ではありません。

では、背景に動画を入れてみたい方は「jquery.mb.YTPlayer」について検索して、チャレンジしてみてください。

そもそも「youtubeにアップした動画を...」と言っていますが、その動画はどうやって用意すれば良いでしょうか。
以前「ホームページと画像」のところで書いた事と大体同じですね。
静止画が動画に変わっただけです。

自分で撮影する

今どきのスマートフォンなら、普通に動画を撮影できますから、それをパソコンに取り込んで加工すると作ることができます。
商品の紹介なら、使い方などを動画で解説するのはよく行われていますね。

大きな会社という事でなれば、一般的にはこの方法が妥当ではないでしょうか。

自分が出演する

画像のときは撮影者と演者が必要でしたね。
動画でも事情は同じですが、実は「人間」を出さずに済ませる方法があります。

VTuberとかVチューバーという言葉を聞いたことはありませんか。
これはバーチャルYouTuberの略語です。
主に３Ｄ（２Ｄのケースもあります）で作られたキャラクターが動画に登場して何かを解説したり、歌を歌ったりするとき、そのキャラクターを演じている人（中の人）がいるキャラクターを指している事が多いようです。

VTuberが出演する動画は、専門のツールを利用することで誰でも作ることができます。
（むしろキャラクターデータを用意することのほうが大変ですが、こちらは専門家に依頼すると良いでしょう）

環境が用意出来たら、webカメラの前で語るだけで目線や表情、口パクなどが全自動で反映された動画になります。

商品の操作動画なども手元しか映らないように撮影すれば、スタッフのプライバシーなどについて大きな問題とはなりにくいでしょう。
顔出しが必要なところは、VTuberで対応するといったハイブリッドな作り方も考えられます。

生成ＡＩ

画像のときは生成ＡＩの活用も選択肢の一つでした。では動画はどうなのでしょうか。
TVCMの中には、生成ＡＩを活用した動画を採用しているものもありますね。

この記事を書いているのは2025年の春ですが、現時点では生成ＡＩを動画作成で一般に活用するには環境的にもコスト的にもハードルが高いと言えます。
ですので、何年か後なら話も違うかもしれませんが、今のところは選択肢から外しても良いでしょう。

昔は動画を掲載するのは一苦労で、容量も大きくサーバーの負荷も高くなる。さらに互換性問題もあるなど問題児でしたが、今ではyoutubeという標準ができたので、ずっとやりやすくなっています。

画像と異なり、動画は必須要素ではありません。
ですが、効果的に利用すれば、ワンランク上のホームページになるでしょう。