当サイト限定1,000円クーポン(コノハウィング)

SWELLメインビジュアル動画の設定方法【2分で実装】トップページをフルスクリーンに

プロモーションが含まれる場合があります
ヘッダー動画
  • URLをコピーしました!

「ブログのトップページがダサすぎる…」

デザインセンスがないと、ムダに工数ばかりかかってしまいますよね。記事の作成も進まないし、デザインだけで疲れてしまいます。

そんなお悩みは、「SWELLメインビジュアル動画」機能で解決できます。かっこいいトップページが2分で作れます。

こんなトップページが作れます

やたろう

放置してるサブサイトです。

この記事は、SWELLメインビジュアル動画の紹介と、設定方法をご紹介しております。

この記事を読めば、2分でサイトがかっこよくなります。

トップページがかっこよくなるので、記事作成に時間を使えるようになります。

SWELLロゴ

クリックだけで美しいサイトに

ブログのハードルが低くなるので、忙しいサラリーマンでも楽しく稼げます。

2024年6月12日の情報です。

この記事を書いている人
プロフィール
筆者のプロフィール画像
やたろう
  • ConoHaWINGユーザー4年目
  • SWELLユーザー3年目
  • SEO検定一級合格
  • 月収6ケタ(プラチナランク)
  • 某ASPの社員
A8プラチナ会員
A8:プラチナ会員

スクロール&拡大できます

SEO検定1級
SEO検定1級
登場人物
登場人物
記事でわかること(もくじ)

【まずは結論】メインビジュアル動画とは?おしゃれなトップページに

オシャレなサイトになる
ノンデザイナーでもオシャレなサイト

SWELLのメインビジュアル動画とは、トップページにフルスクリーンで動画表示できるSWELL限定機能です。

ブログトップページって、何を置いたら良いのかわからず、とりあえず画像だけを置いている人も多いと思います。

SWELLメインビジュアルは、トップページに動画はもちろん、ボタンやテキストも配置できるので、デザイナーが作ったようなトップページの制作ができます。

やたろう

SWELL公式サイトのようなトップページが誰でも作成できます。

SWELL(ヘッダー動画をみる)

ヘッダー動画を利用するメリットは3つあります。

  1. 一瞬でオシャレなWebサイトに変わる
  2. 多くの情報を正確に伝えることができる
  3. ユーザーの滞在時間が伸びる

例えば、トップページにメインビジュアル動画を表示するだけで、サイトがおしゃれに見えます。視点を引き止めるため、サイト滞在時間が長くなり、SEOにも有利です。

もし、メインビジュアル動画を、他テーマで一から制作する場合、HTML、CSS、JSなどのコーディングが必要です。外注する場合でも、10万円以上かかります(実務経験から)。

やたろう

つまり、お金と時間がかかります。

しかし、SWELLなら、2分でヘッダー動画が作成できます。

しかも0円

メインビジュアル動画は、スマホで撮影した動画でOK。今すぐ始められます。

メインビジュアル動画の設定手順【iPhone動画で作ってみた】

SWELL公式のようなトップページがラクに作れます
メインビジュアル動画=SWELL公式トップページ

SWELLなら、メインビジュアル動画機能で、リッチなトップページを実装できます。

SWELL(ヘッダー動画)

アイフォンで撮影した動画で、ヘッダー動画を作ってみます。

ベランダから撮影した動画

使用する動画は適当に撮影したもの。2022年6月6日(月)に、私が住んでるマンションのベランダから撮影しました。

やたろう

iPhone7(古い機種)で撮影しました。

この動画を、メインビジュアル動画として登録して、トップページを変更します。

テストで使用するサイトは、私が所有しているサイトです。

2分でヘッダー動画

SWELLヘッダー動画は、ワードプレストップ「カスタマイズ」から選択します。

2分でヘッダー動画作成
2分でヘッダー動画作成

