あなたのウェブサイトのヒーローセクションを設計する方法（2025ガイド）

あなたのウェブサイトは良い印象を与えるのに数秒しかありませんので、強力なヒーローセクションを持つことが最優先事項です。それはあなたのオンラインビジネスの店頭ウィンドウのようなものであり、彼らの注意を迅速につかみ、スクロールを続けるように促す必要があります。この投稿では、ヒーローセクションを設計する詳細に飛び込み、直感的なドラッグアンドドロップビジュアルビルダーを使用してDIVIでデザインする方法を示します。

ヒーローのセクションとは何ですか？なぜ必要なのですか？

あなたのウェブサイトのヒーローセクションは、ページの一番上ではありません。良い印象を与える最初のチャンスです。これは、注意を引いて、コアメッセージを表示し、訪問者が訪問する理由を即座に示している場所です。優れたヒーローセクションが数秒でそれらを引っ掛け、明確な行動への呼び出しであなたのサイトをより深く導き、ユーザーエクスペリエンス全体（UX）のステージを設定します。だからそれを正しくすることがとても重要です。

ここに留意すべきことがいくつかあります：

第一印象が重要です

私たちはすぐに満足している世界に住んでいます。サイトに着陸するユーザーは、スナップ判断を下すため、ヒーローセクションは数秒以内に注意を引く必要があります。そうでなければ、彼らはおそらく跳ね返り、あなたのサイトを離れて他の場所に行きます。ただし、ヒーローのセクションはビジュアルだけではありません。ユーザーエクスペリエンス全体のトーンを設定します。優れたヒーローセクションでは、ウェブサイトで何が見つかるかについてのユーザーの期待を設定します。

人々の注意を引くために数秒しかないことがわかったら、それを数えてください。視覚的なストーリーテリングの力を使用して、メッセージをすばやく伝えます。写真やビデオなどの魅力的な画像と衝撃的な見出しは、テキストの大きな段落よりも数秒ではるかに多くの情報を伝えることができます。ユーザーがあなたのオファーや、なぜ彼らが気にするべきかをすぐに理解するのに役立つ言語を使用してください。

この例を考えてみてください。オーガニックを食べ始めて、地元の農民市場を検索してください。あなたがサイトに着地するとき、おいしい食べ物のイメージがあなたの注意を捉えます。ヘッダーをスキャンすると、2つのボタンが詳細を確認することを奨励しています。

それはあなたのメッセージを伝えます

訪問者は、あなたが提供するものを理解するために推測したりスクロールしたりする必要はありません。ターゲットオーディエンスが把握できないような専門用語や過度に専門的な言語を避けてください。代わりに、競争と違うものを強調してください。ユニークな製品やサービスから専門の専門分野まで、何でもかまいません。また、その製品やサービスはどのように利益をもたらしますか？ユーザーが必要としているものまたは必要なものに関してメッセージをフレーム化します。

ビジュアルの重要性について言及しましたが、選択したテキストも同様に重要です。見出しを短く、記憶に残り、注意を引く。ユーザーの関心を把握するために、短いサブヘッディングまたはイントロの段落でそれをフォローしてください。

この例を考えてみましょう。祖母のために芸術療法を探しています。このサイトを見つけたら、デザインと明るい色に惹かれます。段落を読んで、このビジネスが子供、大人、高齢者向けの芸術療法セッションを提供していることを知っています。

コンバージョンを駆動できます

コンバージョンは、人々がウェブサイトを構築する主な理由です。ビジネスオーナーは、何かを購入するか、タスクを完了してほしいと思っています。あなたのヒーローセクションは、正しく設計されている場合、変換の磁石にすることができます。これを達成する上で最も重要な要因の1つは、効果的な行動呼びかけ（CTA）を使用することです。すべての優れたヒーローセクションには、訪問者が次のステップを踏むことを奨励するボタンまたはフォームがあります。

コンバージョンを促進する別の効果的な方法は、緊急感を生み出すことです。これは、特定の製品、カウントダウンタイマー、またはニュースレターにサインアップすることの利点で限られた時間のオファーを通じて達成できます。強引にならないように注意してください。代わりに、ユーザーが行動を起こすように動機付けている言語を使用します。

この例を考えてみましょう。あなたはカリフォルニアに住んでいるDivi愛好家です。あなたは常に、つながりを作って新しいスキルを学ぶために、ウェブデザインに関連する会議に参加したいと思っていました。サイトに着陸すると、このWebサイトは8月にサンフランシスコでのDivi Meetup用であることがすぐにわかります。サインアップできます。

