SnapPress SnapPress 無料で始める
By 37Design |

WordPressヘッダー画像の最適サイズと作り方【テーマ別・モバイル対応】(2026年版)

WordPressのヘッダー画像は「テーマ別の推奨サイズに合わせる」「ファイル容量を200KB以下に抑える」の2点を守れば失敗しません。迷ったら1920×600px、ファイル容量200KB以下、形式はWebPかJPEGを目安にしてください。

この記事ではテーマ別の推奨サイズ、レスポンシブ最適化、iPhone写真からヘッダーを作る手順、Core Web Vitals (LCP) を悪化させないコツまでまとめました。

ヘッダー画像とは・なぜサイズが重要か

ヘッダー画像はサイトの第一印象を決める要素です。同時に、ページで最初に表示される大きな画像なので、Core Web Vitalsの LCP (Largest Contentful Paint) スコアに直結します。

LCPは2.5秒以下が「Good」、4秒以上で「Poor」と判定されます。Googleはこのスコアを検索順位の判定要因に含めています。つまり、ヘッダー画像が重いと表示が遅くなり、検索順位にも響きます。

サイズが重要な3つの理由

  • 表示速度: ファイル容量が大きいほどLCPが悪化。検索順位とユーザー体験に直結
  • レイアウトシフト (CLS): 画像サイズを指定していないと、読み込み時にレイアウトがガタつく
  • 視覚的な品質: 小さい画像を引き伸ばすとぼやける、大きすぎる画像はデバイスで切れる

テーマ別の推奨サイズ早見表

主要テーマの推奨ヘッダー画像サイズをまとめました。実装前にこの表で当たりを付けると無駄なリサイズを減らせます。

テーマ 推奨サイズ アスペクト比 備考
Twenty Twenty-Four (公式) 1920×400px 4.8:1 スリムな横長
Cocoon 2000×500px 4:1 余裕を持って大きめ
SWELL 1600×400px 4:1 PC/SP別画像が指定可能
Astra 1920×500px 3.84:1 カスタマイズ自由度高い
Lightning 1500×400px 3.75:1 軽量重視
JIN:R 1920×600px 3.2:1 少し縦長
SANGO 1920×500px 3.84:1 柔らかいデザイン向け
Kadence 1920×500px 3.84:1 海外製、軽量

迷ったら1920×600pxで作る

テーマを乗り換える可能性がある、または将来の拡張に備えたい場合は、1920×600px (アスペクト比 約3.2:1) で作っておけばだいたい収まります。横長すぎず縦長すぎず、CSSの object-fit: cover で各テーマのトリミングに対応できます。

テーマの正確な推奨を確認する方法

  1. 管理画面 → 外観 → カスタマイズ → ヘッダー画像
  2. 「画像を追加」をクリックすると推奨サイズが表示される
  3. テーマ公式ドキュメントの「カスタマイズ」項目を確認
  4. テーマのデモサイトの画像を開発者ツールで右クリック → 「検証」で寸法を確認

レスポンシブ最適化 (デスクトップ / タブレット / モバイル)

2026年のWordPressサイトは閲覧の7割以上がスマホです。デスクトップ用のヘッダーをそのままモバイルに出すと、人物の顔が切れたり、テキストが読めなくなったりします。

デバイス別の表示領域

デバイス 表示幅 (目安) 推奨ヘッダーサイズ
デスクトップ (PC) 1200〜1920px 1920×600px
タブレット (iPad) 768〜1024px 1200×500px (PC用を縮小)
スマホ (iPhone) 375〜428px 800×600px (縦長気味)

テーマ機能で別画像を出す

SWELL、JIN:R、SANGOなどの国産テーマは管理画面で「PC用ヘッダー画像」「スマホ用ヘッダー画像」を別々に指定できます。最初からテーマ機能で対応する方が、CSSをいじるより圧倒的に楽です。

CSSメディアクエリで切り替える

テーマが別画像に対応していない場合は、追加CSSで切り替えます。 

<style>
.site-header {
  background-image: url('/wp-content/uploads/2026/05/header-pc.jpg');
  background-size: cover;
  background-position: center;
  height: 600px;
}
@media (max-width: 768px) {
  .site-header {
    background-image: url('/wp-content/uploads/2026/05/header-mobile.jpg');
    height: 400px;
  }
}
</style>

重要な要素を中央に配置する

レスポンシブでトリミングされる前提なら、ロゴ・文字・人物の顔などの重要要素は中央60〜70%のエリアに配置してください。端っこに置くと、モバイルで確実に切れます。

iPhoneで撮った写真をヘッダーに使う方法

プロカメラマンを雇わなくても、iPhoneで撮った写真は十分ヘッダーに使えます。ただし、そのまま上げるのではなくいくつかの処理が必要です。

