ヒーロー画像デザインのヒントとDivi全体での使用方法

公開: 2017-06-19

今日のチュートリアルでは、優れたヒーロー画像/セクションをデザインするためのヒントをいくつか紹介します。共有されるヒントは、自分のWebサイトまたはクライアントのWebサイトに効果的なヒーローセクションを作成するのに役立ちます。

一般に、ヒーロー画像のスタイルを設定する方法はたくさんあり、スタイルを設定する方法は通常、Webサイトの内容によって異なります。そのため、あらゆる種類のWebサイトに適用され、誰もが知っておくべき一般的な設計のヒントをいくつか扱います。

別のヒントを見た後、我々はまた、先端に恥じない、私たちはあなたのウェブサイトビルダーとしてディビでこの例を再作成する方法を紹介します例のヒーローセクションを共有するつもりです。

作成方法を段階的に示す例は、次のようになります。

適切な画像の選択

ウェブサイト、特にヒーローのイメージをデザインするとき、それはすべて基本に立ち返ることです。ヒーローセクションは、人々があなたのWebサイトにアクセスしたときに最初に目にし、体験するものになることを考慮に入れる必要があります。それは彼らの行動に影響を与え、彼らがあなたのウェブサイトにどのような感情をリンクするかを決定します。

高品質

ヒーローのイメージを正しく選択する上で非常に重要なもう1つの要素は、品質です。それは自明ですが、多くのWebサイトがそれに対応していないのを見て驚かれることでしょう。

あなたはその品質があなたのウェブサイトで表現するサービスや製品に関連付けられることを望んでいるので、それをできるだけプロフェッショナルに見せたいと思っています。

Divi内で画像を使用するための究極のガイドに記載されているように、最小幅が1920pxの画像を使用することをお勧めします。

フルスクリーンモードを検討する

フルスクリーンモードのヒーローセクションでヒーロー画像を使用することも頻繁に使用されます。ヒーローセクションをフルスクリーンにすることで、より深いレベルで視聴者と交流する機会が得られます。あなたはヒーローセクションで提供されているものにもっと焦点を当てているので、それは本当に価値があるはずです。

フルスクリーンのヒーローセクションを作成することを検討している場合は、それが最も多くのインタラクションを得るWebサイトの一部になるため、Webサイトの最良の部分であることを確認してください。彼らの訪問の早い段階で彼らと交流することにより、あなたはウェブサイトの残りの部分を通して彼らと交流する機会を増やします。同様に、フルスクリーンのヒーローセクションが価値がない場合、人々があなたのウェブサイトに滞在し続けることを思いとどまらせる可能性があります。

中心に置くか中心にしないか

ほとんどの人は、対称性が目に非常に魅力的であるという事実に同意することができます。それでも、私たちはそれをウェブの周りで非常に多く見ているので、もはや特別なものとは思わないかもしれません。中心にいなくても、たくさんの美しいことができます。

ただし、リスクを冒したくない場合は、ヒーローイメージを対称にすることを含め、ヒーローセクション用に作成しているすべてのコンテンツを中央に配置することにいつでも頼ることができます。

コントラストを作成する

ヒーロー画像には通常、画像自体、コンテンツ、CTAの3つが含まれています。あなたは彼らの一人一人がそれぞれの訪問者が持っている経験において彼ら自身の役割を演じることを望みます、それで彼らは彼らの間の調和の感覚を持つ必要があります。そのため、色を使って一定のバランスをとることが重要です。通常、画像に色またはグラデーションオーバーレイを追加すると機能します。

新しい背景デザインオプションがDiviBuilderで利用できるようになったため、コントラストの作成が非常に簡単になりました。背景画像で使用されている色を試して、ヒーローセクションに最適な色とコントラストの組み合わせを作成できますが、以下のヒーローセクションを再作成するときに、その色に戻ります。

代わりにビデオの背景を試してください

あなたがあなたのウェブサイトにその余分な生命を与えたいならば、あなたは画像の代わりにビデオを使うことを検討することもできます。ヒーローセクションのビデオを選択するときは、画像の場合と同じヒントが適用されます。

作成しているWebサイトに一致する可能性のあるさまざまなビデオをオンラインで見つけることも、独自のビデオを作成することもできます。 Coverrは、特にヒーローセクションに使用できるビデオを提供するWebサイトです。彼らは彼らの聴衆に多くのリソースなしでウェブサイトを構築するのに優れているさまざまなタイプの短いビデオを提供します。

彼らは毎週月曜日に7本の新しい動画をアップロードし、共有する動画は商用目的でも無料で使用できます。

違いを生むCTA

素晴らしいヒーローのイメージとセクションには、常に目的があります。その目的は、最も一般的には、訪問者とWebサイトの背後にいる個人または企業との間の相互作用です。あなたはあなたの訪問者を知りたい、そしてうまくいけば; 彼らを忠実な訪問者またはリードに変えてください。

