【初心者向け】記事内バナー・サムネイルの適切な画像サイズとは？

「記事に入れるバナーは何pxで作れば良いですか？」「スマホとPCでサイズは変えるべきですか？」
こうした疑問は、ホームページを運営していると非常によく聞かれます。
特に初心者の方にとっては、どのくらいの大きさで作ればいいかイメージがつきにくく、迷いやすいポイントです。
結論から言うと、画像は「表示される幅」に合わせて作るのが基本です。無理に大きくしたり小さくしたりする必要はありません。ポイントを押さえて作るだけで、ページはきれいに表示され、読みやすさも確保できます。この記事では、記事内バナーやサムネイルを作るときに押さえておきたい基本ポイントを、初心者の方向けにわかりやすく紹介します。

画像サイズの基本は「コンテンツ幅」

画像サイズを考えるときに、まず押さえておきたいのが画像が表示される横幅、つまり「コンテンツ幅」です。
ホームページでは、画面全体の幅ではなく、文章や画像が配置される記事スペースの幅に合わせることが大切です。
多くのサイトでは、一般的に次の幅が目安です。

コンテンツ幅目安

• PCのコンテンツ幅：900px～1200px程度
• スマホのコンテンツ幅：320px〜400px程度

この幅を基準に画像を作れば、無理に大きな画像を用意する必要はありません。
逆に、表示幅以上に大きな画像を使っても、ページ上では縮小されてしまうだけで、無駄に容量が増える原因になります。

さらに、画像が大きすぎるとページの読み込みが遅くなるため、訪問者にストレスを与えたり、検索エンジンの評価に影響することもあります。
そのため、まずは「コンテンツ幅に合わせる」という考え方を基本にしてください。

• iPhone 画面サイズ・ピクセル数早見表

スマホは「表示幅の2倍」で作る

最近のスマートフォンは、非常に高精細なディスプレイ（Retinaディスプレイなど）が主流です。
このため、表示サイズぴったりで画像を作ると、少しぼやけて見えることがあります。

スマホ用画像は、縮小されることを前提に「表示幅の2倍で制作し、文字も2倍で作る」のが基本です。

スマホ用画像の制作例（スマホサイズが375px、基本文字サイズが16pxの場合）

• バナー制作サイズ：750px（表示幅の2倍）
• バナー内の文字サイズも16pxの2倍の32pxを基準にデザイン
• 余白も2倍で考える

こうすることで、文字入りバナーもスマホでくっきり表示され、読みやすさを損なわずに見せることができます。

サムネイル画像のポイント

該当ページ内に一度しか使用しないバナーなどは、高さ（縦幅）を自由に定めても問題ないことが多いですが、一覧ページや関連記事などで使うサムネイルは、高さ（縦幅）もコンテンツ幅に合わせて、一定の比率で作ります。

サムネイルを作るときのポイント

• 比率（横縦）を統一：1：1、3：2、4：3、16：9（動画幅）などが多いです。
• 複数枚並べてもデザインが崩れないようにする

一覧ページではサムネイルが並ぶため、比率が揃っていないと見た目がばらばらになってしまいます。
デザイン側ではみ出さないよう、制御されている場合もありますが、その場合は途中でサムネイルが切れた状態で表示されていたりします。
比率を既定のサイズに揃えるだけで、ページ全体の印象が整い、見やすくなります。

まとめ

画像は「大きければ良い」「小さければ良い」わけではありません。
最も重要なのは、表示される幅に合わせて作ることです。
この考え方を押さえるだけで、記事内バナーもサムネイルも、初心者でも迷わず作れるようになります。