ホームページ制作でよく使う画像サイズまとめ（参考）
ホームページ制作でよく使用する画像サイズを、まとめて一覧にしています。
案件によって最適なサイズは変わるため、ここでは「迷ったときにこれを使えば大きな崩れは起きない」という“参考値”としてご覧ください。
実際の制作では、写真の構図やデザインに合わせて臨機応変に調整しています。
| 種類 | 推奨サイズ | 備考 |
|---|---|---|
| アイキャッチ画像 | 1200 × 630 | SNS・SWELLに最適な1.91:1 |
| OG画像 | 1200 × 630 | 全ページ共通OGに使用可能 |
| サイトロゴ（ヘッダー） | 1600 × 360 | 透過PNG推奨 |
| ファビコン | 512 × 512 | WordPressが自動生成 |
| ヒーロー画像（PC） | 1600 × 900 | SWELLで崩れにくい比率 |
| ヒーロー画像（スマホ） | 1080 × 1920 | 縦長で切れにくい |
| カテゴリーアイキャッチ | 1200 × 630 | 統一感が出る |
| バナー画像 | 600 × 300 | 誘導バナーに最適 |
| 吹き出しアイコン | 96 × 96 | SWELL推奨サイズ |
| 公式LINEリッチメニュー | 2500 × 1686 | 公式推奨サイズ |
| 公式LINEクーポン | 640 × 640 または 1000 × 665 | 正方形だとシェアした時に上下が切れる |
| 公式LINEショップカード | 1920×960 | トリミングできるのでピッタリでなくてもOK |
| Googleフォーム | 1600 × 400 | 縦横比は「4:1」 |
デザインによっては、ぎりぎりの端にマスコットや文字を配置する場合もあります。
かならずこのサイズ、というわけではありません。実装してみて、「あ、もうちょっと右か。」など、試行錯誤しつつ、臨機応変に対応していきましょう。
なぜこのサイズなのか？
ホームページの画像は、すべてのPC・スマホで「完全に同じ表示」にすることはまず無理です。そのため当事務所では、「もっとも崩れにくい標準サイズ」 を基準にして制作しています。
理由①：PCは表示領域がユーザーごとに違う
PCは以下のような要素で表示領域が大きく変わります。
- ブックマークバーの有無
- ブラウザを全画面表示しているかどうか
- Chrome / Safari / Edge などブラウザの違い
- 画面の拡大率（100% / 125% / 150%）
- モニター解像度の違い
このため、PCでは左右または上下が切れて表示されることがあり、これは各個人のPCの表示設定に由来するものもありますので、全員に同じ画面を見せることはできません。
理由②：スマホは機種差と文字サイズ設定で大きく変わる
スマホは画面比率が端末ごとに異なるうえ、文字サイズ設定によって改行・行間が大きく変わります。
- iPhoneとAndroidで比率が違う
- 表示サイズを拡大しているユーザーも
- 老眼の方は「文字サイズ：大」を使用することがある
結果として、スマホは上下が切れやすく、改行位置もユーザーごとに異なるため、画像がどこから始まるかは人それぞれになってしまいます。
理由③：推奨サイズを使いつつ20％の“安全マージン”を念頭に
画像の端は切れやすいため、上下左右20％のマージンを確保してデザインすると切れにくいです。重要な文字やロゴは、画像中央60％以内に配置するとよいでしょう。
マージンは必要ですが、情報が多くて書ききれない場合もあります。
そんな時は何度か実装して「このくらいで切れる」を確認しながら整形していきます。
特に、「メインビジュアル」は、ヘッダーの背景を透過にする場合としない場合で見え方が違います。
機種による見え方が違うことを加味して、「メインビジュアルの一番下の色」を背景色に合わせてグラデーションする等で、違和感のある切れ目がないように作っています。
まとめ
画像の見え方はユーザーの環境によって大きく変わるため、完全に同じ表示に揃えることはできません。そのため、
- 崩れにくい標準サイズを採用
- 上下左右20％の安全マージンを確保
- 重要な要素は中央60％に配置
を念頭に作成していけば、文字切れしにくいです。
最終的には実装後に確認しましょう。
コメント