
WPホームページ研究所運営サポートチーム監修のオムスビ(@OMUSUVIcom)です。
最近は動画を使ったLPが人気です。ひとことでLP(ランディングページ)と言っても一般的なメインビジュアルを使ったLPもあれば動画型のランディングページもあって状況に応じて使い分けられています。
今回はYoutubeやVimeoをまったく使用せず自前の動画をメインとしたLPを作る手順を解説いたします。
YoutubeやVimeoを一切使わず動画型LPを立ち上げる方法
前提として「すでにワードプレスでブログなどのウェブサイトを運営している状況」を想定。今回の記事で使用するプラグインは2つです。下記が実際にプラグインを導入して有効化をした後の状態となります。
もちろん、他に導入しているプラグイン等があっても動作には影響がありません。
ちなみに「MP4を設置するために必要な動画プレイヤー」は以前に別記事でご紹介しています。また動画設置に対応したランディングページは有料プラグインです。高機能なプラグインなので念のため最下部にリンクを貼っていますのでもし興味があればぜひこの機会にお試しくださいませ。LP運営に最適な機能が詰まっています。
新しくLPを作成する
管理画面に追加された「LP作成管理 > LPを新規追加」へ移動しましょう。
LPを作成する画面が下記です。
メディアに動画をアップロード
使用するMP4の動画ファイルを追加。
もし動画に初期表示させるイメージを指定する場合はお好きな画像も追加ください。
動画を差し込むタグ
下記は横幅指定なし。ページが読込まれた時に表示させる初期画像の指定もしていないシンプルな設定です。実際に設置される場合はご自身のウェブサイトで使っている独自ドメインのURLを指定すればOK。
もし横幅を960pxで指定するなら下記の通り設定してください。カンタンですよね。ちなみにmp4までのパスはワードプレスをインストールした環境によっても変わってきます。なお、動画までのパスを確認する方法も記事の文頭に貼っているリンク先で詳しく解説しているので操作方法が不安であればぜひ併せてチェックください。
[videojs_video url="http://example.com/wp-content/uploads/sample.mp4" width="960"]
動画が差し込まれた表示例
下記が実際に動画が表示した表示例(PC)となります。ちなみにスマホでも自動で表示が最適化されます。
閲覧ユーザー側に「動画の再生操作をさせず動画を見せる」などご希望があれば好きに指定していきましょう。設定方法は表示させる動画によっても変わってくるのでお好みで進めてくださいませ。
設定にオプションを追加した例
動画を設置するショートコードには「複数のオプション」が用意されているのでご自由に調整可能です。下記は横幅960pxで、アクセスした際に自動再生を行い、動画の操作パネルを非表示化した場合の設置例。
[videojs_video url="http://example.com/wp-content/uploads/sample.mp4" width="960" controls="false" autoplay="true"]
来訪者側へ「動画の再生バー操作を許可しない場合」におすすめの設定です。
まとめ
本日は「動画型LPの設置例」をご紹介させていただきました。
当然ですがランディングページ側の設定を使えば「LPのヘッダー非表示」や「右クリックやタップ操作を禁止」など細かい指定もできるので運営されたい理想のLPへ近づけていくことが可能となっています。
この機会にぜひ「プラグイン版のSEOランディングページ」をご検討くださいませ。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する