SWELLのアイキャッチサイズは1200×630pxでOK?失敗しない7つの設定ステップ

「SWELLのアイキャッチサイズ、結局いくつにすればいいの？」と悩んでいませんか？

先に結論だけ言うと、SWELLのアイキャッチサイズは「横1200px × 縦630px（比率1.91：1）」を基準にしておけば、ほとんどの場面で困りません。

ここからは、私が実際に試して落ち着いた設定や、つまずきやすいポイントを、できるだけ分かりやすくお話ししていきます。

SWELLのアイキャッチ画像サイズの結論

迷ったら「1200×630px」のアイキャッチサイズでOK

SWELLでブログを運営するなら、アイキャッチ画像は「横1200px × 縦630px」に揃えるのがおすすめです。

このサイズは、

• SWELLと相性が良い横長の比率（1.91：1）
• FacebookやXなど、主要なSNSの推奨OGP比率と同じ
• Googleが推奨している「横1200px以上の大きめ画像」にも対応しやすい

といった理由があり、WordPress全体でも「万能サイズ」としてよく使われています。

イメージしやすいように、用途ごとのおすすめサイズを整理すると、こんな感じです。

用途	おすすめサイズ	ポイント
アイキャッチ画像	1200 × 630px	SWELLでもSNSでも使いやすい定番サイズ
OGP画像	1200 × 630px	アイキャッチと共通にすると作業が楽
NO IMAGE画像	1200 × 630px	未設定記事の代替として違和感なく使える
メインビジュアル（PC）	1600 × 900px前後	ヘッダーで大きく見せたいとき用
サイトアイコン	512 × 512px	ブラウザのタブやスマホのホーム用

アイキャッチ・OGP・NO IMAGEを同じ1200×630pxで作っておけば、画像の作り分けが少なくて済みます。私も最初はいろいろサイズを変えていたのですが、あとから統一するのが本当に大変だったので、今は最初からこのサイズに固定しています。

SWELL公式の「横幅1600px以上」はどう考えればいい？

SWELLの説明文やカスタマイザーを見ると、「NO IMAGE画像の推奨サイズ：横幅1600px以上」といった表記が出てきます。

ここで混乱しがちですが、これは「大きめの画面や高解像度ディスプレイでも荒く見えにくいサイズ」という目安です。

実際に運用するうえでは、次のように考えると分かりやすいです。

私も「1600px以上が推奨なら、それに合わせるべきか…」と悩みましたが、表示を見比べた結果、アイキャッチに関しては1200×630pxでまったく問題ないと感じました。

比率1.91：1と16：9の違いをざっくり理解しておこう

アイキャッチサイズを考えるときに、縦横比も押さえておきましょう。よく出てくるのが「1.91：1」と「16：9」です。

• 1.91：1 ＝ 1200×630pxなど（OGPでよく使われる比率）
• 16：9 ＝ 1200×675pxなど（動画サムネなどでおなじみの比率）

ざっくりイメージすると、どちらも「やや横長の画像」ですが、微妙に縦幅が違います。

• SNSでのシェア時の見え方を重視 → 1.91：1（1200×630px）
• ブログ一覧の横長サムネを少しだけ縦に広く見せたい → 16：9（1200×675pxなど）

この記事では、OGPとの相性が良く、情報も多い1.91：1（1200×630px）をベースに話を進めていきます。

そもそもアイキャッチとは？SWELLでどこに表示される？

アイキャッチの役割とクリック率の関係

アイキャッチ画像は、簡単に言うと「記事の表紙」です。読者が記事一覧を見たとき、タイトルと同じくらい目に入るのがアイキャッチです。

特にSWELLはデザインがきれいなので、

など、ブログのあちこちでアイキャッチが使われます。

ここがバラバラのサイズやテイストだと、一気に「作りかけのブログ」感が出てしまいます。逆に、アイキャッチサイズとデザインを揃えるだけで、「ちゃんと作り込まれたブログ」に見せることができるので、クリック率や信頼感にも地味に効いてきます。

SWELLでアイキャッチが表示される主な場所

SWELLでアイキャッチ（またはその代わりの画像）が表示される主な場所をまとめておきます。

