2-4｜画像の基礎知識（サイズ・縦横比・px・形式）

Lesson. 02｜Canva（キャンバ）編

バナー画像用（Web広告など）

主な規格（Google広告やWeb広告でよく使われる）

• 300 × 250 px（レクタングル）
• 728 × 90 px（リーダーボード）
• 336 × 280 px（大レクタングル）
• 160 × 600 px（ワイドスカイスクレイパー）

比率：用途により異なる（横長・縦長・正方形）

バナーは表示領域が限られるので、情報は絞るのが基本です。

インスタグラム用

フィード投稿

• 正方形：1080 × 1080 px（1:1）
• 縦長：1080 × 1350 px（4:5、最もエンゲージメントが高い）
• 横長：1080 × 566 px（1.91:1）

ストーリーズ / リール

1080 × 1920 px（９：16）

基本は1080px幅で作成し、Instagram側で自動圧縮される点も考慮。

YouTubeサムネイル画像

1280 × 720 px（16：９）※YouTube公式推奨

ホームページのヘッダー画像（ファーストビュー）

• 横幅：1920 px（フルHD対応、PC表示で崩れにくい）
• 縦：600〜1000 px程度（デザイン次第）
• 比率：16:9 〜 16:5 が多い

ただしレスポンシブ対応が必須なので、中央部分にメイン要素を配置し、両端はトリミングされても大丈夫なデザインにするのがコツ。

チラシ（印刷物）

A4サイズ：210 × 297 mm（縦長が基本）

• 印刷用解像度：300dpi
• px換算：約 2480 × 3508 px

B5サイズ：182 × 257 mm

• px換算：約 2150 × 3035 px

余白には「塗り足し（3mm程度）」をつける必要があります。

名刺

• 日本標準サイズ：91 × 55 mm
• 余白：裁ち落としを考えて、上下左右に3mmの塗り足しを追加
• 文字やロゴは端から3〜5mm内側に配置すると安心です。

用途別のサイズ・比率

用途	サイズ（px）	比率	解像度
バナー（広告）	300×250 / 728×90 / 160×600 など	横長・縦長・正方形	72dpi
Instagramフィード	1080×1080（1:1） / 1080×1350（4:5） / 1080×566（1.91:1）	正方形・縦長・横長	72dpi
Instagramストーリーズ / リール	1080×1920	9:16	72dpi
ホームページヘッダー	1920×600〜1000	16:9前後	72dpi
チラシ（A4）	2480×3508	縦長	300dpi
名刺	1074×650	横長（約5:3）	300dpi

「JPEG」「PNG」などのファイル形式（拡張子）

代表的な画像形式を解説

JPEG（.jpg / .jpeg）

読み方：ジェイペグ

特徴

• 写真に強い形式（風景・人物・商品写真など）
• フルカラー（1670万色以上）対応
• 非可逆圧縮：保存時にデータを圧縮して軽くするが、画質は少し劣化

メリット

• ファイルサイズが小さく、Web表示に向いている
• 写真系の画像に最適

デメリット

• 繰り返し保存すると劣化する
• 透過処理（背景を透明にすること）ができない

おすすめ用途

写真、SNS投稿、バナー、Webページ全般

PNG（.png）

読み方：ピング

特徴

• 可逆圧縮：保存しても劣化しない
• 透過処理が可能（背景を透明にできる）
• フルカラー対応（PNG-24）＋軽量版（PNG-8）もある

メリット

• 背景透過に対応しており、ロゴやアイコンに最適
• 文字やイラストなど「くっきりした線」がある画像に強い

デメリット

JPEGよりファイルサイズが大きくなりがち

おすすめ用途

ロゴ、アイコン、イラスト、背景透過が必要な画像

WebP（.webp）｜

読み方：ウェッピー

特徴

• Googleが開発した新しい画像形式
• JPEGより軽いのに高画質
• 透過もアニメーションも対応（PNGやGIFの代わりにもなる）

メリット

• Web表示で高速化できる（SEOにも有利）
• JPEGとPNGのいいとこ取り

デメリット

• 古いブラウザでは非対応の場合がある（ただし現在はほぼ普及済み）
• 印刷用途には向かない

おすすめ用途

Webサイト画像全般、ブログ記事、EC商品画像

その他の代表的形式（補足）

• GIF：256色制限、アニメーション対応、シンプルな動きに使う
• SVG：ベクター形式、ロゴやアイコンに最適（拡大縮小しても劣化しない）
• TIFF：印刷業界で多用、高解像度だが容量が大きい

まとめ（おすすめの使い分け）

• 写真 → JPEG（軽くてきれい）
• ロゴ・アイコン・透過が必要な画像 → PNG
• Webサイト高速化を意識 → WebP
• アニメーション → GIF or WebP
• 印刷 → TIFF / 高解像度PNG

実務では最近、「WebP（Web用）」＋「PNG（透過や印刷用）」＋「JPEG（互換性や写真用）」 を使い分けるのが主流です。