【2分でイメチェン】豪華なトップページに！SWELLヘッダー動画の設定手順

「なんで、わたしはデザインセンスがないんだろう…」

デザインセンスがないと、ブログ運営しんどいですよね。何をしてもサイトがダサいので、工数ばかりかかってしまいます。

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

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

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

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

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

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

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

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

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

SWELL（ヘッダー動画をみる）

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

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

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

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

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

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

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

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

SWELL（ヘッダー動画）

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

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

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

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

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

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

SWELLヘッダー動画を実装

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

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

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

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

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

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

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

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

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分でヘッダー動画が作れる

1つ目のメリットは、2分でヘッダー動画ができること。

本記事では何度も「2分」アピールしてますが、クリックだけで完成します。

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

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

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

スマホがあれば作成可能

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

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

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

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

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

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

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

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

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

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

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

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

SWELLヘッダー動画で、サイトイメージを一新【まとめ】

まとめです。

SWELLヘッダー動画を使うと、サイトイメージを一新できます。

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

• サイトイメージをガラリと変えることができる
• サイト滞在時間が伸びる
• 商品購入率を高めることができる

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

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

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

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

節約したお金と時間は、記事の作成に投資できます。

SWELLって、とってもお得なテーマだと思いませんか？