表示場所	使われる画像	説明
記事ページの冒頭	アイキャッチ画像	記事のトップに表示されるメインビジュアル
トップページの記事一覧	アイキャッチ画像	カード型やブログ型レイアウトのサムネイル
カテゴリー・タグ一覧	アイキャッチ画像	カテゴリーページのリストに表示
関連・新着記事のウィジェット	アイキャッチ画像	サイドバーや記事下の小さいサムネイル
NO IMAGE設定	NO IMAGE画像	アイキャッチ未設定記事の代替画像
OGP画像	OGP専用画像またはアイキャッチ	SNSシェア時に表示されるサムネイル

このあたりを意識しながらサイズを揃えておくと、サイト全体の印象が一段すっきりします。

アイキャッチがないときに出てくるNO IMAGEの扱い

SWELLでは、アイキャッチが設定されていない記事に対して、NO IMAGE画像を表示できます。

このNO IMAGEを適当に用意してしまうと、「一部だけ違う比率の画像」が混ざってしまい、一覧がガタついて見えます。

おすすめは、

• NO IMAGEもアイキャッチと同じく1200×630pxで作る
• ブログ全体のテーマカラーに合わせたシンプルなデザインにする
• 文字を入れるなら、中央付近の安全な範囲に収める

このあたりを押さえておくことです。私もあとからNO IMAGEを作り直したのですが、それだけで一覧ページがかなり整って見えるようになりました。

SWELLでアイキャッチサイズを正しく設定する手順

投稿画面でアイキャッチを設定する基本ステップ

まずは、WordPressの投稿編集画面でアイキャッチを設定する流れを確認しておきましょう。ブロックエディター（Gutenberg）を使っている場合の例です。

手順	操作内容
1	投稿を新規作成、または編集画面を開く
2	画面右側の「投稿」タブを開く
3	「アイキャッチ画像」パネルをクリックする
4	「アイキャッチ画像を設定」から画像を選ぶ
5	1200×630pxで作った画像をアップロードする
6	代替テキスト（altテキスト）を簡潔に入力する

なんとなく手元にある画像を選ぶのではなく、「アイキャッチ用に用意した1200×630pxの画像を入れる」と決めておくと、運用がとても楽になります。

カスタマイザーでサムネイル比率を揃える

次に、SWELLのカスタマイザー側で、サムネイル比率を揃えておきましょう。

大まかな流れは次のようになります。

• 「外観」 → 「カスタマイズ」を開く
• 「ブログ」や「記事一覧リスト」などの設定を開く
• リストレイアウト（カード型・ブログ型など）を選ぶ
• 「サムネイル比率」などの項目で、OGPや16：9などを選択する

ここで決めたサムネイル比率と、実際に作るアイキャッチ画像の比率をそろえておくことで、「左右が切れる」「上下に余白ができる」といった崩れを減らせます。

レイアウト別のおすすめ設定パターン

SWELLはレイアウトの種類が多いので、初めて触ると「どれを選べばいいの？」となりがちです。よく使われるパターンを、ざっくり整理しておきます。

レイアウトタイプ	サムネイル比率の例	おすすめのアイキャッチサイズ	向いているブログのイメージ
カード型（グリッド）	OGP（1.91：1）	1200 × 630px	雑記ブログ・トレンド系
ブログ型（横長）	16：9	1200 × 675px または 1200 × 630px	解説系・レビュー系
タイル型（正方形寄り）	1：1	800 × 800px前後	ポートフォリオ・ギャラリー系

よくあるブログ運営なら、「カード型 × 1200×630px」にしておけば、大きな失敗はありません。ブログの方向性がはっきりしてきたら、少しずつレイアウトや比率を調整してみると良いと思います。

SWELLのアイキャッチサイズと表示崩れの関係

画像が切れる・はみ出すときの主な原因

サムネイルで画像の一部が切れたり、端が中途半端に見切れたりする原因は、大きく分けて次のようなものがあります。

• アイキャッチの比率と、サムネイルの比率が合っていない
• 画像の端ぎりぎりまで文字や被写体を置いている
• 縦長の画像を、横長の枠に無理やり押し込んでいる

例えば、1200×630px（1.91：1）の画像を、16：9のサムネイル枠で表示すると、左右が少しカットされます。その際に文字や人物を端に置いていると、簡単に切れてしまいます。

私が意識しているのは、次の2つです。

