WordPressテーマ「SWELL」の画像サイズについて解説します。
今回はSWELLで構築している当サイト文亭の読者、約10万ユーザー分のデバイスサイズ（※2023年1月しらべ）を調べ、最新の画面サイズ状況を踏まえた画像サイズを検討してみました。
まとめると、当サイトが推奨するSWELL画像サイズは下記のとおりです。
| SWELLで使う画像一覧 | 推奨画像サイズ | アスペクト比 |
|---|---|---|
| メインビジュアル画像（PC） | 1600px × 900px | 16:9 |
| メインビジュアル画像（スマホ） | 390px × 844px | 9:19.5 |
| アイキャッチ画像 | 1200px × 630px | 1.91:1 |
| 記事中で使う画像 | 記事幅と合わせる | 自由 |
| サムネイル画像 | – | アイキャッチと合わせる |
| OGP画像 | 1200px × 630px | 1.91:1 |
| ファビコン画像 | 512px × 512px | 1:1 |
| ヘッダーロゴ画像 | 1600px × 360px | – |
| プロフィール画像 | 512px × 512px | 1:1 |
理由や根拠も含めて、SWELLの画像サイズについて解説していきます。
- 「そもそもSWELLとは」については、下記の記事をご参考ください。
現在はIT企業でインハウスSEO担当兼、メディア運営責任者・編集者として働きながら、札幌でWebライティングの講師として活動。「良いWebライターが増えれば仕事が楽になるなぁ」と思いながら、一人でひっそりと文亭を運営中。著書『Webライターが書いてはいけない文章28選』
SWELLの画像サイズを決める上で考慮すること
SWELLの画像サイズを考えるにあたり、3つの視点が必要です。
- SWELLのコンテンツ幅
- 読者（ユーザー）の使用デバイス
- 容量の軽さと画質のバランス
ご自身でも画像サイズを判断してもらえるために、まずはこれらの基本的な考え方について解説していきます。
SWELLのコンテンツ幅（記事幅・サイト幅）
SWELLに使う画像サイズを考えるうえで、もっとも大切なのがSWELLの設定幅です。
「サイト幅・コンテンツ幅・記事幅」の3つがあり、下記のような領域になります。
記事中に表示する画像は「記事幅」にあわせて、幅広に表示させたいものは「コンテンツ幅」や「サイト幅」にあわせる、という考え方です。（※サイト幅は、後述するユーザーの使用デバイスに準拠します。）
記事幅とコンテンツ幅は「外観→カスタマイズ→サイト全体設定→基本デザイン」と進めば調整できます。
これはSWELLの機能「フルワイドブロック」をつかうときなどにも役立つ知識ですので、覚えておいてください。
読者（ユーザー）の使用デバイス
画像サイズを考えるうえで次に大切なのが、実際に画面を見てくれているユーザーの使用デバイスです。
サイトジャンルにもよりますが、昨今ではスマホユーザーがおおよそ7割〜9割を占め、画面サイズはさまざま。もちろんPCにもさまざまな大きさのディスプレイがあるのですが、各画面からきれいに見えるバランスの良い画像サイズを考えねばなりません。
参考までに、SWELLで構築している当サイト文亭の読者、約10万ユーザー分のデバイスサイズ（※2023年1月しらべ）をGoogleアナリティクスから引っ張ってきたのが、下記の表です。
当サイトは比較的PCで閲覧いただいている方が多いのですが、ざっとこのようなシェアになっています。
今回SWELLの推奨画像サイズを検討するにあたり、上記実際のユーザーさまのデバイスシェアもおおいに参考にしました。
容量の軽さと画質のバランス
画像容量は小さければ小さい方が読み込むが早くなりますが、とはいえ綺麗な画像を使おうと思えば、ある程度容量は大きくなります。
自分が画像を設定するときは、当サイトでもご依頼を受ける企業メディアさまでも「どれだけ大きくても1枚150kb」を基準にしており、できれば100kbを切るようにしています。
このくらいなら読み込み速度に干渉することもほぼないと感じますので、ひとつの参考にしてみてください。
適切な画像サイズを調整したうえで、画像圧縮ツールやプラグインなどで容量を減らすよう工夫するのがおすすめです。
SWELLメインビジュアルの画像サイズ
SWELLメインビジュアルの画像は、下記サイズをおすすめします。
- PC用画像：「1600px × 900px」（比率16:9）
- スマホ（SP）用画像：「390px × 844px」（比率9:19.5）
しかしSWELLのメインビジュアルは「サイト幅」によって表示サイズが変わります。つまりユーザーの使用デバイスによって可変ですので、100%どのユーザーにも同じ画面を見せるのは不可能です。
それを踏まえて、バランスの良い画像サイズを設定しました。
PC用メインビジュアル画像：「1600px × 900px」（比率16:9）
PCのディスプレイは様々ですが、縦横アスペクト比は16:9のものが多くなっています。MacBookは16:9か16:10で、Windowで出ているノートもほぼ16:9です。
シェア1位は横幅1920pxなのですが、とはいえほとんどのPCユーザーが1200〜1500pxのPCを使っているようですので、横幅1600pxで十分だと判断しています。
また読み込み速度のことを考えると、できればWebpなどの形式で画像を用意して、容量150kb以内にはおさめたいところです。
スマホ（SP）用画像：「390px × 844px」（比率9:19.5）
スマホのメインビジュアル画像は「390px × 844px」で用意しましょう。
SWELLのSP用メインビジュアル画像を別で用意するなら、現行のPhoneでおもに採用されている「9:19.5」の比率にしておくのが良いという判断です。
日本ではiPhoneのシェアが6割〜と言われており、また今回のデータでもiPhone12などのあたらしい機種を使う方が多く、しばらくはこの縦横比がベーシックだと考えられます。
SWELLの記事に使う画像サイズ
アイキャッチ画像サイズ「1200px × 630px」（比率1.91:1）
SWELLのアイキャッチ画像サイズには「1200px × 630px」をおすすめします。
アイキャッチ画像については「記事幅」や「OGP画像」「サムネイル画像」など色々と考慮する必要があるのですが、もっとも汎用性があるのが「1200px × 630px」です。
まず記事幅については800〜1200px程度のメディアが一般的ですので、これ以上の横幅で画像をつくっておけば綺麗に表示されます。
次にOGP画像サイズ（他のサイトでシェアされたときに表示される画像サイズ）は、「縦横比1.91:1」「横幅1200px」が一般的ですので、これにあわせておくのがもっとも汎用性があると判断しました。
記事中画像サイズ（記事幅と合わせる）
記事中で使う画像は、設定している記事幅と合わせておくのがベーシックです。つまり横幅800px〜1200pxあたりで、ご自身のサイトの設定に合わせると良いでしょう。
しかし読者がほぼスマホユーザーの場合は、横幅390pxの小さな画像で統一するのもおすすめです。とくに「比較系メディア」はスマホユーザーがほとんどですので、読み込みスピードを重視して小さな画像を設定しているところが増えています。
あるいは当サイトでは、正方形の小さめなイラスト素材を中心に使用していたりします。記事中画像については、さほど気にせず好きなものをつかうと良いでしょう。
SWELLでその他に設定しておきたい画像のサイズ
SWELLサムネイル画像サイズ（アイキャッチ画像の縦横比に合わせる）
アイキャッチ画像サイズを統一する場合は、投稿記事一覧で表示されるサムネイル画像設定も同様の縦横比にあわせておきましょう。
「外観→カスタマイズ→記事一覧リスト」と進むと、下記の設定項目があります。
投稿リストブロックなどで色々な表示方法をする可能性がありますので、すべて作る予定のアイキャッチ画像にあわせておくと良いでしょう。
SWELLのOGP画像サイズ「1200px × 630px」（比率1.91:1）
OGP画像サイズは、アイキャッチ画像と同様に「1200px × 630px」（比率1.91:1）がおすすめです。
SWELLが推奨しているプラグイン「SEO SIMPLE PACK」には、OGP画像を設定する項目があります。
これはサイトのトップページが他のメディアでシェアされたときに表示される画像ですので、サイト名などが入ったイメージ画像を設定しておくと良いでしょう。
SWELLファビコン画像サイズ「512px × 512px」
ファビコン画像は「512px×512px」の正方形がおすすめです。
ファビコンとは、PC表示ではブラウザのタブに、スマホ表示ではGoogle検索結果のタイトル横に表示される小さな画像です。
実際に表示されるときは「16px×16px」など小さなサイズになるのですが、WordPressで設定する際は「512px×512px」以上のサイズが求められますので、その最低限のサイズにしておきましょう。
SWELLヘッダーロゴサイズ「1600px × 360px」
SWELLのヘッダーロゴサイズは「1600px × 360px」がよく使われています。
とくに決まりきったサイズがあるわけではなくデザイン次第ですが、SWELL公式サイトが採用しているヘッダーロゴサイズが「1600px × 360px」です。
デザインをする上で問題なければ、上記サイズにしておけば、比較的綺麗に表示されます。
プロフィール画像サイズ「512px × 512px」
SWELLで使用するプロフィール画像サイズは「512px × 512px」の正方形がおすすめです。
SWELLには記事下に自動で執筆者を表示するブロックと、ウィジェットから追加できるプロフィールボックスのブロックがあります。どちらもプロフィール画像は正円に切り抜かれて表示され、
SWELL画像サイズまとめ
SWELLには、さまざまな画像が使えるカスタマイズが用意されています。
オリジナルの画像をきれいに配置して、素敵なサイトを作っていってください。
