
ブログサイトがダサいです。今すぐかっこよくする方法を教えてください。
「なんで、わたしはデザインセンスがないんだろう…」ブログあるあるです。
わたしは、昔、Cocoon(コクーン)という無料ワードプレステーマを使っておりました。
デザインセンスなし、HTMLやCSSの知識なし、残業ばかりで時間もないわたし。ブログを表示するたび、ダサいサイトに、悩んでいました。



悩みを1日で解決した方法こそ、SWELLヘッダー動画です。
そこでこの記事は、SWELLヘッダー動画の紹介と、設定方法を完全解説します。
この記事を読めば、2分でサイトがかっこよくなります。
結果、デザイン修正に時間がかからなくなるので、記事作成に時間を使えるようになります。


\少ない工数で稼げるテーマ/
SWELLは「乗換えプラグイン」が用意されてます。簡単にテーマ乗換ができます。


<プロフィール>
- ConoHaWING3年目
- SWELL3年目
- SEO検定一級
- 月収6ケタのブロガー
- 某ASPの社員
プロフィールの根拠(クリックで開きます)






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





ホームページにヘッダー動画を表示させると、どんな効果があるの?
効果は3つあります。
- 一瞬でオシャレなWebサイトに変わる
- 多くの情報を正確に伝えることができる
- ユーザーの滞在時間が伸びる
結論、ヘッダー動画は、サイトの雰囲気を「ガラッと変えたい人」におすすめです。
トップページに、フルスクリーンで動画を表示させるだけで、おしゃれに見えます。
また、動画はユーザーの視点を止める役割があります。つまり、サイトの滞在時間が長くなるメリットがあります(SEOに有利)。
しかし、ヘッダー動画を「一から制作」すると、HTML、CSS、JSなど、コーディングが必要です。
外注するにも、10万円(実務経験から)かかります。



つまり、お金と時間がかかります。
しかし、SWELLなら、2分でヘッダー動画が作成できます。
しかも、スマホで撮影した動画でOK。コードを知らなくても、クリックベースで作成できます。
実証:2分でヘッダー動画を作成【iPhoneで撮影動画】


SWELLなら、ヘッダー動画を簡単に実装できます。
以下リンク先のようのなヘッダー動画を、2分で実装できます。
SWELL(ヘッダー動画)2分で作成できることを証明するために、アイフォンで撮影した動画で、ヘッダー動画を作ってみます。
使用する動画は、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点取れます




\少ない作業で大きな成果を/
SWELLは「乗換えプラグイン」が用意されてます。簡単にテーマ乗換ができます。