SWELLの画像サイズどうする？Canvaで作るおすすめサイズを紹介
SWELLを導入した後に確認しておきたいのが、画像のサイズです。
ブログを始めたばかりの頃って「どの画像サイズが正解なの？」って迷うことが多いんですよね。
実際、私もブログを始めたばかりの頃は最適な画像サイズに悩んでいました。
特にSWELLは、アイキャッチ・ロゴ・メインビジュアルなど画像を使う場面が意外と多く、何pxで作ればいいのか迷いやすいです。
そこでこの記事では、SWELLで使うおすすめ画像サイズをCanva向けにやさしく解説します。
「まず何pxで作ればいい？」が分かるように、実際に使って感じたことも交えながらまとめました。
Canvaで作るSWELLのおすすめ画像サイズ
Canvaで作成した画像をWordPressにアップロードしたとき、こんな風に悩んだことはありませんか？
- スマホで見た時に画像が小さく感じる
- 思った通りのイメージと違う
サイズを決めずに作り始めてしまうと、このような事態に陥りがちです。
画像サイズに絶対の正解はありませんが、あらかじめ目安を決めておくと毎回サイズで迷わなくなり、ブログ作業がぐっと楽になります。
本章では、私が実際に使いながら感じた「まずはこれでOK！」なSWELLのおすすめ画像サイズを紹介します。
SWELLのおすすめ画像サイズ一覧
（おすすめ画像サイズは横幅×縦幅表記です）
| 用途 | おすすめ画像サイズ |
|---|---|
| メインビジュアル(パソコン) | 1600px×900px（SWELL公式で使用） |
| メインビジュアル(スマホ) | 960px×800px（SWELL公式で使用)） |
| ファビコン | 512px×512px以上（WordPress公式で推奨） |
| ヘッダーロゴ画像 | 1600px×360px（SWELL公式で使用） |
| OGP | 1200px×630px（Facebook/Googleの推奨サイズ） |
| アイキャッチ | 1200px×630px（Facebook/Googleの推奨サイズ） |
| 記事内画像 | 横幅800px〜1200px |
| NO IMAGE画像 | 1200px×630px |
| プロフィール画像 | 240px×240px（SWELL公式で使用） |
| ふきだし | 240px×240px |
サイト全体で使う画像
メインビジュアル（パソコン/スマートフォン）
パソコンのおすすめサイズ：1600px × 900px
スマートフォンのおすすめサイズ：960px× 800px
メインビジュアルは、その名の通りサイトを開いた時に最初に目に入る画像のことです。
ブログの第一印象を左右する部分でもあり、「どんなブログなのか」を視覚的に伝える役割があります。
SWELLでは、メインビジュアルの高さを以下のように指定できます。
- 画像・動画サイズのまま
- コンテンツに応じる
- 数値で指定する
- ウィンドウズサイズにフィットさせる
私は、SWELL公式サイトで使われているメインビジュアルと同じサイズで作成し、高さをパソコンは30w・スマートフォンは50vhに設定しています。
メインビジュアルの高さについてはそれぞれ好みがあると思うので、サイズだけ公式と同じで作成するのが良いと感じました。
ファビコン
ファビコンのおすすめサイズ：512px× 512px
ファビコンは、別名サイトアイコンとも言い、ブラウザのタブやスマートフォンのホーム画面などに表示される画像のことです。
サイトを印象付けるものなので早めに設定しておくと良いですが、決まっていない場合は後から作っても◎
WordPressでは、512px×512px が推奨サイズとされており、それ以下のサイズだとぼやけたり潰れて表示されてしまう可能性があります。
ヘッダーロゴ画像
ヘッダーロゴのおすすめサイズ：1600px×360px
ヘッダーロゴとは、サイト上部（ヘッダー部分）に表示される画像や文字のことで「サイトの顔」としての役割を持っています。
メインビジュアル同様、ブログの印象にも関わる部分なので、最初に設定しておくとサイトの個性が出やすくなります。
「どのサイズで作ればいいんだろう？」と迷ったら、まずはこのサイズ感を参考にするとバランスを整えやすいです。
私も最初はサイズ感が分からず迷いましたが、基準があると作りやすく感じました。
ロゴの正解は1つではないので、まずはシンプルなものから作って行き、ブログを続けながら少しずつ整えていく形でも十分だと思います。
OGP
OGPのおすすめサイズ：1200px×630px
OGP画像とは、ブログ記事がSNSなどでシェアされた時に表示される画像のことです。
例えば、X（旧Twitter）やFacebookでブログURLを貼った時に、タイトルと一緒に画像が表示されることがありますよね。
りなその時に使われるのがOGP画像です
OGP画像のサイズは、Facebookの「1200px×630px」が基準として使われることが多いです。
SWELLでもこのサイズを目安に作っておくと、SNSでシェアされた時に表示が崩れにくく安心です。
記事内で使う画像
アイキャッチ
アイキャッチのおすすめサイズ：1200px×630px
アイキャッチ画像は、記事一覧や記事上部に表示される“記事の顔”になる画像です。
「この記事にはなにが書かれているのか」を読者さんに伝える役割もあります。
アイキャッチ画像のサイズは少し迷いやすい部分ですが、私は「1200px×630px」を目安に考えるのがおすすめかなと思います。
これはOGPと同じサイズなので、XやFacebookでシェアされた時にも表示が崩れにくいです。
記事内画像
記事内画像のおすすめサイズ：横幅800px〜1200px
記事内画像のサイズは、実は「これが正解！」と言い切るのが少し難しい部分かなと思います。
私自身いろいろなブログを見てみましたが、サイズ感は本当にさまざまでした。
たとえば、設定方法を説明するスクリーンショットは縦長になりやすいですし、図解や説明画像は横長のほうが見やすいこともあります。
そのため、記事内画像は「用途に合わせて使い分ける」が基本かなと感じています。
ただ、迷った時はアイキャッチ画像と近い雰囲気やサイズ感にすると、記事全体に統一感が出やすい印象でした。
NO IMAGE画像
NO IMAGEのおすすめサイズ：1200px×630px
NO IMAGE画像とは、アイキャッチ画像を設定していない時に表示される画像のことです。
記事一覧などで表示されるため、設定しておくとブログ全体の統一感にもつながります。
SWELLでは、NO IMAGE画像の推奨サイズとして「横幅1600px以上」が案内されていますが、個人的には「1200px×630px」くらいを目安にするのもおすすめかなと思いました。
理由は、NO IMAGE画像がアイキャッチ画像の代わりとして表示される場面が多いためです。
アイキャッチと近いサイズ感にしておくと、一覧ページなどで並んだ時にもバランスが取りやすく、統一感が出やすい印象でした。
プロフィール関連画像
プロフィール画像
プロフィール画像のおすすめサイズ：240px×240px
プロフィール画像は、記事下の「この記事を書いた人」やウィジェットなどに表示される画像です。
ブログを書いている人の雰囲気が伝わりやすく、親しみや安心感にもつながる部分かなと思います。
SWELL開発者の了さんは「240×240px」の正方形画像を使われていますが、プロフィール画像のサイズに「これが正解！」という決まりはありません。
ただ、個人的には240×240pxだと少し小さく感じたため、私は「512×512px」の正方形で作っています。
ファビコンと同じサイズなので管理もしやすく、画質が荒れにくい点も使いやすく感じています。
ふきだし
ふきだし画像のおすすめサイズ：240px×240px
ふきだし画像は、会話形式の吹き出しで使われるアイコン画像です。
キャラクター感や親しみやすさが出るので、ブログにやわらかい雰囲気を作りたい時にも使いやすい機能です。
SWELLでは、ふきだし画像にも「このサイズ！」という正式な決まりはありませんが、個人的には「240px×240px」くらいの正方形が使いやすいかなと感じています。
理由は、ふきだし画像は小さく表示されることが多いためです。
SWELL開発者の了さんもプロフィール画像で「240px×240px」の正方形を使われているので、迷った時の目安にもなりそうです。
SWELLの画像サイズ、何を基準に決める？
ここまで、SWELLでおすすめの画像サイズの目安をご紹介してきました。
ただ、実際に画像を作ろうとすると「結局どのサイズで作ればいいの？」と迷うこともありますよね。
特にCanvaで画像を作る時は、何を基準に決めればいいのか悩みやすい部分かなと思います。
ここからは、私自身が画像を作る時に意識している「サイズの決め方」についてお話ししていきます。
迷ったら「使う場所」で考える
画像サイズに迷った時は、「どこで使う画像なのか？」を基準に考えると決めやすくなります。
というのも、画像は使う場所によって見え方や役割が変わるからです。
たとえば、アイキャッチ画像やOGP画像は、記事の顔として表示されることが多いため、横長サイズ（1200p×630px）が使いやすい印象です。
一方で、プロフィール画像やふきだし画像は小さく表示されることが多いため、正方形の画像が向いています。
記事内画像は少し特殊で、スクリーンショットなら縦長になることもありますし、図解画像なら横長の方が見やすいこともあります。
そのため、「これが正解！」というよりは、用途に合わせて調整していくイメージが近いかなと思います。
正解は1つじゃない。迷ったらまず作ってみよう
ここまで画像サイズについてご紹介してきましたが、実は「これが絶対正解！」というサイズはありません。
ブログのデザインや使う画像、見せたい雰囲気によっても、ちょうど良いサイズは少しずつ変わってきます。
私自身も、最初は「どのサイズで作ればいいんだろう？」とかなり迷いました。
でも、実際に作ってみて「少し大きかったな」「この比率のほうが見やすいかも」と調整しながら、少しずつ自分なりの形が見えてきました。
なので、最初から完璧を目指さなくても大丈夫です◎
迷った時は、まず作ってみる → 実際に表示を見る → 少し調整する、くらいの気持ちでOK。
ブログを続けながら、自分のブログに合うサイズ感を見つけていけば十分だと思います。
画像サイズで迷っても大丈夫◎最初に意識したいこと
実際に画像を作ってみると「なんだか思った感じと違う…」と迷うこともありますよね。
私自身も、何度も作り直しながら「こっちの方が見やすいかな？」と試行錯誤してきました。
ここからは、画像サイズで迷った時に、私自身が「最初に意識するとラクだった」と感じたことをご紹介します！
パソコンとスマートフォンでは見え方が変わることも
私は、画像を最終的に以下のように作成しました。
| 用途 | 実際に作成したサイズ |
|---|---|
| メインビジュアル(パソコン) | 1600px×900px |
| メインビジュアル(スマホ) | 960px×800px |
| ファビコン | 512px×512px |
| ヘッダーロゴ画像 | 800px×250px |
| OGP | 1200px×630px |
| アイキャッチ | 〃 |
| 記事内画像 | 横幅1200px |
| NO IMAGE | 1200px×630px |
| プロフィール画像 | 512px×512px |
| ふきだし | 240px×240px |
※画像のサイズは、人によって少しずつ違います。
というのも「読む人に何を見せたいか」によって、ちょうど良いサイズ感が変わってくるからです。
たとえば、余白を広めにしてやさしく上品な雰囲気を出したいのか、文字をしっかり目立たせたいのかでも見やすい比率は少し変わります。
写真を大きく見せたい場合もあれば、文字を主役にしたい場合もありますよね。
これはアイキャッチや記事画像でも同じ事が言えます。
Canva上では良く見えても、ブログに入れてみると余白や文字サイズの印象が少し違って見えることもあります。
私自身、アイキャッチや記事画像は基本「1200px×630px」で作ることが多いですが、パソコンでは見やすく感じる一方で、「スマホだと少し印象が違うかも？」と、今も試行錯誤している途中です。
「このサイズが絶対正解！」というよりは、実際に作ってみて「自分のイメージに合うかな？」を見ながら調整していくのが大事かなと思っています。
画像サイズが決まったら「画像形式」も大事
画像は「サイズ」だけ決めればOKというわけではありません。
実はどの「画像形式（ファイル形式）」を選ぶかでも、画質や表示速度が変わってくることがあります。
ここからは、ブログでよく使われる画像形式について、初心者さん向けにやさしく紹介していきます。
JPEG（ジェイペグ）
JPEGは、ブログでよく使われる画像形式のひとつで、写真に向いている形式で容量を軽くしやすい特徴があります。
また、背景を透明にする「透過」には対応していません。
PNG（ピング）
PNGは、ロゴ画像やイラストにおすすめの画像形式です。
たとえば、ロゴのまわりに白い背景をつけずに、自然にサイトデザインになじませたい時にも使いやすいです。
特に、ブログのヘッダーロゴやプロフィール画像などで使われることも多いかなと思います◎
JPEGと比べると容量が少し重くなることもありますので、写真系の画像というよりロゴやイラスト向きかなと思います。
WebP（ウェッピー）
WebPは、Googleが開発した画像形式で、画像を軽くしやすい特徴があります。
JPEGやPNGと比べて、画質を保ちながら容量を抑えやすいため、表示速度対策として使われることもあります。
私自身は、Canvaで作ったPNGやJPEGの画像をそのまま使うのではなく、WebP化してくれるプラグインで軽くしています。
最初から難しく考えなくても、普段通り画像を作ってあとから軽くする方法もあるので、安心です。
まとめ
SWELLで使う画像サイズは、場所によって目安がある一方で、「これが絶対正解！」と言い切れない部分も多いかなと思います。
実際、私自身も何度も作り直しながら、「こっちの方が見やすいかな？」「もう少し余白を増やした方が良いかも」と試行錯誤してきました。
特にパソコンとスマホでは見え方が変わったり、作る人によって「見せたい雰囲気」も違ったりするため、ちょうど良いサイズ感は少しずつ変わってきます。
だからこそ、“作ってみる → 表示してみる → 調整する” を繰り返しながら、自分のブログに合う形を見つけていくことが大切かなと感じています。
りなまずは目安サイズを参考にしながら、作ってみてくださいね！