ブログの画像の比率は何が最適？アスペクト比の計算方法と最適化方法

ブログ運営をする中で「画像の比率はどれが最適なんだろう？」と、疑問に思ったことはありませんか？

画像素材サイトでダウンロードした画像をそのまま使うと、縦横比にバラつきが生じ、記事を一覧表示した際にレイアウトが崩れる原因になります。ブログに統一感をつけるには、画像の比率も重要な要素になってきます。

本記事では、画像の比率について解説します。

• 画像の比率に関する基礎知識
• 参考ブログの画像の比率を確認する方法
• 比率の計算方法

上記の内容に加えて、画像のサイズやフォーマットを最適化する方法もお伝えします。

ブログ画像の比率（アスペクト比）とは

ブログにおける画像の「比率」とは「縦横比（じゅうおうひ）」のことを言います。

単位は「〇:〇（〇対〇）」です。

英語では「Aspect ratio」と言うため、日本国内でも「アスペクト比」と呼ばれることもあります

• 比率
• 縦横比
• アスペクト比

ブログ界では、上記全て同じ意味として認識して問題ありません。

ちなみに画像の比率は解像度とは別物です。

解像度とは、画像の最小単位である「ピクセル」の密度を表しています。例えば「1,200ピクセル×800ピクセル」の場合「横に1,200個、縦に800個のピクセル」で構成されています。

よりシンプルに言い換えるなら「1ピクセル＝1マス」といったイメージです。

比率とは別物ですが、画像の最適化には欠かせない要素なので、仕組みを理解しておいて損はありません。

「解像度が高い」ということは「ピクセル（マス）の数が多い」ということです。

画像の比率の代表例

上の画像は、使用頻度の高い比率です。

以下に代表的な使用用途をまとめました。

「ワイド」や「スタンダード」などは、比率を表す通称です。3:2以外は通称で呼ばれることも多いので覚えておくと良いでしょう。

ブログの画像としては、以下のような比率が一般的です。

• アイキャッチ画像
  16:9／3:2／1:1.618
• 見出し下の画像
  4:3／3:2／1:1.618

ブログ記事の場合、縦幅が長すぎるとスマホで表示した際に圧迫感が出てしまい、読者がストレスを感じる原因になります。逆に横幅が長すぎると、画像が縮小されて視認性が下がってしまうので注意が必要です。

上記の例を見て分かる通り、画像の比率によってブログ記事の印象は大きく変わります。

ブログ記事の要は画像ではなくテキストなので、画像と本文のバランスが取れるように調整しましょう。参考画像の中央（緑色）のようなバランスにするのが理想的です。

画像の比率を統一するメリット

画像の比率を統一すると、ブログのトップページで記事一覧が表示された際に、レイアウトが崩れる心配がありません。

例えば、ブログの発信内容が「ブログの運営方法」だとします。
このとき、画像の比率が統一されていなければ、読者によっては「この人はそこまでブログ運営に詳しくないんだな」といった印象を与えてしまうかもしれません。

比率がバラバラの画像をあとから統一するのは面倒なので、あらかじめ設定しておくことをおすすめします。

ブログの画像の比率は【テーマによって違う】が最適解

結論「ブログに最適な比率」は、お使いのテーマによって異なります。

テーマごとに最適な比率は違う

WordPressのテーマによって、推奨されている画像の比率は異なります。

そのため「〇〇ブログと同じ比率にしたい！」と思って同じ比率の画像を使っても、画像が見切れたり余白ができてしまう可能性があるのです。

テーマが推奨する比率に合わせることで、レイアウト崩れや見切れてしまう問題を最小限にできます。

「（テーマ名） 画像 推奨サイズ」と検索すると、正しい画像のサイズや比率を見つけられるでしょう。

参考ブログの画像の比率を確認する方法

「このブログはきれいに画像が表示されているな」と思うこともありますよね。

参考ブログの画像の比率は、PCブラウザの「検証モード」から確認できます。

＜例＞Google Chromeの場合

1. 画面上部の「表示」をクリック
2. 「開発／管理」→「要素の検証」をクリック
3. 画像にカーソルを合わせる

比率を確認したい画像があるページを表示したら、Google Chromeのメニューから「表示」→「開発／管理」→「要素の検証」の順にクリックしてください。

比率を調べたい画像にマウスカーソルを合わせると、解像度が表示されます。

表示された解像度をメモしておいてください。

解像度を元に画像のアスペクト比を計算していきましょう。

