SWELLでブログを作っていると、画像サイズで迷うことがあります。
- アイキャッチ画像は何pxがいいの？
- 記事内画像はどのくらいの大きさにすればいいの？
- メインビジュアルやロゴ画像は、どのサイズが崩れにくいの？
このあたりは、最初にかなり迷いやすいポイントです。
画像サイズが合っていないと、画像がぼやけたり、スマホで見切れたり、ページ表示が重くなったりします。
見た目が崩れると、せっかく書いた記事も読みにくくなります。
この記事では、SWELLで使う画像サイズの目安と、設定手順を初心者向けに解説します。
ただ、最初から全部を完璧に設定しなくて大丈夫です。
まずは以下の2つだけ整えましょう。
- アイキャッチ画像（1200×630px）
- 記事内画像（横幅900〜1200px）
この2つだけでも、ブログの見やすさはかなり改善します。
そのあと余裕があれば、
- OGP画像
- メインビジュアル
- ヘッダーロゴ画像
- ファビコン
なども整えていきましょう。
ただし、画像についてはそのまま使うのではなく、必ず圧縮して軽量化した上で使いましょう。
画像圧縮については、記事の後半で解説しますね。
SWELLで使う画像サイズの早見表
画像サイズは、サイトの表示速度や読みやすさに影響します。
SWELLでよく使う画像サイズは、以下を目安にしてください。
| 画像の種類 | 推奨サイズ（横 × 縦） | 推奨の根拠 |
|---|---|---|
| アイキャッチ画像 | 1200 × 630px | OGP（SNS推奨）と同じ |
| 記事内画像 | 1200 × 630px [横幅 900px] | OGP（SNS推奨）と同じ [サイト表示速度優先] |
| OGP画像 | 1200 × 630px | SWELL推奨＆SNS推奨 |
| メインビジュアル（PC） | 1600 × 900px （高さは500～900pxで調整） | SWELL公式サイトの使用サイズ |
| メインビジュアル（スマホ） | 960 × 800px （高さは500～1200pxで調整） | サイト表示速度優先 |
| コンテンツヘッダー画像 | 横幅1600px [横幅1280px] | SWELL公式サイトの使用サイズ [サイト表示速度優先] |
| ヘッダーロゴ画像 | 600 × 135px（png推奨） | サイト表示速度優先 |
| ファビコン | 512 × 512px（png推奨） | WordPress推奨 |
迷ったら、まずはこの表のサイズに合わせれば大きく外しません。
特に重要なのは、アイキャッチ画像と記事内画像です。
初心者の方は、まずこの2つから整えましょう。
アイキャッチ画像の推奨サイズと設定方法
アイキャッチ画像とは、ブログ記事やウェブサイトの記事の冒頭や目立つ場所に表示される、「読者の目を引きつけるための画像」です。
その名の通り、「Eye（目）」を「Catch（つかむ）」する役割を持ち、記事のテーマや内容を視覚的に伝えたり、読者の興味を引きつけたりするために使われます。
アイキャッチ画像の推奨サイズ
推奨サイズは1200 × 630pxで作成するのがおすすめです。
このサイズにしておくと、記事一覧やSNSシェアでも崩れにくくなります。
アイキャッチ画像は、記事の第一印象を決める画像です。
サイズが小さすぎると、ぼやけて見えることがあります。
逆に大きすぎる画像をそのまま使うと、ページが重くなりやすいです。
Canvaなどで作る場合は、最初から1200×630pxで作成しておくと楽ですよ。
アイキャッチ画像の設定方法
記事ごとに設定するアイキャッチ画像は、WordPressの投稿・固定ページ編集画面から簡単に設定できます。
以下の手順で魅力的なアイキャッチを設定しましょう。
WordPressの管理画面から、アイキャッチを設定したい「投稿」または「固定ページ」の編集画面を開いてください。
新規作成でも既存の記事でも大丈夫です。
編集画面のサイドバーにある「アイキャッチ画像を設定」をクリックし、1200 × 630pxで作成した画像をアップロードします。
これで、あなたの記事のサムネイルやSNSシェア時の画像として表示されるようになりますよ。
記事内画像の推奨サイズと設定方法
記事内画像とは、ブログ記事の本文中に挿入されている画像のことです。
文章だけでなく、写真やイラスト、図表などを記事の途中に入れることで、読者に内容をより分かりやすく、楽しく伝える役割を持っています。
記事内画像の推奨サイズ
SWELLで記事内に挿入する画像の推奨サイズは、1200 × 630pxです。
サイトの表示速度を意識するなら、横幅900pxを目安にしても良いでしょう。
ブログ初心者ほど、大きな画像をそのままアップロードしがちです。
でも、記事内で表示する画像は、そこまで大きくなくて大丈夫です。
特にスマホで読まれることを考えると、巨大な画像を入れてもあまり意味がありません。
むしろ表示速度が遅くなる原因になってしまいます。
スクリーンショットを使う場合も、読者が確認したい部分が見えれば十分です。
必要以上に大きな画像を入れないようにしましょう。
記事内画像の設定方法
記事内への画像挿入は、WordPressのエディターから直感的に操作できます。
手順は以下のとおりです。
記事の編集画面で、画像を入れたい場所にカーソルを合わせ、「+」マークをクリックします。
ブロックの一覧から「画像」ブロックを選んでください。
画像ブロックが追加されたら、以下のいずれかで画像を挿入しましょう。
- 「アップロード」をクリックして新しい画像をパソコンから選ぶ
- 「メディアライブラリ」からすでにアップロード済みの画像を選ぶ
画像は基本的に「フルサイズ」のままで問題ありませんが、必要に応じて幅や高さを調整してください。
OGP画像の推奨サイズと設定方法
OGP画像とは、SNSで記事やトップページがシェアされたときに表示される画像です。
OGP画像は、トップページをX（旧Twitter）やFacebookでシェアした時にも表示されます。
トップページをシェアするなら、OGP画像を設定しましょう。
— アッフィー|ドラム🥁が叩けるブロガー (@affi_weblog) June 13, 2025
トップページにはアイキャチ画像が設定できないからです。https://t.co/TusayUAI1H
OGP画像の推奨サイズ
SWELLにおけるOGP画像の推奨サイズは、1200 × 630pxです。
OGP画像は、アイキャッチ画像と同じサイズにするのがおすすめです。
アイキャッチ画像と同じサイズにしておくと、管理がしやすいからです。
SNSからの流入を少しでも大事にしたいなら、OGP画像は設定しておきましょう。
画像が未設定だったり、見切れていたりすると、クリックされにくくなりますよ。
OGP画像の設定方法
SWELLでOGP画像を設定する場合、SEOプラグイン「SEO SIMPLE PACK」を使うのが一般的です。
OGP画像の設定手順はこちらをクリック ⇨
手順は以下のとおりです。
まだ「SEO SIMPLE PACK」を導入していない場合は、まずはこのプラグインをインストールして有効化しましょう。
WordPressの管理画面から「プラグイン」⇒「プラグインを追加」をクリック。
「SEO SIMPLE PACK」を検索し、「今すぐインストール」をクリックしてください。
インストール出来たら「有効化」をクリックすれば導入完了です。
プラグインを有効化したら、WordPressの管理画面左メニューにある「SEO PACK」をクリックし、その中の「OGP設定」をクリックしてください。
「OGP設定」画面で、「画像を選択」をクリックし、用意しておいた1200 × 630pxのOGP画像をアップロードします。
「設定を保存する」をクリックすれば、OGP画像の設定は完了です。
メインビジュアルの推奨サイズと設定方法
メインビジュアルとは、ブログやWebサイトのトップページや各ページの最上部（ファーストビュー）に大きく表示される画像や動画のことです。
訪問者がページを開いた瞬間、最初に目にする「サイトの顔」ともいえる存在です
SWELLに適したメインビジュアルのサイズ
SWELLに最適なメインビジュアルの推奨サイズは、以下のとおりです。
パソコン表示では1600 × 900px（高さは500～900pxで調整）
スマホ表示では960 × 800px（高さは500～1200pxで調整）
SWELLのメインビジュアルは、PCとスマホで見え方が変わります。
PCではきれいに見えていても、スマホでは文字が切れたり、画像の中央だけが表示されたりすることがあります。
- PC用は1600×900px。
- スマホ用は960×800px。
このあたりを目安にすると、比較的きれいに表示されます。
メインビジュアルに文字を入れる場合は、端に寄せすぎないようにしましょう。
スマホ表示では、端の文字が切れることがあるので気をつけてくださいね。
メインビジュアルの設定方法
メインビジュアルは、WordPressの管理画面から簡単に設定できます。
メインビジュアル画像の設定手順はこちらをクリック ⇨
画像や動画の準備ができたら、以下の手順で設定を進めてみてくださいね。
まず、WordPressの管理画面メニューの「外観」⇒「カスタマイズ」をクリックします。
これで、サイトの見た目を変更できる「カスタマイザー」が開きます。
カスタマイザーが開いたら、左側のメニューの「トップページ」⇒「メインビジュアル」をクリックしてください。
「メインビジュアル」の設定画面で、「画像を選択」または「動画を選択」ボタンをクリックし、準備しておいた画像や動画をアップロードします。
これで、あなたのサイトのトップページにメインビジュアルが設定されます。
なお、メインビジュアルの詳しい説明と設定方法は以下の記事を参考にしてください。
ヘッダーロゴ画像の推奨サイズと設定方法
ヘッダーロゴとは、ブログやWebサイトの一番上（ヘッダー部分）に表示されるロゴ画像のことです。
SWELLに適したヘッダーロゴ画像サイズ
SWELLのヘッダーロゴ画像は、速度を重視するなら600 × 135pxがおすすめです。
ロゴ画像は、サイト全体の印象に大きく関わります。
大きすぎるとヘッダーが重く見えてしまいます。
小さすぎると、ぼやけて見えることがあります。
文字だけのロゴを作る場合は、余白を取りすぎないようにしましょう。
スマホでも読める大きさになっているか、必ず確認してくださいね。
背景を透過できるPNG形式で、通常色とホワイト色の2種類を用意しておくと便利ですよ。
ヘッダーロゴ画像の設定方法
ヘッダーロゴ画像は、WordPressのカスタマイザーから簡単に設定できます。
ヘッダーロゴ画像の設定手順はこちらをクリック ⇨
以下の手順であなたのサイトにロゴを配置しましょう。
まず、WordPressの管理画面にログインし、「外観」⇒「カスタマイズ」をクリックして、「カスタマイザー」を開きます。
カスタマイザーが開いたら、左側のメニューにある「ヘッダー」をクリックしてください。
「ヘッダー」の設定画面内にあるロゴ画像の設定項目で、「画像を選択」ボタンをクリックし、用意しておいたロゴ画像をアップロードします。
これで、あなたのサイトのヘッダーにロゴが表示されるようになります。
なお、ヘッダーロゴの詳しい設定方法についてはヘッダーロゴの設定を参考にしてください。
ファビコンの推奨サイズと設定方法
サイトアイコン、通称ファビコンは、ブラウザのタブやブックマークに表示される小さなアイコンです。
たとえば、たくさんのタブを開いたときに、それぞれのサイトの左側に小さな画像が表示されているのを見たことがあると思います。
その画像がファビコンです。
サイトアイコン（ファビコン）の推奨サイズ
サイトアイコン（ファビコン）の推奨サイズは、512 × 512pxの正方形で、PNG形式がおすすめです。
ファビコンは、ブラウザのタブやブックマークに表示される小さなアイコンです。
SWELLでは、512×512pxの正方形画像を用意すると設定しやすいです。
ファビコンは小さく表示されるので、細かい文字や複雑なデザインは向いていません。
シンプルな記号やロゴにしましょう。
PNG形式は、背景を透過できるのでおすすめです。
ファビコンの設定方法
ファビコンは、WordPressのカスタマイザーから簡単に設定できます。
ファビコンの設定手順はこちらをクリック ⇨
サイトアイコンの設定はとても簡単です。
以下のステップで、あなたのブログにオリジナルのアイコンを設定してみましょう。
まずはWordPressの管理画面にログインして、「外観」⇒「カスタマイズ」をクリックします。
カスタマイザーが開くので、左側のメニューから「WordPress設定」⇒「サイト基本情報」をクリックしてください。
「サイト基本情報」の画面に「サイトアイコン」の項目があるので、「画像を選択」ボタンをクリックして、用意しておいたアイコン画像をアップロードします。
これで、ブラウザのタブなどにあなたのサイトのアイコンが表示されるようになりますよ。
なお、サイトアイコン（ファビコン）については【SWELL】ファビコンを設定して差別化しよう！【Canvaで画像生成】で詳しく解説していますので参考にしてください。
その他の画像の推奨サイズと設定方法
その他の画像として、
- NO IMAGE画像
- プロフィール画像
- コンテンツヘッダー
についても参考のため推奨サイズと手順を解説します。
必要に応じて参考にしてみてください。
NO IMAGE画像の推奨サイズと設定方法
NO IMAGE画像は、記事にアイキャッチ画像が設定されていない場合に表示される、いわば「代役」のサムネイル画像です。
サムネイル画像とは「小さく縮小された見本画像」のことをいい、以下のケースで使用されます。
- 新着記事
- 人気記事
- 関連記事
- 記事スライダー
- ピックアップバナー
NO IMAGE画像の推奨サイズ
SWELLでのNO IMAGE画像の推奨サイズは、1200 × 630pxです。
これは、記事をSNSでシェアする際に使われるOGP画像と同じサイズであり、OGP画像と同じものを使うのが効率的でおすすめです。
SWELLでは横幅1600px以上も推奨されていますが、サムネイルとして使われることが多いため、表示速度を考えると1200 × 630pxで十分です。
NO IMAGE画像の設定方法
NO IMAGE画像は、カスタマイザーから簡単に設定できます。
NO IMAGE画像の設定手順はこちらをクリックして確認 ⇨
以下のステップで、NO IMAGE画像を設定しましょう。
WordPressの管理画面から「外観」⇒「カスタマイズ」をクリックしてカスタマイザーを開きます。
カスタマイザーが開いたら、左側のメニューから「サイト全体設定」⇒「NO IMAGE画像」をクリックしましょう。
「NO IMAGE画像」の設定画面で、「画像を選択」ボタンをクリックし、用意しておいた1200 × 630pxの画像をアップロードします。
これで、アイキャッチがない記事にも、設定したNO IMAGE画像が表示されるようになります。
プロフィール画像の推奨サイズと設定方法
プロフィール画像は、あなたのブログ記事の著者情報やコメント欄などに表示されるアイコンです。
プロフィール画像の推奨サイズ
SWELLのプロフィール画像の推奨サイズは、160 × 160px程度です。
サイトアイコン（ファビコン）とは異なり、プロフィール画像は自動でリサイズ（大きさの調整）されないことがあります。
そのため、あまりにも大きな画像をアップロードすると、サイトの表示速度に悪影響を与える可能性があるので注意しましょう。
プロフィール画像の設定方法
プロフィール画像は、WordPressのユーザー設定から簡単に設定できます。
プロフィール画像の設定手順はこちらをクリックして確認しよう ⇨
手順は以下のとおりです。
WordPressの管理画面にログインしたら、左側のメニューの「ユーザー」⇒「プロフィール」をクリックしてください。
プロフィール設定画面を下にスクロールしていくと、「SWELL追加データ」という項目の中に「カスタムアバター」という設定があります。
「カスタムアバター」の項目で、「画像を選択」ボタンをクリックし、プロフィール画像をアップロードしてください。
これで、あなたのブログのプロフィール欄などに画像が表示されるようになります。
コンテンツヘッダー画像の推奨サイズと設定方法
コンテンツヘッダーは、ブログ記事や固定ページのタイトル部分（記事本文の上部）に表示される背景画像のことです。
記事タイトルのすぐ後ろや上に大きく表示されるため、読者が記事を開いたときに最初に目にする「記事ごとの顔」となる画像です。
SWELLに適したコンテンツヘッダー画像サイズ
SWELLのコンテンツヘッダー画像には、横幅1600pxの画像がおすすめです。
サイトの表示速度を意識するなら、横幅1280pxを目安にしても良いでしょう。
横幅1600pxはSWELL公式サイトでも使われているサイズです。
画像がない場合でも、単色で設定できるので安心してくださいね。
コンテンツヘッダー画像の設定方法
コンテンツヘッダー画像の設定手順はこちらをクリック ⇨
コンテンツヘッダーの設定は、以下のステップで進めていきましょう。
コンテンツヘッダーはデフォルトで「適用しない」になっているので、「適用」に変更する必要があります。
まずはカスタマイザーを開きます
続いて、「投稿・固定ページ」⇒「タイトル」をクリックします。
タイトルの表示位置を「コンテンツ上」に変更してください。
これでコンテンツヘッドが利用できるようになります。
変更したら上部にある「公開」をクリックして変更を保存しておきましょう。
カスタマイザーに戻り、左側メニューから「サイト全体設定」⇒「コンテンツヘッダー」をクリックします。
「コンテンツヘッダー」の設定画面で、「画像を選択」ボタンから画像を選んでアップロードしてください。
また、好きな色を設定してオーバーレイカラーの不透明度を「1」にすることで、画像なしでもコンテンツヘッダーを利用することができますよ。
SWELLの表示速度を改善する画像圧縮・高速化
画像サイズを整えたら、アップロード前に圧縮しておきましょう。
画像が重いと、ページの表示速度が遅くなります。
表示が遅い記事は、読者が離脱しやすくなります。
ブログでは、きれいな画像を使うことも大事です。
でも、重すぎる画像は読者にとって負担になります。
美しいデザインと表示速度を両立させるには、アップロードする前に画像の容量を軽くする工夫が欠かせません。
ここからは、具体的な軽量化の手順を説明します。
画像圧縮とWebP変換プラグインの活用
画像をWordPressにアップロードする前に圧縮し、さらにWebP（ウェッピー）形式に変換しましょう。
画像1枚の容量を100KB以下（大きくても200KB以下）に抑えることで、ページ表示速度の大幅な向上が見込めるからです。
Googleが開発した次世代の画像フォーマットです。JPEGやPNGよりも高い圧縮率を誇り、高画質のままファイルサイズを約25〜34%削減（軽量化）できます。
画像の圧縮は外部ツール「TinyPNG」や「Squoosh」が、会員登録の必要がなくドラッグ＆ドロップで画像を手軽に圧縮できるのでおすすめです。
特に「Squoosh」はドラッグ＆ドロップで画像を簡単に軽量なWebP形式に変換してくれのでおすすめですよ。
読者の記事からの離脱を防ぐためには、画像容量の最適化は必須の作業です。
SWELL標準の高速化設定（LazyLoad）
SWELLに標準搭載されている「遅延読み込み（LazyLoad）」の機能を必ずオンにしておきましょう。
読者が画面をスクロールして画像が近づいたタイミングで読み込むため、最初のページ表示が格段に速くなるからです。
設定手順は以下の通りです。
WordPressの管理画面から、「SWELL設定」 ＞ 「高速化」タブをクリックします。
「遅延読み込み機能」という項目の「画像等のLazyLoad」設定を探します。
「スクリプト（lazysizes.js）を使って遅延読み込みさせる」にチェックを入れます。
一番下の「変更を保存」ボタンをクリックして完了です！
コア機能のみで十分な高速化ができるため、他の無駄なプラグインを入れる必要はありません。
SWELLの基本設定を活用するだけで、誰でも手軽にサイトの表示速度を改善できます。
まとめ：まずはアイキャッチと記事ない画像から整えよう
この記事では、SWELLに最適な画像サイズと設定方法を種類別にご紹介しました。
最後にSWELLで使う画像サイズの早見表を再掲します。
| 画像の種類 | 推奨サイズ（横 × 縦） | 推奨の根拠 |
|---|---|---|
| アイキャッチ画像 | 1200 × 630px | OGP（SNS推奨）と同じ |
| 記事内画像 | 1200 × 630px [横幅 900px] | OGP（SNS推奨）と同じ [サイト表示速度優先] |
| OGP画像 | 1200 × 630px | SWELL推奨＆SNS推奨 |
| メインビジュアル（PC） | 1600 × 900px （高さは500～900pxで調整） | SWELL公式サイトの使用サイズ |
| メインビジュアル（スマホ） | 960 × 800px （高さは500～1200pxで調整） | サイト表示速度優先 |
| ヘッダーロゴ画像 | 600 × 135px（png推奨） | サイト表示速度優先 |
| ファビコン | 512 × 512px（png推奨） | WordPress推奨 |
SWELLの画像サイズで迷ったら、まずは以下を押さえてください。
- アイキャッチ画像は1200×630pxです。
- OGP画像も1200×630pxです。
- 記事内画像は横幅900〜1200pxです。
- メインビジュアルはPC用とスマホ用を分けると崩れにくいです。
- ファビコンは512×512pxの正方形で作りましょう。
全部を一度に直そうとしなくて大丈夫です。
まずは、よく使うアイキャッチ画像と記事内画像から整えましょう。
そこが整うだけでも、ブログ全体の見やすさはかなり変わります。
SWELLの画像サイズを整えたら、次は記事全体の読みやすさも見直してみましょう。
画像、見出し、ボタン、内部リンクなどを整えると、読者が迷わず記事を読み進めやすくなります。
ブログ改善用のチェックリストも用意しているので、必要な方はあわせて使ってみてください。
まだ、SWELLを購入していない方は以下の記事を参考に、購入しておいてください。
購入したら、初期設定も忘れずに！
