- SWELLでブログを始めたけど、画像サイズってどれが正解なの…？
- 記事の表示が重い気がするけど、画像が原因なのかな？
アッフィーこんな悩みを解決できる記事をご用意しました！
私はブログを始めて2年。
これまでに100本以上の渾身の記事を書き上げてきました。
その結果、累計で5桁のアクセスを達成することができました。
画像サイズは、見た目の美しさだけでなく、サイトの表示速度やSEOにも直結する重要なポイントです。
この記事では、SWELLに最適な画像サイズを種類別にまとめ、それぞれの設定方法を画像付きで丁寧に解説します。
この記事を最後まで読めば、メインビジュアル画像・ファビコン・アイキャッチなど、種類別に最適な画像サイズを知ることができ、ブログ運営の効率が向上します。
また、この記事に沿って画像を設定すれば、サイトの表示速度が改善され、読者からもGoogleからも評価されるサイトになりますよ。
それでは、さっそく始めていきましょう！
まだ、SWELLを購入していない方は以下の記事を参考に、購入しておいてください。
購入したら、初期設定も忘れずに！
SWELLに適した種類別の画像サイズ一覧表
SWELLでブログを運営する際、画像サイズは見た目の美しさだけでなく、サイトの表示速度やSEOにも大きく影響します。
ここでは、SWELLに最適な画像サイズを種類別にまとめました。
| 画像の種類 | 推奨サイズ（横 × 縦） | 推奨の根拠 |
|---|---|---|
| メインビジュアル（PC） | 1600 × 900px （高さは500～900pxで調整） | SWELL公式サイトの使用サイズ |
| メインビジュアル（スマホ） | 960 × 800px （高さは500～1200pxで調整） | サイト表示速度優先 |
| コンテンツヘッダー画像 | 横幅1600px [横幅1280px] | SWELL公式サイトの使用サイズ [サイト表示速度優先] |
| ヘッダーロゴ画像 | 600 × 135px（png推奨） | サイト表示速度優先 |
| サイトアイコン（ファビコン） | 512 × 512px（png推奨） | WordPress推奨 |
| アイキャッチ画像 | 1200 × 630px | OGP（SNS推奨）と同じ |
| NO IMAGE画像 | 1200 × 630px | OGP（SNS推奨）と同じ |
| OGP画像 | 1200 × 630px | SWELL推奨＆SNS推奨 |
| 記事内画像 | 1200 × 630px [横幅 900px] | OGP（SNS推奨）と同じ [サイト表示速度優先] |
| プロフィール画像 | 160 × 160px | サイト表示速度優先 |
それぞれについての説明と設定する手順は、以下で順番に説明しますね。
メインビジュアル
メインビジュアルとは、ブログやWebサイトのトップページや各ページの最上部（ファーストビュー）に大きく表示される画像や動画のことです。
訪問者がページを開いた瞬間、最初に目にする「サイトの顔」ともいえる存在です
SWELLに適したメインビジュアルのサイズ
SWELLに最適なメインビジュアルの推奨サイズは、以下のとおりです。
パソコン表示では1600 × 900px（高さは500～900pxで調整）
スマホ表示では960 × 800px（高さは500～1200pxで調整）
1600 × 900pxはSWELL公式サイトでも利用されているサイズです。
メインビジュアルは、第一印象を決めたり、サイトの内容や魅力を伝えたりする、とても重要な役割を持っています。
サイトのテーマや伝えたいことが、ひと目でわかるような写真やイラストを選びましょう。
メインビジュアルの設定方法
メインビジュアルは、WordPressの管理画面から簡単に設定できます。
画像や動画の準備ができたら、以下の手順で設定を進めてみてくださいね。
まず、WordPressの管理画面メニューの「外観」⇒「カスタマイズ」をクリックします。
これで、サイトの見た目を変更できる「カスタマイザー」が開きます。
カスタマイザーが開いたら、左側のメニューの「トップページ」⇒「メインビジュアル」をクリックしてください。
「メインビジュアル」の設定画面で、「画像を選択」または「動画を選択」ボタンをクリックし、準備しておいた画像や動画をアップロードします。
これで、あなたのサイトのトップページにメインビジュアルが設定されます。
なお、メインビジュアルの詳しい説明と設定方法は以下の記事を参考にしてください。
コンテンツヘッダー画像
コンテンツヘッダーは、ブログ記事や固定ページのタイトル部分（記事本文の上部）に表示される背景画像のことです。
記事タイトルのすぐ後ろや上に大きく表示されるため、読者が記事を開いたときに最初に目にする「記事ごとの顔」となる画像です。
SWELLに適したコンテンツヘッダー画像サイズ
SWELLのコンテンツヘッダー画像には、横幅1600pxの画像がおすすめです。
サイトの表示速度を意識するなら、横幅1280pxを目安にしても良いでしょう。
横幅1600pxはSWELL公式サイトでも使われているサイズです。
画像がない場合でも、単色で設定できるので安心してくださいね。
コンテンツヘッダー画像の設定方法
コンテンツヘッダーの設定は、以下のステップで進めていきましょう。
コンテンツヘッダーはデフォルトで「適用しない」になっているので、「適用」に変更する必要があります。
まずはカスタマイザーを開きます
続いて、「投稿・固定ページ」⇒「タイトル」をクリックします。
タイトルの表示位置を「コンテンツ上」に変更してください。
これでコンテンツヘッドが利用できるようになります。
変更したら上部にある「公開」をクリックして変更を保存しておきましょう。
カスタマイザーに戻り、左側メニューから「サイト全体設定」⇒「コンテンツヘッダー」をクリックします。
「コンテンツヘッダー」の設定画面で、「画像を選択」ボタンから画像を選んでアップロードしてください。
また、好きな色を設定してオーバーレイカラーの不透明度を「1」にすることで、画像なしでもコンテンツヘッダーを利用することができますよ。
ヘッダーロゴ画像
ヘッダーロゴとは、ブログやWebサイトの一番上（ヘッダー部分）に表示されるロゴ画像のことです。
SWELLに適したヘッダーロゴ画像サイズ
SWELLのヘッダーロゴ画像は、SWELL公式サイトでは1600 × 360pxが使われていますが、速度を重視するなら600 × 135pxがおすすめです。
ロゴは小さく表示されることが多いので、表示速度への影響を考えサイズを小さくしておきましょう。
背景を透過できるPNG形式で、通常色とホワイト色の2種類を用意しておくと便利ですよ。
ヘッダーロゴ画像の設定方法
ヘッダーロゴ画像は、WordPressのカスタマイザーから簡単に設定できます。
以下の手順であなたのサイトにロゴを配置しましょう。
まず、WordPressの管理画面にログインし、「外観」⇒「カスタマイズ」をクリックして、「カスタマイザー」を開きます。
カスタマイザーが開いたら、左側のメニューにある「ヘッダー」をクリックしてください。
「ヘッダー」の設定画面内にあるロゴ画像の設定項目で、「画像を選択」ボタンをクリックし、用意しておいたロゴ画像をアップロードします。
これで、あなたのサイトのヘッダーにロゴが表示されるようになります。
なお、ヘッダーロゴの詳しい設定方法についてはヘッダーロゴの設定を参考にしてください。
サイトアイコン（ファビコン）
サイトアイコン、通称ファビコンは、ブラウザのタブやブックマークに表示される小さなアイコンです。
たとえば、たくさんのタブを開いたときに、それぞれのサイトの左側に小さな画像が表示されているのを見たことがあると思います。
その画像がファビコンです。
サイトアイコン（ファビコン）の推奨サイズ
サイトアイコン（ファビコン）の推奨サイズは、512 × 512pxの正方形で、PNG形式がおすすめです。
これはWordPressが推奨しているサイズなので、この一つの画像をアップロードすれば、様々なブラウザやデバイスに合わせて自動でリサイズ（大きさを調整）してくれます。
PNG形式をおすすめするのは、背景を透過できるからです。
サイトアイコン（ファビコン）の設定方法
サイトアイコンの設定はとても簡単です。
以下のステップで、あなたのブログにオリジナルのアイコンを設定してみましょう。
まずはWordPressの管理画面にログインして、「外観」⇒「カスタマイズ」をクリックします。
カスタマイザーが開くので、左側のメニューから「WordPress設定」⇒「サイト基本情報」をクリックしてください。
「サイト基本情報」の画面に「サイトアイコン」の項目があるので、「画像を選択」ボタンをクリックして、用意しておいたアイコン画像をアップロードします。
これで、ブラウザのタブなどにあなたのサイトのアイコンが表示されるようになりますよ。
なお、サイトアイコン（ファビコン）については【SWELL】ファビコンを設定して差別化しよう！【Canvaで画像生成】で詳しく解説していますので参考にしてください。
アイキャッチ画像
アイキャッチ画像とは、ブログ記事やウェブサイトの記事の冒頭や目立つ場所に表示される、「読者の目を引きつけるための画像」です。
その名の通り、「Eye（目）」を「Catch（つかむ）」する役割を持ち、記事のテーマや内容を視覚的に伝えたり、読者の興味を引きつけたりするために使われます。
アイキャッチ画像の推奨サイズ
推奨サイズは1200 × 630pxで作成するのがおすすめです。
このサイズはFacebookやX（旧Twitter）などのSNSでシェアされた際に、画像が途切れることなくきれいに表示されます。
ただし、ファイルを軽くするために「https://tinypng.com/」で画像を圧縮してからアップロードするようにしましょう。
アイキャッチ画像の設定方法
記事ごとに設定するアイキャッチ画像は、WordPressの投稿・固定ページ編集画面から簡単に設定できます。
以下の手順で魅力的なアイキャッチを設定しましょう。
WordPressの管理画面から、アイキャッチを設定したい「投稿」または「固定ページ」の編集画面を開いてください。
新規作成でも既存の記事でも大丈夫です。
編集画面のサイドバーにある「アイキャッチ画像を設定」をクリックし、1200 × 630pxで作成した画像をアップロードします。
これで、あなたの記事のサムネイルやSNSシェア時の画像として表示されるようになりますよ。
NO IMAGE画像
NO IMAGE画像は、記事にアイキャッチ画像が設定されていない場合に表示される、いわば「代役」のサムネイル画像です。
サムネイル画像とは「小さく縮小された見本画像」のことをいい、以下のケースで使用されます。
- 新着記事
- 人気記事
- 関連記事
- 記事スライダー
- ピックアップバナー
NO IMAGE画像の推奨サイズ
SWELLでのNO IMAGE画像の推奨サイズは、1200 × 630pxです。
これは、記事をSNSでシェアする際に使われるOGP画像と同じサイズであり、OGP画像と同じものを使うのが効率的でおすすめです。
SWELLでは横幅1600px以上も推奨されていますが、サムネイルとして使われることが多いため、表示速度を考えると1200 × 630pxで十分です。
NO IMAGE画像の設定方法
NO IMAGE画像は、カスタマイザーから簡単に設定できます。
以下のステップで、NO IMAGE画像を設定しましょう。
WordPressの管理画面から「外観」⇒「カスタマイズ」をクリックしてカスタマイザーを開きます。
カスタマイザーが開いたら、左側のメニューから「サイト全体設定」⇒「NO IMAGE画像」をクリックしましょう。
「NO IMAGE画像」の設定画面で、「画像を選択」ボタンをクリックし、用意しておいた1200 × 630pxの画像をアップロードします。
これで、アイキャッチがない記事にも、設定したNO IMAGE画像が表示されるようになります。
OGP画像
OGP画像とは、アイキャッチ画像が設定されていない記事をSNSでシェアした時に表示される「サムネイル画像」のことです。
OGP画像は、トップページをX（旧Twitter）やFacebookでシェアした時にも表示されます。
トップページをシェアするなら、OGP画像を設定しましょう。
— アッフィー|ドラム🥁が叩けるブロガー (@affi_weblog) June 13, 2025
トップページにはアイキャチ画像が設定できないからです。https://t.co/TusayUAI1H
OGP画像の推奨サイズ
SWELLにおけるOGP画像の推奨サイズは、1200 × 630pxです。
このサイズは、FacebookやX（旧Twitter）など主要なSNSも推奨しているサイズです。
画像はNO IMAGE画像と同じ画像を利用するようにしましょう。
OGP画像の設定方法
SWELLでOGP画像を設定する場合、SEOプラグイン「SEO SIMPLE PACK」を使うのが一般的です。
手順は以下のとおりです。
まだ「SEO SIMPLE PACK」を導入していない場合は、まずはこのプラグインをインストールして有効化しましょう。
WordPressの管理画面から「プラグイン」⇒「プラグインを追加」をクリック。
「SEO SIMPLE PACK」を検索し、「今すぐインストール」をクリックしてください。
インストール出来たら「有効化」をクリックすれば導入完了です。
プラグインを有効化したら、WordPressの管理画面左メニューにある「SEO PACK」をクリックし、その中の「OGP設定」をクリックしてください。
「OGP設定」画面で、「画像を選択」をクリックし、用意しておいた1200 × 630pxのOGP画像をアップロードします。
「設定を保存する」をクリックすれば、OGP画像の設定は完了です。
記事内画像
記事内画像とは、ブログ記事の本文中に挿入されている画像のことです。
文章だけでなく、写真やイラスト、図表などを記事の途中に入れることで、読者に内容をより分かりやすく、楽しく伝える役割を持っています。
記事内画像の推奨サイズ
SWELLで記事内に挿入する画像の推奨サイズは、1200 × 630pxです。
サイトの表示速度を意識するなら、横幅900pxを目安にしても良いでしょう。
記事内画像は、SNSに投稿することもあるため、OGP画像と同じ1200 × 630pxにするのがおすすめです。
もしページの表示速度をより重視したい場合は、横幅900pxにしても問題ありません。
「https://tinypng.com/」で圧縮してアップロードすると、さらに表示が速くなりますよ。
記事内画像の設定方法
記事内への画像挿入は、WordPressのエディターから直感的に操作できます。
手順は以下のとおりです。
記事の編集画面で、画像を入れたい場所にカーソルを合わせ、「+」マークをクリックします。
ブロックの一覧から「画像」ブロックを選んでください。
画像ブロックが追加されたら、以下のいずれかで画像を挿入しましょう。
- 「アップロード」をクリックして新しい画像をパソコンから選ぶ
- 「メディアライブラリ」からすでにアップロード済みの画像を選ぶ
画像は基本的に「フルサイズ」のままで問題ありませんが、必要に応じて幅や高さを調整してください。
プロフィール画像
プロフィール画像は、あなたのブログ記事の著者情報やコメント欄などに表示されるアイコンです。
プロフィール画像の推奨サイズ
SWELLのプロフィール画像の推奨サイズは、160 × 160px程度です。
サイトアイコン（ファビコン）とは異なり、プロフィール画像は自動でリサイズ（大きさの調整）されないことがあります。
そのため、あまりにも大きな画像をアップロードすると、サイトの表示速度に悪影響を与える可能性があるので注意しましょう。
プロフィール画像の設定方法
プロフィール画像は、WordPressのユーザー設定から簡単に設定できます。
手順は以下のとおりです。
WordPressの管理画面にログインしたら、左側のメニューの「ユーザー」⇒「プロフィール」をクリックしてください。
プロフィール設定画面を下にスクロールしていくと、「SWELL追加データ」という項目の中に「カスタムアバター」という設定があります。
「カスタムアバター」の項目で、「画像を選択」ボタンをクリックし、プロフィール画像をアップロードしてください。
これで、あなたのブログのプロフィール欄などに画像が表示されるようになります。
この記事のまとめ
この記事では、SWELLに最適な画像サイズと設定方法を種類別にご紹介しました。
最後にまとめ表を再掲します。
| 画像の種類 | 推奨サイズ（横 × 縦） | 推奨の根拠 |
|---|---|---|
| メインビジュアル（PC） | 1600 × 900px （高さは500～900pxで調整） | SWELL公式サイトの使用サイズ |
| メインビジュアル（スマホ） | 960 × 800px （高さは500～1200pxで調整） | サイト表示速度優先 |
| コンテンツヘッダー画像 | 横幅1600px [横幅1280px] | SWELL公式サイトの使用サイズ [サイト表示速度優先] |
| ヘッダーロゴ画像 | 600 × 135px（png推奨） | サイト表示速度優先 |
| サイトアイコン（ファビコン） | 512 × 512px（png推奨） | WordPress推奨 |
| アイキャッチ画像 | 1200 × 630px | OGP（SNS推奨）と同じ |
| NO IMAGE画像 | 1200 × 630px | OGP（SNS推奨）と同じ |
| OGP画像 | 1200 × 630px | SWELL推奨＆SNS推奨 |
| 記事内画像 | 1200 × 630px [横幅 900px] | OGP（SNS推奨）と同じ [サイト表示速度優先] |
| プロフィール画像 | 160 × 160px | サイト表示速度優先 |
メインビジュアル、アイキャッチ、ヘッダーロゴなど、それぞれの画像には推奨サイズがあり、適切に設定することでサイトの表示速度が向上し、SEOにも良い影響を与えます。
今回解説した具体的な設定手順を参考に、あなたのSWELLサイトをさらに最適化し、読者にとっても検索エンジンにとっても快適なブログを目指しましょう。
本ブログではWindowsテーマにSWELLを使用しています。
あなたも、日本一使用されているSWELLにしませんか？
今回は以上です。
最後までお読みいただきありがとうございました。