上記動画では、ゆっくり操作しているので、2分12秒かかってます。急げば、2分以内で実装できます。

SWELLヘッダー動画を実装

SWELLメインビジュアル動画を実装する手順をご紹介します。

まだ、SWELL を購入していない人は、以下リンクよりどうぞ。

カスタマイズ
カスタマイズ

テーマをSWELLに変更したら、トップページを表示します(ワードプレスにログインした状態)。画像赤枠「カスタマイズ」を選択。

トップページ
トップページ

カスタマイズ内から、トップページを選択。

メインビジュアル
メインビジュアル

メインビジュアルを選択します。

動画を選択
動画を選択

トップページに表示させたい動画を選択します。

ちなみに動画のうえに、文字や効果などの配置もできます。

メインビジュアル機能でできること
  • 動画表示サイズの調整(高さ)
  • ボタンの丸み
  • 画像のフィルター処理(ブラー、グレースケール、ドッド、ブラシ)
  • オーバレイカラーの不透明度(CSSの opacity プロパティの値)
  • 余白
  • スクロール調整
  • テキスト挿入(タイトルと説明文)
  • テキストの位置
  • 色選択
  • テキストのシャドウカラー
  • ボタンカラー
  • ボタンタイプ

SWELLメインビジュアル動画は、カスタマイズできることが多いです。

メインビジュアル設定(ヘッダー動画)

メインビジュアルを調整

「メインビジュアル」にて、動画の調整します。

設定詳細①
設定詳細①

メインビジュアルでは、詳細設定ができます。自分の好みに合わせてカスタマイズしてみてください。

設定詳細②
設定詳細②

設定が終了したら「公開」します。

文字の透過設定

ナビが透過されてない
ナビが透過されてない

最後の仕上げに、ヘッダー部の文字を透過します(画像参照)。透過することで、SWELL公式トップページと同じビジュアルになります。

ヘッダー

カスタマイズから、ヘッダーを選択。

ヘッダーの背景を透過

「ヘッダーの背景を透過にするかどうか」で「する」を選択します。

ヘッダーが透過されました
ヘッダーが透過されました

ヘッダー全体が透過され、SWELL公式のようになりましたか?

設定の復習ですが、設定したのは以下2点だけです。

  • 動画をアップ
  • 文字を透過させる

ブログ初心者でも、SWELL公式のようなトップページが再現できます。

SWELL(ヘッダー動画)

微調整ができない【メインビジュアル動画のデメリット】

デメリット
ヘッダー動画のデメリット:微調整ができない

SWELLメインビジュアル動画のデメリットを3つご紹介します。

※デメリットは、HTMLやCSSを使えるなら解決できる内容です

  1. ボタンの大きさが自由に調整できない
  2. ボタン位置の微調整ができない
  3. ボタンの文字の大きさが調整できない

順番に解説します。

ボタンの大きさが自由に調整できない

ボタンのサイズ調整が難しい
ボタンのサイズ調整が難しい

1つめのデメリットは、ボタンの大きさが自由に調整できないこと。

設定内に、ボタンの大きさを選ぶ項目はありません。そのため、ボタンを大きくしたい場合は、文字を増やすことで対応します。

ちなみに、CSS、HTMLが扱える人は「class=c-mvBtn__btn」に、大きさを指定することで、設定可能です(本記事では割愛)。

ボタン位置の微調整ができない

ボタンの位置が選べない
ボタンの位置が選べない

2つ目は、動画内のボタン位置の微調整ができないこと。

「左、中央、右」のみ選択です(画像参照)。

こちらも、CSS、HTMLが扱える人なら、調整可能です(本記事では割愛)。

「class=c-mvBtn__btn」にボタンの場所を指定します

ボタンの文字の大きさが調整できない

2分でヘッダー動画実装する
ボタンの文字の大きさが選べない

3つ目は、ボタンの文字の大きさが調整できないこと。

文字のサイズは、16ピクセルです。

