SWELLのアイキャッチ画像の推奨サイズ｜作り方も解説

2026年10月26日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

SWELLでアイキャッチ画像を作るとき、どのサイズで作ればいいのか迷っていませんか。私は記事ごとにバラバラのサイズで画像を作っていたため、記事一覧のカードの高さがそろわず、ちぐはぐな見た目になってしまった経験があります。

この記事では、SWELLのアイキャッチ画像の推奨サイズと作り方を、使うツールや設定画面の名前まで具体的に解説します。実際の失敗談も交えるので、読みながら進めれば、どこに表示してもきれいに見えるアイキャッチを作れます。

※まだエックスサーバーを契約していない方へ：今月は最大30%OFFの限定キャンペーンが開催されています。この記事の手順を見ながら進めれば、初心者でも最短10分で国内シェアNo.1の高速ブログを開設できますよ。

➡️【公式】エックスサーバーの限定特設ページはこちら

早めに申し込むほど、キャンペーンの割引をしっかり活かせます。

ニャフィ

アイキャッチって、何pxで作ればいいのかにゃ？

たいがブログ

サイズがそろっていないと、一覧が見にくくなりますよね。

ニャフィ

画像が重くなって、表示が遅くならないかも心配だにゃ…

たいがブログ

軽くきれいに作る手順を、5つのステップで解説しますね。

▼あわせて読みたい：画像の多いブログでもサクサク表示できるサーバー選びについては、こちらの記事で詳しく紹介しています。

SWELLのアイキャッチ画像の推奨サイズ

アイキャッチ画像は、記事一覧やSNSでシェアされたときに表示される、記事の顔となる画像です。迷ったら横1200×縦630pxで作っておけば、ほとんどの場面できれいに表示されます。

筆者は以前、一部の記事だけ正方形に近い比率の画像を使っていました。すると、ほかの記事に貼った内部リンクのカードの大きさまでばらばらになってしまったのです。サイズをそろえることは、見た目の統一に欠かせません。

横1200×縦630pxがおすすめ

1200×630pxは、XやFacebookでシェアされたときに推奨されている横長のサイズです。SNSでも記事一覧でも見切れにくいので、ブログのアイキャッチにぴったりです。

すべての記事で同じ比率にそろえる

記事によって画像の比率が違うと、一覧のカードや埋め込みの表示がそろわなくなります。最初にサイズを1つに決めて、すべての記事で同じ比率を使い続けましょう。

アイキャッチ画像の作り方と設定方法

アイキャッチ画像は、無料のデザインツール「Canva」を使えば初心者でも簡単に作れます。作った画像は圧縮して軽くしてから、記事に設定するのがポイントです。

筆者は画像を圧縮せずにアップロードしていた時期があり、トップページの表示が重くなる原因になっていました。アイキャッチは記事一覧で何枚も読み込まれるので、軽くしておくことがとても大切です。

文字は画像の中央に大きめに入れる

アイキャッチは表示される場所によって、画像の端が切れて表示されることがあります。タイトルなどの文字は中央に寄せて大きめに入れると、どこで表示されても読みやすくなります。

ファイルサイズを軽くする

画像は無料のWebツール「TinyPNG」で圧縮すると、見た目を保ったまま軽くできます。1枚あたり200KB以下を目安にすると、表示速度への影響を抑えられます。

STEP

Canvaで1200×630pxのデザインを作る

Canvaで「カスタムサイズ」を選び、幅1200・高さ630pxを入力してデザインを作成します。1つ作ったらテンプレートとして保存しておくと、次から使い回せます。

STEP

文字を中央に配置して書き出す

タイトルの文字を中央に配置して、PNGかJPG形式で書き出します。筆者は文字を端に寄せて、スマホの一覧で文字が切れたことがあるので中央を意識しましょう。

STEP

TinyPNGで画像を圧縮する

TinyPNGのサイトに画像をドラッグして圧縮し、ダウンロードします。ファイルサイズがどれくらい減ったかも表示されるので、軽くなったことを確認しましょう。

STEP

記事にアイキャッチ画像を設定する

記事の編集画面右側の「アイキャッチ画像」から、圧縮した画像をアップロードして設定します。代替テキストに記事の内容がわかる言葉を入れておくと親切です。

STEP

記事一覧で見え方を確認する

公開後、トップページやカテゴリーページの一覧でアイキャッチの見え方を確認します。ほかの記事とカードの高さがそろっているかもチェックしておきましょう。

アイキャッチ画像をもっと魅力的にするコツ

サイズを整えたら、デザインの統一感や画像の軽さにもこだわると、ブログ全体の印象がぐっと良くなります。ここでは、実際に運営しながら効果を感じたコツを紹介します。

筆者はMacBook Air M5でCanvaを開き、外部モニターに記事一覧のプレビューを並べてアイキャッチを作っています。完成形を見ながら作れるので、色や文字の大きさを一覧になじませやすいと感じています。

デザインのルールを決めて統一する

アイキャッチごとに色やフォントが違うと、一覧が落ち着かない印象になります。使う色・フォント・文字の位置をあらかじめ決めておくと、ブログらしい統一感が生まれます。

WebP形式でさらに軽くする

WebPは、JPGやPNGより軽く保存できる画像形式です。プラグインの「EWWW Image Optimizer」を使えば、アップロードした画像をWebPに変換して表示できます。

アイキャッチ画像のチェックポイント

サイズが1200×630pxでそろっている
文字が中央に大きめに入っている
1枚あたり200KB以下に圧縮している
色やフォントがほかの記事と統一されている

▼あわせて読みたい：アイキャッチの色や見え方を大きな画面で確かめられる、筆者愛用の作業用モニターはこちらで紹介しています。

よくある質問

アイキャッチを設定しないとどうなりますか？: 記事一覧では代わりの画像が表示され、SNSでシェアされたときも画像が出ないことがあります。クリックされにくくなるので、すべての記事に設定しておきましょう。
写真のフリー素材を使ってもいいですか？: 使えます。「ぱくたそ」や「写真AC」など、商用利用できる素材サイトを選びましょう。利用規約で、加工やクレジット表記の条件も確認しておくと安心です。
過去の記事のアイキャッチもそろえるべきですか？: すべてを一度に直す必要はありません。アクセスの多い記事から順番に作り直していくと、効率よく一覧の見た目を整えられます。
記事の上にアイキャッチを表示しないようにできますか？: カスタマイザーの「投稿・固定ページ」で、記事の上部にアイキャッチを表示するかどうかを設定できます。一覧には表示したまま、記事内だけ非表示にできます。