画像の比率の計算方法

縦横の解像度が分かる場合

今回の例のように縦横の解像度が分かる場合は、アスペクト比計算ツールを使うのがおすすめです。

アスペクト比計算ツールはこちら

計算ツールが表示されたら、解像度を入力して「計算する」をクリックしてください。

解像度からアスペクト比が自動で算出されます。

今回の例のように、参考ブログの解像度から比率を確認したいときに便利です。

縦幅もしくは横幅のいずれかのみ分かる場合

片方の解像度のみ分かる場合や「横幅が1,200ピクセルで16:9の比率のときの縦幅を求めたいとき」などは、以下のアスペクト比計算ツールが便利です。

アスペクト比計算ツールはこちら

トップページが表示されたら「Size」に数値を入力します。

今回は例として「1200」と入力しました。
入力が完了したら「width（横幅）」か「height（高さ）」のいずれかをクリックしてください。

入力した数値に基づく比率のピクセル数が表示されます。

横幅を1200ピクセルに指定した場合、16:9の比率の縦幅は「675ピクセル」であることが分かりました。

シチュエーションに合わせて、2つの計算ツールを活用してみてください。

ブログ画像は比率よりもサイズの最適化が重要な理由

「ブログの画像を最適化する」という視点から考えると、比率を統一するだけでは不十分です。

比率の設定と合わせて、画像のサイズも最適化しましょう。
画像サイズの最適化は「解像度」と「フォーマット」を調整します。

以下で、画像サイズの最適化が重要な理由を見ていきましょう。

• サイトの表示速度が速くなる
• SEOに悪い影響を与えない
• Googleは1記事で1.6MB以内を推奨している

サイトの表示速度が速くなる

画像のファイルサイズが軽くなると、サイトの表示速度が速くなります。

画像素材サイトからダウンロードした画像の多くは、ブログにはオーバースペックな解像度になっています。これは画像を二次編集して使う際に、高解像度の方が便利だからです。

ブログ記事の場合、画像の幅は最大でも1,000ピクセルほどあれば十分かなと。なぜなら、ブログのテーマは画像の解像度に上限を設けているからです。

例えば、横幅が4,000ピクセルの画像を使っても、結局はテーマごとに設定された上限値で表示されてしまいます。

TCDのブログテーマ「MAG」の設定値は「790×480」です。
そのため、MAGでブログ運営をする場合、最適な画像サイズは「790×480」になります。

テーマの推奨サイズをオーバーするだけ宝の持ち腐れになってしまうので気をつけましょう。

SEOに悪い影響を与えない

画像サイズが最適化されていると、SEO的にも悪い影響がありません。

解像度が高すぎる画像を使うと、サイトの表示速度が遅くなり、読者はもちろんSEO的にも悪い影響が出てきます。「無駄に重いサイト=ユーザーフレンドリーではない」と判断されてしまうのです。

Googleは1記事で1.6MB以下を推奨している

Googleでは1記事で1.6MB以下にすることを推奨しています。

画像、動画、グラフなどを含む合計、つまり1記事で1.6MB以下になっていれば、Googleの基準を満たしていると言えるでしょう。

記事ごとの容量をチェックするには、Googleが提供している無料ツール「PageSpeed Insights」を使います。

PageSpeed Insightsはこちら

容量をチェックしたい記事のURLを入力して「分析」をクリックしてください。

記事の合計サイズは「過大なネットワーク ペイロードの回避 」という項目に記載されています。

以下のショートカットキーで「過大なネットワーク ペイロードの回避」と検索すると、該当箇所にジャンプします。
・Mac：command + F
・Windows：Ctrl + F

比率の設定と合わせて、画像サイズの最適化にも取り組みましょう。

 

ブログ記事の画像を最適化する方法

最後に画像の比率、解像度、フォーマットを最適化する流れについて紹介します。

• 画像の比率はCanvaで統一
• BULK RESIZEでサイズとフォーマットを最適化
• 代替テキストを追加してSEO対策

画像の比率はCanvaで統一

アイキャッチ画像と見出し下の画像の比率を統一する際、便利に活用できるのが無料のデザインツール「Canva」です。

1. 必要な枚数のキャンバスを用意する
2. 画像をキャンバスにはめ込む
3. 一括ダウンロード

上記の流れで、効率的に比率の整った画像を出力できます。

Canvaはこちら

