2015年もトレンド継続。ヒーローヘッダーの参考・素材25選。

変化・進化しつつ、増え続けるヒーローヘッダー・デザイン。

2014年頃からデザイントレンドとして急増したヒーローヘッダー。
ファーストビューをフルスクリーン、または画面を覆いつくすほど巨大なビジュアルで表現するこの手法は、イメージ第一のブランディングサイトだけでなく、今では多くのWEBサービスや企業サイトにも取り入れられています。そこで今回は一般的になったヒーローヘッダー・デザインについて、改めて参考にしたい素敵サイトや、制作時に役立つ素材やテンプレートをご紹介したいと思います。

参考にしたいヒーローヘッダー18選
制作時に役立つ素材・テンプレート集

ヒーローヘッダー・ヒーローイメージとは。

雰囲気ある大きな写真やビデオ動画を背景に使用して、その上にロゴやタグラインを配置したシンプルなイメージ。
現在新たに立ち上がる多くのWEBサービス・サイトで、同様のイメージやそれに近しいイメージが採用されています。

ファーストビューの情報量が少なくなるため、更新の多いメディア・ポータルサイトやECサイトには不向きですが、
アイキャッチ画像を全幅で背景に使用するなど、似たイメージをうまく取り入れているサイトも多くなっています。

ほとんどの場合シングルページで採用され、レスポンシブデザインとも親和性が高いのが特徴です。

参考にしたいヒーローヘッダー18選

ヒーローヘッダーを活用した、素敵サイトをご紹介します。

写真を背景にしたサイト

Wild Measure

レスポンシブデザインで構築されたサイト。地平を見つめる人物の写真にストーリーを感じます。
http://www.wildmeasure.com/

FIRM EIGHTY-SIX

ブランド戦略を請け負う企業のサイト。こちらもレスポンシブデザインで設計されています。
http://firm86.com/

SND CYN

レトロフォントやリボンなどセオリーに倣ったヒーローイメージ。
http://sndcyn.com/

Jane

オーストラリアのクリエイティブエージェンシーのサイト。
http://janetheagency.com/

DASSEL UND WAGNER

横スクロールが印象的なドイツのエージェンシーサイト。スマホでも横スクロールです。
http://www.dasselundwagner.com/en/

チャレンジャー・グレイ・クリスマス株式会社

WEBフォントや:hoverでのアニメーションなど、参考になる点が多い素敵サイトです。
http://www.challengerkk.co.jp/

株式会社ファイアープレイス

gifアニメで表現された炎が雰囲気を醸し出す素敵サイト。
http://fireplace.co.jp/

株式会社プラルト

サービス別にキービジュアルを用意し、スライドショーで表現した素敵サイト。
https://www.prart.co.jp/

株式会社イノベーター・ジャパン

ファイル転送サービス「tenpu」が話題になったイノベーター・ジャパンのサイト。
http://www.innovator.jp.net/

動画を背景にしたサイト

Celcius

スイスはジュネーブの広告会社。スクロールで画面が真っ二つに。
http://celcius.ch/

Spry

ウェイトの軽いフォントやゴーストボタンなどモダンな印象のエージェンシーサイト。
http://wearespry.com/

WeWork

何気ない日常風の動画ですが、おいそれとマネできそうにありません。
https://www.wework.com/

Ingenio

動画ではなくアニメーションですが、ポインタに合わせてグイグイ動きます。
http://i.ngen.io/

Kocri(コクリ)

最近話題になったハイブリッド黒板アプリ「Kocri(コクリ)」の素敵サイト。
http://kocri.com/

COSPA CREATION

ダイナミックに展開する動画が見ごたえのある、素敵リクルートサイト。
http://www.cospa-creation.co.jp/recruit/

株式会社ナップ

こちらもオシャレな背景動画。ページトップもカワイイ素敵サイトです。
http://knap.jp/

ブログ（CMS）ライクなサイト

Absolut Vodka

有名ウオッカ「アブソルート」のサイト。記事イメージが背景に使用されています。
http://www.absolut.com/jp/

Lush Fresh Handmade Cosmetics

特集や商品情報など、更新情報がヒーローイメージ風に表現されています。
https://www.lushjapan.com/

制作時に役立つ素材・テンプレート集

ヒーローヘッダー作成時に役立つ素材やテンプレートをご紹介します。

写真素材

StockSnap.io

何度か紹介している素材サイト。PDライセンスの画像が豊富にあります。
https://stocksnap.io/

AllTheFreeStock.com

サイトを横断して探せる素材サイト。当記事のアイキャッチもこちらから。
http://allthefreestock.com/

GIRLY DROP

ガーリーで高品質な写真が手に入る有名サイト。クレジットも要りません。
http://girlydrop.com/

そのほかテンプレート素材など

DBFreebies

ヒーローイメージだけに限らず様々なPSDテンプレートが探せます。ライセンスは要確認。
http://dbfreebies.co/templates

GraphicBurger

GraphicBurgerからすぐに使えそうなフリー素材を探してみました。
以下からご確認ください。

動画素材

Distill

背景動画を用意できない場合は素材を使ってしまいましょう。クオリティの高い動画素材が揃っています。
http://www.wedistill.io/

まとめ

いかがでしたでしょうか。
WEBフォントやゴーストボタン、グラデーション背景やレスポンシブデザインなど、ここ数年のデザイントレンドと相性の良いヒーローヘッダーは、今後も様々なサイトで採用されていきそうです。シンプルで簡単そうに見えて、作る際には意外とバランスを取るのに苦労したりするのもあるあるです。

流行やトレンドに流され過ぎるのも問題ですが、サイトの目的に合うのであればぜひ取り入れていきたいです。ではまた！

? パブリックドメインとの違いや表記例も！クリエイティブ・コモンズ（CC）素材の使い方。 http://t.co/cvbXZdpDAa pic.twitter.com/zs7BwIgV0q

— BILLIONPLAN JAPAN (@BILLIONPLAN_JP) 2015, 8月 19

レスポンシブなモックアップ制作に！フリーなPSD素材・サービスまとめ。

ウェブ制作でお悩みの方へ。

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。ランディングページやサイト制作、自社メディアを使った集客提案、中国をはじめとする海外ローカライズ作業など幅広く対応いたします。

ウェブ制作のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

おむおデザイナー／編集Twitter:@BILLIONPLAN_JP: 大阪在住WEBデザイナー。制作会社、EC業界でデザイナーをやった後に、ゲームアプリの世界へ。そんなにゲーム好きじゃないことに気づいてウェブに出戻り。その後ビリオンプラン立ち上げに参加。ご相談はこちらにお願いします。フェネック飼いたい。 →記事一覧