実際にその目標を達成し、目的を達成するために、優れたCTAが役立つ場合があります。 CTAを設計する際には、考慮すべき点もあります。 CTAの効果を高め、ヒーロー画像が意図した結果を確実に提供するようにします。

CTAを設計するときは、次のことを考慮してください。

CTAが（色とコントラストを通じて）人々が最初に気付くものの1つであることを確認してください
使用しているCTAコピーをよく考えてください。あなたはそれが説得力があることを望みます
CTAをクリックした後に続くものがそれだけの価値があることを確認してください（結果を得るために付加価値を与えてください）

作成を始めましょう（デスクトップ）

ヒーロー画像に関する一般的なヒントを確認したので、次はそれを実践します。私たちが作成した例は製品指向ですが、他の要素（コンテキストなど）も含めました。

十分なコントラスト、良好なCTA、高品質の画像があることを確認し、全幅セクションではなく標準セクションを使用しましたが、デスクトップでヒーローセクションがフルスクリーンに表示されるように、間隔サブカテゴリを手動で調整しました。

セクションを選択してください

全幅セクションまたは通常セクションから選択します。標準セクションの方が柔軟性が高いため、標準セクションを選択して、ニーズに合ったヒーローセクションに変換します。

背景オプション

ヒーローセクションで表現される画像は製品ですが、コンテキストと感情も利用しています。写真が撮られた環境が冒険に関係していることがわかります。また、ヒーロー画像で提供されるコンテンツを通じて感情を使用しています。

あなたは人々に彼らの冒険的なライフスタイルを生きている間「彼らの時間をとる」ように言っています。あなたはまた、彼らが人生で最も欲しいものを追求することは大丈夫であり、この特定の時計はこの旅の理想的な最後の仕上げであると彼らに言っています。

この例で使用されている画像は、Unsplashからのものです。背景画像として使用する画像を選択し、作業中のセクションの設定を開きます。 [コンテンツ]タブには、[背景]サブカテゴリがあります。背景画像を追加することから始めます。

次に、使用している画像にカラーオーバーレイを配置します。これは、前述の「コントラストの作成」のヒントに戻ります。画像に特定の暗さを追加して、使用するテキストモジュールとボタンモジュールとのバランスを改善します。

ほとんどの場合、灰色のオーバーレイカラーが使用されます。これは、画像の色をそれほど変更しないオーバーレイとして使用する最も標準的な色です。使用したカラーコードは「#BFBFBF」です。

次に、背景画像に戻り、背景画像ブレンドを適用します。この場合、「乗算」を使用します。背景画像の位置も「左上」に変更します。

行設定

次に、作成したセクションに全幅の行を追加します。設定を開き、[デザイン]タブの[間隔]サブカテゴリの上部のパディングに「10％」を追加します。

次に、[詳細設定]タブに移動し、[表示]サブカテゴリで電話とタブレットの行を無効にします。

最初のテキストモジュール

その後、最初のテキストモジュールを追加します。設定を開き、[コンテンツ]タブの[コンテンツ]ボックスに使用するタイトルを入力します。 [デザイン]タブに移動し、[テキスト]サブカテゴリに次の変更を加えます。

テキストの向き：右
テキストフォント：ロブスター
テキストフォントサイズ：80
テキストフォントの色：#FFFFFF
テキスト行の高さ：1.7em

同じタブを下にスクロールし、[間隔]サブカテゴリの[上マージン]に[25％]を追加し、[右マージン]に[-12％]を追加します。

2番目のテキストモジュール

別のテキストモジュールを追加し、コンテンツボックスにテキストを入力して、[デザイン]タブに移動します。テキストサブカテゴリで、次の変更を適用します。

テキストの向き：右
テキストフォント：Montserrat
テキストフォントサイズ：15
テキストフォントの色：#FFFFFF
テキスト行の高さ：1.7em

同じタブを下にスクロールして、[間隔]サブカテゴリの[上マージン]に[4％]を追加し、[右マージン]に[-12％]を追加します。

ボタンモジュール

ボタンモジュールを追加し、ボタンのテキストを入力して続行します。次に、[デザイン]タブに移動し、[ボタンの配置]を[右]に変更します。

同じタブを下にスクロールして、ボタンサブカテゴリに次の変更を加えます。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：20
ボタンのテキストの色：#FFFFFF
ボタンの背景色：＃E02B20
ボタンの境界線の幅：2
ボタンのボーダーカラー：＃E02B20
ボタンの境界半径：3
ボタンフォント：Montserrat
ボタンフォントスタイル：大文字

モバイル＆タブレットバージョン

デスクトップ画面のヒーロー画像を作成する場合、さらに多くの可能性があります。一方、携帯電話やタブレットの場合、簡単な方法ですべてを美しく見せるための方法を見つける必要があります。

誰かが携帯電話やタブレットであなたのウェブサイトにアクセスしたときに、すべてを一元化するつもりです。デスクトップ用に作成した行のクローンを作成し、同じセクションに配置します。