WordPressサイトのトップページに、ファーストビュー（ヘッダー部分）に動画を表示させたいと思った事ありませんか？
ファーストビューに動画を表示させる方法は2つあります。
- テーマを直接カスタマイズ
- 動画を表示させる事ができるテーマ・プラグインを使う
テーマを直接カスタマイズするのはハードルが高いと思いますが、テーマ自体に動画を表示させる事ができる機能が付いていれば、誰でも簡単にヘッダーに動画を表示させる事ができます。
この記事では、ヘッダーの背景に動画を設置する事ができるテーマやプラグインを紹介します。
好きなところから読めます
ヘッダーに動画を表示できる無料テーマは2つ
ヘッダーに動画を表示できる無料テーマは2つあります。
- WordPressのデフォルトテーマ「Twenty Seventeen」
- BizVektor
上記のとおりです。
WordPressのデフォルトテーマ「Twenty Seventeen」
WordPressのインストール直後に表示される以下の画面を覚えていませんか？
WordPressのデフォルトテーマ「Twenty Seventeen」です。
実はこのテーマ、ヘッダー部分に動画を表示させる事ができるのです。
設定は簡単で、テーマのカスタマイズにある「ヘッダーメディア」を選択すると、簡単に設定できます。
動画は以下2つの表示方法から設定できます。
- YouTube動画：URLを入力するだけで背景に動画が表示されます。
- mp4形式の動画：動画ファイルをアップロードして、表示させる事ができます。
全面表示させるには、2000×1125px（16:9の比率）にすると全面表示されます。
BizVektorテーマの「BizVektor Video Unit」プラグイン
「Lightning」テーマの開発元であるビズベクトル社が配布している無料テーマ、「BizVektor」テーマの有料プラグイン「BizVektor Video Unit」を使うと、ヘッダーの背景に動画を表示させる事ができます。
以下のリンクをクリックすると、プラグイン配布元に移動します。
サンプル動画が公開されていますが、ファーストビュー（ヘッダー部分）が動画だと躍動感があるのが確認できると思います。
ちなみに、Lightningテーマをご存じない方は、以下の記事をどうぞ。
ヘッダーに動画を表示できる有料テーマ16選
こちらはすべて有料ではありますが、ヘッダーに動画を表示可能なテーマをご紹介します。
カスタマイズするよりも確実で、簡単にできますので、無料テーマをカスタマイズするよりも買った方が早いと思います。
今回は、以下5つのメーカーのテーマをご紹介します。
- TCDテーマ
- DigiPress
- EMANON
- isotype
- AFFINGER
ヘッダーに動画を表示できるTCDテーマ8選
ORION（TCD037）
出典：公式サイト「ORION」
「ORION」は、ヘッダーにフルスクリーンの動画を再生する事ができるテーマです。
Youtube動画はもちろん、MP4形式の動画ファイルをアップロードして表示させる事ができます。アップロードした動画や静止画は、明るさを落としてシックに見せたり、高級感のあるドットパターンをかけるといった、オーバーレイ選択機能もあります。
「ORION（オリオン）」の公式サイトはこちら価格：12,980円（税込）
STORY（TCD041）
出典：公式サイト「STORY」
「STORY」は、高級なホテルやブライダル事業のコンセプトやサービス情報を的確に伝える事ができるテーマです。ヘッダー部分にYoutube動画はもちろん、MP4形式の動画ファイルをアップロードして表示させる事ができます。
「STORY（ストーリー）」の公式サイトはこちら価格：12,980円（税込）
SKIN（TCD046）
出典：公式サイト「SKIN」
「SKIN」は、エステサロン等の美容業界に特化したテーマです。
動画はもちろん、静止画を組み合わせてスライダー表示できるため、ターゲットに請求する静止画を表示させた後に、店舗内の空間や施術風景の動画を表示させることができます。
「SKIN（スキン）」の公式サイトはこちら価格：12,980円（税込）
SOURCE（TCD045）
出典：公式サイト「SORCE」
「SOURCE」は、インターネットビジネスに最適化された、高機能かつ充実した機能を搭載したテーマです。
集客を売上に直結させるために検索エンジンやSNSなど、様々なインターネットからの集客を囲い込むために、トップページはハイエンドなランディングページ仕様となっています。
「SOURCE（ソース）」の公式サイトはこちら価格：12,980円（税込）
UNIQUE（TCD044）
出典：公式サイト「UNIQUE」
「UNIQUE」は、広告代理店、デザイン会社、独創的なアイデアを創造するクリエイター向けに作られたテーマです。
コンテンツビルダーを搭載しているため、トップページに表示するコンテンツ（NEWS・コンセプト・会社概要・ブログ一覧・ポートフォリオetc）の順序や配色を自由自在にカスタマイズできます。
「UNIQUE（ユニーク）」の公式サイトはこちら価格：12,980円（税込）
MAXX（TCD043）
出典：公式サイト「MAXX」
「MAXX」は、スポーツジムやヨガスタジオなどに使える、インパクト溢れる店舗サイト用のテーマです。
ヘッダーの動画表示はもちろん、写真の背景色や透明度も変更することができますので、、それぞれ拡大率やスライドの方向、フェードの透過率や背景色など細かい微調整も可能です。
「MAXX（マックス）」の公式サイトはこちら価格：12,980円（税込）
OOPS!（TCD048）
出典：公式サイト「OOPS!」
「OOPS!」は、インターネットビジネス、店舗ホームページ、商品販売の成約率を高めるために開発されたテーマです。
デザイン性が高いだけでなく、コンテンツマーケティングの効果を最大限に発揮するために開発された「OOPS!」は、インプレッション、クリック数、コンバージョン率の計測が可能なCTA（ABテスト機能）を搭載している高機能なテーマです。
「OOPS!（ウップス）」の公式サイトはこちら価格：19,800円（税込）
FAMOUS（TCD064）
出典：公式サイト「FAMOUS」
「FAMOUS」は、集客・ブランディングに特化したテーマです。
ヘッダーの動画表示はもちろん、ヘッダー画像の表示パターンも３タイプから選択でき、洗練されたアニメーションによって印象的な表示ができます。
また、モーダルウィンドウ（ポップアップ表示）機能も搭載しており、１回限定表示、遅延表示（秒数指定可）等、細かい表示設定が可能です。
ランディングページを作成機能も用意されているので、集客に強いテーマです。
「FAMOUS（フェイマス）」の公式サイトはこちら価格：25,800円
ヘッダーに動画を表示できるDigiPressテーマ4選
Voyageur
出典：公式サイト「Voyageur」
「Voyageur」は、ヘッダーにフルスクリーン動画を再生できるテーマです。トップページだけでなく、アーカイブページ、シングルページごとで別々の動画を設定する事もできます。
ちなみに、こちらのテーマは、「Voyageur」と「Voyageur Light」の２種類がありますが、フルスクリーン動画に対応しているのは「Voyageur」の方なので、購入される時はお気をつけ下さい。
価格：8,290円（税込）
Clarity
出典：公式サイト「Clarity」
「Clarity」は、ヘッダー部分にフルスクリーンの静止画像、モーションエフェクト付きのスライドショー、そしてYouTubeまたはVimeoのビデオを表示する事ができるコーポレートサイト向けのテーマです。
こちらのテーマは「Business Edition」のみフルスクリーン動画に対応していますので、購入される時はお気をつけ下さい。
価格：8,999円（税込）
Macchiato
出典：公式サイト「Macchiato」
「Macchiato」は、ヘッダー部分にフルスクリーン動画を表示させることはもちろん、パララックススクロールの静止画を表示させる事ができるテーマです。
こちらのテーマは「Macchiato」と「Macchiato Light」の２種類がありますが、フルスクリーン動画に対応しているのは「Macchiato」の方なので、購入される時はお気をつけ下さい。
価格：8,999円（税込）
Luminous
出典：公式サイト「Luminous」
「Luminous」は、ヘッダー部分にフルスクリーン動画を表示させることはもちろん、コーポレートサイト、パーソナルユースのどちらでもマッチする4種類のヘッダースライドショーを表示させる事ができるテーマです。
こちらのテーマは「Business Edition」のみフルスクリーン動画に対応していますので、購入される時はお気をつけ下さい。
価格：8,999円（税込）
ヘッダーに動画を表示できるEMANON（EMANON Pro）
出典：公式サイト「EMANON Pro」
「EMANON Pro」は、ヘッダーの動画表示の他に、スライダーセクション、スライダーコンテンツセクション、おすすめ記事セクション、ぺージボックスセクション、アイキャッチセクションといった、計6種類のファーストビュータイプを使う事ができます。
「EMANON Pro」で表示できる動画は、MP4形式の動画です（Youtube動画は表示できません）。
ちなみに、無料で使える「EMANON Free」ではヘッダーの動画表示を使う事ができません。ヘッダーの動画表示は有料版のみの機能となります。
「Emanon」の公式サイトはこちら
価格：9,800円（税込）
ヘッダーに動画を表示できるisotypeテーマ2選
MAJESTIC
「MAJESTIC」は、インパクトと美とミニマルを突き詰めた、コーポレートサイトをターゲットとしたWordPressテーマです。
ヘッダー部分にYoutubeの動画を表示させる事はもちろん、パララックスコンテンツを作成できたり、カルーセルスライダーを表示させることもできます。
価格：19,800円（税込）
MOMENTUM
「MOMENTUM」は、多彩なテーマオプション機能を備え、柔軟にサイトを制作することをコンセプトとしたWordpressテーマです。
グリッドレイアウトを組むためのウィジェットエリアにより、オシャレで、なおかつ複雑なグリッドレイアウトを組むことができます。
ヘッダー動画は動画をアップロードして表示させる事ができます。
価格：27,000円（税込）
ヘッダーに動画を表示できるAFFINGER（AFFINGER5）
「AFFINGER5」は、コーポレートサイトはもちろん、アフィリエイトサイトやブログでも効果が発揮できるようマルチに設計されたWordPressテーマです。
トップページに動画を表示させる事ができるのですが、動画が一部コンテンツで見えない部分があります。ただ、コンテンツの大部分が半透明化されていますので、そこまで気にならないと思います。
サンプルサイトで確認できますので、興味のある方は直接確認してみて下さい。
「WING（AFFINGER5）」の公式サイトはこちら価格：14,800円（税込）
まとめ
以上、トップページのヘッダー部分に動画を設置する事ができるWordPressテーマやプラグインを紹介しました。
ヘッダー部分に動画を表示させたいけど、カスタマイズするのが面倒という方は、フルスクリーン動画を表示させる事ができるテーマを導入すると簡単に表示させる事ができます。
ちなみに、「【無料】初心者でも動画編集が簡単にできるFlexClip【3ステップで作れる】」という記事で、初心者でも動画編集が簡単にできるツールを紹介していますので、興味が歩い方は是非どうぞ。
