2024.5.02
動画は近年、集客コンテンツとして幅広く利用されており、動画を埋め込んだLP（ランディングページ）もよく見かけるようになりました。
「競合他社でも動画を活用したLPが増えたが、実際本当に成果が上がるのか？」
「既存のLPに動画を埋め込みたいけれど、実装方法がわからない」
「動画制作自体工数がかかるなら自社では難しそう」
このように、自社でLPに動画を活用したいけれどいまいち踏み切れずにいる方も多いのではないでしょうか。
本記事ではそのような方に向けて、LP（ランディングページ）に動画を埋め込む3つの方法、動画を埋め込むメリットや注意点、成功事例などを解説します。
動画付きLP（ランディングページ）とは、ファーストビューや商品説明などのコンテンツに動画を用いたLPを指します。
LP（ランディングページ）に動画を埋め込む方法は大きく3つあります。それぞれメリットとデメリットを踏まえたうえで、自社に合うやり方で動画を埋め込みましょう。
ご存じの通り、LPに限らずすべてのWebサイトはHTMLで作られています。 HTMLでは、タイトルはtitleタグ、画像はimgタグなど、各要素をタグで指定します。 同様に、動画の場合はvideoタグというタグがあり、そのタグの設定位置で動画を読み込み表示させることができます。 以下の記述は動画のファイル形式がmp4の場合のvideoタグの例です。「属性」の部分には、自動再生・繰り返し再生・サムネイル設定などの詳細な設定を加えることができます。
属性には以下の種類があります。複数の属性の併用も可能です。
LPの制作にCMSツールを使っている場合、動画のファイルサイズはそのCMSの容量制限にかなり影響を受けます。 さらに、動画圧縮ツールを利用して圧縮しても、動画品質が落ちるなどのトラブルも起こりがちであるという点にも注意しましょう。
各ブラウザで正常に表示させるため、以下のように動画を複数のファイル形式で埋め込む必要があります。mp4が優先して再生されますが、mp4で再生されない環境ではwebmで再生されるという仕組みです。
Androidで動画が再生されない場合は、ベーシック認証を解除する必要があります。
iPhoneで動画が再生されない場合は、playsinline属性の設定を追加する必要があります。
スマートフォンからの閲覧を想定しているLPでは必ず設定しておきましょう。
掲載したい動画をVimeoやYouTubeなどの外部の動画配信プラットフォームにアップすれば、videoタグよりも簡単に動画を埋め込むことができます。
埋め込み手順・メリットデメリットは以下の通りです。
①「Vimeo」や「YouTube」にアップされている該当動画のタイトル下にある「共有」をクリック
②「Vimeo」の場合は埋め込みのコードをクリックして全選択・コピー、YouTubeの場合は埋め込むをクリックしてコードが表示されたらコピーをクリックする
③コピーした「iframe～～」から始まる埋め込みコードを、LP内の動画を掲載したい場所に貼り付ける
デメリットとしてカスタマイズに制限があると述べましたが、YouTubeではパラメータを利用することである程度のカスタマイズが可能です。 「iframe～～」から始まる埋め込みコードの末尾に「?」をつけてその後ろに各カスタマイズ設定のパラメータを付与します。そうすることで自動再生や動画開始位置などの設定を追加できます。
パラメータ例）
autoplay：自動再生する
loop：ループ再生（末尾に「=」+数字をつけると数字の回数だけループ再生となる）
以下のYouTube公式サポートページでは様々なパラメータが記載されているので参考にしてください。
「LetroStudio」は、パワポのような操作感で誰でも簡単に動画を量産できる動画制作プラットフォームです。 「LetroStudio」で制作した動画をLPへ埋め込む場合は、動画制作後に管理画面上でサイズや自動再生などの設定も可能。以下のように埋め込みを簡単に行うことができます。
①「LetroStudio」の管理画面上で動画を制作して書き出す
②オプション設定で動画サイズやループ再生などの設定を行う
③②の設定が反映されたHTMLタグが上に表示されるため、「タグをコピー」をクリック
④LPの中で動画を掲載したい場所に貼り付ける
引用：LetroStudio、動画やアニメーションをサイトに掲載できるタグ発行機能を提供開始。ECサイトやランディングページ（LP）のファイルアップロード容量オーバーを回避
「YouTube」では、埋め込みタグの末尾にパラメーターを付与することで、ある程度のカスタマイズが可能でした。一方でLetroStudioでは、パラメーターを使用せずとも、動画埋め込み管理画面で直感的に操作し、表示サイズや自動再生、ループ再生などを設定できます。
動画の表示設定に細かいカスタマイズを加える予定がないのであれば、動画ファイルサイズの観点からも「YouTube」などの動画配信プラットフォームや「LetroStudio」の埋め込みタグを利用するのがおすすめです。
先述の通り、通常のテキスト・画像のみのLPとは違い、動画付きLPはファーストビューや商品説明に動画を用いたLPです。
通常の静止画LPとは異なり、動画付きLP特有の成果を出すポイントがあります。
動画つきLPで成果を出すポイントについて詳細を知りたい方はこちら
▶ LP×動画｜動画付きランディングページで成果を出すポイントは？注意点も解説
1分間の動画はWebサイト約3,600ページ分の情報量に相当すると言われており、短時間で多くの情報を伝えられます。
情報やイメージをLP内の動画で伝えることで、静止画よりも訴求力が高まり、以下のようなメリットを享受できます。
・商品に興味を持ってもらいやすくなる
・CVR改善が期待できる
そもそもLPというのは、1ページで完結し最低限の文章量でコンバージョンを誘導することを目的としています。 LPに掲載する情報は、他のWebサイトコンテンツよりも精査し吟味する必要があるため、細かい情報の補足などは切り捨てる場合が多いでしょう。
その一方でLPに動画を用いれば、ユーザーは多くの文章を読まずとも、聴覚と視覚を使って直感的かつ感覚的に情報を得ます。動画によって、情報を得るためのストレスを感じにくいと考えられます。
さらに、動画によってLPの内容がユーザーの記憶に残りやすくなります。
Forbesの記事によると、ユーザーは文字で得た情報は10%、動画から得た情報は95%記憶に残るとされています。
参考：How To Incorporate Video Into Your Social Media Strategy｜Forbes
動画では、文章や画像だけでは伝わらない「動き」「音」というインパクトの強い情報が追加されます。ユーザーは商品自体や商品を使う自分を具体的にイメージし、その記憶が残ることで商品への興味が高まるのです。
LPに動画を利用することで、CVR改善も期待できます。
それは、動画を再生することでページ滞在時間が伸びるためです。
さらにファーストビューを動画化すれば、直帰率や離脱率も改善される可能性もあります。
それが結果的にCVR改善にもつながるのです。
アメリカの動画マーケティング会社Eyeview社は、
「ランディング ページにビデオを含めるだけでコンバージョンが 86% 以上増加する」
「動画を含むランディング ページは、実際の動画自体をクリックしないユーザーの間でも、そうでないランディング ページよりもコンバージョン率が高くなる」
としています。
参考：>The Secret to Conversion Rate Optimization: Video Marketing｜vwo.com
このように、動画コンテンツを埋め込んだLPは、動画を視聴してもしなくてもCVR向上が見込めます。
実物を見ることができないオンラインショッピングでは、LP内のコンテンツでの情報の補完が必要です。
その情報コンテンツを動画というリッチなものにすることで、商品理解度が高まりCVR改善が期待できるでしょう。
CVR改善の頭打ちにお悩みの方は、ぜひともLPへの動画の導入を検討してみてください。
記事LPのファーストビューに動画を活用したことでCVRが2倍以上になった事例はこちら
▶【記事LPのファーストビューに動画を活用、CVR2.25倍に】DMJえがお生活の動画活用事例
ここまでLPに動画を埋め込むメリットをご説明しましたが、実装する際にいくつか注意も必要です。
先述した通り、videoタグで直接動画を埋め込む場合、ユーザーの閲覧環境によっては再生できないファイル形式もあります。埋め込む際は動画のファイル形式を必ず確認しましょう。
videoタグを使用して埋め込む場合、埋め込み可能なファイル形式は以下の3つです。
・mp4
・webm
・ogv
以下のように、動画を上記3種類のファイル形式で用意し、mp4が再生できない場合はogvで再生といったことができるような記述にしておきましょう。
動画配信プラットフォームの埋め込みコードを使用する場合、それぞれのサポートするファイル形式は以下です。
・YouTube
MOV、MPEG-1、MPEG-2、MPEG4、MP4、MPG、AVI、WMV、MPEGPS、FLV、3GPP、WebM、DNxHR、ProRes、CineForm、HEVC（h265）
・VImeo
MP4、MOV、WMV、AVI、FLV など
迷ったらmp4で制作しておくと安心でしょう。
LPに動画を埋め込むと、サイトの持つファイル容量が大きくなり、サーバーに大きな負荷がかかります。
負荷の大きなLPはページ全体の表示速度が落ちる可能性が高く、ユーザーの離脱やSEOへの悪影響が起こります。
特に直接videoタグで埋め込む場合、動画のファイルサイズが直にサーバーに負荷を与えるため、ファイルサイズには注意が必要です。
videoタグで直接埋め込むのであれば、ファイルサイズはできれば5MB以下まで圧縮するのがおすすめです。
しかし、毎回品質を落とさずに動画を圧縮するのにも多くの工数がかかるはずです。 「LetroStudio」のHTMLタグを利用すれば、LP自体の読み込みとは別でプラットフォーム独自のサーバーを読み込みに行くため、LP自体の表示速度が落ちるリスクを防げます。
ECサイトやLPのファイルアップロード容量オーバーを回避するには？
▶LetroStudio、動画やアニメーションをサイトに掲載できるタグ発行機能を提供開始。
LP（ランディングページ）に動画を埋め込むことでCVRの改善が期待できると述べました。では実際に、LetroStudioを利用して動画を埋め込みCVR改善に至った事例を2つご紹介します。
左：最初に動画化したFV 右：次の検証で”Zの法則”を使い動画化したFV
引用：LP×動画化でCVRが1.99倍に！まつげ美容液「EMAKED」の勝ちLP誕生秘話
水橋保寿堂製薬株式会社様は、主力商品のまつげ美容液「EMAKED（エマーキット）」のLPに動画を活用し、1年間の検証の繰り返しでCVRを約2倍に向上させました。
ファーストビューの動画化テストの右側の動画では、ただ動かすのではなく人の目線の動きであるZの法則を利用した動きにしています。
ファーストビューと同様に、中間コンテンツの商品紹介エリアや権威性や特典コンテンツでも動画化の検証も行ったことで、総合的に成果を上げることができたようです。
本事例の詳細はこちら
▶LP×動画化でCVRが1.99倍に！まつげ美容液「EMAKED」の勝ちLP誕生秘話
引用：ZENB JAPAN、Letroと一緒にLPの動画化に取り組むことでCVR1.47倍を実現
実際に動画バナーを作成してみましょう。
一例として、映像素材を組み合わせてアニメーションをつけた、モーショングラフィックの形式での動画バナー作成方法を紹介します。
株式会社ZENB JAPAN様は、ミツカングループの会社で、黄えんどう豆100％の新主食「ゼンブヌードル」「ゼンブマメロニ」「ゼンブミール」などを販売しています。
同社は一から動画を制作するのではなく、既存の静止画コンテンツのテキスト部分に一部アニメーションを加えたり、料理の写真に湯気のエフェクトを加えたりして動画を制作しています。
成果に基づき高速にPDCAを回したことで、CVRを約1.5倍まで伸長させています。
本事例の詳細はこちら
▶ZENB JAPAN、LP上の静止画コンテンツを動画化しCVR1.47倍を実現
LP（ランディングページ）への動画の埋め込み方法や、LPに動画を埋め込むメリット・注意点、さらに実際にLPに動画を埋め込んで成果を上げた事例について解説しました。
動画に限らずLP内のコンテンツは、複数用意して検証改善を繰り返し、勝ちパターンを見つけていくことが重要です。 しかし動画に限っては、静止画クリエイティブよりも量産に時間と工数がかかります。自社にリソースがない場合は外注を検討すると思いますが、外注だと1本あたり納品までに1か月～2か月程度かかる場合が多いでしょう。
そこで、動画制作サービス「LetroStudio（レトロスタジオ）」を使った動画制作のインハウス化がおすすめです。 「LetroStudio」では、動画制作スキルのないメンバーでも簡単に制作できるため、自社LPの検証量を圧倒的に増やし高速にPDCAを回せます。「 LetroStudio」の活用で、動画1本の制作～実装まで数日かかっていた工数を「1時間」にまで短縮できたという事例もあります。
パワポのような使用感で、組織内で制作ルールを明確化しやすく工数削減につながるため、動画制作のインハウス化にはぴったりのサービスです。
動画制作のインハウス化と言うと、制作物のクオリティが心配かもしれません。しかしLetroStudioでは、1300種類以上のテンプレートが使い放題のため、誰が制作しても一定のクオリティを担保できます。
現在、7日間の無料トライアル中です。ぜひこの機会にLetroStudioの使用感を体験してみてください。
記事公開日：2024.05.02
LPへの動画埋め込みなら「LetroStudio」