効果的なヒーローセクションのコア要素は何ですか？

いくつかの重要な要素に焦点を当てることで、驚くほどに見えるヒーローセクションを作成し、訪問者を効果的に引き付け、ウェブサイトをさらに探索することを奨励することができます。ヒーローセクションに何を含めるべきですか？

説得力のある見出し

あなたの見出しは短く、甘く、衝撃的でなければなりません。大きく、大胆で、利益様式を考えてください。私たちのウェブサイトへようこそと言う代わりに、 30日間のキックボクシングプログラムであなたの可能性を解き放つようなより魅力的な何かを試してください。 Diviの見出しまたは全幅ヘッダーモジュールは、見出しのスタイルを完全に制御できます。さまざまなフォント、色、サイズ、間隔で再生して、人目を引く外観を作成します。タイポグラフィスタイルを使用して、ビジネス名を最初から否定できないようにすることができます。

サブヘディングまたはイントロの段落

あなたの見出しが注目を集めている間、あなたのサブヘッドまたはイントロの段落はコンテキストを提供します。見出しの約束について詳しく説明し、陰謀のタッチを追加するチャンスです。簡潔に保ち、メインの見出しと調和して動作させます。たとえば、見出しがスパで1日過ごしている場合、サブヘディングは詳細に説明し、そのスパが提供するものを説明することができます。

行動への明確な呼びかけ

あなたのヒーローには明確な目的が必要です。訪問者に次に何をしてもらいたいですか？ユーザーにもっと学ぶか、購入するか、ニュースレターにサインアップするように誘惑するかどうかにかかわらず、CTAは明確で顕著でなければなりません。 Get art or at owayのようなアクション指向の言語を使用してください。適切に配置されたCTAはガイドとして機能し、訪問者を望ましいアクションに導きます。

高品質の画像

正直に言ってください：ビジュアルは言葉よりも雄弁です。高品質の画像やビデオは、すぐに注意を引いて、ウェブサイトのムードを設定できます。 Diviは、ヒーローセクションに画像やビデオを簡単に追加してスタイルできます。良いビジュアルは、感情を伝え、物語を語り、永続的な印象を与えることができます。

wowsの背景

ヒーローセクションの背景は、コンテンツの段階を設定します。画像、固体、またはグラデーションを使用して、見事な背景を作成できます。 Diviは、バックグラウンド設定を完全に制御できるため、ユニークで人目を引く外観を作成できます。ほとんどのプレミアムテーマは、バックグラウンド設定を制御できるようになり、ブランドを反映し、Webサイトの残りの部分のトーンを設定するユニークなヒーローセクションを作成できます。

ヒーローセクションの例（そしてなぜ彼らが働くのか）

強力なヒーローセクションがあなたのウェブサイトをどのように変えることができるかを見る準備はできていますか？ Diviで利用できる効果的な例をいくつか検討しましょう。 Diviのレイアウトパックのいくつかを使用して、さまざまなデザインを紹介してあなたを刺激します。これらは出発点に過ぎないことを忘れないでください。実際の世界の成功は、魅力的なコンテンツ（プレースホルダーテキストではなく）に依存します。ただし、これらの例は、可能性の明確な絵を把握します。

例1：AIソフトウェア

最初の例は、AIソフトウェア会社のためです。以下を含むいくつかの強みがあります。

1. 明確な見出しと小見出し： Diviの未来は、焦点を伝える簡潔で興味深い見出しです。サブヘディング人工知能は、コンテキストと最新の最先端の感触を提供します。
2. 視覚的魅力：輝く要素を備えた抽象的で未来的な背景は、目を引くものであり、AIと未来のテーマに関連しています。
3. 強いコントラスト：紫色の背景に対する白いテキストは、優れた読みやすさを提供し、メッセージを際立たせます。
4. アクションへの明確な呼び出し： Diviに今日参加し、無料のデモは直接的かつアクション指向であり、ユーザーがクリックしたときに何ができるかを正確に伝えます。 2つのCTASには、ユーザーに興味のあるオプションが提供されます。
5. それはモダンです。全体的なデザイン、配色、および画像は、AIのトピックと将来のトレンドと一致するイノベーションと前進の感覚を呼び起こします。

例2：ペット用品

このレイアウトパックは、ペットサプライビジネスオーナー向けに設計されています。ここに、ヒーローセクションを効果的にするいくつかのポイントがあります。