トップページの右側にある「カスタムサイズ」をクリックして、横幅と縦幅を指定した後「新しいデザインを作成」をクリックします。

白紙の画面が表示されます。

デフォルトで表示されるキャンバスは1枚のみなので「+ ページを追加」をクリックして、ブログ記事に使う分のキャンバスを用意しましょう。

あとはダウンロードした画像素材をキャンバスに挿入していけばOKです。

キャンバス自体が「790×480」に固定されているので、どんなサイズの画像を使ってもバラバラになることはありません。

下の画像は16:9の比率の画像を引き伸ばしている様子です。

枠自体が「790×480」に設定されているので、キャンバス内にバランス良く収まるように拡大・縮小してみてください。

必要な枚数を用意できたら右上にある「共有」から「ダウンロード」を選択しましょう。

「ダウンロード」をクリックすると、作成した画像が一括でダウンロードできます。

Canvaなら画像の比率を統一しつつ、文字入れや装飾などが同時に行えます。

無料でも十分使えるのですが、有料プランにするとブロガーにとってさらに便利な機能を利用可能です。

Canvaの有料版について興味のある方は、下記記事も合わせて読んでみてください。

BULK RESIZEでサイズとフォーマットを最適化

BULK RESIZEは、画像のサイズとフォーマットを一括変換できる無料ツールです。

比率を統一した画像は、ファイルサイズとフォーマットも揃えて最適化してしまいましょう。

BULK RESIZEはこちら

トップページが表示されたら「画像を選択します」をクリックしてください。

CanvaでダウンロードしたZIPファイルZIPファイルを解凍して、全ての画像を選択しましょう。

画像がアップロードされると、メニューが表示されます。

フォーマットはJPEGを選択すればOKです。
圧縮率については、元画像の解像度によって調整します。

先述したとおり、1記事で1.6MB以下になれば問題ないので、範囲内できれいに表示できるラインを模索してみてください。

「> 開始」をクリックすると、画像を一括ダウンロードできます。

WordPressには、画像を圧縮してくれるプラグインも活用できます。

プラグインについての詳しい解説については、下記記事をご覧ください。

代替テキストを追加してSEO対策

比率を統一して、画像の最適化も完了したら、いよいよブログ記事に挿入していきます。

画像を挿入する際は「代替テキスト」を設定しましょう。

代替テキストとは、画像の情報をテキスト（文字）にしたものです。
音声読み上げソフトを使ったときに、代替テキストが設定されていると画像の情報を分かりやすく伝えられます。

また、検索エンジンに対しても画像の情報を伝えられるため、SEO的にも良い効果があると言われています。

せっかく画像を最適化したのですから、代替テキストも設定してあげましょう。

代替テキストは、日本語で画像の特徴を記載します。

＜例＞クラシックエディタの場合

クラシックエディタは、画像の編集画面から代替テキストを設定できます。

大体テキストを入力したら「更新」をクリックしましょう。

＜例＞ブロックエディタの場合

ブロックエディタは、投稿画面で画像をクリックすると、右側に代替テキストの入力欄が表示されます。

任意のテキストを入力したら、下書きをクリックして保存しておきましょう。これで画像の比率、サイズ、フォーマット、SEO対策など、ブログの画像に関する最適化が完了しました。

画像はブログの表示速度に大きく影響するので、適宜最適化しておくようにしましょう。

アイキャッチ画像に関するワンポイントアドバイス

アイキャッチ画像に文字入れやロゴなどを挿入する場合は、なるべく中央に配置することをおすすめします。

というのも、ブログ記事が他者にシェアされたときは、設定した比率に関係なく正方形（1:1）にリサイズされることが多いからです。

上の画像のように、あらかじめ重要な要素を正方形の中に収めておくと安心です。

まとめ

ブログに使う画像の比率は、お使いのテーマによって異なるため「（テーマ名） 画像 推奨サイズ」などで検索して、最適なサイズを使うことをおすすめします。

ブログで利用される代表的な比率は以下の通りです。

• アイキャッチ画像
  16:9／3:2／1:1.618
• 見出し下の画像
  4:3／3:2／1:1.618

画像の比率を統一しておくと、レイアウト崩れの心配がなく整ったブログになります。

また、比率の統一と合わせて、解像度やフォーマット、代替テキストなどの最適化も行いましょう。解像度の高すぎる画像は、サイトの表示速度が遅くなり、SEO的にも悪影響を与えかねません。

画像の最適化を行って、ワンランク上のブログを目指しましょう。