ブログを始めたばかりであれば、記事で使う画像のサイズをどうしたらよいのか迷ってしまうかもしれない。
アイキャッチ画像にかぎっては「横 1200px / 縦 630px」がおすすめだが、記事内で使う画像サイズに絶対的な正解はない。なぜアイキャッチ画像はサイズが決まっているのか、記事内の画像サイズはどう決めればよいのか、本記事で詳しく取り上げていく。
その他、画像の形式や容量など、基本的な部分を学んでいこう。
ブログ記事に画像を入れるときの最善の方法は以下の記事をご覧ください。
re-inx.com目次
ブログ記事内で使う画像サイズの決め方
ブログで使う画像のサイズは、以下の 2 点を考慮して決めることになる。
- 記事本文に対する画像の横幅
- 画像の比率
この 2 点に絶対的な正解はない。全体のデザインや運営者の好みに関わってくるからだ。初心者にとってはわかりづらいかもしれないが、詳しく解説していくので順に見ていこう。
01. 記事本文に対する画像の横幅を決める
まずは、記事本文に対して画像をどのくらいの横幅にするか考えてみよう。
あなたは以下のどちらが好みだろうか。
図解なのかグラフなのかキャプチャなのか、でも変わってくるが、単なるアクセントではなく記事内容に関連する画像であれば、できるだけ大きくしたほうが見やすくなる。
画像によって横幅がバラバラで、かつ左寄せだったり中央寄せだったりすると、読者はあまり良い印象をもたないかもしれない。
さらに、「大きな画像を小さく見せてもあまり劣化しない」が「小さな画像を大きく見せると劣化する」という特性がある。
そのため、画像の大きさに迷っているなら、本文と同じサイズ（フルサイズ）にしておくのがおすすめだ。あとから小さくしたい場合は、画像を作り直さなくても調整できる。
なお、PC で見たときに左右に余白をもたせたサイズにしても、スマホで見ると本文と同じ幅になることがほとんど。ユーザーの 7 ～ 8 割はスマホでアクセスしていることも忘れないようにしよう。
02. 記事本文の横幅を調べる
記事本文と同じ横幅の画像にするなら、記事本文のサイズを把握しておかねばならない。
サイズはブログのデザインによって異なる。WordPress であればテーマによって本文の横幅が変わるし、任意のサイズにカスタマイズできるから、一律には決められない。
下表は WordPress テーマ「Cocoon」と「SWELL」を比較したものだ。微妙に異なっているのがわかる（両テーマとも設定によって変わる）。
| テーマ | 記事本文の横幅 |
|---|---|
| Cocoon 公式サイト | 800 px |
| SWELL DEMO 01 | 812 px |
サイドバーのありなしも関係してくるから、同じブログでもページによって横幅が異なるかもしれない。
自分のブログはどのくらいのサイズになっているか、ブラウザのデベロッパーツールで調べてみよう。以下は Google Chrome の例だが、どのブラウザでも基本操作はほぼ同じ。
※ F12 キーでも可
段落を選択すると、本文の横幅がわかる。上記例では横幅 800px だ。
現在の本文横幅が 800px であれば、画像の横幅も 800px にそろえておけばよい。
ただし、以下の 2 点に気をつけてほしい。
- のちのち WordPress テーマを変更すると、本文横幅が変わる可能性がある
- カスタマイズで本文サイズを広げると、画像の横に余白が生じる
今後どのようにしていくか未定なら、少し大きめの画像にしておけば安心だ。横 850px ぐらいにしておけば、ほぼ困ることはないと思う。
なお、横 2000px など極端に大きな画像でも、きちんと設計されたテーマであれば本文幅を飛び出して表示されることはない。ただ、サイズが大きくなればそのぶん容量が増え、表示速度に影響する。
「表示速度を落とすことなく、見やすい画像を作成する」というのが難しいところだ。詳細は以下の記事で解説している。
03. 比率から画像の高さを決める
画像の横幅が決まったら、次は高さを決める。高さは、比率に基づいて決めるのがよいだろう。
比率にも絶対的な正解はなく、好みの問題になる。代表的な比率（アスペクト比）は以下のとおり。
| 比率 | 代表例 |
|---|---|
| 16 : 9 | テレビ（地デジ） / YouTube |
| 3 : 2 | フィルム / デジタル一眼レフで撮影した写真 |
| 4 : 3 | 昔のテレビ（アナログ） / PowerPoint |
| 1 : 1.618（黄金比） | 古代ギリシャで発見された、人間が最も美しいと感じる比率 |
| 1 : 1.414（白銀比） | 木造建築 / ハガキ |
| 1 : 1 | Instagram / Twitter カード（小） / 検索結果 |
| 1 : 1.91 | Twitter カード（大） / Facebook シェア |
記事でよく使われるのは、「16 : 9」「3 : 2」「4 : 3」の 3 つだ。ダミー画像で高さを比較してみよう。
記事内の画像すべての比率を固定しなくてもよい。以下のように用途に応じて使い分けるのがよいだろう。もっとも、きっちり固定するのでも問題なく、運営者の考え方次第となる。
| 比率 | 用途 |
|---|---|
| 16 : 9 | 見出しの下に入れるイメージなど |
| 3 : 2 | レビュー記事の写真など |
| 4 : 3 | Web サービスのキャプチャ / 図解など |
記事内で使う画像サイズまとめ
当サイト（Reinx）では、Web サイトのキャプチャや図解を多用しており、比率はとくに決めていない。ただ、表示速度に影響しないよう、一応の基準として上限を「横 1280px / 縦 960px」としている。
正解はないので、極端に大きなサイズでなければ、自分が心地よく感じるサイズ（比率）で大丈夫だ。
比率から画像の高さを求めたいときは、「アスペクト比計算ツール」が便利なのでブックマークしておこう。
アイキャッチに使う画像サイズの決め方
ブログには、記事内で使う画像のほかに「アイキャッチ画像」もある。アイキャッチ画像は、主に以下のシーンで使われる重要な画像だ。
- 記事上部（デザインによる）
- 記事一覧リスト
- SNS シェア
- Google Discover などの外部サービス
これを念頭に、最適なサイズを考えてみよう。
01. アイキャッチ画像の推奨横幅
アイキャッチ画像にかぎっては、最低限の横幅を 1200px としておくのがおすすめだ。
このサイズは、Google Discover に掲載されることを考えたものである。
魅力的な高画質の画像、特に Discover からのアクセスが発生する可能性の高いサイズの大きい画像をコンテンツに含める。サイズの大きい画像は、幅を 1,200 ピクセル以上とし、max-image-preview:large の設定または AMP を使用して有効にする必要があります。
Discover にコンテンツを掲載する | Google 検索セントラル
WordPress テーマによってはアイキャッチ画像の推奨サイズが指定されているが、たいていは「横 1200px」以内となっている。そのため、とくにこだわりがなければ 1200px で決め打ちしてしまおう。
02. アイキャッチ画像推奨比率
前述のとおり、アイキャッチ画像は SNS シェア時に使われる（正確には、OGP 画像が反映される）。
以下は、Twitter でシェアしたときのものだ。
記事タイトルを入力するだけでAIが自動的に記事を書いてくれる！？ WordPressプラグイン「GPT AI Power」の使い方を公開しました。
— Reinx▶無料ブログ診断実施中 (@ReinxWeb) February 2, 2023
サンプル記事も載せているので、どのくらいの精度なのかチェックしてみてください。#ブログ初心者 #ブログ書け https://t.co/AERXu0N8pi
Twitter を含め、外部サービスでは以下の 2 つの比率で表示されることが多い。
| 比率 | 代表例 |
|---|---|
| 1 : 1 | Instagram / Twitter カード（小） / 検索結果 |
| 1 : 1.91 | Twitter カード（大） / Facebook シェア |
この比率で計算すると、「横 1200px / 縦 628px」が最適解となる。きっちり割り切れない比率のため、少し余裕をもたせて「横 1200px / 縦 630px」で考えておいてもよい（上下 1px ほどカットされる）。
1 : 1 の比率で表示される場合、中央から切り抜かれる形になる。画像に文字入れするのであれば、中心におさまる範囲にしておこう。
SNS でシェアされたときのイメージを事前につかみたいなら、「OGP画像シミュレーター」でチェックできる。
なお、SEO プラグインを使うと、「ブログ内で使うアイキャッチ画像」と「SNS でシェアされるときに使われるアイキャッチ画像（og:image）」を別々に設定できる。手間はかかるが、SNS からのアクセス数を伸ばしたいならこだわってみるのもよいと思う。
画像の形式は何がよいのか
画像のサイズが決まったら、次は画像の形式を考えてみよう。以下のような違いがある。
| 形式 | 特徴 | 用途 |
|---|---|---|
| JPEG | フルカラー対応で鮮明な画質 | 写真 |
| PNG | 透過処理できる | イラストやロゴ |
| GIF | アニメーションが作れる | 動きのある画像 |
| WebP | JPEG / PNG / GIF の特徴を併せもつ | すべての画像 |
ざっくり「写真なら JPEG」「イラストなら PNG」と考えておけば問題ない。ただ、PNG は容量が大きくなる傾向にあるので、イラストの場合は生成後の容量に合わせて形式を選択するのがベスト。
以下は同じ画像を JPEG と PNG にしたものだ。見た目は同じだが、PNG のほうが軽くなっているのがわかる。
マニアックな話をすると、JPEG には「ベースライン」「プログレッシブ」という 2 種類の形式があり、後者のほうがやや容量は軽くなる。
WebP 形式への変換がおすすめ
2023 年現在、WebP（ウェッピー）形式の画像を採用するサイトが増えている。従来の形式の特徴を併せもち、かつ容量も軽いからだ。WebP に非対応だった Internet Explorer のサポートが終了した、というのもあるだろう。
WebP は、JPEG や PNG 形式の画像を Photoshop などで変換する必要がある。
WordPress は変換専用のプラグインを利用するのが簡単でおすすめ。JPEG や PNG 形式の画像をアップロードすれば、あとは自動的に処理してくれる。
代表的なプラグインは以下のとおり。
画像の容量は 100KB 以下が目安
画像は、サイズや画質に比例して容量が大きくなる。そのぶんページ全体の表示速度に影響するので、可能なかぎり軽くしておきたい。
WordPress は「Imagify」や「EWWW Image Optimizer」といったプラグインで自動的に圧縮軽量化できる。万全を期すなら、アップロード前に専用ツールで軽量化しておこう。
代表的なツールは以下の記事で紹介している。
見た目が同じなら軽いほどよいが、一応の目安として 100 KB 以下になるよう調整するのがおすすめ。
間違っても 2MB など大容量の画像をアップロードしないよう気をつけてほしい。
WordPress で画像をアップロードするときの注意点
WordPress で画像をアップロードするとき、日本語ファイル名のままアップロードしないよう注意してほしい。以下の不具合を起こす可能性がある。
WordPress は、画像アップロード時に様々なサイズのファイルが生成される。
- サムネイル
- 中サイズ
- 大サイズ
- その他テーマやプラグインで指定されたサイズ
日本語ファイル名の画像は、このうちいくつかのサイズの生成が行われないことがある。再現性がなく、おそらく使用しているサーバーにもよると思われる。
何らかの不具合が起きることは確認しているので、この問題を回避してくれるプラグイン「WP Multibyte Patch」を導入しておくのがおすすめ。ただし、意味のないファイル名になってしまうから、面倒でも英数字のファイル名にしておくのがベストだ。
ブログで使う画像に関するまとめ
本記事で解説してきた画像の取り扱いに関してまとめてみよう。
| 記事内で使う画像サイズ | ブログのデザイン（本文の横幅）に合わせ、比率に基づいて高さを決める |
|---|---|
| アイキャッチ画像のサイズ | 横 1200px / 縦 630px がおすすめ |
| 画像の形式 | JPEG や PNG 形式で作成し、WebP 形式に変換する |
| 画像の容量 | 可能なかぎり軽くする（目安は 100KB 以下） |
記事本文のフォントサイズや、行間の高さなどによっても印象は異なる。
いろいろなブログを見てまわり、最も見やすいと感じた画像サイズを参考にするのがよいだろう。パソコンだけではなくスマホでの見た目もチェックしてほしい。
ブログはテキストだけでなく画像でわかりやすく伝えるのも大切だから、読む人のことを考えて記事を書いていこう。
記事執筆：Reinx 編集部 瀬尾 真
Web 業界歴 20 年の知見をもとに、初心者でも楽しくブログ運営に取り組んでいただけるよう、WordPress や SEO のノウハウを提供しています。ブログ診断無料サービスもご利用ください。
ブログ運営でお悩みの方へ
ブログ初心者を対象に、無料でブログ診断を行っています。
「アクセス数が伸びない」「検索にインデックスされない」「Google AdSense 審査に通らない」といったお悩みがあればぜひご利用ください。問題の原因を探り、それぞれに合わせた解決策をご提案します。
