WebサイトやECサイト、ブログ、SNSでは、用途ごとに推奨サイズや比率が異なります。そこで、表示崩れ・トリミング・自動縮小を確認できる無料のテスト用PNG画像をまとめました。
すべての画像に「LeveLiving TEST IMAGE」、ピクセル数、用途、比率を表示し、背景色も変えています。PCとスマートフォンの比較やCMSのアップロード試験にご利用ください。
テスト用画像のサイズ早見表
| 用途 | 画像サイズ | 比率 | 形式 | 容量 |
|---|---|---|---|---|
| EC-CUBEスライダー・高解像度 | 2180 × 926 px | 約2.35:1 | PNG | 約1.54 MB |
| EC-CUBEスライダー・表示基準 | 1090 × 463 px | 約2.35:1 | PNG | 約469 KB |
| ブログ本文・アイキャッチ | 1200 × 675 px | 16:9 | PNG | 約716 KB |
| ブログギャラリー 1 | 1200 × 1200 px | 1:1 | PNG | 約1.14 MB |
| ブログギャラリー 2 | 1200 × 1200 px | 1:1 | PNG | 約1.16 MB |
| OGP・SNSシェア | 1200 × 630 px | 約1.91:1 | PNG | 約694 KB |
| SNSプロフィール | 400 × 400 px | 1:1 | PNG | 約168 KB |
| Xヘッダー | 1500 × 500 px | 3:1 | PNG | 約660 KB |
結論：2180 × 926 pxは汎用スライダーの共通規格ではありません。EC-CUBEのトップスライダーで使われる1090 × 463 pxと同じ比率の2倍画像として整理するのが自然です。一般的なスライダーはテーマや表示領域によって比率が変わるため、実装側の指定を優先してください。
EC-CUBEスライダー用テスト画像
EC-CUBE 4の初期デザインでは、PC側の表示幅として1090 × 463 pxが目安になります。2180 × 926 pxは縦横2倍の高解像度版なので、高密度ディスプレイや圧縮後の画質も確認できます。レスポンシブ表示では端末幅に応じて縮小・トリミングされることがあります。
高解像度：2180 × 926 px
表示基準：1090 × 463 px
ブログ本文・アイキャッチ用：1200 × 675 px
LeveLivingの投稿画面で推奨されている1200 × 675 px（16:9）のテスト画像です。記事本文、アイキャッチ、一覧サムネイルの切り抜き確認に使えます。Google Discoverでも大きな画像には幅1200 px以上が推奨されています。
ブログギャラリー用：1200 × 1200 px
WordPressのギャラリーブロックには、全サイト共通の必須ピクセル数はありません。列数、表示幅、テーマ、切り抜き設定で見え方が変わります。比較しやすい正方形1200 × 1200 pxを、実用的なテストサイズとして2枚用意しました。
OGP・SNSシェア用：1200 × 630 px
記事URLをX、Facebook、チャットで共有した際のカード表示確認に使います。1200 × 630 pxはOGP画像で広く使われる実用サイズです。サービス側の切り抜きを考慮し、重要な要素は中央寄りに配置します。
SNSプロフィール画像：400 × 400 px
Xが案内するプロフィール画像サイズは400 × 400 pxです。Facebookも高品質表示には少なくとも320 × 320 pxを案内しているため、400 × 400 pxは複数SNSの確認に使いやすいサイズです。円形トリミングを想定したガイドも入れています。
Xヘッダー画像：1500 × 500 px
X公式ヘルプが案内するヘッダー画像サイズは1500 × 500 pxです。端末や画面幅によって切り抜かれるため、重要な文字は中央の安全範囲へ配置します。画像には確認用ガイド線を入れています。
用途ごとの選び方
- EC-CUBE：表示基準は1090 × 463 px。画質優先なら2180 × 926 px。
- 一般的なスライダー：共通サイズはないため、コンテナの比率とテーマ設定を確認。
- ブログ本文・アイキャッチ：LeveLivingでは1200 × 675 pxを基準に。
- ブログギャラリー：固定サイズはない。正方形比較には1200 × 1200 pxが便利。
- SNS：横長カードは1200 × 630 px、プロフィールは400 × 400 px。
確認ポイント
- 指定サイズのままアップロードできるか確認します。
- 中央のサイズ表記と四隅のラベルが切れていないか確認します。
- PC、タブレット、スマートフォンで表示を切り替えます。
- 自動圧縮、WebP変換、サムネイル生成後の画質と容量を比較します。
- ギャラリーやSNSでの正方形・円形・横長トリミングを確認します。
よくある質問
一般的なスライダーも2180 × 926 pxでよいですか？
同じ比率で設計されたスライダーなら使えますが、すべてに共通するサイズではありません。WordPressテーマ、ECサイト、LPごとに表示領域が違うため、実際のコンテナ比率を確認してください。
ブログ画像は通常とギャラリーで分けるべきですか？
分けるとテストしやすくなります。本文・アイキャッチは16:9、ギャラリーは1:1のように比率を変えると、テーマ側のトリミングや余白の差を確認できます。ただしWordPress自体に特定のギャラリー必須サイズはありません。
参考資料
- EC-CUBE 4：TOPページの編集
- WordPress公式：Gallery block
- WordPress：Responsive Images
- Google検索セントラル：Discover
- Xヘルプ：プロフィールのカスタマイズ
用途に合った画像をダウンロードし、実際の管理画面で表示幅、比率、切り抜き位置を確認してください。今後もWeb制作やシステム開発で使いやすいテストサイズを追加していきます。