iPhoneのデフォルト撮影サイズ

  • iPhone 14 / 15 / 16: 4032×3024px (アスペクト比 4:3、約2〜4MB)
  • iPhone 16 Pro: 8064×6048px (48MP モード時、約8〜12MB)
  • ファイル形式: HEIC (デフォルト) または JPEG (互換性優先設定時)

ヘッダーに使うための加工手順

  1. 横長にトリミング: 標準「写真」アプリで編集 → トリミング → アスペクト比 → 16:9 または カスタムで 1920×600 に近い比率
  2. HEIC → JPEG変換: Macに転送すると自動変換。iPhoneだけで完結したいなら「ショートカット」アプリで一括変換
  3. リサイズ: 4032×3024pxは大きすぎるので、1920×600pxに縮小
  4. 圧縮: 品質80〜85%でJPEG書き出し。ファイルサイズ200KB以下が目安
  5. WordPressにアップロード: 外観 → カスタマイズ → ヘッダー画像 → 画像を追加

HEICで詰まりがちなポイント

HEICはWordPress 6.7で標準対応されましたが、共有レンタルサーバーの古いPHP環境ではまだサムネイル生成が走りません。「画像はアップできたけどヘッダーに表示されない」場合、HEICが原因の可能性が高いです。詳細は WordPressでHEICがアップロードできない時の対処法 で解説しています。

セキュリティエラーで弾かれた場合

「このファイル形式はセキュリティ上の理由でアップロードできません」と出る時は、HEIC以外の形式 (PNGなど特殊形式) でも起こります。原因と回避法は WordPressで「セキュリティ上の理由でアップロードできません」が出た時の対処法 にまとめています。

画像最適化のコツ (WebP, AVIF, 圧縮)

2026年現在、ヘッダー画像はWebPまたはAVIF形式で配信するのが標準です。JPEGより30〜50%軽くなり、画質はほぼ同じです。

形式別の特徴

形式 圧縮率 ブラウザ対応 推奨度
AVIF 最高 (JPEGの50%) 主要ブラウザ対応 (2024年〜) 2026年の本命
WebP 高 (JPEGの70%) 主要ブラウザ全対応 安全策として推奨
JPEG 標準 全ブラウザ対応 フォールバック用
PNG 低 (ヘッダー用途には重い) 全ブラウザ対応 ヘッダーには非推奨

自動最適化プラグイン

  • EWWW Image Optimizer: 無料でWebP自動変換。ヘッダー画像にも適用
  • Converter for Media: WebP・AVIF両対応。ブラウザ判定で最適形式を配信
  • ShortPixel: 有料。AVIF対応で圧縮率最高
  • Smush: 一括処理が強力

目標ファイルサイズ: 200KB以下

ヘッダー画像は1枚で200KB以下が目安、理想は100KB前後です。これを超えるとLCPに直結して悪化します。3G回線の海外ユーザーや古いスマホでの表示も視野に入れるなら、もう一段絞って150KB以下がおすすめです。

ヘッダー画像の差し替え方法 (テーマカスタマイザー)

実際の差し替え手順は、ほとんどのテーマで共通です。

共通の手順

  1. 管理画面 → 外観 → カスタマイズ
  2. 「ヘッダー画像」または「ヘッダーメディア」を選択
  3. 「画像を選択」をクリック
  4. メディアライブラリから選ぶか、新規アップロード
  5. 右側のプレビューで確認
  6. 「公開」をクリック

テーマ独自の設定がある場合

  • SWELL: カスタマイザー → ヘッダー → ヘッダーロゴ画像 と キービジュアル画像を分けて設定
  • Cocoon: Cocoon設定 → ヘッダー → ヘッダー画像 で詳細設定
  • JIN:R: カスタマイザー → トップページ → メインビジュアル設定

動画ヘッダーへの応用

ヘッダーを画像ではなく動画にするケースも増えています。インパクトが強い反面、適切に圧縮しないと表示が重くなります。

動画ヘッダーの推奨仕様

  • 形式: MP4 (H.264 コーデック)
  • 解像度: 1920×1080 または 1280×720
  • 長さ: 10〜15秒のループ
  • ファイルサイズ: 5〜10MB以下
  • 音声: 無音 (autoplay制約のため必須)

実装の注意点

  • autoplay muted loop playsinline の4属性が必須 (モバイルでも自動再生させるため)
  • モバイル向けにフォールバック画像を用意 (データ通信節約)
  • 「お問い合わせLPなど明確な狙いがあるとき以外は画像で十分」というのが2026年のトレンド

iPhone から SnapPress でアップロード時に最適サイズに圧縮するコツ

