ブログがダサいです。かっこよくする方法を教えてください。
サイトがダサくて、悩んでいませんか？
わたしは、昔、Cocoon（コクーン）という無料ワードプレステーマを使っておりました。
コクーンは、正直デザイン性が低いです。
加えて、わたし自身もデザイン力がなく、表示するたびダサいサイトに悩んでいました。
キャベツ太郎ダサいサイトを一新したのが、SWELLヘッダー動画です。
そこでこの記事は、SWELLヘッダー動画を設置する方法をお伝えします。
この記事を読めば、時間をかけずに、サイトがかっこよくなります。
結果、デザイン修正に時間がかからなくなるので、記事作成に時間を使えるようになります。
ホームページに動画をのせる効果【サイトがかっこよくなる】
ホームページにヘッダー動画を表示させると、どんな効果があるの？
効果は3つあります。
- 一瞬でオシャレなWebサイトに変わる
- 多くの情報を正確に伝えることができる
- ユーザーの滞在時間が伸びる
ヘッダー動画は、サイトの雰囲気をガラッと変えたい人におすすめです。
なぜなら、動画をトップページにフルスクリーン表示させるだけで、おしゃれに見えるから。
また、動画はユーザーの視点を止めるので、サイト滞在時間が長くなる傾向があります（SEOに有利）。
さらに、ヘッダー動画は、情報をまとめて伝えることができるため、自分のサイトを認知してもらい人におすすめです。
例えば、「株式会社 リ・リクリエーション」。
ヘッダー動画を表示することで「クリエイティブ制作会社」ということが一瞬で伝わるビジュアルになってます。
ただし、ヘッダー動画を制作するには、HTMLやCSSなどのコーディングが必要です。
外注するにも、10万円以上かかります。
キャベツ太郎つまり、お金と時間がかかります。
しかし、SWELLは、スマホで撮影した動画で、ヘッダー動画が作成できます。
2分でサイトをかっこよく【アイフォン動画でOK】
SWELLなら、ヘッダー動画を簡単に実装できます。
以下リンク先のようのなヘッダー動画を、2分で実装できます。
SWELL（ヘッダー動画）
２分で作成できることを証明するために、アイフォンで撮影した動画で、ヘッダー動画を作ってみます。
上記の動画は、2022年6月6日（月）私が住んでるマンションのベランダから撮影した動画です。
この動画を、2分でヘッダー動画にします。
テストで使用するサイトは、私が所有している以下サイトです。
キャベツ太郎動画では、ゆっくり操作しているので、2分12秒かかってますが、2分以内で作成できます。
SWELLメインビジュアル機能
ヘッダー動画は、SWELLメインビジュアル機能を使って作成してます。
動画の上に、文字や効果を配置しています。
SWELLメインビジュアル機能でできること
- 動画表示サイズの調整（高さ）
- ボタンの丸み
- 画像のフィルター処理（ブラー、グレースケール、ドッド、ブラシ）
- オーバレイカラーの不透明度（CSSの opacity プロパティの値）
- 余白
- スクロール調整
- テキスト挿入（タイトルと説明文）
- テキストの位置
- 色選択
- テキストのシャドウカラー
- ボタンカラー
- ボタンタイプ
SWELLメインビジュアル機能には、ヘッダー動画をカスタマイズする機能が多く実装されてます。
この多様性が、かっこいいヘッダー動画が作れる理由です。
SWELLヘッダー動画（メインビジュアル機能）の詳細を確認したい人は、以下リンクからどうぞ。
SWELLヘッダー動画の設定方法
SWELLでヘッダー動画を実装する方法の詳細を記載します。
SWELLをまだ購入していない人は、こちらからどうぞ。
SWELLを購入して、ログインした状態で、トップページを表示します。
画像赤枠「カスタマイズ」を選択。
カスタマイズ内から、トップページを選択。
メインビジュアルを選択。
SWELLの「メインビジュアル」にて、ヘッダー動画の設定が可能です。
メインビジュアル内の詳細設定は、好みに合わせて設定してください。
※画像は設定例です
スマホで撮影した動画を、動画（PC/Tab）にてアップします。
最後に、ヘッダーのナビを透過（文字を透かせる）します。透過設定することで、SWELLの公式トップページと同じビジュアルになります。
カスタマイズから、ヘッダーを選択。
「ヘッダーの背景を透過にするかどうか」で「する」を選択。
ヘッダーが透過されました。
SWELLトップページと同じデザインになったでしょうか？？
SWELL（ヘッダー動画）
もし、まだ実装できないなら、もう一度、動画をみることおすすめします。
微調整ができない【デメリット】
SWELLヘッダー動画のデメリットを3つお伝えします。
順番に解説します。
※デメリットは、HTMLやCSSを使えるなら解決できる内容です
ボタンの大きさが調整ずらい
1つ目は、ボタンの大きさが調整しずらいこと。
ボタンの大きさを選ぶ項目はありません。ボタンを大きくしたい場合は、文字を増やすことで対応してました。
トップページボタンなので、そこまで大きくする必要性はないと感じますが……
※CSS、HTMLが扱える人は修正可能です（本記事では割愛）。
ボタン位置が自由に選べない
2つ目は、動画内のボタン位置が選べないこと。
SWELLでは、ボタンの配置は「左、中央、右」のみ選択可能です。
そもそも、「動画内のボタンを左上に設置したい！」というニーズは少ないとおもいますが、念のため共有です。
※CSS、HTMLが扱える人は修正可能です（本記事では割愛）。
ボタンの文字の大きさが調整できない
3つ目は、ボタンの文字の大きさが調整できないこと。
文字のサイズは、サブテキスト（16ピクセル）と同じサイズです。
どうしても、ボタン内の文字を大きくしたい方は「追加CSS」で記述する方法がおすすめです。
CSSの追加方法は、クラブロ様のサイトが参考になります。
スマホ動画で制作できる【メリット】
SWELLヘッダー動画のメリットは3つあります。
順番に解説します。
2分でヘッダー動画が作れる
1つ目のメリットは、2分でヘッダー動画ができること。
本記事では何度も「2分」アピールしてますが、簡単なのでほんとオススメ！
クリックだけで、ヘッダー動画が作れるので、記事の作成時間に注力できます。
キャベツ太郎記事を増やせるので、収益化できる可能性が高まります。
ヘッダー動画の作り方で記載したとおり、ブログ初心者がヘッダー動画をつくると、おそらく2時間はかかるでしょう。
SWELLで作成すれば、118分節約できます。
スマホがあれば作成可能
2つ目のメリットは、スマホ動画でヘッダー動画が作成できること。
ブログ初心者でも、リッチなサイトが作成できます。
スマホ動画だと、画質を気にされる方がいるかもですが、SWELLはフィルター処理があるので、心配ご無用。
SWELLには「4つのフィルター」と「オーバレイカラーの不透明度」が設定できます。
なので、動画の画質が悪くても、多少ごまかすことができます。
コンバージョンに繋がりやすい
3つ目のメリットは、コンバージョンに繋がること。
ヘッダー動画のど真ん中に、自由なテキスト、自由なコンバージョンボタンを設置できるので、収益化が促進します。
SWELL以外でヘッダー動画を作成した場合、ボタンを設置するためには、HTMLとCSSをカスタマイズする必要があります。
SWELLは、クリックベースで、動画にコンバージョンボタンを設置できるので、最短の収益化を実現できます。
まとめ【SWELLなら、2分でサイトがかっこよくなります】
まとめです。
今回は、「SWELLでできること、2分でホームページをかっこよく」というテーマで記事を書きました。
SWELLは、17,600円（込）と、お値段はお高めですが、デザインに強い強力なブロックが実装されてます。
デザイン工数が減るので、結果的で時間短縮につながります。
SWELLにしたことで、1記事あたり60分節約できると仮定すると、1,875円得してます。
5記事作った場合、9,375円です。
SWELLは、長く使えば使うほどお得になる、そんなテーマです。
＼サクサク動く／
