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