3/13(水) まで最大53%OFF1,000円クーポンあり(コノハウィング)

SWELLヘッダー動画の設定手順【たった2分】リッチなトップページに変身

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

ブログサイトがダサいです。今すぐかっこよくする方法を教えてください。

「デザインセンスなさすぎ…」

デザインができないとブログが楽しくありません。なぜなら何をしてもサイトがダサいので、工数ばかりかかってしまうからです。

そんな人におすすめなのがSWELLヘッダー動画。

ヘッダー動画とは、トップページにフルスクリーンで動画を表示する「SWELL限定機能」です。

やたろう

ダサいサイトが、一瞬でカッコよくなります!

そこでこの記事は、SWELLヘッダー動画の紹介と、設定方法を完全解説します。

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

結果、デザイン修正に時間がかからなくなるので、記事作成に時間を使えるようになります。

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

やたろう

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

SWELLロゴ

サクサク動くWebサイトが作れます

HTMLやCSSなどの知識不要。初心者でも楽しくブログが続けられます。

2024年2月28日の情報です。

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

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

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

ヘッダー動画のメリット【メインビジュアル変更】

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

結論、ヘッダー動画は、サイトの雰囲気を「ガラッと変えたい人」におすすめです。

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

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

例えば、トップページにフルスクリーンで動画を表示するだけで、サイトがおしゃれに見えます。

また、動画はユーザーの視点を引き止めます。サイト滞在時間が長くなり、SEOにも有利です。

しかし、ヘッダー動画を「一から制作」するにはHTML、CSS、JSなどのコーディングが必要です。外注する場合でも、10万円以上かかります(実務経験から)。

やたろう

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

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

そのため、10万円と時間を節約できます。

しかも、スマホで撮影した動画素材で始められます

2分で作成!ヘッダー動画作成手順【iPhone動画】

SWELL公式のようなトップページがラクに作れます
SWELL公式のようなトップページがラクに作れます

SWELLなら、ヘッダー動画を簡単に実装できます。以下リンク先のようのなヘッダー動画を、2分で実装できます

SWELL(ヘッダー動画)

2分で作成できることを証明するため、アイフォンで撮影した動画で、ヘッダー動画を作ってみます。

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

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

やたろう

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

この動画を、2分でヘッダー動画にしてます。

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

2分でヘッダー動画

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

2分でヘッダー動画作成
2分でヘッダー動画作成
やたろう

動画では、ゆっくり操作しているので、2分12秒かかってますが、2分以内で作成できます。

以降、ヘッダー動画の設定手順を詳しく解説します。

SWELLヘッダー動画を実装

SWELLでヘッダー動画を実装する方法の詳細を記載します。

まだ、SWELL を購入していない人は、こちらからどうぞ。

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

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

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

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

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

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

ヘッダー動画はメインビジュアルが肝

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

ヘッダー動画は、SWELLメインビジュアル機能をメインに作成します。

例えば、動画のうえに、文字や効果を配置できます。

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

SWELLメインビジュアル機能には、ヘッダー動画をカスタマイズする機能が、多く実装されてます。この多様性が、かっこいいヘッダー動画が作れる理由です。

ブログ初心者でも簡単に、ヘッダー動画が実装できます。

SWELLヘッダー動画(メインビジュアル機能)の詳細を確認したい人は、以下リンクからどうぞ。

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

「メインビジュアル」でビジュアルを調整

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

設定詳細①
設定詳細①

メインビジュアル内の詳細設定に正解はありません。自分の好みに合わせて設定ください。

設定詳細②
設定詳細②

設定が終了したら、スマホで撮影した動画をアップします。

文字の透過設定

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

最後に、ヘッダーのナビを透過します(文字を透かせる)。透過することで、SWELL公式トップページと同じビジュアルになります。

ヘッダー

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

ヘッダーの背景を透過

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

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

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

今まで行った設定は、

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

だけ。ブログ初心者でも、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分」アピールしてますが、クリックだけで完成します。

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

ブログの初心者がヘッダー動画をつくると、2時間はかかるでしょう。

SWELLで作成すれば、2分です。つまり、118分、節約できます。

スマホがあれば作成可能

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

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

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

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

こんなお悩みもあると思います。しかし、SWELLには「フィルター処理」機能が実装されているので、心配ご無用。

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

なしを含め、5つのフィルター処理が選べます。

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

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

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

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

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

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

動画のメリットは、情報量の多さ。そのため、長い動画にしておけば、ヘッダー動画からコンバージョンするユーザーも多くなります。

やたろう

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

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

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

SWELLヘッダー動画はクリックだけで設定できる【まとめ】

まとめ
まとめ

まとめです。

SWELLヘッダー動画は、クリックだけで設定できるコスパの高いSWELL機能です。

ヘッダー動画を使うことで、結果的に、

  • サイトイメージを手軽に変える
  • デザイン工数を記事作成に投資できる
  • アフィリエイトで稼げるようになる

といった効果を得られます。

ヘッダー動画を外注する場合、10万円(実務経験から)かかります。

しかし、SWELLな0円でヘッダー動画が作成できます。しかも、SWELLはブロックエディタなので、クリックベースで制作できます。

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

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

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

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

サクサク動くWebサイトが作れます

HTMLやCSSなどの知識不要。初心者でも楽しくブログが続けられます。

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

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

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

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

SWELLのお支払方法は?

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

SWELLは返品はできるの?

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

サポートある?

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

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