SWELL:たった2分でホームページをかっこよく【ヘッダー動画】

ヘッダー動画

ブログがダサいです。かっこよくする方法を教えてください。

サイトがダサくて、悩んでいませんか?

わたしは、昔、Cocoon(コクーン)という無料ワードプレステーマを使っておりました。

コクーンは、正直デザイン性が低いです。

加えて、わたし自身もデザイン力がなく、表示するたびダサいサイトに悩んでいました。

キャベツ太郎

ダサいサイトを一新したのが、SWELLヘッダー動画です。

※ヘッダー動画=トップページにフルスクリーンで動画を表示すること

そこでこの記事は、SWELLヘッダー動画を設置する方法をお伝えします。

この記事を読めば、時間をかけずに、サイトがかっこよくなります。

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

この記事を書いている人
この記事を書いている人
登場人物

2022年10月1日の情報です。

この記事でわかること(もくじ)

ホームページに動画をのせる効果【サイトがかっこよくなる】

ホームページにヘッダー動画を表示させると、どんな効果があるの?

効果は3つあります。

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

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

なぜなら、動画をトップページにフルスクリーン表示させるだけで、おしゃれに見えるから。

また、動画はユーザーの視点を止めるので、サイト滞在時間が長くなる傾向があります(SEOに有利)。

さらに、ヘッダー動画は、情報をまとめて伝えることができるため、自分のサイトを認知してもらい人におすすめです。

例えば、「株式会社 リ・リクリエーション」。

ヘッダー動画を表示することで「クリエイティブ制作会社」ということが一瞬で伝わるビジュアルになってます。

ただし、ヘッダー動画を制作するには、HTMLやCSSなどのコーディングが必要です。

外注するにも、10万円以上かかります。

キャベツ太郎

つまり、お金と時間がかかります。

しかし、SWELLは、スマホで撮影した動画で、ヘッダー動画が作成できます。

2分でサイトをかっこよく【アイフォン動画でOK】

SWELLなら、ヘッダー動画を簡単に実装できます。

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

SWELL(ヘッダー動画)

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

ベランダから撮影した動画

上記の動画は、2022年6月6日(月)私が住んでるマンションのベランダから撮影した動画です。

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

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

2分でヘッダー動画
2分でヘッダー動画作成
2分でヘッダー動画作成
キャベツ太郎

動画では、ゆっくり操作しているので、2分12秒かかってますが、2分以内で作成できます。

SWELLメインビジュアル機能

SWELLメインビジュアル機能

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

動画の上に、文字や効果を配置しています。

SWELLメインビジュアル機能でできること

  • 動画表示サイズの調整(高さ)
  • ボタンの丸み
  • 画像のフィルター処理(ブラー、グレースケール、ドッド、ブラシ)
  • オーバレイカラーの不透明度(CSSの opacity プロパティの値)
  • 余白
  • スクロール調整
  • テキスト挿入(タイトルと説明文)
  • テキストの位置
  • 色選択
  • テキストのシャドウカラー
  • ボタンカラー
  • ボタンタイプ

SWELLメインビジュアル機能には、ヘッダー動画をカスタマイズする機能が多く実装されてます。

この多様性が、かっこいいヘッダー動画が作れる理由です。

Web初心者でも簡単に、ヘッダー動画が実装できます。

SWELLヘッダー動画(メインビジュアル機能)の詳細を確認したい人は、以下リンクからどうぞ。

メインビジュアル設定(ヘッダー動画)

SWELLヘッダー動画の設定方法

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

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

カスタマイズ
カスタマイズ

SWELLを購入して、ログインした状態で、トップページを表示します。

画像赤枠「カスタマイズ」を選択。

トップページ
トップページ

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

メインビジュアル

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

メインビジュアル内容
メインビジュアル内容

SWELLの「メインビジュアル」にて、ヘッダー動画の設定が可能です。

設定詳細①
設定詳細①

メインビジュアル内の詳細設定は、好みに合わせて設定してください。

※画像は設定例です

設定詳細②
設定詳細②

スマホで撮影した動画を、動画(PC/Tab)にてアップします。

ナビが透過されてない
ナビが透過されてない

最後に、ヘッダーのナビを透過(文字を透かせる)します。透過設定することで、SWELLの公式トップページと同じビジュアルになります。

ヘッダー

カスタマイズから、ヘッダーを選択。

ヘッダーの背景を透過

「ヘッダーの背景を透過にするかどうか」で「する」を選択。

ヘッダーが透過されました
ヘッダーが透過されました

ヘッダーが透過されました。

