こんにちは、Hodaです。
「画像のサイズなんとなく決めていた」というShopifyストアオーナーは多いです。でも実は画像サイズの選択は、ページの読み込み速度・SEO・モバイルでの表示崩れに直結する重要な判断です。
本記事では、2026年時点の推奨画像サイズを用途別に整理します。ヒーロー画像からロゴ・ファビコン・ブログ画像まで、すぐに使えるチートシートとして活用してください。
まず覚えておきたい基本原則
- 画像の横幅は1280〜1920pxを目安に
- ファイルサイズは200KB以下を維持する
- 解像度は72PPI（ピクセル/インチ）が標準
- よく使うアスペクト比は
16:9（横長）・3:2（標準）・1:1（正方形）
用途別の推奨サイズ一覧（チートシート）
デスクトップの最も一般的な解像度は1920×1080pxです。この解像度を基準にした推奨サイズをまとめます。
| 画像の種類 | 推奨サイズ（幅×高さ） | アスペクト比 |
|---|---|---|
| 背景画像（フルスクリーン） | 1920 × 1080 px | 16:9 |
| ヒーロー画像 | 1280 × 720 px | 16:9 |
| ウェブサイトバナー | 250 × 250 px | 1:1 |
| ブログ画像 | 1200 × 630 px | 3:2 |
| ロゴ（横長） | 250 × 150 px | 3:2 |
| ロゴ（正方形） | 100 × 100 px | 1:1 |
| ファビコン | 48 × 48 px | 1:1 |
| SNSアイコン | 32 × 32 px | 1:1 |
| ライトボックス画像（全画面） | 1100 × 800 px | 16:9 |
| サムネイル | 150 × 150 px | 1:1 |
アスペクト比の使い分け
画像サイズを決める前に、アスペクト比（縦横の比率）を理解しておくとサイズ選択がスムーズになります。
1:1（正方形） ロゴ・アイコン・サムネイル・商品画像に向いています。デスクトップ・モバイルどちらでもクロップなしで収まりやすい万能な比率です。
16:9（横長） ヒーロー画像・背景画像などの大型ビジュアルに使います。現代のデスクトップ・ノートPC画面の標準比率と一致しています。代表的なサイズは1920×1080pxと1280×720pxです。
3:2（標準横長） ブログ記事のアイキャッチ画像によく使われます。レイアウトバランスが取りやすく、代表サイズは1200×630pxです。
9:16（縦長） モバイルのフルスクリーン背景やInstagramストーリー広告に最適です。フルスクリーンサイズは1080×1920pxです。
画像の種類ごとの詳細
ロゴ
透過対応が必要なためPNG形式か最近では Webp形式を推奨します。横長ロゴと正方形ロゴで推奨サイズが異なります。
| 項目 | 推奨値 |
|---|---|
| サイズ（横長） | 250 × 150 px |
| サイズ（正方形） | 160 × 160 px |
| アスペクト比 | 3:2 または 1:1 |
| ファイルサイズ | 200KB以下 |
| 解像度 | 72 PPI |
| 推奨形式 | PNG（透過対応） |
ファビコン
ブラウザのタブに表示される小さなアイコンです。Google Developersは48px以上を推奨していますが、16px・32px・48pxの3サイズを用意しておくと全デバイスで確実に表示されます。
| 項目 | 推奨値 |
|---|---|
| サイズ | 16 × 16 / 32 × 32 / 48 × 48 px |
| アスペクト比 | 1:1 |
| ファイルサイズ | 100KB以下 |
サムネイル
配置場所によってサイズが変わります。一般的なサムネイルは150×150pxですが、商品画像サムネイルの場合は300×300pxも使われます。
| 項目 | 推奨値 |
|---|---|
| サイズ | 150 × 150 px（または300 × 300 px） |
| アスペクト比 | 1:1 |
| ファイルサイズ | 500KB前後（最大2MB） |
バナー
用途によって大きくサイズが異なります。
- 広告バナー（リーダーボード）：728 × 90 px
- モバイルバナー：320 × 50 px
- ミディアムレクタングル：300 × 250 px
- デスクトップ幅広バナー：最大1600 × 500 px
広告プラットフォームごとに規定がある場合はそちらに従ってください。
背景画像（フルスクリーン）
| 項目 | 推奨値 |
|---|---|
| サイズ | 1920 × 1080 px（最大2560 × 1440 px） |
| アスペクト比 | 16:9 |
| ファイルサイズ | 200KB以下 |
| 解像度 | 72 PPI |
ヒーロー画像
ページのファーストビューを飾る最重要ビジュアルです。日本だとトップ画とも呼ばれます。
| 項目 | 推奨値 |
|---|---|
| サイズ | 1280 × 720 px（最大1800px幅まで） |
| アスペクト比 | 16:9 |
| ファイルサイズ | 200KB以下 |
| 解像度 | 72 PPI |
ブログ画像（アイキャッチ）
| 項目 | 推奨値 |
|---|---|
| サイズ | 1200 × 630 px（縦位置は900 × 1200 px） |
| アスペクト比 | 3:2 |
| ファイルサイズ | 100KB以下 |
| 解像度 | 72 PPI |
モバイル向けの推奨サイズ
Shopifyなどのeコマースプラットフォームはレスポンシブデザインを採用しており、アップロードした画像は自動的にモバイル用にリサイズされます。ただしカスタムビルドのサイトや、PageFlyなどで独自レイアウトを組む場合は、モバイル向けサイズを意識しておくと安心です。
| 画像の種類 | モバイル推奨サイズ | アスペクト比 |
|---|---|---|
| 背景画像 | 360 × 640 px | 16:9 |
| ヒーロー画像 | 360 × 200 px | 16:9 |
| バナー | 360 × 120 px | 3:1 |
| ブログ画像 | 360 × 240 px | 3:2 |
| ロゴ（横長） | 160 × 40 px | 4:1 |
| ロゴ（正方形） | 60 × 60 px | 1:1 |
| ファビコン | 16 × 16 px | 1:1 |
| サムネイル | 90 × 90 px | 1:1 |
画像フォーマットの選び方
| フォーマット | 向いている用途 | メリット | デメリット |
|---|---|---|---|
| WebP | ウェブ全般（第一選択） | PNG/JPEGより25〜34%軽量・透過対応 | 古いソフトでは非対応のケースあり |
| JPEG | 写真・商品画像 | 圧縮後のファイルが軽い・互換性高い | 透過不可・劣化圧縮 |
| PNG | ロゴ・透過が必要な画像 | 劣化なし・透過対応 | ファイルが重い |
| GIF | 短いアニメーション | 互換性高い | ファイルが重い |
| SVG | アイコン・イラスト・ロゴ | 拡大しても劣化しない | 複雑な写真には不向き |
基本方針： 写真・商品画像にはWebP、ロゴや透過が必要な素材にはPNGを使い分けるのがシンプルかつ効果的です。
画像最適化のベストプラクティス
サイズを正しく設定するだけでなく、SEOとページ速度のために追加で対応しておきたい項目があります。
圧縮を必ず行う ： アップロード前に画像を圧縮してファイルサイズを削減します。Googleの調査では、ページ読み込み時間が1秒から3秒に伸びただけでバウンス率が32%上昇するというデータがあります。Shopify向けにはTinySEOなどの圧縮ツールが活用できます。
ファイル名を意味のある名前にする ：
IMG_54354.jpg ではなく white-summer-dress.jpg のように、ハイフン区切りで内容を表したファイル名をつけます。検索エンジンはファイル名のテキストを画像の内容理解に使います。
altテキストを具体的に書く ：
black shoe より ブラックレザー 白背景 メンズドレスシューズ のように具体的に記述します。Google画像検索への表示にも、アクセシビリティ対応にも直結します。
画像サイトマップを設定する ： ShopifyはXMLサイトマップに自動で画像タグを追加するため、特別な設定は不要です。
正しいサイズを守ることでページ速度が向上し、直帰率の改善につながる
SEOの観点でも画像の表示速度はGoogleのランキング要因
WebP形式への変換だけでファイルサイズをJPEG/PNG比25〜34%削減できる
レスポンシブ対応のためモバイルでの表示崩れを防げる
画像数が多いストアでは毎回の手動最適化に工数がかかる
テーマやページビルダーによって推奨サイズが異なるため都度確認が必要
画像の最適化は「一度設定したら終わり」ではなく、新しいページや商品を追加するたびに意識すべき運用の基本です。特にShopifyストアの場合は、アップロード前のリサイズ＋WebP変換＋圧縮をルーティン化しておくと、後になってパフォーマンス問題を追いかける手間が大幅に減ります。
関連記事
著者（私が書きました）
- Kajabiパートナー
- 海外SaaSレビュー
- 40+ countries visited
HodaPress
Hoda
フリーランスエンジニア・Webデザイナー · 写真家・動画編集者
フリーランスエンジニア・Webデザイナー。Kajabi・Shopify・Thinkificなどの海外SaaSを中心に、サイト構築や収益化の仕組みづくりを行っています。
WordPress・Next.js・Supabase・Hugoなどを活用したWeb開発から、動画制作・IT翻訳まで幅広く対応するジェネラリストとして活動。実際に海外ツールを活用しながら、個人でのオンラインビジネスやコンテンツ販売にも取り組んでいます。
これまでに40カ国以上を訪問し、カナダ・ポーランド・リトアニア・デンマークなどでの海外生活を経験。リトアニアの大学で国際ビジネスを学んだ後、現在はスペインを拠点に活動しています。
YouTube「HodaPress」では海外SaaSやオンラインビジネスについて発信。noteでは海外移住・ビザ関連の情報も執筆しています。
本サイトでは、実際に使った経験をもとに「日本人にとって使いやすいか」「収益化に繋がるか」という視点でツールをレビューしています。
Jonas R.
海外ツールリサーチ・記事レビュー担当
リトアニア出身。現在は欧州の大手IT企業に勤務し、ソフトウェア開発およびデジタルプロダクト分野で10年以上の実務経験を持つ。
当サイトでは、海外SaaSツールや最新テクノロジーに関する情報収集、英語圏の公式情報の確認、記事内容のレビューを担当。製品アップデートや業界動向の調査を通じて、より正確で信頼性の高い情報提供をサポートしている。