ヒーローイメージ - 実践 - WEB制作の備忘録

(2020-06-24 加筆)

ヒーローイメージ（ヒーロー画像）とは

Webサイトのファーストビューにて、画面を全面に覆い尽くすように配置した大きなサイズの写真やグラフィック要素のこと。もしくはそのレイアウトのこと。
配置した動画を「ヒーロームービー」、それらの総称を「ヒーローヘッダー」と呼ぶこともあります。

ポイント

Webサイトの内容と目的を表現している画像を選びます。
高解像度の画像を使用します。
サイズはそのときに一番使用されているモニタータイズに合わせるのが良いとされています。現状は1920×1080pxが主流です。
画像が大きいと読み込みに時間がかかるので画像を軽くするサービスを使用します。

＞ tinypng

実践

モバイルファーストで作成します。
画像、マークは別途用意します。

例

f:id:hak00810:20200513145543j:plain
f:id:hak00810:20200513145556j:plain

＜テキスト＞

Hero Header

Welcome to MyStyle
Infomation

Home
About
Shop
News
Staff
Contact

Hero Header Style

大きな背景を使用して、インパクトを与えるサイトに仕上がるヒーローヘッダー。
ランディングページなど注目を集めたいサイトにおすすめです。
ヒーローイメージで使用する写真は、サイトのイメージを端的に表すものを使用するよう、心がけましょう。

(c) Hero Header Style

解答

デモページ

ポイント

背景画像を設置して、スクロールしても画像が残るように固定します。
- background-attachment: fixedは、フルスクリーンで固定する場合以外は指定しません。
iPhoneで実機確認したときに、background-attachment:fixed;が効かなかったので、別の方法で対応します。

/* header 
--------------------------------------- */
.page-header {
  height: 100vh;/* 画面に対する高さの割合 */
  color: #FFF;
  font-family: 'Josefin Slab', serif;
  text-align: center;
}
/* iPhoneでbackground-attachment:fixed;が効かない対処法
・位置を固定した要素をコンテンツの後ろに配置 */
.page-header:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;/* 画面に対する高さの割合 */
  background: url(../img/surfing-2192675.jpg) no-repeat 30% center;/*横左から30%_縦中央*/
  background-size: cover;/*背景画像の縦横の長い方を基準に、縦横比を保ったまま表示_画面サイズによっては、縦横どちらかがはみ出し、背景いっぱいに表示される */
}
〜

/*（768px以上のPC用表示を記述）*/
@media screen and (min-width: 768px) {
  /* header 
  --------------------------------------- */
  .page-header {
    height: 100vh;/* 画面に対する高さの割合 */
    background: url(../img/surfing-2192675.jpg) no-repeat 30% center;/*横左から30%_縦中央*/
    background-attachment: fixed;/* スクロールのとき画像が固定_囲みが長くてもずっと表示できる */
    background-size: cover;/*背景画像の縦横の長い方を基準に、縦横比を保ったまま表示_画面サイズによっては、縦横どちらかがはみ出し、背景いっぱいに表示される */
  .page-header:before　{
    display: none;
  }
  }

画像によっては、上に文字を設置するとコントラストが低く、文字が読みにくい場合があります。そんなときには、背景画像を設置した.page-headerの上の.containerに、グラデーション背景を入れて、白文字を読みやすくします。

.page-header .container {
  height: 100vh;
  background-image: linear-gradient(to bottom, rgba(24, 103, 134, 0.3), transparent 60%, rgba(24, 76, 116, 0.1));
}/* 上から下へ、青緑系透過色から60％の位置までだんたん薄く、まただんだん青系透過色へ */

トップ画面以外は、背景を白にしたいので設定します。
- 設定しない状態だと、トップ画面の画像が下まで続きます。

.main-content {
  background: #FFF;
}

ナビゲーションはSP表示とPC表示で変化させます。
- ＜SP表示＞縦並び、ボーダーで区切り見やすくしています。

.gnav li a {
  font-weight: bold;
  display: block;
  width: 160px;
  padding: 12px 0 10px;
  margin: 0 auto;
  border-top: 1px solid #FFF;
}
.gnav li:last-child a {
  border-bottom: 1px solid #FFF;
}
〜

- ＜PC表示＞横並び、トップに固定することで、スクロールしてもナビゲーションをクリックしやすく設定しています。

  .gnav {
    position: fixed;/* 固定 */
    top: 0;
    width: 100%;
    display: flex;/* 横並び */
    justify-content: center;/* 横中央並び */
    〜
  }

実機の空きとPC検証上の空きは若干異なるので、各実機に合わせて微調整が必要です。

＜参考サイト＞

makitani.net
odnax.hatenablog.com
blogs.adobe.com
qiita.com
y-com.info