1. 明確な見出し：ペット用品と毎月のボックスサブスクリプションは、会社がしていることを伝え、見出しを簡単かつ理解できるようにします。
2. ダイレクトCTA：オンラインショップは、訪問者が製品を購入することを奨励する簡潔なCTAです。
3. 視覚的に関連する画像：ヒーローの主な画像は、ペットフードを示しており、ビジネスの性質を強化しています。また、ユーザーの目を引くために色のポップを追加します。
4. クリーンなデザイン：レイアウトは整頓されていて、モダンで、シンプルです。白い背景と大胆なテキストは、優れたコントラストと読みやすさを提供します。

例3：水の非営利団体

この例では、ヒーローは水の非営利事業を描いています。単純ですが、ヒーローは効果的です。

1. 明確なブランディングがあります。ビジネス名とそれに伴うキャッチフレーズは、組織の使命を伝えます。
2. 視覚的に魅力的です。海の大きな背景画像は、強力な視覚を作り出し、すぐに水のテーマに接続します。
3. 明確なCTA： Make a Donationボタンが顕著であり、ユーザーはアクション指向のテキストを使用してエンゲージメントを促進します。
4. 統計の使用：集められたお金を強調することで、慈善の影響の証拠が提供され、ブランドへの信頼が築かれます。
5. 調和のとれたレイアウト：カラーブロックスタイルは、慈善のさまざまな側面について明確なセクションを使用して、構造化された審美的に心地よい方法で情報を提示します。

例4：リアルティ

Divi用のRealty Layout Packでは、ヒーローはDiviのグリッドシステムを使用してヒーローに4つの列を追加します。いくつかの理由で効果的です：

1. 簡潔な見出し：ターゲットオーディエンスにDiviの訴えで夢の家を見つけ、価値を提示します。
2. 強力なビジュアル：単色の背景画像は、緑色のCTAとうまく対照的であり、際立っています。
3. クリアCTA：ヒーローセクションには、ユーザーがWebサイトに参加するための4つの強力なCTAがあります。
4. モダンなデザイン：ミニマリストのデザインと暗い配色は、洗練されたモダンな外観を作り出します。

これらの例は、優れたヒーローセクションデザインの汎用性を示しています。洗練されたモダンから視覚的に説得力があり、有益なものまで、可能性は無限です。それでは、Diviが完璧なヒーローセクションをカスタマイズして作成するための理想的なツールにする理由を掘り下げましょう。

Diviがヒーローセクションを設計するのに最適な理由

Diviは、ヒーローセクションの作成を含むWebサイトを構築することに関して、ゲームチェンジャーです。 Diviは、Visual Builderであるドラッグアンドドロップページビルダーを提供しているため、ビルドするときにWebサイトがどのように見えるかを正確に確認できます。

テーマには200を超えるデザインモジュールがロードされているため、見事なヒーローセクションとWebページを構築するための無制限のオプションが提供されます。テーマビルダーを使用すると、サイトのヘッダーからページテンプレートまで、サイトのすべての部分をカスタマイズして、本当にユニークな外観を作成できます。

Diviには、インスピレーションが必要な場合は、2600を超える専門的に設計されたレイアウトの大規模なライブラリがあります。各レイアウトには、ブランドを完全に一致させるために簡単に調整できる適切に作成されたヒーローセクションが含まれています。あなたがデザインプロであろうと完全な初心者であろうと、Diviには際立っているヒーローセクションを作成するために必要なすべてがあります。

数千のレイアウトに加えて、Diviは、完全なWebサイトを構築する別の簡単な方法であるDiviクイックサイトを提供します。 DiviのオンボードデザインアシスタントであるDivi AIとの統合により、スターターサイトまたは生成AIを使用して2分以内に完全なWebサイトを作成できます。すべてのスターターと生成されたWebサイトには、すべてのコアページ、テーマビルダーテンプレート、グローバルスタイル、および構成されたすべてのWordPress設定が付属しています。

Diviクイックサイトは、創造性を流し、ウェブサイトを速く構築する素晴らしい方法です。グローバルスタイル（フォントと色）を簡単にカスタマイズして、ブランドを完全に一致させることができます。あなたも外観に固執していません。デザインは微調整することができますが、あなた自身のものにしたいのです。さらに、年間89ドルの低価格で必要な数のWebサイト（およびヒーローセクション）を構築できます。

Diviを取得します

Diviでヒーローセクションを設計する方法

Diviでヒーローセクションを設計することは、いくつかの方法で達成できます。ゼロから1つを作成したり、事前に作成したレイアウトをインポートしたり、Divi AIを使用してセクションを生成したりできます。この投稿では、Diviの事前に作られたレイアウトの1つから始めて、デザインを変更してブランディングに合わせます。

