ウェブデザイン制作の現場で学んだことを整理するためのメモ／ヒーローヘッダー

Diary

今では当たり前のヒーローヘッダー

何故ヒーローヘッダー（Hero Header)なのか？？
そもそもの語源はヒーロー（hero）で正しいのか？？

まずはヒーローヘッダーの解説。
―――――――――――――――――――――――――――
ヒーローヘッダー（Hero Header）
―――――――――――――――――――――――――――
ファーストビューでウェブサイトの訪問者に興味を抱かせるためのヴィジュアル。
ヒーローイメージとも表現されるが、ビジュアル内にヘッダー要素（ボタンや屋号）を格納している場合もあることからヒーローイメージよりもヒーローヘッダーと使用されることが多い。
―――――――――――――――――――――――――――

日本で使われるヒーロー（hero）という言葉のイメージと、
ウェブデザインの現場で使われるヒーローヘッダーという言葉がどうにもしっくりこないので、色々と調べてみました。

まずはヒーローイメージ（hero image）という言葉が感覚的にしっくり来ないとヒーローヘッダーがしっくりこないので、ヒーローイメージを深堀りしてみます。
「hero」の持つ、主人公・主役という意味から、ウェブサイトの中心になるようなビジュアルはヒーローイメージと呼ばれています。ウェブデザインでは画像が多く使われますが、その中でも主役であり、通常メインビジュアル…などと表現される画像がこれ（hero image）に当たります。
ここで、多数の画像の中でも「主役の画像」と相対的に解釈してしまうと、ヒーローヘッダーがややこしくなってしまう訳ですが、単に、メインビジュアル…や、フルスクリーンイメージやindex imageとなどと表現しておくと、分かりやすくなるような気がします。

少し前までは、ヒーローイメージとスライダーは一つのセットのようになっており、
ヘッダーイメージは概ねスライダーが使用されていました。
なので、ヘッダーイメージ＝ヒーローイメージはさほど違和感なく解釈できます。
しかし、この部分にimageだけではなく動画を使うウェブサイトが増えたことで、
ヒーローイメージが必ずしも部分を指す言葉ではなくなってしまった為、
また、ヘッダーに格納されているメニュー要素や屋号・ブランドロゴ等も含めてのヘッダーのビジュアルに含まれているウェブサイトも多く、ヘッダーメニューとヘッダービジュアルが明確に分離していないウェブサイトも多い為、その部分をひとまとめにして、ヒーローヘッダーと呼ばれるようになったのではないかと‥‥という仮説です。

なので、ヒーローヘッダーを部位として、
indexのヘッド部分からメインビジュアルの終わりまでと解釈すると分かりやすいですよね。

恐らく、諸々と追記する必要がありそうですが、ひとまず、ヒーローヘッダーのまとめでした。