2026.09.09
こんにちは。アントアントのメルマガ担当です。 いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
「せっかく良い写真を撮ったのに、WEBサイトにアップしてみるとなんだかガタガタして見える…」 「画像が大きすぎてページの読み込みが遅い気がするけれど、どう直せばいいのか分からない」 CMSを使ってご自身でWEBサイトを運用していると、そんな「画像に関するお悩み」に直面することはありませんか？
実は、画像の種類・サイズ・容量を適切に設定するだけで、サイトの見やすさや表示速度は大きく変わります。
そして、いくつかの基本ルールを知っておくだけで、こうした悩みは簡単に改善できます。
そこで今回は、WEBサイトで使用する画像の種類とサイズの基本ルールについて、WEBやデザインに詳しくない方でも分かるように解説いたします。
WEBサイトで使われる画像には、いくつかの「型」があります。
これを知るだけで、画質の劣化を防ぎ、サイトの表示速度をあげることができます。
一般的な画像（JPEGやPNG）は、たくさんの点（ピクセル）で作られた画像のため、大きく拡大すると画像がぼやけてしまいますが、SVGは拡大しても劣化しません。また色をCSSで簡単に変更することもできます。
迷った場合は「写真＝JPEGまたはWebP」「ロゴやアイコン＝SVGまたはPNG」と覚えておくと、画像形式で迷うことが少なくなります。
| 形式 | 特徴・用途 |
|---|---|
| PNG (ピング) | 背景を透明にできるためロゴ画像や何かの形に切り抜きたいイラストに適しています。 |
| JPEG (ジェイペグ) | 写真で最もよく使われる画像形式です。WEBサイトの写真は基本的にJPEGでOKと考えて問題ありません。 |
| WebP (ウェッピー) | Googleが開発した画像形式で、JPEGやPNGよりもファイルサイズを小さくできるのが特徴です。サイト表示を高速化するため、近年採用するWEBサイトが増えています。 |
| SVG (エスブイジー) | 少し特殊な画像形式で図形データ（ベクター画像）という扱いになります。 拡大しても画像がぼやけず、CSSでカラーを簡単に変更することもできます。 |
なぜ、画像の「重さ（容量）」にここまでこだわる必要があるのでしょうか？ それは、表示速度が遅いと「ユーザー」と「検索エンジン」の両方から見放されてしまうからです。
Googleの調査によると、モバイルサイトの読み込みに3秒以上かかると、約50%ものユーザーがページを閉じて去ってしまうというデータがあります。
どんなに素晴らしい文章や商品写真を掲載していても、表示される前にページを閉じられてしまっては、存在しないのと同じになってしまいます。
出典：Think with Google Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed（2016年のデータ、記事は削除済み、2026年でもこの認識は変わっていないと言われている）
Googleは「ユーザーにとって使いやすいサイト」を高く評価します。
そのため、ページの表示速度は検索順位を決める重要な指標（コアウェブバイタル）の一つとして公式に採用されています。
「画像1枚くらい…」という油断が、実は集客のチャンスを大きく損なっている可能性があるのです。
WEBサイトをパッと見たとき、わたしたちは無意識に「規則性」を探しています。
例えば、スタッフ紹介やブログ記事のサムネイル画像が、あるものは正方形、あるものは横長、またあるものは縦長…とバラバラだと、視線が定まらず「整理されていない印象」を与えてしまいます。
「サイズを揃える」だけで、サイトに清潔感と信頼感が生まれます。
どんなサイズにすればいいか迷ったときは、以下の数値を基準にしてみてください。
| 比率 | サイズ | 理由 | |
|---|---|---|---|
| 2列以上で表示したい画像 | 3:2 写真として最も自然に見える比率です |
幅 800px × 高さ 534px | PC画面で2列に並べても十分綺麗に見え、スマートフォンで見ても（縦で閲覧時）粗くなりません。 |
| 1列で表示したい画像 | 3:2 写真として最も自然に見える比率です |
幅 1140px × 高さ 760px | ant2 CMSで1列表示する場合はウィンドウ幅100%のブロックでない限り、ブロックの最大値は1140pxになります。 |
| メイン画像（キービジュアル） | 16:9 テレビやYouTubeと同じワイドな比率です |
幅 1920px × 高さ 1080px | 最近の一般的なデスクトップモニターで端から端まで美しく表示されます。 |
画像を切り抜く（トリミングする）際、意識してほしいのが「端っこ」です。
写真の端に、「隣にいた人の肩がほんの少しだけ映っている」とか「看板の文字が1文字だけ切れて残っている」といったことはありませんか？
実はこれ、見た目の印象に大きく影響しています。
人間は、不完全なものに目がいく習性があります。端に中途半端なオブジェクトがあると、「これは何だろう？」と無意識に気になってしまい、本来見てほしい写真の中央ではなく、その「切れ端」に視線が奪われてしまうのです。
逆に言えば、不要なものを思い切って切り落とし、画面をスッキリさせるだけで、写真の主役がグッと引き立ちます。「もったいないから残しておこう」と思いがちですが、余分な情報をそぎ落とすことこそが、伝わる写真への近道です。 トリミングするときは、仕上がりの四隅を確認する習慣をつけてみてください。
「端に余計なものが映り込んでいないか？」をチェックするだけで、写真のクオリティはぐっと上がります。
どんなに美しい写真でも、1枚の容量が 5MB もあるような重い画像はNGです。 読み込みに3秒以上かかると、ユーザーの約50%が離脱すると言われています。 画像1枚あたり200KB〜300KB以下になるように圧縮をして画像の重さ（容量）を減らすようにしてみてください。
ant2 CMSではサーバーブラウザにアップ後、各画像のメニューボタンから「サイズの変更」を押すと縦横のサイズだけではなく、画質も圧縮させることができます。
見た目はほぼ変わらない程度に画質を少し調整することで、データ容量を軽くする圧縮が行われます。「低画質（80%）」にしてもそこまで画像が汚くなるということはありません。
JPEG以外の画像はサーバーブラウザ上では圧縮ができないため、無料のオンラインツールを使って見た目を変えずに容量だけを約1/5程度まで落とすことができます。
下記は有名な画像を圧縮できる無料のオンラインツールになりますが、日本語に対応しておりUIもわかりやすいので「ILoveIMG」がおすすめです。
WEBサイトにおいて、画像は単なる「飾り」ではなく、見た目・表示速度・ユーザーの見やすさに大きく影響する「強力な武器」です。
今回ご紹介した内容を振り返ると、押さえておきたいポイントは大きく3つです。
「難しそう…」と感じた方もご安心ください。一度ルールを決めてしまえば、あとの更新はグッと楽になります。
まずは1枚の画像から見直してみませんか？ 小さな積み重ねが、ユーザーにとって見やすく・ストレスのないWEBサイトへの近道です。
