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

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

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

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

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

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

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

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

Sponsored Link

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

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

写真を背景にしたサイト

Wild Measure

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

FIRM EIGHTY-SIX

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

SND CYN

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

Jane

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

DASSEL UND WAGNER

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

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

Spry

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

WeWork

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

Ingenio

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

Kocri(コクリ)

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

COSPA CREATION

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

株式会社ナップ

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

ブログ(CMS)ライクなサイト

Absolut Vodka

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

Lush Fresh Handmade Cosmetics

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

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

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

写真素材

StockSnap.io

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

AllTheFreeStock.com

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

GIRLY DROP

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

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

DBFreebies

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

GraphicBurger

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

動画素材

Distill

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

まとめ

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

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

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

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

BILLIONPLAN JAPAN Co, Ltd

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

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

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

または、お電話でも承ります。
 10:00 - 19:00(土日祝休み)

06-6271-7761

ABOUT ME

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

新着記事を配信しています

FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね!」や「フォロー」をお願いします。

follow us in feedly

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です