アッフィーこんな悩みを解決できる記事をご用意しました！
私はブログを始めて3年。
これまでに100本以上の渾身の記事を書き上げてきました。
その結果、累計で5桁のアクセスを達成することができました。
SWELLのメインビジュアルは、誰でも簡単に訪問者の目を引く、魅力的なデザインに仕上げられます。
プログラミング知識は必要ありません。
必要なのは、正しいサイズ設定とSWELLでのカスタマイズの知識だけです。
そこで本記事では、SWELLメインビジュアルに関する具体的な手順を徹底解説します。
本記事を読んで実践すれば、あなたのサイトのメインビジュアルが、訪問者を惹きつける「顔」となっているでしょう。
それでは、さっそく始めていきましょう。
SWELLメインビジュアルの基本を理解しよう
あなたのサイトを訪れた人が最初に目にする「顔」、それがSWELLのメインビジュアルです。
ここでは、メインビジュアルがなぜ大切なのか、そしてSWELLでどんなことができるのかをわかりやすく説明しますね。
メインビジュアルとは？サイトにおける重要性
「メインビジュアル」とは、ウェブサイトを開いたときに、一番最初に表示される大きな画像や動画のことです。
この最初の画面全体は「ファーストビュー」と呼ばれています。
あなたのサイトを訪れた人が「このサイト、面白そうだな」と感じるかどうかの、とっても大事なポイントになります。
お店に入ったとき、最初に目にする雰囲気が良くて「また来たいな」と思うことがあると思います。
同じように、ウェブサイトもメインビジュアルで第一印象が決まります。
だからこそ、サイトのテーマに合った魅力的なメインビジュアルを設定することは、読者の心をつかみサイトを読み進めてもらうため、さらには再度訪れてもらうために重要だといえます。
SWELLのメインビジュアルでできること
SWELLのメインビジュアルは、ただの画像表示だけにとどまりません。
例えば、1枚の静止画を表示するだけでなく、複数の画像をまるで紙芝居のようにスライドショーで切り替えたり、動きのある動画を設定することも可能です。
））さらに、あなたのサイトのタイトルやメッセージを表示させたり、特定のページへ誘導するためのボタンを設置することもできます。
これらの機能は、訪問者にあなたのサイトの魅力や伝えたいことを効果的に届け、強いインパクトを与えるのに役立ちます。
SWELLは操作がシンプルなので、ブログの初心者でもこれらの設定を簡単にできて、あなたのサイトの個性を最大限に引き出せるはずです。
メインビジュアルに最適な画像・動画サイズとは？
メインビジュアルをきれいに見せるには、適切な画像や動画のサイズ選びがとても大切です。
順番に詳しくご紹介しますね。
PC・スマホそれぞれに推奨される画像サイズ
メインビジュアルの画像サイズは、見る人が使っているデバイスによって最適な大きさが変わります。
例えば、パソコンで見てちょうど良くても、スマホだと画像の一部が見切れてしまったり、逆に小さすぎたりすることがあるんです。
PＣの画像サイズ
SWELL公式サイトでは、パソコン用として「横幅1600px × 高さ900px」のサイズが推奨されています。
このサイズだと、パソコンの画面いっぱいにメインビジュアルが表示されて、とてもインパクトがあります。
サイトのイメージに合わせるならば、高さは500px 〜 900pxの間で調整するとよいでしょう。
スマホの画像サイズ
一方、スマホ用には「横幅960px × 高さ800px」程度が目安です。
スマホの画面は縦長なので、それに合わせて高さを調整するとバランスが良くなります。
高さは500px 〜 1200pxくらいの間で調整してみてください。
写真やデザインが、どのデバイスから見てもきれいに表示されるように調整できれば、魅力的なサイトになりますよ。
動画をメインビジュアルにする際のポイント
メインビジュアルに動画を使うと、サイトに動きが出て訪問者の目を惹きつけやすくなります。
SWELLの公式サイトでも動画が使われているように、SWELLはメインビジュアルでの動画利用を想定しています。
しかし、動画を使う場合、次のポイントに注意しましょう。
動画ファイルの容量に注意する
まず、動画のファイルサイズはできるだけ軽くすることが大切です。
もし動画が重すぎると、次のようなデメリットがあるからです。
- ブログの表示速度が遅くなる
- サイトスピードが落ちるとGoogleの評価が下がる
- 表示速度が遅いと離脱につながる
容量が大きいとサイトの表示速度が遅くなってしまい、読者が途中で離脱する可能性があるので注意しましょう。
動画の拡張子には「mp4」形式を使う
動画ファイルの拡張子には以下のように、多くの拡張子があります。
- 「mp4」
- 「avi」
- 「mov」
- 「flv」
サイトに使う動画としては「mp4」形式を使うことをお勧めします。
というのも、「mp4」は高い圧縮効率と優れた画質を持っているからです。
実際、YoutubeやNetflixのような大手動画配信サービスも、mp4形式を採用しており、少ないデータ量で高品質な動画を配信できています。
サイトに動画を使うなら、「mp4」形式が最適です。
CanvaでSWELLメインビジュアルを作成する手順
Canvaを使えば、プロのようなデザイン知識がなくても、おしゃれなメインビジュアルを簡単に作れます。
ここでは、Canvaで画像と動画を作る手順をご紹介しましょう。
Canvaでの画像作成ステップ
SWELLのメインビジュアルにぴったりの画像を、Canvaで作る手順は以下の通りです。
まずCanvaのホーム画面を開き、「作成」から「カスタムサイズ」を選びましょう。
パソコン用の推奨サイズである「横幅1600px × 高さ900px」を入力して、「新しいデザインを作成」をクリックします。
これで、SWELLのメインビジュアルに合ったサイズのキャンバスが準備できました。
キャンバスが用意できたら、あなたのサイトのテーマや雰囲気に合わせて自由にデザインをしていきましょう。
Canvaにはたくさんの無料素材やテンプレートがあるので、それらを活用すると簡単に素敵なデザインが作れます。
今回は自分で画像を作る手順をご紹介しましょう。
左側のメニューの中の「素材」をクリックし、例えば検索窓に「ノートパソコン」と入力しましょう。
グラフィック、写真、動画など種類別に表示された中から「写真」の「すべて表示」をクリックしましょう。
写真の中からお好みの写真を選び、クリックしてください。下図のようにキャンバスに写真が挿入されます。
写真の大きさと位置を調整し、キャンバスいっぱいに表示させましょう。
これで、キャンパス一杯に画像を貼り付けることができます。
左側のメニューから「テキスト」⇒「小見出し」をクリックしてキャンバスにテキストを追加します。
テキストは上部でフォントや字の大きさが変更できます。また、回転する矢印を回せばテキストを回転させることもできます。
そのほか、上部にあるツールバーを使えば、字間の調整やテキストの色変更なども設定できます。
ぜひ、いろいろ触ってみてください。
テキストを調整し、サブテキストも追加して画像が完成しました。
なお、完成した画像のサブテキストの下に透過させた四角がありますが、これも四角を選択して表示されるツールバーの透過度で設定できます。
デザインが完成したら、右上の「共有」ボタンから「ダウンロード」を選んで画像を保存しましょう。
ファイル形式は「PNG」がおすすめ。
ファイル形式を選んだら「ダウンロード」をクリックしましょう。
これで、SWELLに設定するメインビジュアル画像が完成しました！
アッフィーお疲れさまでした
Canvaでの動画作成ステップ
メインビジュアルに動きを設定したい場合は、Canvaで簡単な動画を作ることもできます。
Canvaで動画を作る手順は以下の通りです。
画像作成の時と同じように、Canvaで「カスタムサイズ」を指定し、「横幅1600px × 高さ900px」で新しいキャンバスを用意します。
左側のメニューから「素材」⇒「動画」の「すべて表示」をクリックして動画の一覧を表示させましょう。
Canvaには様々な雰囲気の動画素材があるので、あなたのサイトに合う動画を選び、キャンバスに配置しましょう。
あまり長い動画だとファイルサイズが大きくなりすぎることがあるので、10秒程度の短い動画がおすすめです。
動画が完成したら、右上の「共有」ボタンから「ダウンロード」を選んでください。
そして「mp4」形式でダウンロードしましょう。
次に、画像も併せてダウンロードしておきましょう。（理由は後ほど説明しますね！）
これで、SWELLに設定できる動画のメインビジュアルが完成です。
デザインをより良く見せるためのコツ
SWELLのメインビジュアルをCanvaでデザインする際、さらに魅力的に見せるためのポイントを２つご紹介します。
テキストについて
テキスト（文字）を配置する際は、デバイスによって画像の一部が見切れる可能性があります。
なので、サイト名やキャッチフレーズなどの重要な情報は中央寄りに配置するようにしましょう。
また、日本語のテキストは文字間隔を少し広めにとると、より見やすくなります。
色選びについて
次に、色選びに迷ったら、背景写真の色から文字の色を選ぶと、デザイン全体に統一感が出ておしゃれに見えます。
Canvaのカラーパレットには「写真の色」という機能があるので、ぜひ活用してみてください。
さらに、背景画像の透明度を少し下げて、抜け感や奥行きを出すのもおすすめです。
こうすることで、より洗練された印象のメインビジュアルが完成します。
これらのポイントを押さえて、訪問者の心に響くメインビジュアルを作成しましょう。
SWELLでのメインビジュアル設定方法
Canvaで作成したメインビジュアルの画像や動画を、いよいよSWELLに設定していきましょう。
ここでは、画像をメインビジュアルにする場合と、動画をメインビジュアルにする場合の詳しい設定方法をご紹介しますね。
画像をメインビジュアルに設定する
Canvaで作成した画像をSWELLのメインビジュアルに設定する手順は、以下の通りです。
WordPressの管理画面から「外観」⇒「カスタマイズ」をクリックします。
次に、左側のメニューから「トップページ」⇒「メインビジュアル」をクリックしてください。
メインビジュアルの設定画面が表示されたら、「メインビジュアルの表示内容」で「画像」を選択します。
Canvaで作成した画像をアップロードしましょう。
まず、「画像を選択」ボタンをクリックします。
次に、「ファイルをアップロード」タブをクリックし、ファイルを選択をクリックしてください。
最後に「メディアライブラリ」の中からアップロードした写真を選択し、「画像を選択」をクリックします。
これでメインビジュアルに画像がアップロードされます。
画像をアップロードしたら、表示設定を細かく調整してください。
- 周りに余白をつける
- scrollボタンを表示する
上記の表示設定については、お好みでチェックを入れてください。
「画像・動画サイズのまま」を選ぶのが最も簡単です。
というのも、アップロードした画像に合わせて自動的にサイズが調整されるからです。
もし見切れなどがあれば、高さを数値で指定したり、Canvaで画像を調整し直すことも検討しましょう。
また、「フィルター処理」では、画像に「ブラー効果（ぼかし）」や「グレースケール（白黒）」などの効果をかけることができます。
）サイトの雰囲気に合わせて、お好みのフィルターを試してみてくださいね。
設定が完了したら、忘れずに「公開」ボタンをクリックして保存しておきましょう。
動画をメインビジュアルに設定する
動画をメインビジュアルに設定する場合も、基本的な手順は画像と同じですが、いくつか追加で設定する項目があります。
以下に動画を設定する手順を見ていきましょう。
画像設定と同様に、WordPressの管理画面から「外観」⇒「カスタマイズ」とクリックします。
続いて、「トップページ」⇒「メインビジュアル」の順に進みましょう。
「メインビジュアルの表示内容」で「動画」を選択します。
「動画1（PC）」の項目で、Canvaで作成したMP4形式の動画ファイルをアップロードしてください。
動画をアップロードしたら、次に「ポスター画像」を設定しましょう。
ポスター画像とは、動画が読み込まれるまでの間や、何らかの理由で動画が表示されない場合に代わりに表示される画像のことです。
Canvaで動画を作成した際に同時にダウンロードした画像を、ここで設定するのがおすすめです。
これにより、動画がスムーズに表示されるまでの間も、サイトの見た目を損なうことがありません。
動画の設定後も、画像の場合と同様にメインビジュアルの高さや、フィルター処理を調整できます。
プレビュー画面を見ながら、サイト全体とのバランスが最も良い状態に調整してみてくださいね。
動画をメインビジュアルにすることで、よりダイナミックな印象を与えることができますよ。
メインビジュアルをさらに魅力的に！応用設定
メインビジュアルにメニューを置いて、さらに魅力的なトップページに仕上げましょう。
トップページにメニューを設置すれば、訪問者は知りたい情報へすぐにたどり着けるようになります。
ここでは、メインビジュアルにメニューを配置し、メニューにリンクを設定する方法について詳しく見ていきましょう。
メインビジュアルにメニューを配置する手順は以下の通りです。
メインビジュアル用の画像を作成する
まずは、メインビジュアル用の画像をCANVAで作成します。
既に解説した「Canvaでの画像作成ステップ」と「PC・スマホそれぞれに推奨される画像サイズ」を参考に、PC用の画像とスマホ用の画像を作成しましょう。
今回、PC用の画像は1600px ✕ 900pxで、スマホ用の画像は960px ✕ 800pxで作成しました。
メインビジュアルメニューをブログパーツで作る
SWELLでは、メインビジュアルメニューを「ブログパーツ」という機能を使って作ることができます。
ブログパーツは、一度作成したコンテンツ（文章、画像、ボタンなど）を、サイト内の好きな場所に何度でも呼び出せる便利なSWELL独自の機能です。
メインビジュアルメニューをブログパーツで作成する手順は以下の通りです。
WordPressのダッシュボードで「ブログパーツ」⇒「投稿を追加」をクリックします。
メインビジュアル画面が表示されます。
タイトルを「メインビジュアルメニュー（ＰＣ）」など、後でわかりやすい名前にしましょう。
用途のチェックボックスは空白で大丈夫です。
STEP１で追加したブログパーツに「リッチカラムブロック」を追加します。
まずは、PCでのカラム数を3に設定します。
そして、横幅の比率が、30：50：20になるように設定します。
（この時、タブレット、スマホの設定は不要）
一番左のカラムに、３つの画像を上から順番に入れてください。
画像を追加したままでは、全部真ん中になってしまうので、画像を左寄せにしたり、右寄せにしたりしました。さらにはサイズも変えています。
真ん中のカラムには何も入れません。
右のカラムには「サイトマップへ」の画像を入れました。
最後にリッチカラムブロック全体を選択⇒「グループ化」⇒「PCサイズのみ表示する」をクリックします。
続いて、スマホ用のメニューコンテンツを作っていきましょう。
まずはじめに、タブレットのプレビュー画面にしましょう。
STEP２で作成したリッチカラムの下に、もう一つリッチカラムを追加していきます。
次に列数を設定しましょう。最大で３列に設定します。
１段目は60％：40％に設定、２段目は横幅を設定しません。
１段目は左側にスペーサーを480pxの高さで挿入します。
これは、１段目の高さを確保するために挿入するものです。
1段目の右側には「サイトマップへ」の画像を追加しましょう。
画像の大きさを整え、左に寄せました。
２段目には画像を追加していきます。
最後に、リッチカラムブロック全体を選択し、「グループ化」⇒「スマホサイズでのみ表示する」をクリックしてください。
以上で、PCとスマホでメニューの表示を分けて作ることができました。
メニュー画像にページ内リンクを入れる
メインビジュアルメニューでは、トップページの好きな項目にジャンプできるように、メニュー画像にページ内リンクを貼ります。
ここでは、トップページ内の「CATEGORY」へジャンプする場合の設定手順を解説しますね。
事前にジャンプしたいトップページの中の見出しの「高度な設定」⇒「HTMLアンカー」に名前をつけておきます。
ここでは「category」と名前をつけました。
前項で追加したブログパーツ内のメニュー画像にリンク｢# （シャープ）+ 名前」（ここでは「#category」）を入力してください。
他のメニュー画像にも、同様にリンクを入力します。
最後に「保存」をクリックして設定を保存しておきましょう。
これで、ページ内リンクの設定は完了です。
なお、ページ内リンクの貼り方については、以下の記事で詳しく解説していますので、参考にしてください。
カスタマイザーでメインビジュアルを設定する。
メインビジュアル画像とブログパーツが用意できたら、カスタマイザーで設定しましょう。
まず最初にブログパーツのIDを取得します。
ブログパーツ一覧に戻ると、作成したブログパーツの横に「ショートコード」が表示されています。
[blog_parts id=”〇〇”]の「〇〇」の部分がそのブログパーツのID（数字）です。
この数字をメモしておきましょう。
WordPressの管理画面から「外観」⇒「カスタマイズ」をクリックします。
次に、左側のメニューから「トップページ」⇒「メインビジュアル」をクリックしてください。
メインビジュアルを、以下の通り設定してください。
| 設定項目 | 設定内容 |
|---|---|
| ①メインビジュアルの表示内容 | 画像 |
| ②表示設定 | Scrollボタンを表示するにチェック |
| ③メインビジュアルの高さ設定 | ウィンドウサイズにフィットさせる |
| ④スライド[1] | PC用に作成した画像を設定 |
| ⑤スライド[2] | スマホ用に作成した画像を設定 |
| ➅ブログパーツID1 | 作成したブログパーツのID（数字）入力 （今回は539を入力） |
なお、サイト型のトップページを作っている場合には、ホームページ設定で作成した固定ページをトップページとして表示する設定をしてください。
固定ページをトップページとして表示する設定手順は、以下の記事で詳しく説明していますので、参考にしてください。
【SWELLカスタマイズ】おしゃれなサイト型トップページを簡単に作ろう
まとめ：【メインビジュアル】最適な設定でサイトの顔を魅力的にしよう
SWELLのメインビジュアル設定は、サイトの第一印象を大きく左右します。
この記事では、以下の内容を解説しました。
この記事を読んで実践すれば、あなたもきっと素敵なメインビジュアルを設定できますよ。
ブログの「顔」を魅力的に飾り、読者を惹きつけましょう！
本ブログではWindowsテーマにSWELLを使用しています。
あなたも、メインビジュアルの自由度が高いSWELLにしませんか？
今回は以上です。
最後までお読みいただきありがとうございました。
