WordPressサイトなら、15分以内にヒーロー画像を追加でき、追加のコーディングなしでモバイルでも正しく表示されます。
ヒーロー画像は、ホームページやランディングページの上部に配置される、テキストとボタンが重ねられた大きなバナーです。訪問者が最初に目にする要素であるため、効果的に設計されていれば、瞬時にメッセージを伝えることができます。
WordPressサイトを初めて始めた頃、ヒーロー画像はデスクトップでは完璧に見えたのに、モバイルでは崩れていました。テキストが重なり合い、重要な部分が切り取られ、レイアウトが乱雑に感じられました。
数十のランディングページを作成する中で、実際に効果的な手法を学びました。このガイドでは、テーマの種類に応じた3つのシンプルな手法をご紹介します。すべてのオプションはモバイル対応で、技術的なスキルは一切不要です。
まずヒーロー画像を準備してください
適切な画像サイズとファイル形式は、レイアウトの崩れや読み込み速度の低下を防ぎます。
ヒーロー画像をアップロードした際、サイズが大きすぎてページの表示速度が極端に遅くなり、痛い目に遭いました。今では必ず画像を事前に準備してからアップロードしています。
ほとんどのテーマには1920×1080ピクセルを使用してください。より短いヒーローセクションを希望する場合は、代わりに1600×900ピクセルを使用してください。TinyPNGを使用してファイルサイズを250KB未満に抑えてください。
| ディメンション | ユースケース |
|---|---|
| 1920×1080ピクセル | 標準フルワイドヒーロー（推奨） |
| 1600×900ピクセル | ヒーローセクションを短く |
写真はJPG形式、テキストを含むグラフィックはPNG形式を使用してください。
テキストを配置できる余白のある画像を選びましょう。暗い画像には明るいテキストが効果的です。経験上、初心者は見出しが読めない美しい画像を選びがちです。今ではテキストが呼吸できる明確な余白のある画像を探しています。
基本が整ったところで、実際にヒーロー画像を追加する方法を見ていきましょう。
方法1: テーマ設定を使用する（クラシックテーマで最も簡単）
多くのWordPressテーマには、プラグインやページビルダーを必要としないヒーローセクションオプションがカスタマイザーに組み込まれています。
既存のテーマがインストールされているプロジェクトで作業する際は、まずこのオプションを確認します。テーマが対応している場合、ヒーロー画像を追加する最も手っ取り早い方法です。
すべてのテーマにこの機能があるわけではありません。表示されない場合は、方法2または3に進んでください。この方法は、テーマが指定するページ（通常はホームページ）でのみ機能します。
ステップ1: WordPressカスタマイザーを開く
WordPressのダッシュボードで、[外観] → [カスタマイズ] に移動してください。
カスタマイザーは新しい画面で開かれ、右側にサイトのプレビューが表示されます。
ステップ2: ヒーローセクションの設定を見つける
「ヒーロー」「ヘッダー」「フロントページ」などのラベルが付いたセクションを探してください。
左側にサイドバーが表示され、様々なカスタマイズオプションが用意されています。ヒーロー設定は「ホームページ設定」や「ヘッダーオプション」といったセクションの下にある可能性があります。
テーマ開発者によってこれらのセクションの名称が異なることに気づいたので、時々少し探さなければならないことがあります。明らかなものが見当たらない場合は、まず「フロントページ」または「ホームページ」セクションを確認してください。
ステップ3: ヒーロー画像をアップロードする
ヒーローセクションオプションをクリックし、画像アップロードボタンを探してください。
「画像を選択」または「アップロード」をクリックし、準備したメイン画像をコンピューターから選択してください。
ステップ4：見出しとボタンテキストを追加する
提供されているテキストフィールドに、見出しを入力してください。
ボタンのテキストと、ボタンがリンクするURLを追加してください。ほとんどのテーマでは、ボタンラベルとリンク先の両方の入力欄が用意されています。
ステップ5: 変更を公開する
カスタマイザーのサイドバー上部にある「公開」ボタンをクリックしてください。
ヒーロー画像がホームページに公開されました。新しいタブでサイトにアクセスしてご確認ください。
方法2: WordPressカバーブロックの使用（ブロックテーマに最適）
カバーブロックは、WordPressブロックエディタの機能であり、プラグインなしで任意のページにテキストオーバーレイ付きのフル幅ヒーロー画像を追加できます。
この方法をよく使うのは、ホームページだけでなくどのページにもヒーロー画像を追加できる柔軟性があるからです。カバーブロックを使ってランディングページを構築した際、各ページに独自のヒーローセクションを設けています。
カバーブロックはデフォルトでモバイル対応になっているため、後でモバイルレイアウトをテストして修正する手間が省けます。
ステップ1: ページエディタを開く
ヒーロー画像を表示したいページに移動し、「編集」をクリックしてください。
ほとんどの人にとって、これがホームページです。WordPressのブロックエディタとページコンテンツが表示されます。
ステップ2：上部にカバーブロックを追加する
ページの一番上にある「+」アイコンをクリックし、「カバー」を検索してください。
検索結果から「表紙」ブロックを選択します。ページの上部にプレースホルダーの表紙ブロックが表示されます。
ステップ3: ヒーロー画像をアップロードする
カバーブロック内の「アップロード」をクリックし、お使いのコンピューターからヒーロー画像を選択してください。
画像はカバーブロックの背景として表示されます。ブロックの中央にはデフォルトのテキストプロンプトが表示されます。
ステップ4：見出しを追加する
カバーブロック内をクリックして、見出しの入力を開始してください。
テキストを見出しに変更するには、ブロックツールバーの段落ドロップダウンをクリックし、「見出し」を選択します。ページ構造に応じてH1またはH2を選択してください。
ステップ5: ボタンブロックを追加する
見出しの後にEnterキーを押して改行し、/buttonと入力して再度Enterキーを押してください。
見出しの下にボタンブロックが表示されます。ボタンを選択すると表示されるツールバーで、ボタンのテキストを入力し、リンク先URLを追加してください。
ステップ6: テキストの色とオーバーレイを調整する
カバーブロックを選択した状態で、画面右側のブロック設定パネルを確認してください。
下にスクロールしてオーバーレイの不透明度スライダーを見つけてください。ドラッグしてテキストの背景を暗くしたり明るくしたりできます。
通常、オーバーレイの不透明度は30%から50%の間で設定し、良好なコントラストを確保します。暗いヒーロー画像を使用する場合は、オーバーレイを薄めに設定することがあります。画像が明るく複雑な場合は、テキストを目立たせるために濃いオーバーレイを追加します。
テキストの色を変更するには、見出しやボタンを選択し、右側のパネルのテキスト設定から色を選んでください。
ステップ7: ページを更新する
右上の「保存」または「更新」ボタンをクリックしてください。その後、ページにアクセスしてヒーロー画像が反映されていることを確認してください。
後からパララックス効果を追加することも可能です（コンテンツがスクロールする間、画像が固定されたままになります）。カバーブロックの設定で「背景を固定」トグルをオンにします。ただし、モバイルでは一部のヒーロー画像が不自然に表示される可能性があるため、私は控えめに使用しています。
方法3：SeedProdのようなページビルダーを使用する（どのテーマでも動作します）
WordPressページビルダーは、ヘロセクションをドラッグ＆ドロップで操作でき、使用しているWordPressテーマに関係なく動作することが多いです。
カバーブロックよりも細かい制御が必要な場合や、ヒーロー設定のないテーマを使用している場合にこの方法を採用します。ライブプレビュー機能により、公開前にスペースや色の表示を正確に確認できます。
SeedProdは、100万以上のウェブサイトに信頼されているドラッグ＆ドロップ式のWordPressサイトビルダーです。コードを一切書かずに、カスタムWordPressテーマ、カスタムランディングページ、カスタムWooCommerceストアを作成できます。
私は自身のサイトで定期的に使用しており、ライブプレビュー機能のおかげで公開後まで気づかなかったスペースの問題を発見できました。この視覚的なフィードバックが多くの時間を節約してくれています。
ステップ1：SeedProdのインストール
まず始めに、WordPressサイトにSeedProdをインストールして有効化してください。基本的なヒーローセクションには無料版でも対応できますが、このガイドではより多くのカスタマイズオプションが利用できるSeedProd Proを使用します。
SeedProdのインストール方法については、以下の手順を参照してください。
ステップ2：新しいランディングページの作成
ダッシュボードで、SeedProd → ランディングページ に移動してください。
「新しいランディングページを追加」ボタンをクリックしてください。ページ名を入力し、テンプレートを選択するよう求める画面が表示されます。
ステップ3：ヒーローセクション付きのテンプレートを選択する
テンプレートを閲覧し、お好みのヒーローセクションレイアウトのものを選んでください。
テンプレートはヒーローセクションが既に構成されているため、設定時間を節約できます。プレースホルダー画像とテキストを自分のものに置き換えるだけです。
私は通常、ゼロから構築するのではなくテンプレートから始めます。最終的にレイアウトを変更することになっても、テンプレートは適切な間隔や要素の階層構造が既に整った確かな出発点を与えてくれます。
使用したいテンプレートのチェックマークアイコンをクリックし、「このテンプレートを使用」をクリックしてください。
ステップ4: ヒーローセクションを編集用に開く
SeedProdビジュアルエディターは、選択したテンプレートを読み込んで起動します。
ページ上部のヒーローセクションをクリックしてください。選択すると、セクションの周囲に色付きのハンドルが表示されます。
ステップ5: ヒーロー画像をアップロードする
左側の設定パネルで、背景設定のセクションを探してください。
既存の画像を選択し、画像アイコンをクリックしてメディアライブラリから画像を選択してください。
画像はヒーローセクションの背景として即座に表示されます。これがライブプレビューが役立つという私の意味するところです。画像が既存のテキストと調和するか、オーバーレイを調整する必要があるかをすぐに確認できます。
ステップ6：見出しとボタンを編集する
ヒーローセクションの見出しテキストをクリックし、新しい見出しを入力してください。
この例では、オプトインフォームブロックをボタンブロックに置き換えます。これを行うには、既存のブロックをゴミ箱アイコンをクリックして削除するだけです。
次に、ブロックサイドバーからボタンブロックをページにドラッグ＆ドロップします。
ステップ7: オーバーレイと色の調整
ヒーローセクションを選択した状態で、左パネルを下にスクロールしてオーバーレイコントロールを探してください。
カスタムオーバーレイカラーを選択し、背景を暗くすることで、テキストやボタンがヒーロー画像からくっきりと浮かび上がります。
テキストのサイズや色を変更するには、見出しやボタンをクリックし、左側のパネルで設定を調整してください。
ステップ8: モバイルでのプレビュー
エディタの下部にあるデバイス切替アイコン（デスクトップ、タブレット、モバイル）をクリックしてください。
モバイル表示に切り替えて、ヒーロー画像がスマートフォン画面でどのように表示されるか確認してください。必要に応じて、モバイル向けにテキストサイズや間隔を調整できます。
公開前には必ずモバイル表示を確認しています。デスクトップで見た目が良くても、必ずしもモバイルで同じようには表示されないからです。見出しが大きすぎて画面からはみ出していたり、ボタンが小さくモバイルではタップしづらいといった問題を発見したことがあります。
ページの残りの部分のカスタマイズに関する完全なガイドについては、WordPressでランディングページを作成する方法に関するチュートリアルをご覧ください。
ステップ9: ページを公開する
ヒーローセクションが完成したら、右上の「保存」をクリックしてください。次に「保存」の横にあるドロップダウン矢印をクリックし、「公開」を選択します。
グラデーションオーバーレイ、パーティクルエフェクト、シェイプディバイダーが必要な場合は、ヒーローセクションの設定で利用可能です。必須ではありませんが、明るい画像上で薄いテキストのコントラストを上げる必要がある際に、私はグラデーションオーバーレイを使用してきました。
ページを公開したら、ブラウザで表示して新しいヒーローセクションが実際に動いている様子を確認してください。
ヒーロー画像のよくある問題のトラブルシューティング
ヒーロー画像の問題の大半は、間違ったサイズ、コントラストの低さ、またはテーマのCSSとの競合に起因します。
これらの問題は全て、いずれかの時点で対処したことがあります。解決方法は以下の通りです。
| 問題 | なぜ起こるのか | 修正方法 |
|---|---|---|
| 画像がぼやけていたり、ピクセル化している | 画像サイズが小さすぎます | 最低1920×1080ピクセルで再アップロードしてください。小さい画像を全幅に拡大すると画質が低下します。 |
| テキストが読みにくい | コントラストが不十分 | ブロックまたはビルダー設定で暗いオーバーレイ（不透明度30～50%）を追加するか、テキストを白に変更してください。 |
| ヒーロー画像は全幅に広がっていません | テーマが幅または配置を設定していない | カバーブロックの設定で全幅配置を有効にしてください。ページビルダーを使用している場合は、セクションを全幅に設定してください。 |
| モバイル端末では画像が変に切り取られる | 焦点が中心から外れている | 被写体を中心にした画像を使用するか、ページビルダーで焦点設定を調整してください。 |
WordPressのヒーロー画像追加に関するよくある質問
WordPressにおけるヒーロー画像の適切なサイズは？
1920×1080ピクセルはほとんどのテーマで機能し、モバイルでも良好に拡大縮小されます。より短いヒーローセクションを希望する場合は、代わりに1600×900ピクセルを使用してください。ページ読み込み速度を低下させないよう、圧縮後のファイルサイズは250KB未満に抑えてください。
画像の代わりに動画をヒーロー背景として使用できますか？
はい、カバーブロックとほとんどのページビルダーは動画背景をサポートしています。動画ファイルは5MB未満に抑え、モバイルユーザー向けに必ず代替画像を用意してください。動画背景はデータ節約のため、スマートフォンでは再生されないことが多いからです。
ヒーロー画像はウェブサイトの表示速度を遅くしますか？
ファイルサイズが大きすぎる場合のみです。アップロード前にヒーロー画像を250KB未満に圧縮してください。1MBを超える大きなヒーロー画像はページの読み込みを遅らせ、SEOに悪影響を与えます。TinyPNGなどのツールを使用すれば、画質を損なわずに圧縮できます。
WordPressサイトで既存のヒーロー画像を変更するにはどうすればよいですか？
追加方法によって異なります。テーマ設定の場合は、[外観] → [カスタマイズ] に移動してください。カバーブロックの場合は、ページを編集して該当ブロックを選択してください。ページビルダーの場合は、ビルダーでページを開き、ヒーローセクションをクリックしてください。
ヒーロー画像とヒーローバナーの違いは何ですか？
これらの用語は同じ意味を指します。どちらもページ上部に配置され、テキストやボタンが重ねられた大きな画像を指します。画像が全幅に広がる場合に「ヒーローバナー」と呼ぶ人もいますが、技術的な違いはありません。
ヒーロー画像は、明確なメッセージを力強いビジュアルで伝えることで、ホームページの魅力を高めます。テーマに合った手法を選び、モバイルでテストし、デザインを過度に考えすぎないようにしましょう。
適切なヒーロー画像に読みやすいテキストと明確な行動喚起を組み合わせれば、訪問者は次の行動に移ります。複雑さよりも明快さを重視したシンプルなヒーローセクションが、凝ったデザインを上回る効果を発揮する例を数多く見てきました。
関連ガイド：
- コンバージョン率を高めるランディングページのベストプラクティス
- WordPressのモバイル表示で画像を非表示にする方法
- 高コンバージョンのランディングページのためのコールトゥアクションのベストプラクティス
- WordPressのヘッダーに簡単にボタンを追加する方法
- CSSを使わずにWordPressの背景画像を薄暗くする方法
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
