【webデザイントレンド】ヒーローヘッダーでファーストビュー演出

スプリット・スクリーンとミニマルデザインをミックスした様なWebデザインでヒーローヘッダーというデザイン手法があります。
ファーストビューでそのWebサイトの世界観に引きずり込むための演出で、ポイントとして背景全体に画像、もしくは動画を覆い尽くす様に表示させ、その中にタイトルやキャッチコピー、ナビゲーションなどを配置することでファーストビューの段階の短い時間で印象付けるデザイン手法です。

See the Pen
Sample of hero header design by tatsuya☆ラボラトリ【 tatsuya-lab.com 】 (@labtatsuya)
on CodePen.

シンプルなデザインでも格好良く見せることでユーザーを引き込む

デザインの目的は最初の表示の段階で印象付けることになります。
一番効果的なのは画像や動画をフルスクリーンで表示させることになります。
そしてその画像や動画の中にタイトルやメニューなどの文字を余白などデザイン性を重視してレイアウトしていきます。
ポイントはファーストビューの段階で背景画像をフルスクリーンさせることになります。
私が作った見本では<header>に背景画像を設置してフルスクリーンにしていきます。

HTML

<header>
  <h1><img src="https://tatsuya-lab.com/wp-content/uploads/2020/03/title-1.png" alt=""/></h1>
  <h2>デザインに心躍る彩りを</h2>
  <h4>したがって、「デザイン」は、1つまたは複数の作成されたもののカテゴリカルな抽象化を指す実質的なものです。</h4>
</header>

を用意してフルスクリーンの下準備として

CSS

body, html {
        width: 100%;
        height: 100%;
}

<body>と<html>に幅と高さの設定を100%にしておきます。
この設定がないと<header>をフルスクリーンすることができません。
そして<header>のフルスクリーン設定。

CSS

header {
        background-image: url(https://tatsuya-lab.com/wp-content/uploads/2020/03/p-1-1.jpg);
        background-size: cover;
        background-position: center top;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
}

<header>に背景画像を設置して、覆い尽くします。
ここも幅と高さを100%、そしてこの中にタイトルとキャッチコピーを画面中央に置きたいのでdisplay: flex;を使って上下左右で中央に持ってきます。
横に並ばない様にflex-direction: column;を設定して縦並びにします。

そしてヒーローヘッダーのポイントは下にスクロールできて他のエレメントも見ることができる仕様にしておきます。
ここがミニマルデザインと違うところでファーストビューでデザインは完結させますが下にスクロールするとコンテンツが見える様に作ります。

スマートフォンで見てもフルスクリーンで表示させます。