SWELLトップページと同じデザインになったでしょうか??

SWELL(ヘッダー動画)

もし、まだ実装できないなら、もう一度、動画をみることおすすめします。

微調整ができない【デメリット】

ヘッダー動画のデメリット
ヘッダー動画のデメリット

SWELLヘッダー動画のデメリットを3つお伝えします。

  1. ボタンの大きさが調整ずらい
  2. ボタン位置が自由に選べない
  3. ボタンの文字の大きさが調整できない

順番に解説します。

※デメリットは、HTMLやCSSを使えるなら解決できる内容です

ボタンの大きさが調整ずらい

ボタンのサイズ調整が難しい
ボタンのサイズ調整が難しい

1つ目は、ボタンの大きさが調整しずらいこと。

ボタンの大きさを選ぶ項目はありません。ボタンを大きくしたい場合は、文字を増やすことで対応してました。

トップページボタンなので、そこまで大きくする必要性はないと感じますが……

※CSS、HTMLが扱える人は修正可能です(本記事では割愛)。

「class=c-mvBtn__btn」に、ボタンの幅を指定します

ボタン位置が自由に選べない

ボタンの位置が選べない
ボタンの位置が選べない

2つ目は、動画内のボタン位置が選べないこと。

SWELLでは、ボタンの配置は「左、中央、右」のみ選択可能です。

そもそも、「動画内のボタンを左上に設置したい!」というニーズは少ないとおもいますが、念のため共有です。

※CSS、HTMLが扱える人は修正可能です(本記事では割愛)。

「class=c-mvBtn__btn」にボタンの場所を指定します

ボタンの文字の大きさが調整できない

ボタンの文字の大きさが選べない

3つ目は、ボタンの文字の大きさが調整できないこと。

文字のサイズは、サブテキスト(16ピクセル)と同じサイズです。

どうしても、ボタン内の文字を大きくしたい方は「追加CSS」で記述する方法がおすすめです。

CSSの追加方法は、クラブロ様のサイトが参考になります。

「class=c-mvBtn__btn」にフォントサイズを指定します

スマホ動画で制作できる【メリット】

ヘッダー動画のメリット
ヘッダー動画のメリット

SWELLヘッダー動画のメリットは3つあります。

  1. 2分でヘッダー動画が作れる
  2. スマホで撮影した動画で作成できる
  3. コンバージョンに繋がりやすい

順番に解説します。

2分でヘッダー動画が作れる

2分でヘッダー動画

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

本記事では何度も「2分」アピールしてますが、簡単なのでほんとオススメ!

クリックだけで、ヘッダー動画が作れるので、記事の作成時間に注力できます。

キャベツ太郎

記事を増やせるので、収益化できる可能性が高まります。

ヘッダー動画の作り方で記載したとおり、ブログ初心者がヘッダー動画をつくると、おそらく2時間はかかるでしょう。

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

スマホがあれば作成可能

スマホがあればOK
スマホがあればOK

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

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

スマホ動画だと、画質を気にされる方がいるかもですが、SWELLはフィルター処理があるので、心配ご無用。

4つのフィルターが設定できる
4つのフィルターが設定できる

SWELLには「4つのフィルター」と「オーバレイカラーの不透明度」が設定できます。

なので、動画の画質が悪くても、多少ごまかすことができます

コンバージョンに繋がりやすい

コンバージョンボタン設置
コンバージョンボタン設置

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

ヘッダー動画のど真ん中に、自由なテキスト、自由なコンバージョンボタンを設置できるので、収益化が促進します。

SWELL以外でヘッダー動画を作成した場合、ボタンを設置するためには、HTMLとCSSをカスタマイズする必要があります。

SWELLは、クリックベースで、動画にコンバージョンボタンを設置できるので、最短の収益化を実現できます。

まとめ【SWELLなら、2分でサイトがかっこよくなります】

まとめ
まとめ

まとめです。

今回は、「SWELLでできること、2分でホームページをかっこよく」というテーマで記事を書きました。

SWELLは、17,600円(込)と、お値段はお高めですが、デザインに強い強力なブロックが実装されてます。

デザイン工数が減るので、結果的で時間短縮につながります。

人生の時給
月給30万:人生の時給

SWELLにしたことで、1記事あたり60分節約できると仮定すると、1,875円得してます。

5記事作った場合、9,375円です。

SWELLは、長く使えば使うほどお得になる、そんなテーマです。

\サクサク動く/

パフォーマンス100点

無料サポートあり/

クリックすると公式HPに移動します

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
この記事でわかること(もくじ)