• タイトル文字やメインのモチーフは、画像の中央寄りに配置する
• 上下左右の端には、多少切れても問題ない余白を作る

Canvaなどのデザインツールで「ここから先は切れてもOK」というガイドラインを作っておくと、毎回同じ位置に配置できて、とても便利です。

ぼやける・荒れるときにチェックしたいポイント

アイキャッチがぼやけて見えるときは、次のようなことが原因になっていることが多いです。

• 元画像のサイズが小さく、引き伸ばされて表示されている
• 圧縮をかけすぎて、画質が大きく劣化している
• そもそも書き出し時の解像度が低い

チェックするときは、まずメディアライブラリで画像の「幅」と「高さ」を確認してみてください。アイキャッチとして1200×630pxで使うなら、元画像も最低でも横1200px以上は欲しいところです。

私も一時期、「とにかく軽くしたい」と思って画像圧縮をかけすぎてしまい、アイキャッチだけ妙に汚くなったことがありました。そのときは、元データから適切なサイズで書き出し直し、圧縮も少しゆるめることでかなり改善しました。

テーマ変更やサイズ変更後にやるべきこと

別テーマからSWELLに乗り換えた場合や、途中でアイキャッチサイズの方針を変えた場合、古い画像との相性が悪くなることがあります。

• 以前のテーマ用に生成されたサムネイルのままになっている
• 小さいサイズで作った画像を、そのまま大きく表示している

こうした場合は、

• サムネイル再生成プラグインを使って、SWELLに合わせて作り直す
• 特に目立つ記事だけでも、アイキャッチを新しい基準サイズで作り直す

といった対応をしておくと安心です。すべての記事を一気に直すのは現実的ではないので、アクセスの多い記事やトップページに出る記事から優先して対応するのが良いと思います。

アイキャッチ以外の画像サイズもまとめて把握しよう

SWELLでよく使う画像サイズ一覧

SWELLでよく使う画像と、そのサイズの目安をまとめると、次のようになります。

画像の種類	おすすめサイズ（目安）	備考
アイキャッチ画像	1200 × 630px	OGPと共通で使える定番比率
OGP画像	1200 × 630px	SNSシェア時のサムネイル。アイキャッチと同じでOK
NO IMAGE画像	1200 × 630px	未設定記事のサムネイル。色味はサイトに合わせる
メインビジュアル（PC）	1600 × 900px前後	ヘッダーの大きな画像。高さは好みで調整
メインビジュアル（スマホ）	横幅600〜960px、高さ400〜800px	テーマの表示に合わせて微調整
ヘッダーロゴ画像	1024 × 230px前後	横長ロゴ。実際はもう少し小さく使うことが多い
プロフィール画像	512 × 512px	円形表示されることが多いので正方形推奨
サイトアイコン	512 × 512px	ブラウザのタブやスマホホーム画面用

「このサイズ以外はダメ」というわけではありませんが、あらかじめ自分なりの基準を決めておくと、画像を用意するときに迷わなくて済みます。

PC・スマホ別で意識したい横幅

画像サイズを決めるときは、比率だけでなく「横幅」も意識しておくと失敗が減ります。

• PC表示：横幅1200〜1600pxくらいが扱いやすい
• スマホ表示：横幅750〜960pxくらいが多くのテーマでちょうど良い

アイキャッチを1200×630pxにしておけば、PCでもスマホでも大きな問題は起こりません。一方で、3000pxを超えるような巨大な画像をそのまま使うと、無駄に容量が増えてしまいます。

SWELLは表示速度にも気を配っているテーマなので、必要以上に大きな画像を使わないことも大切です。

私が実際に使っているサイズパターン

参考までに、私がSWELLでブログを作るときのマイルールを紹介します。

• アイキャッチ・OGP・NO IMAGE：1200×630px
• メインビジュアル（PC）：1600×900px
• メインビジュアル（スマホ）：960×540px前後
• 記事内で横幅いっぱいに見せたい画像：横幅960px前後

すべてを大きく作ればきれいに見えるわけではなく、「どこまで大きくすれば十分か」を決めておくことが大事です。このくらいにしておくと、見た目と表示速度のバランスが取りやすいと感じています。

表示速度とSEOを意識した画像サイズ・容量の決め方

ファイル形式（JPG・PNG・WebP）はどう選ぶ？

画像のファイル形式は、ざっくりと次のように使い分けると分かりやすいです。

