あなたは今、こんな悩みを抱えていませんか？
- ブログのトップページがダサすぎる…
- SWELLテーマでも、トップページが画像だけでなんだかパッとしない
- メインビジュアルに動画を設定したいが、HTMLやCSSが分からず手が付けられない
もし一つでも当てはまるなら、この記事がきっと役立ちます。
業者に頼むと10万円以上かかる動画設定も、SWELLなら標準機能だけで完結。たった2分で設定できます。
専門知識がなくても、サイトの第一印象は劇的に変わります。
訪問者の心を掴むトップページに仕上げ、信頼性を高めましょう。
お申し込みは月初がお得！
【まずは結論】メインビジュアル動画とは？おしゃれなトップページに
SWELLのメインビジュアル動画とは、トップページにフルスクリーンで動画表示できるSWELL限定機能です。
サイトの顔となるトップページに何を載せるべきか迷い、とりあえず静止画を一枚置いているだけの方も多いはずです。
この機能の魅力は、動画だけでなくテキストやボタンを自在に重ねられる点。知識がなくても、プロのデザイナーが手がけたような本格的な構成に仕上げることが可能です。
やたろうSWELLの公式サイトを彷彿とさせる洗練されたトップページを、誰でも自分自身の手で作り上げることができます。
メインビジュアルに動画を取り入れることには、大きく分けて三つの利点があります。
- 一瞬でオシャレなWebサイトに変わる
- 多くの情報を正確に伝えることができる
- ユーザーの滞在時間が伸びる
例えば、トップページにメインビジュアル動画を表示するだけで、サイトがおしゃれに見えます。視点を引き止めるため、サイト滞在時間が長くなり、SEOにも有利です。
こうした機能を他のテーマで一から実装しようとすれば、複雑なコーディングが欠かせません。実務での経験上、専門業者へ外注すれば10万円以上の費用がかかることも珍しくなく、多大な時間とお金を費やすことになります。
しかしSWELLなら、わずか2分ほどの手間で動画の設定が完了します。
やたろうもちろん追加の費用はかかりません。
素材もスマートフォンで撮影した動画で十分に見栄えが良くなるため、今すぐサイトの印象を劇的に変えることができます。
iPhone7で撮影した動画を使い、メインビジュアル動画を設定する手順
SWELLなら、メインビジュアル動画機能で、リッチなトップページを実装できます。
SWELL（ヘッダー動画）
アイフォンで撮影した動画で、ヘッダー動画を作ってみます。
今回使用するのは、自宅マンションのベランダから何気なく撮影した動画です。機材も特別なものではなく、かなり古い機種であるiPhone 7で撮ったものですが、これをメインビジュアルに設定してトップページの雰囲気を一新させてみます。
なお、検証には私が所有しているテスト用のサイトを使用します。
SWELLヘッダー動画は、ワードプレストップ「カスタマイズ」から選択します。
動画内では手順を確認しながらゆっくり動かしているため2分12秒を要していますが、手早く操作すれば2分足らずで完了します。
SWELLヘッダー動画を実装
SWELLでメインビジュアルに動画を設定していく際の手順を説明します。まだテーマ自体を手に入れていないという方は、以下リンクより確認してください。
SWELLに切り替えた後、WordPressにログインした状態でトップページを表示します。画面上部にあるカスタマイズを選んで、設定画面へ進んでください。
カスタマイズ内から、トップページを選択。
メインビジュアルを選択します。
トップページに映し出したい動画を選びます。単に映像を流すだけでなく、その上に文字を重ねたり視覚的な効果を添えたりといったアレンジも自由に行えます。
- 動画表示サイズの調整（高さ）
- ボタンの丸み
- 画像のフィルター処理（ブラー、グレースケール、ドッド、ブラシ）
- オーバレイカラーの不透明度（CSSの opacity プロパティの値）
- 余白
- スクロール調整
- テキスト挿入（タイトルと説明文）
- テキストの位置
- 色選択
- テキストのシャドウカラー
- ボタンカラー
- ボタンタイプ
SWELLメインビジュアル動画は、カスタマイズできることが多いです。
メインビジュアルを調整
「メインビジュアル」にて、動画の調整します。
メインビジュアルでは、詳細設定ができます。自分の好みに合わせてカスタマイズしてみてください。
設定が終了したら「公開」します。
文字の透過設定
仕上げに、ヘッダー部分を画像のように透かせる設定を行います。透過させることで、SWELL公式サイトのような洗練されたビジュアルが完成します。
カスタマイズから、ヘッダーを選択。
ヘッダーの背景を透過にするかどうかの項目で、設定を「する」に変えます。
ヘッダー全体が透き通り、SWELLの公式サイトに近い雰囲気に仕上がります。行った作業は動画のアップロードと文字を透かせた設定の二点だけ。
これだけで、ブログを始めたばかりの方でもSWELL公式サイトのような見栄えを再現できます。
SWELL（ヘッダー動画）
微調整ができない【メインビジュアル動画のデメリット】
SWELLのメインビジュアル動画には、いくつか不便に感じる点もあります。もっとも、これらはHTMLやCSSを扱える方であれば解消できる内容です。
順番に解説します。
ボタンの大きさが自由に調整できない
1つめのデメリットは、ボタンの大きさが自由に調整できないこと。
設定内に、ボタンの大きさを選ぶ項目はありません。そのため、ボタンを大きくしたい場合は、文字を増やすことで対応します。
ちなみに、CSS、HTMLが扱える人は「class=c-mvBtn__btn」に、大きさを指定することで、設定可能です（本記事では割愛）。
ボタン位置の微調整ができない
2つ目は、動画内のボタン位置の微調整ができないこと。
「左、中央、右」のみ選択です（画像参照）。
こちらも、CSS、HTMLが扱える人なら、調整可能です（本記事では割愛）。
ボタンの文字の大きさが調整できない
3つ目は、ボタンの文字の大きさが調整できないこと。
文字のサイズは、16ピクセルです。
ボタン内の文字を大きくしたい方は、項目「追加CSS」にて「class=c-mvBtn__btn」にフォントサイズを指定することで、修正可能です。
CSSの追加方法は、クラブロ様のサイトが参考になります。
3つのメリット：スマホで撮影した動画で実装できる【メインビジュアル動画】
SWELLヘッダー動画のメリットは3つあります。
順番に解説します。
2分でメインビジュアル動画が作れる
1つ目のメリットは、わずか2分ほどで動画の設定が完了する速さです。操作はクリックのみで、難しいコードの知識も必要ありません。
初心者が一から自力で実装しようとすれば2時間はかかる作業ですが、SWELLなら2分で済みます。浮いた118分という時間を、記事の執筆など他の作業に有効活用できます。
スマホ動画で作成できる
スマートフォンで撮影した動画をそのまま素材にできる点も、大きな魅力です。これだけで、初心者の方でもサイト全体に高級感を持たせることができます。
スマホの映像だと粗さが目立つのではと不安に感じるかもしれませんが、SWELLにはあらかじめフィルター機能が用意されています。
これを使えば画質の良し悪しを気にすることなく、全体を雰囲気のある仕上がりに整えられます。
フィルターは、なし、ブラー、グレースケール、ドット、ブラシの5種類から選べます。あわせてオーバーレイカラーの不透明度も細かく調整できるため、多少の画質の粗さであれば、質感を上手に補って画面に馴染ませることが可能です。
- なし
- ブラー
- グレースケール
- ドット
- ブラシ
コンバージョン（成約）に繋がりやすくなる
3つ目のメリットは成約に結びつきやすくなる点です。
映像の中央へ目を引くボタンを直接置けるため、読み手の関心が高いタイミングで次のアクションを促せます。動画特有の豊かな情報量で魅力を伝え、その流れでボタンを押してもらう構成にすれば、自ずと申し込み率も高まります。
やたろうこのボタンの実装も、カスタマイズ画面から簡単に行えます。
通常、動画の上にボタンを重ねるには複雑なコードの記述が欠かせませんが、SWELLならクリック操作だけで完結します。
専門的な知識がなくても、時間をかけずに成果を狙えるサイト構成が手に入ります。
もっと魅力的に！SWELLメインビジュアル動画の活用事例
メインビジュアル動画を実際にどのように活用すれば、より魅力的なサイトになるのか、具体的な事例をいくつか紹介します。
動画の内容： オフィス風景、スタッフが働く様子、製品の製造工程など
期待できる効果： 会社の信頼性や透明性をアピールできます。訪問者は「この会社はしっかりしていそうだな」という安心感を抱きます。動画の上に「誠実なものづくりを、世界へ。」といったキャッチコピーを載せると効果的です。
動画の内容： こだわりのコーヒーを淹れる様子、カットやカラーの施術風景、おしゃれな店内の雰囲気など
期待できる効果： 訪問者は自分がそのお店に行ったかのような疑似体験ができます。「素敵なお店だな、行ってみたいな」という来店動機に繋がります。動画の上に「ご予約はこちら」というボタンを設置すれば、直接コンバージョンに繋がります。
動画の内容： ブログのテーマに関連する風景（旅ブログなら絶景、料理ブログなら調理風景）、タイピングする手元、自分の仕事風景など
期待できる効果： ブログの世界観を一瞬で伝え、訪問者の心を掴むことができます。顔出しをしていなくても、ブログ運営者の人柄や雰囲気が伝わり、ファンになってもらいやすくなります。
単に設定を済ませるだけでなく、訪れた人に何を伝えたいかを軸に動画を厳選してみてください。発信したいメッセージを明確にして素材を選ぶだけで、メインビジュアルがサイトに与える力はぐっと高まります。
メインビジュアルに最適な動画を準備する3つのコツ
SWELLのメインビジュアル設定はとても簡単なのですが、実はその前に「どんな動画を用意するか」がとても重要です。
私も最初は何も考えずにスマホで撮った長い動画をそのままアップしてしまい、「なんだかスマホで見たときに人の顔が切れちゃうな…」なんて失敗をしました。
そうならないために、動画を準備する段階で知っておきたい3つのコツをお伝えします。
コツ1：動画は「15秒以内・10MB以下」を目安に
メインビジュアルの動画は、あくまでサイトの第一印象を良くするためのものです。
長すぎると訪問者は飽きてしまいますし、何よりファイルサイズが大きくなり、サイトの表示速度が遅くなる原因になります。
目安として、動画の長さは15秒以内、ファイルサイズは10MB以下に抑えることをおすすめします。
「スマホで撮ったらサイズが大きすぎた…」という場合は、動画圧縮ツールを使いましょう。
パソコンにインストール不要で、ブラウザ上で簡単にファイルサイズを小さくできる無料ツールがたくさんあります。
| ツール名 | 特徴 |
| VideoSmaller | シンプルな操作性で、初心者でも迷わず使える |
| YouCompress | 圧縮率が高く、画質の劣化が少ない |
これらのツールに動画ファイルをドラッグ＆ドロップするだけで、驚くほどサイズを小さくできます。
コツ2：見せたいものは「中央」に配置する
メインビジュアルは、パソコンで見るか、スマホで見るかによって表示される範囲が変わります。
- パソコン： 横長の画面（アスペクト比 16:9 など）
- スマホ： 縦長の画面
このため、動画の端に重要な被写体やテキストを配置してしまうと、スマホで見たときに切れてしまう可能性があります。
この問題を避けるため、一番見せたい人やモノ、伝えたいメッセージは動画の中央に配置することを意識して撮影・編集するのがポイントです。
コツ3：迷ったら無料の動画素材サイトを使う
「自分で撮影するのは苦手…」「おしゃれな動画が用意できない」という方も安心してください。プロが撮影した高品質な動画を無料で利用できるサイトがあります。
著作権フリーなので、安心してあなたのサイトに利用できます。
これらのサイトで「business」「nature」「cafe」などのキーワードで検索すれば、あなたのサイトイメージにぴったりの動画がきっと見つかります。
要注意！動画でサイトが重くなる？表示速度の対策
「トップページに動画を置くと、サイトが重くなって読者が離れてしまうのでは？」と心配になりますよね。
やたろうその通りで、対策をしないと表示速度は確実に遅くなります。
ただ、SWELLにはこうした事態を避けるための機能が備わっており、少しの工夫で速度への影響を最小限に食い止めることができます。
先ほど触れた動画ファイルの圧縮は欠かせませんが、あわせて実施しておきたいのがスマートフォン表示に向けた代替画像の設定です。
設定画面には、動画が読み込まれるまでの間に表示させる画像を指定する項目が用意されています。これを活用することで、読み込み待ちのストレスを抑えることが可能です。
ここに軽量な画像を設定しておくと、スマホでアクセスしたユーザーには動画の代わりに画像が表示されるため、読み込み時間を大幅に短縮できます。動画のワンシーンを切り取った画像などを設定しておくと良いでしょう。
通信環境が良くない場所でスマホからアクセスするユーザーにとっては、動画が再生されるより、静止画でもサッと表示される方が快適な場合が多いのです。
【トラブル解決】動画が表示されない？よくある原因と対処法
手順通りに設定したはずなのに、なぜか動画が表示されない…。そんな時にチェックしたいポイントをまとめました。
| 原因 | 対処法 |
| 動画のファイル形式が違う | WordPressが推奨するMP4形式（.mp4）に変換しましょう。 |
| ファイルサイズが大きすぎる | サーバーが一度にアップロードできる容量の上限を超えている可能性があります。動画圧縮ツールで10MB以下を目安にサイズを小さくしてください。 |
| キャッシュが残っている | ブラウザのキャッシュが原因で、古い表示のままになっていることがあります。スーパーリロード（Windows: Ctrl + F5 / Mac: Cmd + Shift + R）を試すか、ブラウザのキャッシュをクリアしてみてください。 |
| 他のプラグインと干渉している | 画像最適化プラグインなどが影響している場合があります。一度、関係ありそうなプラグインを無効にして表示を確認してみてください。 |
私も、アップロードしたファイル形式が「.mov」になっていて表示されなかった経験があります。まずはファイルが「.mp4」になっているか確認するのがおすすめです。
SWELLメインビジュアル動画：リッチなトップページに【まとめ】
まとめです。
メインビジュアル動画を使うことで、以下メリットを得られます。
- イメージをガラリと変える
- プロが作ったようなトップページが作れる
- アフィリエイトで稼げるようになる
SWELL以外のテーマでメインビジュアル動画を外注する場合、10万円以上かかります。しかし、SWELLなら0円で作成できます。
節約したお金と時間で、記事やデザインに投資できます。そう考えると、SWELLはとってもお得なテーマだと思いませんか？
