すべては第一印象！ホームページを印象深くするヒーローヘッダー5つの強み

よりよいヒーローにするための5つのポイント

ヒーローの概要については理解できたかと思います。
しかし、他のホームページと差別化するためには、どのようなポイントに気をつけてヒーローを作るべきなのでしょうか。

ここからは、よりよいヒーローにするための5つのポイントについて触れていきます。
　　

1. 戦略的な切り取り方にする

例 ： allbirds

https://www.allbirds.com

こちらは、ニュージーランドのファブリックシューズブランド「allbirds」のホームページです。
ファーストビューを1つのキャンバスとして見立てた時に、どのように画像や映像を配置するか、を戦略的に考えています。

左側では、メニューやロゴをヒーロー画像の上に配置していて、ヒーロー画像を広くとることに成功しています。一方、右側では、メニューやロゴのスペースを個別に分割している代わりに、ヒーロー画像が小さくなってしまっています。これだけでも、左右を見比べてみると与える印象が変わってくることがご理解いただけたのではないでしょうか。

例 ： 日本フクラ

http://www.hukla.co.jp

続いて、家具メーカー日本フクラのホームページをご覧ください。
こちらのホームページでは、メニューやロゴを上部に配置しなければならない、という固定観念を崩した配置を採用しています。

日本フクラのホームページでは、ヒーロー画像の下にロゴやメニューを配置しています。
最初に見てほしい、感じてほしい、認識してほしいものを上部に持ってくることのメリットを活かしたデザインになっています。
　　

2. 大胆なタイポグラフィを採用する

例 ： 宇宙ビジネスコート

https://www.bizcourt.space

ヒーローの上に文字をかぶせる場合は、タイポグラフィにもこだわりましょう。
ブラウザの標準フォントを使うよりも、普段は見かけないユニークなフォントやデザインのほうが印象に残りやすくなります。

宇宙ビジネスを推進する宇宙ビジネスコートのホームページでは、太く縁取った円の中に「これも、宇宙。」というキャッチフレーズを入れて注意を引きつけています。

タイポグラフィがユニークであればあるほど、注目が集まり、鮮明な印象を与えることができます。
　　

3. アニメーションや動画の可能性を考える

例 ： 神勝寺「禅と庭のミュージアム」

http://szmg.jp

最近では、ページ全体に背景動画を使ったヒーローも多く見かけるようになりました。

例えば、神勝寺 禅と庭のミュージアムのホームページでは、背景に様々な庭がフェードで交互に現れます。人は動きがあるものには思わず視線を奪われてしまうので、動画を使ったりアニメーションを使うことで注目を集めることができます。
　　

4. モノトーンやグラデーションを取り入れてみる

例 ： 株式会社Gear8

https://gggggggg.jp

モノトーンやグラデーションは画像や映像の主張を和らげ、キャッチコピーに注目を集めやすくなります。

Webディレクションを行う株式会社Gear8のホームページでは、背景に黒い液体のようなものが漂う動画を使いながらも、背景と文字のコントラストにより、「Spice up your life」の文字をはっきりと認識することができます。

例 ： adaptable

http://weareadaptable.com

また、adaptableのホームページのようにデュオトーンを使ったりグラデーションを取り入れてみるのもいいでしょう。こうした加工も、写真本来の色合いとは違う配色になるので、色によるイメージを加えながらも、コピーを目立たせることができます。
　　

5. 適切なジャンプ率を見つけて余白との関係を考える

例 ： Aaron Porter ポートフォリオサイト

http://aaronporter.co

最後に、ジャンプ率について考えてみましょう。

ジャンプ率とは、本文のサイズに対するタイトルや見出しサイズの比率のことを指します。
ジャンプ率が高ければ大胆に見え、ジャンプ率が低ければシンプルで素朴に見えます。

アメリカ・ミシガン州のデザイナーであるアーロン・ポーターさんのポートフォリオサイトのヒーローでは、「Aaron.」の文字が大胆に配置されています。ジャンプ率が高いと言えます。

例 ： formidable

http://formidable.com

一方、同じクリエイティブ系のホームページでも、formidableのホームページでは左側に文字を置いています。ジャンプ率が低く、文字よりは岩のような物体のほうに視線が奪われます。

新聞や雑誌のタイトルのようにジャンプ率が高いと文字の主張が強く、メッセージ性が強くなります。
一方、イメージ先行でいきたいのであれば、ジャンプ率を抑えて、余白を十分にとるほうがよいでしょう。