2/7まで最大52%OFF!月額687円コノハウィング

【2分でサイト変身】SWELLヘッダー動画の設定手順を完全解説

ヘッダー動画
  • URLをコピーしました!
質問

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

「なんで、わたしはデザインセンスがないんだろう…」ブログあるあるです。

わたしは、昔、Cocoon(コクーン)という無料ワードプレステーマを使っておりました。

デザインセンスなし、HTMLやCSSの知識なし、残業ばかりで時間もないわたし。ブログを表示するたび、ダサいサイトに、悩んでいました。

キャベツ太郎

悩みを1日で解決した方法こそ、SWELLヘッダー動画です。

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

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

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

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

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

キャベツ太郎

ほとんど手をつけてない私のサブサイトですが、ヘッダー動画の威力がわかります。

SWELLロゴ

\少ない工数で稼げるテーマ/

SWELLは「乗換えプラグイン」が用意されてます。簡単にテーマ乗換ができます。

2023年2月1日の情報です。

この記事を書いてる人
キャベツ太郎
キャベツ太郎

<プロフィール>

  • ConoHaWING3年目
  • SWELL3年目
  • SEO検定一級
  • 月収6ケタのブロガー
  • 某ASPの社員
プロフィールの根拠(クリックで開きます)
A8:ゴールド会員
A8:ゴールド会員
SEO検定1級
SEO検定1級
サイトの登場人物
登場人物
登場人物
この記事でわかること(もくじ)

一瞬でオシャレなWebサイトに【メインビジュアルを変更する】

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

ホームページにヘッダー動画を表示させると、どんな効果があるの?

効果は3つあります。

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

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

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

また、動画はユーザーの視点を止める役割があります。つまり、サイトの滞在時間が長くなるメリットがあります(SEOに有利)。

しかし、ヘッダー動画を「一から制作」すると、HTML、CSS、JSなど、コーディングが必要です。

外注するにも、10万円(実務経験から)かかります。

キャベツ太郎

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

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

しかも、スマホで撮影した動画でOK。コードを知らなくても、クリックベースで作成できます。

実証: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」にボタンの場所を指定します

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

ボタンの文字の大きさが選べない

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は、17,600円(込)と、お値段はお高め。しかし、美しくてかっこいいサイトを作るための機能が実装されてます。

サイト制作が苦手でも、ヘッダー動画が、2分で作成できます。

同じクオリティーのヘッダー動画を外注する場合、10万円(実務経験から)かかります。

しかしSWELL なら17,600円です。

しかも、サイト表示速度も速いので、SEOが強くなるおまけつき。

デザインに迷わないので、制作時間を記事の作成に投資できます。

SWELLは「長く使えば使うほどお得になる」、そんなテーマです。

SWELLにするだけ!100点取れます

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

\少ない作業で大きな成果を/

SWELLは「乗換えプラグイン」が用意されてます。簡単にテーマ乗換ができます。

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

使っているテーマによりますが、100点取れるので、99%あがります。

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

はい、SWELLは100%GPLなので、複数サイト、法人サイトなど、制限なく利用できます。

SWELLのお支払方法は?

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

SWELLは返品はできるの?

いいえ、返品はできません。

サポートある?

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

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