レイアウトパックを選択してください

WordPress Webサイトで新しいページを作成し、DIVIをインストールし、[新しいページが読み込まれたときに既製のレイアウトを選択します。次に、 [レイアウトを参照]をクリックして、事前に作成されたレイアウトの選択を表示します。

DIVIを使用すると、カテゴリを検索またはフィルタリングして、追加するレイアウトを見つけます。選択できるカテゴリが数十以上あるため、ニーズに合ったものを見つけるのは簡単です。この投稿では、Realty Layout Pack（上記の例＃4）を選択し、法律事務所に変更します。

パックをクリックして、ランディングページのレイアウトを選択します。 [このレイアウト]ボタンをクリックして、パックをインストールします。

ダイアログボックスは、デザインプリセットをインポートするかどうかを尋ねます。 Divi Presetsは、テーマの最高の機能の1つであり、Webサイト全体でデザインスタイルを保存および再利用できます。そのため、そのティックボックスをチェックしたままにすることをお勧めします。次に、 [インポート]をクリックして続行します。

ヒーローセクションにデザインを変更します

レイアウトをインストールしたので、ブランディングに合わせてヒーローを変更することに取り組むことができます。まず、ヒーローの背景画像を交換することから始めます。 [設定]アイコンをクリックして、セクション設定を表示します。

[背景]ドロップダウンメニューをクリックし、[背景画像]タブを選択します。

画像領域の上にホバリングし、ゴミ箱をクリックして、既存の背景画像を削除します。

画像領域の[背景画像の追加]ボタンをクリックして、新しい背景画像を追加します。任意の画像を選択しますが、より大きなデスクトップ画面に正しく表示されるように、幅1920pxであることを確認してください。

Divi AIでテキストを書き直します

Diviには、視覚ビルダーに直接構築された独自のAIデザインアシスタントがあります。これにより、テキストプロンプトでブランド上のコピーを生成できます。しかし、最初に、ヒーローの小さな見出しを変更します。 [設定]アイコンをクリックして、モジュールのオプションを表示します。小さな見出しのテキストをバーミンガム家族法律事務所に変更します。

次に、ヒーローの大きな見出しを交換します。今回は、Divi AIを使用して、ヒーローセクションの魅力的な見出しを作成します。 Divi AIを有効にするには、見出しフィールドのAIボタンをクリックします。

いくつかのオプションを備えたダイアログボックスが表示されます。 AIで書き込みを選択します。

設定が表示されると、コンテンツタイプは既に選択されます。 Divi aiにあなたが書いていること（この場合は家族の法律事務所）を伝え、追加されたコンテキストフィールドの下でコンテキストを選択しないでください。 Divi AIは、あなたが望むものを理解しているときに最適に機能するので、プロンプトを書くときは説明的になります。

Guide Meセクションでは、音声トーンを選択し、必須キーワードを追加し、コンテンツの長さを定義し、言語を選択できます。最後に、[テキストの生成]ボタンをクリックして、見出しを生成します。あなたが望む見出しを取得するために数回かかるかもしれませんが、良いニュースはDivi AIが無制限の世代を提供することです。

アクションへの呼び出しを追加します

ヒーローセクションを完了する最後のステップは、アクションを呼び出す（CTA）を追加することです。まず、最初の3列のコンテンツを変更する必要があります。モジュール内のアイコンとテキストを法律関連のコンテンツに置き換えます。 Diviには800を超えるアイコンがあるため、ニッチに合うものを見つけるのは迅速かつ簡単です。

次に、見出しの下の行の4番目の列のアイコンを置き換えます。モジュールの上にホバリングして削除します。

4列の見出しモジュールで、Divi AIを使用して魅惑的なCTAを生成します。訪問者があなたのサイトの関連するページに行動してリンクすることを奨励する必要があります。

Divi AIでヒーローセクションを設計する方法

Diviレイアウトパックを使用してヒーローセクションをデザインするのがどれほど簡単かがわかったので、Divi AIを使用して作成してください。 Divi AIがテキストを生成する方法を示しましたが、画像、コード、セクション、Webページ、および完全なWebサイトを生成することもできます（詳細は後で説明します）。

新しいDiviヒーローを生成します

Divi Webサイトの新しいページを作成することから始めます。今回は、施しきレイアウトから始める代わりに、視覚ビルダーがロードされたらゼロからビルドを選択します。

Visual Builderがロードされると、Diviは自動的に行を追加でき、さまざまなレイアウトを提供します。 Visual Builderは、グリッドシステムを使用して、コンテンツを構造化して列に整理します。 Diviは、いくつかのプリセット列レイアウト（幅が変化する3つの列など）をいくつか提供しています。

Divi AIは、同じグリッドシステムを使用して、Webサイトのセクションを生成します。ただし、レイアウトをゼロから作成する場合にのみ行を追加する必要があります。グリッドの右上にあるxをクリックして、行ダイアログボックスをキャンセルします。

AIを使用してヒーローセクションを生成するには、ページにホバリングし、青 +アイコンをクリックします。

ダイアログボックスが表示されたら、 AIで生成セクションを選択します。

DIVI AI設定が表示されると、記入するフィールドがいくつかあります。テキストの生成と同様に、Divi AIには、作成するセクションとビジネスに関する情報が必要です。また、使用する画像の種類（ストック、AIの生成、またはプレースホルダー）と、使用したいフォントと色を指定することもできます。すべての準備ができたら、 [セクションの生成]ボタンをクリックしてヒーローを作成します。

プロセス全体に数秒かかります。完了したら、構築するすべてのセクションまたはWebページに適用されるスタイルを保存できます。 AIは、ストック画像を選択する場合、使用される画像のリスト（リンクを含む）を提供します。

Divi aiヒーローの例

Divi AIは多用途であり、さまざまなカテゴリにわたって美しく効果的なヒーローセクションを作成できます。生成したいくつかのプロンプトをご覧ください。

設計代理店のヒーローセクションを作成します。魅惑的な見出し、サポートテキスト、および顕著な行動を促す呼びかけが必要です。

ピザレストランのヒーローセクションをデザインします。鮮やかな色、大胆な見出し、おいしいピザの背景画像を与えてください。

「Dee's Hardware」と呼ばれるハードウェアストアのヒーローセクション。ツールの画像、大きな大胆な見出し、著名な行動呼びかけを含める必要があります。

建築会社のヒーローセクションを作成します。大胆でインパクトのある見出し、なだめるような色、そして行動への明確な呼びかけが必要です。

Divi aiを取得します

体験Divi Proで提供しなければならない最高のDivi

Divi Proを使用すると、Diviエコシステム全体にアクセスできます。つまり、すべてのプラグインとテーマを1か所で管理し、クラウドでお気に入りのデザインを保存して再利用し、チームと簡単にコラボレーションし、必要なたびに専門家のサポートを得ることができます。 Divi Proは、あなたのウェブサイトを次のレベルに引き上げることができます。

divi pro付属：

• Divi AI：テキストプロンプトを使用して、無制限の画像、テキスト、コード、セクション、Webページ、および完全なWebサイトを生成します。
• Divi Dash：すべてのプラグインとテーマを管理し、すべてのクライアントを追跡し、Webサイトのパフォーマンスについての貴重な洞察を得ることができます。
• Divi Cloud：乱雑なJSONファイルと無限のコピーと貼り付けに別れを告げます！数回クリックするだけで、お気に入りのDiviレイアウトをクラウドに保存して再利用できます。
• Diviチーム：チームと簡単に協力して、所有するすべての驚くべきDiviツールへのアクセスを許可します。
• Divi VIP： 30分以内、24時間365日、365日でエンタープライズレベルのサポートを受けてください。
• Divi Marketplaceクレジット： Divi Marketplaceを探索するために50ドルのクレジットを取得し、Webサイトを充電するための驚くべき子供のテーマ、レイアウト、拡張機能を見つけます。

Divi Proサブスクリプションを使用すると、Webサイト構築体験を次のレベルに引き上げることができます。これは、専門のデザイナー、開発者、サポートスペシャリストのチームが、年間277ドルの低コストで、 1か月あたりわずか23.08ドルで、スペシャリストのサポートのチームを持つようなものです。

Diviを取得します

Diviで永続的な第一印象を与えます

魅力的なヒーローセクションは、ユーザーの注意と運転エンゲージメントを獲得するために不可欠です。結局のところ、あなたは第一印象を与えるチャンスが1つだけです。 Diviは、インパクトのあるヒーローセクションを作成するための有能なプラットフォームを提供し、これまで以上に迅速かつ簡単にします。直感的なビジュアルビルダーと強力なデザインアシスタントのDivi AIを使用すると、数分でヒーローセクションをデザインできます。 DiviおよびDivi AIを使用すると、最初のクリックで視聴者をキャプチャできます。