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