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

人の印象は「第一印象」でほとんどが決まると言われています。
もちろん、その第一印象を大事にするという概念は、ホームページでも同様です。

第一印象が悪ければ、ユーザーはホームページからすぐに離脱してしまいます。逆に、ホームページの第一印象がよいと離脱率が低く、リピートにもつながります。
それでは一体、ホームページの第一印象を良くするにはどうしたらよいのでしょうか。

ずばり、そのポイントは、ホームページのヘッダー部分にあります。

そこで今回は、こんにちのホームページの多くで取り入れられている、ヘッダー部分に画像や映像を使ってインパクトを与える「ヒーロー」について、5つのポイントを交えて紹介します。

ぜひホームページ制作時の参考としてください。

Webデザインにおける「ヒーロー」とは

▲ 株式会社ウダツのホームページ。会社のロゴを中央に置いたヒーロー画像が配置されています

「ヒーロー」 (Hero)とは、ホームページにおいて、ページのファーストビューで大胆に配置された画像や動画のことを指します。特に、画像を使ったヒーローのことを「ヒーロー画像イメージ」 (Hero Image)、動画を使ったヒーローのことを「ヒーロー動画ムービー」 (Hero Movie)ということがあります。

ヒーローは、ブログなどのテキスト中心のホームページでなければ、ほとんどのWebサイトで採用されています。コーポレートサイトをはじめとする、ブランドイメージやコンセプトをユーザーに伝えることを目的としたホームページの場合は、画像や映像を効果的に使うことで、エンゲージメント率を高め、ユーザーをファンにさせる役割を果たしています。
　　

ヒーローの特徴

ただ単に画像をヘッダーに敷き詰めただけでは、ヒーローとは呼べません。
それでは、どのような条件をクリアすればヒーローと呼ぶことができるのでしょうか。

ファーストビューにおける画像や映像の割合が大きい

▲ KOBE CHOCOのホームページのヒーローは、画面全体にチョコレートのイメージを敷いています

「ファーストビューでいかにインパクトを与えるか」
これがヒーローの存在意義といっても過言ではありません。

そのため、単に上の方に画像を置いただけでは、インパクトに乏しく、ヒーローとは言えません。

目安として、あらゆるデバイスで、少なくともファーストビューの3分の1はヒーロー部分がカバーしているのが好ましいでしょう。
デスクトップは横長、スマホなどのモバイル端末では縦長で表示することが多いですが、そのことも留意しつつデザインしていきましょう。
　　

キャッチコピーがある

▲ 伊藤久右衛門のホームページでは、「人生に、お茶の時間を。」というキャッチコピーでイメージ喚起しやすくしています

必須であるというわけではありませんが、ほとんどのヒーローには「イメージ」と結びつける「言葉」(＝「キャッチコピー」)が存在しています。
ヒーロー画像やヒーロー動画に添えられたインパクトのある短いキャッチコピーやロゴなどは、イメージを想起させるためのトリガーの役割を果たします。
　　

テーマが1秒でわかる

ヒーローの画像や映像とキャッチコピーの整合性が合わなかったり、ヒーロー画像自体が見にくく印象的ではない場合は、ヒーローの役割を果たしていないことになります。
簡潔に言えば、テーマが1秒で分かるかどうかを意識する必要があります。

例えば、上に挙げたデタラメなヒーローは、画像自体もコントラストが低すぎて見ずらく、画像とキャッチコピーの整合性もありません。
これは極端な例かもしれませんが、できるだけイメージが湧きやすく印象に残りやすいイメージとキャッチコピーを使うべきです。
　　

よりよいヒーローにするための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のホームページでは左側に文字を置いています。ジャンプ率が低く、文字よりは岩のような物体のほうに視線が奪われます。

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

まとめ

ブランドイメージを強めたいのであれば、ヒーローを適切に設定することは必須の選択肢と言えます。
しかしながら、与えたい印象によって、どのようにヒーローを作り上げるのかが変わってきます。

今回は、具体的な事例も挙げながら、ヒーローを設定する上でのポイントについて解説しました。
ぜひ、実際の例も参考にしながらオリジナルのヒーローを作ってみてください。