質問ブログサイトがダサいです。今すぐかっこよくする方法を教えてください。
「なんで、わたしはデザインセンスがないんだろう…」ブログあるあるです。
わたしは、昔、Cocoon（コクーン）という無料ワードプレステーマを使っておりました。
デザインセンスなし、HTMLやCSSの知識なし、残業ばかりで時間もないわたし。ブログを表示するたび、ダサいサイトに、悩んでいました。
キャベツ太郎悩みを1日で解決した方法こそ、SWELLヘッダー動画です。
そこでこの記事は、SWELLヘッダー動画の紹介と、設定方法を完全解説します。
この記事を読めば、2分でサイトがかっこよくなります。
結果、デザイン修正に時間がかからなくなるので、記事作成に時間を使えるようになります。
＜プロフィール＞
- ConoHaWING3年目
- SWELL3年目
- SEO検定一級
- 月収6ケタのブロガー
- 某ASPの社員
プロフィールの根拠（クリックで開きます）
一瞬でオシャレなWebサイトに【メインビジュアルを変更する】
質問ホームページにヘッダー動画を表示させると、どんな効果があるの？
効果は3つあります。
- 一瞬でオシャレなWebサイトに変わる
- 多くの情報を正確に伝えることができる
- ユーザーの滞在時間が伸びる
結論、ヘッダー動画は、サイトの雰囲気を「ガラッと変えたい人」におすすめです。
トップページに、フルスクリーンで動画を表示させるだけで、おしゃれに見えます。
また、動画はユーザーの視点を止める役割があります。つまり、サイトの滞在時間が長くなるメリットがあります（SEOに有利）。
しかし、ヘッダー動画を「一から制作」すると、HTML、CSS、JSなど、コーディングが必要です。
外注するにも、10万円（実務経験から）かかります。
キャベツ太郎つまり、お金と時間がかかります。
しかし、SWELLなら、2分でヘッダー動画が作成できます。
しかも、スマホで撮影した動画でOK。コードを知らなくても、クリックベースで作成できます。
実証：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は、17,600円（込）と、お値段はお高め。しかし、美しくてかっこいいサイトを作るための機能が実装されてます。
同じクオリティーのヘッダー動画を外注する場合、10万円（実務経験から）かかります。
しかしSWELL なら17,600円です。
しかも、サイト表示速度も速いので、SEOが強くなるおまけつき。
デザインに迷わないので、制作時間を記事の作成に投資できます。
SWELLは「長く使えば使うほどお得になる」、そんなテーマです。
SWELLにするだけ！100点取れます