ボタン内の文字を大きくしたい方は、項目「追加CSS」にて「class=c-mvBtn__btn」にフォントサイズを指定することで、修正可能です。

CSSの追加方法は、クラブロ様のサイトが参考になります。

スマホで撮影した動画で実装できる【メインビジュアル動画のメリット】

ヘッダー動画のメリット
スマホがあれば実装できる

SWELLヘッダー動画のメリットは3つあります。

  1. 2分でメインビジュアル動画が作れる
  2. スマホがあれば作成可能
  3. コンバージョン(成約)に繋がりやすくなる

順番に解説します。

2分でメインビジュアル動画が作れる

2分でヘッダー動画実装する

1つ目のメリットは、2分でメインビジュアル動画ができること。

クリックだけで制作できます。

コード知識がなくても問題ないです。

ブログの初心者がメインビジュアル動画をつくると、2時間はかかります。SWELLで作成すれば2分です。つまり、118分節約できます。

スマホがあれば作成可能

スマホがあればOK
スマホがあればOK

2つ目のメリットは、スマホ動画で作成できること。

ブログ初心者でも、リッチなサイトが作成できます。

「スマホ動画だと、画質悪くならない?」

こんな疑問あると思います。そんなときのために、SWELLには「フィルター処理」機能が実装されているので、心配ご無用です。

4つのフィルターが設定できる
4つのフィルターが設定できる

5つの画像フィルター処理が設定できます。

フィルター処理
  • なし
  • ブラー
  • グレースケール
  • ドット
  • ブラシ

「オーバレイカラーの不透明度」も設定できるので、多少画質が悪くてもごまかせます。

コンバージョン(成約)に繋がりやすくなる

ボタン設置可能
コンバージョンボタン設置

3つ目のメリットは、コンバージョンに繋がりやすくなること。

なぜなら、動画の中央に、コンバージョンボタンを設置できるからです(画像参照)。

動画のメリットは、情報量の多さです。長い動画にしてコンバージョンボタンを置いておけば、申し込みするユーザーも多くなります。

やたろう

ボタンの実装も「カスタマイズ」から設定できます。

SWELL以外のテーマで、ヘッダー動画内にボタンを設置する場合、HTMLとCSSを記述する必要があります。しかし、SWELLなら、クリックだけで設定できます。

だから、ブログ初心者でも、時間をかけず、成約数を増やすことが可能です。

SWELLメインビジュアル動画でリッチなサイトに【まとめ】

まとめ
まとめ

まとめです。

メインビジュアル動画を使うことで、以下メリットを得られます。

  • イメージをガラリと変える
  • プロが作ったようなトップページが作れる
  • アフィリエイトで稼げるようになる

SWELL以外のテーマでメインビジュアル動画を外注する場合、10万円以上かかります。しかし、SWELLなら0円で作成できます。

2分でサイトがおしゃれになります。

節約したお金と時間で、記事やデザインに投資できます。そう考えると、SWELLはとってもお得なテーマだと思いませんか?

ブログ初心者でも100点とれる

SWELLスピード100点
Google:ページスピードインサイト100点
SWELLロゴ

ブログ初心者でも美しいサイトに

クリックだけでプロが作ったようなサイトになります。SEOにも強いテーマです。

購入前のよくある質問(クリックで開きます)
SWELLは、本当にサイト表示速度あがるの?

環境次第ですが、私の場合は、サイト表示速度100点取れました。

別のサイトで、SWELL使っていいの?

はい、問題ないです。SWELLは100%GPLです。法人サイトでも制限なく利用できます。

SWELLのお支払方法は?

クレジットカードのみです。

SWELLは返品はできるの?

いいえ、商品の特性上、返品はできません。

サポートある?

チャット、電話は対応してません。マイページのフォーラムから問い合わせしてください。

よかったらシェアしてね!
  • URLをコピーしました!
記事でわかること(もくじ)