質問ブログサイトがダサいです。今すぐかっこよくする方法を教えてください。
「なんで、わたしはデザインセンスがないんだろう…」
デザインセンスがないと、ブログ運営しんどいですよね。何をしてもサイトがダサいので、工数ばかりかかってしまいます。
そんな人におすすめなのがSWELLヘッダー動画。
やたろうダサいサイトが、一瞬でカッコよくなります！
そこでこの記事は、SWELLヘッダー動画の紹介と、設定方法を完全解説します。
この記事を読めば、2分でサイトがかっこよくなります。
結果、デザイン修正に時間がかからなくなるので、記事作成に時間を使えるようになります。
＜プロフィール＞
- ConoHaWING3年目
- SWELL3年目
- SEO検定一級合格
- 月収6ケタ（プラチナランク）
- 某ASPの社員
実績＆資格（クリックで開く）
スクロール＆拡大できます
ヘッダー動画のメリット【メインビジュアル変更】
結論、ヘッダー動画は、サイトの雰囲気を「ガラッと変えたい人」におすすめです。
ヘッダー動画を利用するメリットは3つあります。
- 一瞬でオシャレなWebサイトに変わる
- 多くの情報を正確に伝えることができる
- ユーザーの滞在時間が伸びる
例えば、トップページにフルスクリーンで動画を表示するだけで、サイトがおしゃれに見えます。
また、動画はユーザーの視点を引き止めます。サイト滞在時間が長くなり、SEOにも有利です。
しかし、ヘッダー動画を「一から制作」するにはHTML、CSS、JSなどのコーディングが必要です。外注する場合でも、10万円以上かかります（実務経験から）。
やたろうつまり、お金と時間がかかります。
しかし、SWELLなら、2分でヘッダー動画が作成できます。
そのため、10万円と時間を節約できます。
しかも、スマホで撮影した動画素材で始められます。
2分で作成！ヘッダー動画作成手順【iPhone動画】
SWELLなら、ヘッダー動画を簡単に実装できます。以下リンク先のようのなヘッダー動画を、2分で実装できます。
SWELL（ヘッダー動画）
２分で作成できることを証明するため、アイフォンで撮影した動画で、ヘッダー動画を作ってみます。
使用する動画は、適当に撮影したもの。2022年6月6日（月）に、私が住んでるマンションのベランダから撮影。
やたろうiPhone7（古い機種）で撮影しました。
この動画を、2分でヘッダー動画にしてます。
テストで使用するサイトは、私が所有しているサイトです。
SWELLヘッダー動画は、ワードプレストップ「カスタマイズ」から選択します。
やたろう動画では、ゆっくり操作しているので、2分12秒かかってますが、2分以内で作成できます。
以降、ヘッダー動画の設定手順を詳しく解説します。
SWELLヘッダー動画を実装
SWELLでヘッダー動画を実装する方法の詳細を記載します。
まだ、SWELL を購入していない人は、こちらからどうぞ。
テーマをSWELLに変更して、トップページを表示します（ワードプレスにログインした状態）。画像赤枠「カスタマイズ」を選択。
カスタマイズ内から、トップページを選択。
メインビジュアルを選択します。
ヘッダー動画はメインビジュアルが肝
ヘッダー動画は、SWELLメインビジュアル機能をメインに作成します。
例えば、動画のうえに、文字や効果を配置できます。
- 動画表示サイズの調整（高さ）
- ボタンの丸み
- 画像のフィルター処理（ブラー、グレースケール、ドッド、ブラシ）
- オーバレイカラーの不透明度（CSSの opacity プロパティの値）
- 余白
- スクロール調整
- テキスト挿入（タイトルと説明文）
- テキストの位置
- 色選択
- テキストのシャドウカラー
- ボタンカラー
- ボタンタイプ
SWELLメインビジュアル機能には、ヘッダー動画をカスタマイズする機能が、多く実装されてます。この多様性が、かっこいいヘッダー動画が作れる理由です。
SWELLヘッダー動画（メインビジュアル機能）の詳細を確認したい人は、以下リンクからどうぞ。
「メインビジュアル」でビジュアルを調整
SWELLの「メインビジュアル」にて、ビジュアルを調整します。
メインビジュアル内の詳細設定に正解はありません。自分の好みに合わせて設定ください。
設定が終了したら、スマホで撮影した動画をアップします。
文字の透過設定
最後に、ヘッダーのナビを透過します（文字を透かせる）。透過することで、SWELL公式トップページと同じビジュアルになります。
カスタマイズから、ヘッダーを選択。
「ヘッダーの背景を透過にするかどうか」項目から「する」を選択します。
ヘッダー全体が透過されました。
今まで行った設定は、
- 動画をアップ
- 文字を透過させる
だけ。ブログ初心者でも、SWELLトップページが再現できます。
SWELL（ヘッダー動画）
微調整ができない【デメリット】
SWELLヘッダー動画のデメリットを3つお伝えします。
※デメリットは、HTMLやCSSを使えるなら解決できる内容です
順番に解説します。
ボタンの大きさが自由に調整できない
1つめのデメリットは、ボタンの大きさが自由に調整できないこと。
設定内に、ボタンの大きさを選ぶ項目はありません。そのため、ボタンを大きくしたい場合は、文字を増やすことで対応します。
ちなみに、CSS、HTMLが扱える人は「class=c-mvBtn__btn」に、大きさを指定することで、設定可能です（本記事では割愛）。
ボタン位置の微調整ができない
2つ目は、動画内のボタン位置の微調整ができないこと。
「左、中央、右」のみ選択です（画像参照）。
こちらも、CSS、HTMLが扱える人なら、調整可能です（本記事では割愛）。
ボタンの文字の大きさが調整できない
3つ目は、ボタンの文字の大きさが調整できないこと。
文字のサイズは、16ピクセルです。
ボタン内の文字を大きくしたい方は、項目「追加CSS」にて「class=c-mvBtn__btn」にフォントサイズを指定することで、修正可能です。
CSSの追加方法は、クラブロ様のサイトが参考になります。
スマホで撮影した動画で実装できる【ヘッダー動画のメリット】
SWELLヘッダー動画のメリットは3つあります。
順番に解説します。
2分でヘッダー動画が作れる
1つ目のメリットは、2分でヘッダー動画ができること。
本記事では何度も「2分」アピールしてますが、クリックだけで完成します。
ブログの初心者がヘッダー動画をつくると、2時間はかかるでしょう。
SWELLで作成すれば、2分です。つまり、118分、節約できます。
スマホがあれば作成可能
2つ目のメリットは、スマホ動画で作成できること。
ブログ初心者でも、リッチなサイトが作成できます。
「スマホ動画だと、画質、悪くならないの？」
こんなお悩みもあると思います。しかし、SWELLには「フィルター処理」機能が実装されているので、心配ご無用。
なしを含め、5つのフィルター処理が選べます。
- なし
- ブラー
- グレースケール
- ドット
- ブラシ
また「オーバレイカラーの不透明度」も設定できます。そのため、多少画質が悪くても、ごまかせます。
コンバージョン（成約）に繋がりやすくなる
3つ目のメリットは、コンバージョンに繋がりやすくなること。
なぜなら、ヘッダー動画の中央部に、コンバージョンボタンを設置できるからです（画像参照）。
動画のメリットは、情報量の多さ。そのため、長い動画にしておけば、ヘッダー動画からコンバージョンするユーザーも多くなります。
やたろうボタンの実装も「カスタマイズ」から設定できます。
SWELL以外のテーマで、ヘッダー動画内にボタンを設置する場合、HTMLとCSSを記述する必要があります。しかし、SWELLなら、クリックだけで設定できます。
だから、ブログ初心者でも、時間をかけないで成約数を増やすことが可能です。
SWELLヘッダー動画で、サイトイメージを一新【まとめ】
まとめです。
SWELLヘッダー動画を使うと、サイトイメージを一新できます。
今からヘッダー動画を使うことで、結果的に、
- サイトイメージをガラリと変えることができる
- サイト滞在時間が伸びる
- 商品購入率を高めることができる
といった効果を得られます。
ヘッダー動画を外注する場合、10万円（実務経験から）かかります。
しかし、SWELLな0円でヘッダー動画が作成できます。しかも、SWELLはブロックエディタなので、クリックベースで制作できます。
節約したお金と時間は、記事の作成に投資できます。
SWELLって、とってもお得なテーマだと思いませんか？
SWELLでパフォーマンス100点
