「SWELLのアイキャッチって何pxで作ればいい？」「サイトアイコンやロゴ、メインビジュアルのサイズが分からない」。SWELLでブログを作り始めると、画像サイズで手が止まる人は多いと思います。
私はWordPressを8年使っていて、このブログ「仕事以外。」もSWELLで運営しています。この記事では、SWELLで使う画像をアイキャッチ・アイコン・ロゴ・メインビジュアル・バナーなどの種類ごとに、目安のサイズを一覧にまとめました。
- SWELLで使う画像サイズの一覧（アイキャッチ・アイコン・ロゴなど）
- アイキャッチを「切れない」ように作るコツ
- メインビジュアルをPC・スマホで出し分けるときのサイズ
- 画像を軽くして表示速度を落とさない方法
SWELL公式サイトでは、すべての画像について「このサイズで作ってください」という推奨値は明記されていません（2026年9月時点で確認）。この記事のサイズは、SWELLの表示比率の設定や、WordPress・SNSの一般的な仕様から逆算した目安です。
アイキャッチを作ったのに、記事一覧だと端が切れちゃうんだよね…
SWELLは、記事一覧の画像を設定した比率に合わせて切り抜いて表示します。サイズより先に「比率」をそろえると解決しやすいですよ。
結論｜SWELLの画像サイズ早見表
先に一覧です。迷ったら、この表のサイズで作れば大きく困ることはありません。
| 画像の種類 | 目安のサイズ | 比率 | ポイント |
|---|---|---|---|
| アイキャッチ（OGP兼用） | 1200×630px | 約1.91：1 | SNSでシェアされたときの表示に合わせやすい |
| アイキャッチ（一覧の見た目重視） | 1200×675px | 16：9 | 記事一覧の比率を16：9にしている場合 |
| サイトアイコン（ファビコン） | 512×512px | 1：1 | WordPressの案内どおり512px以上の正方形 |
| ヘッダーロゴ | 表示したい高さの2倍程度の横長画像 | 横長 | 背景を透過したPNGかSVGが使いやすい |
| メインビジュアル（PC） | 1600×900px程度 | 16：9 | 横幅いっぱいに表示される |
| メインビジュアル（スマホ） | 960×800px程度 | 約6：5（PCより縦に長め） | スマホ用の画像を別に設定できる |
| 吹き出しのアイコン | 400×400px程度 | 1：1 | 丸く切り抜かれる前提で、顔を中央に |
| 記事中の画像 | 横1200px程度 | 自由（16：9が扱いやすい） | 大きすぎる画像は縮小してから使う |
ポイントは、「サイズ」よりも「比率」と「大事な要素を中央に置くこと」です。SWELLは、設定した比率に合わせて画像を切り抜いて表示する場面が多いからです。
このブログでは、記事中の画像を1200×675px（16：9）でそろえています。サイズを1つに決めておくと、画像を作るたびに迷わずに済みます。
アイキャッチ画像のサイズと作り方
アイキャッチは、記事一覧・記事の冒頭・SNSでのシェア・関連記事など、いろいろな場所で使われます。いちばん迷う画像なので、詳しく見ていきます。
1200×630pxか、16：9か
よく使われるのは次の2つです。
- 1200×630px：SNSでシェアされたときの画像（OGP画像）の一般的な比率（約1.91：1）に合わせたサイズ。アイキャッチがそのままシェア画像にも使われるので、SNSでの見え方を優先するならこちら
- 1200×675px（16：9）：記事一覧の比率を16：9にしている場合に、切り抜きが少なくなるサイズ
どちらを選んでも、比率の差は小さいです。上下の端が少し切れても困らないデザインにしておけば、どちらの場面でもきれいに見えます。
SWELLの記事一覧は「比率」を設定できる
SWELLでは、カスタマイザーの「記事一覧リスト」で、サムネイル画像の比率を選べます。公式マニュアルでは、次の7種類が紹介されています。
| 比率の選択肢 | 形のイメージ |
|---|---|
| 白銀比（1：1.414） | やや横長 |
| 黄金比（1：1.618） | 横長 |
| 3：2 | 写真に多い横長 |
| 16：9 | 動画と同じワイド |
| 2：1 | かなり横長 |
| 5：2 | 細長い横長 |
| 1：1 | 正方形 |
設定した比率と画像の比率が違うと、はみ出した部分が切り抜かれます。アイキャッチの比率と、記事一覧の比率をそろえるのが、端が切れない一番の近道です。
文字を入れるなら「中央に寄せる」
アイキャッチにタイトルなどの文字を入れる場合は、画像の中央に寄せ、上下左右に余白を取ります。どの比率で切り抜かれても、文字が欠けにくくなります。
このブログでは、記事の中の画像をChatGPTで作り、1200×675px（16：9）にそろえています。サイズを決めておくと、画像を作るたびに「何pxだっけ？」と調べる手間がなくなります。画像を作る前にサイズを決めておくのが、いちばんの時短です。
文字入りのアイキャッチ、スマホだと小さくて読めないことがあるんだけど…
スマホの記事一覧では、アイキャッチがかなり小さく表示されます。文字は少なく、大きくが基本です。タイトルを全部入れるより、キーワードを1〜2語だけ入れるほうが読みやすいです。
サイトアイコン（ファビコン）とロゴのサイズ
サイトアイコン：512×512pxの正方形
サイトアイコンは、ブラウザのタブや、スマホのホーム画面、検索結果などに表示される小さな画像です。WordPressの「サイトアイコン」設定では、512×512px以上の正方形の画像を使うよう案内されています。
小さく表示されるので、細かい文字や複雑な絵は潰れます。1文字のロゴや、シンプルなマークがおすすめです。
ヘッダーロゴ：横長で、高さは表示サイズの2倍程度
SWELLでは、カスタマイザーの「ヘッダー」でロゴ画像の表示サイズ（高さ）をpxで調整できます。画像そのものは、表示したい高さの2倍程度の高さで作っておくと、高解像度のスマホ画面でもぼやけにくくなります。
- 背景を透過したPNG、またはSVGで作る
- 左右に余計な余白を入れない（余白があると小さく見える）
- PCとスマホで表示サイズが変わるので、両方で確認する
メインビジュアルのサイズ｜PCとスマホで出し分ける
メインビジュアルは、トップページの一番上に大きく表示される画像です。SWELLでは、PC用とスマホ用で別の画像を設定できます。
| 表示 | 目安のサイズ | 考え方 |
|---|---|---|
| PC | 1600×900px程度（16：9） | 画面の横幅いっぱいに表示される前提で、横長に |
| スマホ | 960×800px程度 | 縦に長い画面なので、PCより縦方向の比率を上げる |
SWELLの公式マニュアルでは、メインビジュアルの高さを「画像・動画サイズのまま」「数値で指定」「ウィンドウサイズにフィットさせる」から選べると説明されています。数値で指定する場合は、PC（960px以上）とスマホ（960px未満）で別の値を設定できます。高さを固定すると、画像の上下や左右が切り抜かれることがあるので、大事な要素は中央に置いておきます。
メインビジュアルの画像に文字を直接入れると、スマホで小さくなったり切れたりしやすくなります。SWELLのメインビジュアルには、テキストを重ねて表示する設定があるので、文字は画像に入れず、SWELLの設定で重ねるほうが崩れにくいです。
そのほかの画像サイズ｜吹き出し・バナー・記事中の画像
吹き出しのアイコン：正方形で400×400px程度
SWELLの吹き出しでは、アイコンが丸く切り抜かれて表示されます。正方形で作り、顔を中央に大きく配置します。表示は小さいので、400×400px程度あれば十分です。
ピックアップバナー・記事スライダー：アイキャッチがそのまま使われる
SWELLのピックアップバナーは、投稿や固定ページへのリンクなら、基本的にそのページのアイキャッチ画像が表示されます。記事スライダーもアイキャッチを使います。つまり、アイキャッチの比率をそろえておけば、これらの見た目も自然とそろうということです。
ピックアップバナーに専用の画像を使いたい場合は、メニュー項目の「説明」欄に画像のURLを入れる方法が公式マニュアルで紹介されています。
サイドバーのバナー：広告と同じ規格が使いやすい
サイドバーに自作のバナーを置くなら、広告でよく使われる300×250pxなどの規格に合わせると、ほかの広告と並べても違和感が出にくくなります。
記事中の画像：横1200px程度
記事の本文に入れる画像は、横1200px程度あれば、PCでもスマホでもきれいに表示されます。スマホで撮った写真は4000pxを超えることもあるので、そのままアップロードせず、縮小してから使いましょう。
スマホで撮った写真、そのままアップしてた…。
最初はみんなやりがちです。大きい画像はページの表示を重くするので、縮小と圧縮だけは習慣にしておくと安心です。
画像を軽くして表示速度を落とさないコツ
画像サイズ（縦横のpx）をそろえたら、ファイルの重さも意識しておきたいところです。
- アップロード前にリサイズする使う大きさ（アイキャッチなら1200px程度）まで縮小します。
- 圧縮する画像圧縮ツールやプラグインで、見た目を大きく変えずにファイルサイズを小さくします。
- WebPなどの軽い形式を検討するWordPressはWebP画像のアップロードに対応しています。プラグインで自動変換する方法もあります。
- ファイル名を分かりやすくする「IMG_1234.jpg」ではなく、内容が分かる英数字の名前にしておくと管理しやすくなります。
SWELLの画像サイズに関するよくある質問
SWELLのアイキャッチは何pxがいいですか？
SNSでのシェアも考えるなら1200×630px、記事一覧の比率を16：9にしているなら1200×675pxが目安です。どちらの場合も、文字や大事な要素を中央に置くと切れにくくなります。
SWELL公式の推奨サイズはありますか？
2026年9月時点で、公式サイトにすべての画像の推奨サイズをまとめたページは確認できませんでした。記事一覧の比率やメインビジュアルの高さなど、表示の設定方法は公式マニュアルで確認できます。
アイキャッチの端が切れるのはなぜですか？
記事一覧のサムネイル比率と、アイキャッチ画像の比率が違うためです。カスタマイザーの「記事一覧リスト」で比率を確認し、画像の比率をそろえるか、大事な要素を中央に寄せて作ります。
サイトアイコンとロゴは同じ画像でいいですか？
別に作るのがおすすめです。サイトアイコンは正方形で小さく表示され、ロゴは横長でヘッダーに表示されます。同じ画像を使うと、どちらかが見にくくなりがちです。
画像はPNGとJPGどちらがいいですか？
写真はJPG、ロゴや図解など色数が少なく透過が必要なものはPNGが一般的です。表示速度を重視するならWebPも検討しましょう。
ブログ運営や副業については、こちらの記事も参考にしてください。
まとめ｜SWELLの画像は「比率をそろえる」がいちばん大事
- アイキャッチは1200×630px（OGP兼用）か1200×675px（16：9）が目安
- 記事一覧のサムネイル比率とアイキャッチの比率をそろえると切れにくい
- サイトアイコンは512×512pxの正方形、ロゴは表示の高さの2倍程度の横長
- メインビジュアルはPC 1600×900px程度、スマホは960×800px程度を目安に出し分け
- 文字や大事な要素は中央に置き、画像はリサイズ・圧縮してから使う
サイズを一度決めてしまえば、あとは迷わず画像を作れます。まずはアイキャッチの比率から決めてみてください。
参考：SWELL公式 記事一覧リストの設定／SWELL公式 メインビジュアルの設定方法／SWELL公式 ピックアップバナー機能の使い方
