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ヒーロー画像の追加に関するFAQ
WordPressのヒーロー画像の適切なサイズは？
1920×1080ピクセルはほとんどのテーマに適しており、モバイルでもうまく表示されます。ヒーローセクションを短くしたい場合は、代わりに1600×900ピクセルを使用してください。ファイルサイズは圧縮後250KB未満に保ち、ページの読み込み速度が遅くならないようにしてください。
画像の代わりに動画をヒーローの背景として使用できますか？
はい、カバーブロックとほとんどのページビルダーは動画の背景をサポートしています。動画ファイルのサイズは5MB未満に保ち、データ節約のため携帯電話では動画の背景が再生されないことが多いため、必ずモバイルユーザー向けのフォールバック画像を含めてください。
ヒーロー画像はウェブサイトの読み込み速度を遅くしますか？
ファイルサイズが大きすぎる場合のみです。アップロード前にヒーロー画像を250KB未満に圧縮してください。1MBを超える大きなヒーロー画像は、ページの読み込みを遅延させ、SEOに悪影響を与えます。品質を損なわずに圧縮するには、TinyPNGなどのツールを使用してください。
WordPressサイトの既存のヒーロー画像をどのように変更しますか？
追加した方法によって異なります。テーマ設定の場合は、[外観] → [カスタマイズ]に移動します。カバーブロックの場合は、ページを編集してブロックを選択します。ページビルダーの場合は、ビルダーでページを開き、ヒーローセクションをクリックします。
ヒーロー画像とヒーローバナーの違いは何ですか？
どちらの用語も同じ意味です。どちらも、テキストとボタンのオーバーレイがあるページ上部の大きな画像を参照します。画像が全幅に広がる場合に「ヒーローバナー」と言う人もいますが、技術的な違いはありません。
ヒーロー画像は、明確なメッセージと力強いビジュアルでホームページをより魅力的にします。テーマに合った方法を選択し、モバイルでテストし、デザインを考えすぎないでください。
読みやすいテキストと明確なコールトゥアクションを備えた適切なヒーロー画像は、訪問者に次のステップを踏んでもらいます。シンプルでありながら効果的なヒーローセクションは、複雑さよりも明確さに焦点を当てているため、手の込んだものよりも優れていることがよくあります。
関連記事：
- 驚異的なコンバージョン率のためのランディングページベストプラクティス
- WordPress でモバイル表示の画像を非表示にする方法
- コンバージョン率の高いランディングページのためのコールトゥアクションのベストプラクティス
- WordPressヘッダーにボタンを簡単に追加する方法
- CSSなしでWordPressの背景画像を暗くする方法
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
