はじめに
「画像サイズって結局どれにすればいいの？」「大きすぎても小さすぎても不安…」と手が止まっていませんか。Webサイトの画像サイズは、最初に“どこで使う画像なのか”を一つ決めるだけで、ぐっと選びやすくなります。
まず、ブログ本文の中に入れる画像なのか、記事一覧に表示されるアイキャッチ画像なのか、それとも画面いっぱいに広げて見せるメインビジュアルなのかをはっきりさせてみてください。使い道が決まると、必要な横幅の目安も自然に絞られてきます。
次に確認するのは、横幅のピクセル数です。たとえば本文用なら横に広がりすぎていないか、アイキャッチなら一覧で並んだときにぼやけて見えないかを、実際の表示画面でチェックします。そのうえで、画像をアップロードしたあとにページの表示速度が遅くなっていないか、ファイル容量が大きくなりすぎていないかも確認します。
このように、使い道を決めてから横幅を選び、最後に表示と容量を確かめる、という順番で見ていけば大丈夫です。ひとつずつ確かめていけば、「これでいいのかな」と迷い続けずに、その場で自分のサイトに合うサイズを決められます。
webサイトで使う画像は何に使う？
webサイトで使う画像は、どこに表示するかによって役割が変わります。文章の理解を助けるために本文中へ入れるのか、記事一覧やSNSで目を止めるために使うのか、それともページを開いた瞬間に印象を決める上部の大きな画像として使うのかで、選び方もサイズも構図も変わります。まずは、どの用途で使う画像なのかをはっきりさせます。
用途① ブログ記事内に入れる画像
ブログ記事内に入れる画像は、本文で説明している内容を視覚で補足するために使います。たとえば手順を解説している場合は、1工程ごとに対応する画像を直下に配置し、縦横1200px以上のサイズで横幅いっぱいに表示させます。
文章だけでは位置や形が伝わりにくい部分を、実際の画面や実物の写真で示すことで、読者がスクロールを止めて確認できます。1,500文字ごとに1枚を目安に差し込み、画像の直前に内容を説明する一文を置くと、読者は何を見る画像かを理解した状態で確認できます。画像は装飾ではなく、本文で説明している具体的な対象や手順をそのまま示す目的で使います。
用途② 記事一覧やSNSで表示されるアイキャッチ画像
記事一覧やSNSで表示されるアイキャッチ画像は、一覧画面でスクロールしている読者の指を止めるために使います。横1200px×縦630pxの比率で作成し、中央に20〜30文字以内のタイトルを配置し、スマートフォン表示でも文字が切れないよう上下左右に100px以上の余白を取ります。
記事一覧では1画面に3〜6枚が並ぶため、背景色や文字色を他の記事と明確に変えないと視認されません。SNSでは投稿一覧に正方形や横長で表示されるため、縮小表示でも読める太さのフォントを使用します。本文の内容を1枚で要約し、何の記事かを0.5秒以内に判断できる状態にする目的で使います。
用途③ 画面上部に大きく表示するファーストビュー画像
画面上部に大きく表示するファーストビュー画像は、ページを開いた直後の0.3秒で「何のページか」を判断させるために使います。横1920px×縦800px前後で作成し、スマートフォンでは縦600〜800pxの範囲に収まるよう中央に主題を配置します。ページタイトルは画像上に30文字以内で重ね、文字の下に黒の半透明レイヤーを50％程度かけて可読性を確保します。
スクロールせずに見える範囲に主題・対象・目的の3要素を収めることで、訪問者が戻るボタンを押す前に内容を理解できます。この画像は装飾ではなく、ページの内容を一瞬で伝え、離脱を防ぐために使います。
用途別：webサイトで使う画像の目安のサイズ
用途ごとに画像の役割が違うなら、適切なサイズも変わります。ブログ本文に挿入する画像、記事一覧やSNSで表示されるアイキャッチ・OGP画像、画面いっぱいに表示する全幅のメインビジュアルでは、横幅・縦横比・解像度の基準がそれぞれ異なります。ここでは、用途別に具体的な目安サイズを整理します。
ブログ本文画像の目安サイズ
ブログ本文画像の目安サイズは、横幅1200px以上を基準にします。記事の表示幅が800〜1000pxの場合でも、解像度を2倍で書き出しておくと拡大表示や高解像度端末でぼやけません。縦横比は4:3または3:2にそろえ、縦は800〜900px以内に収めると1画面内に文章と画像が同時に表示されます。
ファイル容量は1枚あたり300KB以下に圧縮し、JPEG形式で画質80％前後に設定します。横幅が800px未満だと拡大時に文字や細部がつぶれるため、最初から1200px以上で用意します。
アイキャッチ・OGP画像の目安サイズ
アイキャッチ・OGP画像の目安サイズは、横1200px×縦630pxを基準にします。横幅1200px未満だとSNSで拡大表示されたときに画質が荒れるため、最初からこのサイズで作成します。縦横比は1.91:1に固定し、上下左右に100px以上の余白を確保して中央に主要テキストを配置します。
文字サイズは縮小表示でも読めるよう、最低でも高さ80px以上で設定します。ファイル容量は500KB以下に圧縮し、JPEG形式で画質80％前後に調整します。規定サイズに合わせておくことで、記事一覧やSNS共有時に自動トリミングされず、意図した構図のまま表示されます。
全幅・メインビジュアルの目安サイズ
全幅・メインビジュアルの目安サイズは、横1920pxを基準にします。横幅が1440px未満だと大型モニターで左右に余白が出るため、最初から1920pxで書き出します。縦は600〜900pxの範囲に収め、ファーストビューでスクロールせずに主題が見える高さに調整します。
重要な被写体や文字は中央の横1200px以内に配置し、左右240pxずつは切り落とされても支障がない構図にします。ファイル容量は800KB以下に圧縮し、JPEG形式で画質70〜80％に設定します。このサイズで用意することで、PCの全幅表示でも拡大処理が発生せず、画質低下を防げます。
webサイトで使う画像はスマホ表示がメイン？
webサイト用の画像サイズを決めるときは、まず閲覧環境の割合を基準にします。アクセス解析でスマホ閲覧が過半数か、PC閲覧が中心かによって、最適な横幅の目安は変わります。先にどちらの比率が高いかを確認してから、作成サイズを決めます。
スマホ閲覧が多いなら横幅1000px前後で作る
スマホ閲覧が全体の60％以上を占めているなら、画像は横幅1000px前後で作成します。スマートフォンの表示幅は約375〜430pxのため、2倍解像度で書き出すと高解像度端末でもぼやけません。横1000pxであれば縮小表示時に文字や細部がつぶれにくく、ファイル容量も300KB前後に抑えやすくなります。
横1200px以上で作ると容量が増え読み込み速度が下がるため、スマホ中心のサイトでは1000px前後に調整します。スマホ比率が高い場合は、PC基準ではなくスマホ表示を前提に横幅を決めます。
PC閲覧が多いなら横幅1200〜1600pxで作る
PC閲覧が全体の50％以上を占めているなら、画像は横幅1200〜1600pxで作成します。一般的な記事表示幅は1000〜1200pxのため、実寸より1.2〜1.5倍の解像度で書き出すと拡大表示や高解像度モニターでも輪郭がぼやけません。
横幅1200px未満だと大型モニターで表示されたときに拡大処理が入り、文字や線がにじみます。横1600pxを超えると1枚あたりの容量が500KB以上になりやすく、読み込み速度が落ちます。PC比率が高い場合は表示幅に合わせて1200〜1600pxの範囲で設定します。
webサイトで使う画像の容量と形式はどうすればいい？
画像はサイズだけでなく、容量と保存形式も表示速度に直結します。横幅を整えても、1枚あたりのデータ容量が大きすぎると読み込みに時間がかかりますし、用途に合わない形式で保存すると画質や表示速度に影響が出ます。ここでは、具体的な容量の目安と写真に適した保存形式を整理します。
1枚あたり200KB前後に抑える
1枚あたりの容量は200KB前後に抑えます。1記事に10枚入れる場合、合計で2MBを超えると4G回線では表示完了まで3秒以上かかり、途中で離脱されやすくなります。
横幅1200pxの画像ならJPEG形式で画質70〜80％に設定すると200KB前後に収まります。PNGで保存すると同サイズでも500KBを超えやすいため、写真はJPEGを使います。書き出し後に実際のファイルサイズを確認し、250KBを超えている場合は再圧縮して200KB前後まで下げます。
写真はJPEGまたはWebPで保存する
写真はJPEGまたはWebPで保存します。横幅1200pxの写真をそのままPNGで保存すると500KB〜1MBになることが多く、読み込みに時間がかかります。
JPEGなら画質70〜80％に設定すると200〜300KB前後に収まり、表示速度を維持できます。さらに容量を下げたい場合はWebP形式で書き出すと、同じ見た目でもJPEGより20〜30％程度軽くなります。写真は色数が多くグラデーションも含むため、圧縮効率の高いJPEGかWebPで保存します。
公開後に画像を確認するポイントは？
画像は作ってアップロードした時点で終わりではありません。公開後に実際の表示画面で確認しないと、OGPで文字が切れていたり、記事一覧で縮小されたときに読めなくなっていたりすることがあります。ここでは、公開後に必ずチェックしておくべき表示ポイントを整理します。
OGPで文字が切れていないか？
公開後は、記事URLをSNSの投稿画面に貼り付けてOGP表示を確認します。横1200px×縦630pxで作成していても、上下左右が自動で数十px切り取られる場合があります。タイトル文字が画像の端から50px以内に配置されていると、縮小表示時に上下が欠けます。
実際にスマートフォン画面で表示し、1行目と最下段の文字が完全に読めるかを目視で確認します。少しでも文字が欠けている場合は、上下左右に100px以上の余白を取って再書き出しします。OGPで文字が切れると記事内容が伝わらないため、公開後に必ず表示確認を行います。
記事一覧で縮小しても読めるか？
公開後は、記事一覧ページをスマートフォンで開き、実際に縮小表示された状態で確認します。一覧では横300〜400px程度に縮小されるため、画像内の文字が高さ40px未満だと読めません。1画面に3〜6枚並ぶ状態で、0.5秒以内に何の記事か判別できるかを目視で確認します。
文字がつぶれている、背景と同化している場合は、フォントを太字にし、文字サイズを80px以上に設定して再作成します。縮小表示で読めない画像はクリックされないため、一覧表示での視認性を基準に確認します。
まとめ
Webサイトの画像サイズは、難しく考えすぎなくて大丈夫です。まず「この画像はどこに使うのか」を1つに決めてから、横幅の基準を選びます。ブログ本文に入れる画像なら横幅1000px前後、アイキャッチ画像なら1200×630、画面いっぱいに見せる全幅デザインなら1600px前後を目安にすると整いやすくなります。
次に、画像の容量を確認します。表示が遅くならないように、1枚あたり200KB前後に抑えることを目標にしてください。写真はJPEGやWebP形式で保存すると、画質を保ちながら容量を軽くできます。最後に、実際に公開してスマホとパソコンの両方で表示をチェックします。文字が読みにくくないか、画像がぼやけていないかを確認できれば安心です。
「どのサイズが正解だろう」と迷ったら、この順番で一つずつ決めていけば大丈夫です。用途を決める → 横幅を選ぶ → 容量を整える → 表示を確認する。この流れで進めれば、あなたのサイトに合った画像サイズを落ち着いて決められます。