• 写真メイン → JPG（JPEG）
• ロゴやイラスト、透過が必要な画像 → PNG
• 最終的な配信形式 → WebP（プラグインで自動変換するケースが多い）

アイキャッチに関しては、

• 写真ベースのサムネイル → JPGで書き出す
• 図解やイラスト中心のサムネイル → PNGで書き出す

という感じにしておき、必要に応じてWebPに変換するのが扱いやすいと思います。

どのくらいの容量を目安にすべき？

画像の容量は、サイトのジャンルやデザインによっても変わりますが、目安としては次のくらいを意識しています。

• アイキャッチ1枚あたり：100〜300KB程度
• 記事内の小さめの画像：50〜150KB程度

もちろん、あまりに画質が悪くなってしまっては意味がありません。私がよくやっているのは、

• まず高画質寄りで書き出す（1200×630px）
• オンライン圧縮ツール（TinyPNGなど）で容量を落としてみる
• 実際のページで見たときに、ざらついていないかチェックする

という流れです。数枚試して「このくらいなら許容できる」というラインを見つけておくと、その後の作業が一気に楽になります。

既存アイキャッチをまとめて軽くする簡単な流れ

すでに記事数が多い場合、「全部作り直すなんてムリ…」と思うかもしれません。そんなときに私がよくやるのが、次のようなシンプルな手順です。

すべての記事を一度にやらなくても大丈夫です。トップページに表示される記事や、アクセスの多い記事だけでも対応しておくと、体感の表示速度が少し軽くなってくるはずです。

よくある質問（FAQ）

Q1. SWELLの説明では1600px以上推奨と書いてあるのに、1200×630pxでも本当に大丈夫？

A. SWELL側の「横幅1600px以上」という記載は、高解像度ディスプレイやタイトル背景画像として使うことまで含めた目安になっています。アイキャッチ画像に限って言えば、1200×630pxで運用しているユーザーは多く、実際に表示を見ても問題ないケースがほとんどです。

表示速度とのバランスを考えると、まずは1200×630pxを基準にしておき、どうしても気になる場合だけ、重要な記事だけを大きめサイズで作ってみる、という使い分けがおすすめです。

Q2. アイキャッチとOGP画像は別々のサイズで作ったほうがいい？

A. 基本的には、アイキャッチとOGP画像は同じ1200×630pxで作ってしまって問題ありません。SWELLではOGP専用の画像を設定することもできますが、最初からすべてを作り分けるとかなり大変です。

まずは「アイキャッチ＝OGP」という運用にしておき、どうしてもSNS専用のデザインを作りたい記事だけ、あとからOGP画像を別に用意するくらいのスタンスで十分です。

Q3. 過去記事のアイキャッチサイズがバラバラですが、全部作り直したほうがいいですか？

A. 理想を言えば揃えたいですが、いきなり全記事を作り直す必要はありません。SWELLでアイキャッチサイズを整えるときは、次のような順番がおすすめです。

• これから書く新しい記事は、すべて1200×630pxで統一する
• トップページに表示される記事から優先してアイキャッチを揃える
• 検索流入の多い記事を分析し、重要な記事だけ順番に作り直す

このくらいでも、ブログ全体の印象はかなり整ってきます。少しずつ整えていくイメージでOKです。

Q4. スマホユーザーがほとんどなら、もっと小さいサイズでも問題ない？

A. スマホだけを考えると、小さい画像でも表示はできますが、

• SNSシェア時の見え方
• PCから見たときの解像度
• 今後レイアウトを変更したくなったときの自由度

などを考えると、最初から小さくしすぎてしまうのはあまりおすすめできません。SWELLのアイキャッチサイズは、1200×630pxあたりを基準にしておいたほうが、あとから困りにくいです。

まとめ：今日からできるSWELLのアイキャッチサイズの整え方

この記事の内容を簡単にまとめます。

今日からできる最初の一歩は、「自分のブログの基準サイズを1200×630pxに決めること」です。

Canvaなどのデザインツールで、このサイズのテンプレートを1つ作り、「新しい記事のアイキャッチは必ずこのテンプレートから作る」と決めてしまいましょう。それだけでも、記事が増えてきたときに、「なんか自分のブログ、前よりずっと整ってきたな」と感じられるはずです。