ヘッダーに使う1枚の画像を作るためだけに、Macに転送 → トリミング → 形式変換 → 圧縮 → WordPressへアップ、と毎回やるのは正直しんどいです。

SnapPress はiPhoneからWordPressに写真を一括アップロードするアプリですが、ヘッダー画像の準備にも使えます。

  • 3段階の画質プリセット: 「中」を選べばWeb掲載向けの幅1200px〜1920pxに自動調整。ヘッダー画像にちょうど合う
  • HEIC → JPEG自動変換: iPhone標準のHEIC形式を、WordPressが扱えるJPEGに自動変換
  • ファイルサイズ自動圧縮: 各画質プリセットでファイル容量を200KB以下に抑える設定がデフォルト
  • WordPress REST APIで直接送信: ブラウザ依存のプラグイン競合を避ける
  • 送信後すぐカスタマイザーで指定可能: メディアライブラリに即反映されるので、外観 → カスタマイズ → ヘッダー画像 から選ぶだけ

撮影 → SnapPressで送信 → カスタマイザーで指定、の3ステップで完結します。

ヘッダー画像でやりがちな失敗

失敗1: 4032×3024pxのiPhone写真をそのままアップ

ファイルサイズ2〜4MBがそのままヘッダーに使われ、LCPが3秒以上に悪化。Lighthouseスコアが30点以上下がるケースもあります。必ず1920px以下にリサイズしてからアップしてください。

失敗2: 文字を画像に焼き込んでいる

ヘッダー画像にキャッチコピーを焼き込むと、テキスト検索でヒットしないだけでなく、画像が圧縮された時に文字が滲みます。テキストはHTMLで重ねるのが2026年のベストプラクティスです。

失敗3: モバイルでの見え方を確認していない

PCのカスタマイザープレビューだけで判断すると、モバイルで人物の顔が切れているのに気付かないことがあります。スマホ実機、またはChromeのモバイルエミュレーターで必ず確認してください。

失敗4: 画像のwidth / height属性を指定していない

width / heightがないと、画像が読み込まれた瞬間にレイアウトシフト (CLS) が発生します。テーマが自動で指定してくれることがほとんどですが、独自実装する場合は必ず属性を付けてください。

失敗5: 画像の縦横比がテーマと違う

縦長の写真を横長ヘッダーに使うと、上下が大きく切れて意図しない部分が表示されます。最初からテーマの推奨アスペクト比に合わせてトリミングしてください。

よくある質問

ヘッダー画像とアイキャッチ画像は何が違う?

ヘッダー画像はサイト全体の上部に出る画像。アイキャッチ画像は各記事の代表画像。用途も推奨サイズも違います。アイキャッチの最適サイズは WordPressアイキャッチ画像のサイズは1200×630pxが基本 でまとめています。

ヘッダー画像を複数枚ローテーションさせたい

WordPress標準機能で複数枚アップロードして「ランダム」表示できます。カスタマイザー → ヘッダー画像 → 「現在表示中のすべてのヘッダー画像」でアップロード済み画像の中からランダムに表示する設定が可能です。テーマによっては独自のスライダー機能もあります。

ヘッダー画像の上にテキストを重ねたい

多くのテーマには「キャッチコピー」「サイトの説明」を画像の上に表示する機能があります。テーマがなければ、追加CSSで .site-title { position: absolute; top: 30%; left: 10%; color: white; } のように重ねます。文字の可読性のため、画像に半透明の黒オーバーレイを乗せると見やすいです。

WordPress.comでもヘッダー画像は変更できる?

無料プランでも変更可能ですが、テーマによって自由度が違います。ビジネスプラン以上ならカスタムCSSが使えて、自前画像の表示もより柔軟になります。

ヘッダー画像が表示されない

まず「カスタマイザー → ヘッダー画像」で正しく設定されているか確認。次に wp-content/uploads のパーミッション (755) と、画像URLが正しいか (HTTPSサイトでHTTP画像を読み込んでいないか) をチェックします。それでも直らない場合は、HEIC形式のままアップロードしていないか確認してください。

ヘッダー画像のサイズ変更がうまくいかない

テーマCSSが width: 100% !important で上書きしている可能性が高いです。詳しい原因と対処は WordPressで画像サイズを変更できない時の原因と解決法10選 にまとめています。

iPhone写真をヘッダーに最適化してアップロードしたい方へ

SnapPressなら、iPhoneで撮影した写真をHEIC→JPEG自動変換、自動リサイズ、200KB以下に自動圧縮してWordPressメディアライブラリに送信。撮影 → 送信 → ヘッダー指定が3ステップで完結します。買い切り¥500、サブスクなし。

SnapPressを見る