「メラビアンの法則」という言葉を聞いたことがありますか?
アメリカの心理学者であるアルバート・メラビアンが1971年に発表した論文「Silent messages」の中で紹介した研究結果を法則化したもので、コミュニケーションで相手に与える印象は視覚情報と聴覚情報の9割で決まるというものです。

ホームページ閲覧時においても「メラビアンの法則」は当てはまります。
つまり、書いてある内容がどうであっても、最初に目に入ったホームページのデザインによって印象が決まってしまう、というものです。
もちろん、最終的には書いてある内容が役に立たなければ意味がないのですが、まず書いてある内容を読みたいと思ってもらえないと始まりません。
よく「ファーストビューが重要」と言われるのは、このような心理的な作用が背景にあります。

ファーストビューの中でも、特に「ヒーローヘッダーは大きな面積を占めます。「ヒーローヘッダー」とは、ホームページヘッダー部分に表示される画像を指します。

今回は、ファーストビューで印象を引きつける、美しいヒーローヘッダーを持つホームページをご紹介します。

日本発の美しいヒーローヘッダーのホームページ

1. GOGC Japan

01.jpeg
http://gogc.jp

「Whim woman~気まぐれな女性~」をコンセプトにしたファッションブランドGarage of Good Clothingのブランドサイトでは、女性がカメラ目線で写るモノクロ写真と太めのサンセリフ書体を使った大胆なヒーローヘッダーを使っています。
ファッションブランドのようにイメージが重要なホームページは、ヒーローヘッダーを大胆に使うと効果的にブランドイメージを演出することができます。

2. voice cream 奈良

02.jpeg
http://voicecream.jp

奈良といえば、鹿。
そんな私たちのイメージを思い切って表現したのが、ローカル情報を伝えるvoice cream 奈良のホームページです。
鹿がくちもとをうごかしながらこちらを見てくるので、見ているこちらも鹿とずっと目を合わせていたくなります。

3. 代官山綜合法律事務所

03.jpeg
https://daikanyamalaw.com

シンプルな細い白い枠に囲まれ、法律事務所の光景が動画で流れてきます。
丸や三角などの幾何学模様は、スクロールしたあとも続く一貫したデザインテーマになっています。

4. 913

04.jpeg
http://neufuntrois.com

銀座三越などで国産大豆を使ったスイーツなどを販売するブランド「913(ヌフアントロワ)」のホームページです。
豆の形に切り抜いた写真がカルーセルになっており、興味や食欲をそそります。

5. アキュモ鍼灸院+整骨院

05.jpeg
http://acumo49.com

京都府木津川市にある鍼灸院・整骨院の「アキュモ鍼灸院+整骨院」のホームページでは、マジックで書きなぐったかのようなユニークなタイポグラフィが印象的です。
全画面で施術の様子を見せながら、スクロールするごとにこの鍼灸院ならではのストーリーが語られるので、思わずマウスホイールを動かしたくなります。

6. MTRL (マテリアル)

06.jpeg
https://mtrl.net

渋谷のFabCafeや京都のMTRL Kyotoなどの運営を手がける株式会社ロフトワークのMTRLのホームページです。
ヒーローヘッダー部分はスプリットスクリーンになっており、左側で動画を背景にロゴが配置され、右側にはFabCafeとMTRL Kyotoの写真が並んでいます。

7. Wailea

07.jpeg
https://wailea.co.jp

ハワイアンジュエリーのブランドWailea(ワイレア)のホームページでは、セリフ書体と手書き文字がミックスしたタイポグラフィの背景にハワイのウェディングをイメージさせるような動画が流れます。
動画背景とビロー・ザ・フォールド(スクロールするまで見えない折り目の下の部分)との境界線もかすれたナイーブなデザインになっています。

8. NEST INN HAKONE

08.jpeg
https://nestinn-h.co.jp

右寄せのヒーローイメージが印象的なアシンメトリーなデザインを採用しているのが、箱根のモダンな料亭NEST INN HAKONEのホームページです。
室内外の画像が次々と切り替わり、余分な装飾がないUIによってミニマルでスタイリッシュなイメージを抱かせてくれます。

9. 大栄鉄工所

09.jpeg
https://daiei-ironworks.co.jp

千葉県富津市の鉄工所「大栄鉄工所」のホームページです。
ヘッダー部分で登場する写真では、鉄を切ったり溶接したりするときに発生する蒸気や火花がまるで芸術作品のように見えます。
プロフェッショナリズムを感じさせるヒーローヘッダーの好例です。

10. DEPART inc.

10.jpeg
https://depart-inc.com

品川区東五反田のクリエイティブエイジェンシー「DEPART inc.」コーポレートサイトでは、入口に掲げられているロゴを中心に、縦のラインをアクセントに入れたヒーローイメージを採用しています。
クロール後の次のメニュー「Who We Are」を画面下方で予告しています。

11. 十和田市現代美術館

11.jpeg
http://towadaartcenter.com

青森県にある十和田市現代美術館のホームページでは、ヘッダー部分に水色の枠を縁取ったかわいらしいデザインを採用しています。
5ヶ国語に対応しており、ナビゲーションメニューも上部にすっきりと配置されています。

12. MURO

12.jpeg
http://www.mu-ro.jp

大阪府堺市のインテリアコーディネートカンパニー「MURO」のホームページは、紺色の縁を周辺に取り、左上にハンバーガーメニューを配置しているデザインになっています。
縁の左側にfacebook、右側にInstagramのアカウントリンクをつけています。

13. TOKYO BASE

13.jpeg
http://www.tokyobase.co.jp

日本から世界へ、を合言葉に渋谷で展開しているファッションブランド「TOKYO BASE」のホームページでは、現在流行中のホワイトフレームを用いたデザインになっています。
ヘッダーでは白を基調とした爽やかなイメージの店内が垣間見られるようになっています。

14. いとう養鶏場

14.jpeg
http://ito-eggfarm.com

佐賀県武雄市でこだわりたまご通販を行なっているいとう養鶏場のホームページでは、ヒーローイメージは全画面ではなく画面の3分の2程度までにして、ロゴとメニューを下方に配置しています。
ロゴやメニューがこの位置にあると、スクロールするときにロゴやメニューが隠れなくなるので、実は合理的なポジションに配置されていることがご理解いただけるのではないでしょうか。

15. モンチッチ

15.jpeg
http://monf.jp

福岡のホームページ製作会社「モンチッチ」コーポレートサイトでは、ヘッダー部分に過去の取り組みをカルーセルで全画面表示をしています。
黒い太字のサンセリフ書体が印象的で、メニューもイメージにかぶせることでイメージの存在感を消さないように工夫されています。

16. MIYAVI

16.jpeg
http://myv382tokyo.com

ギタリストMIYAVIさんのポートフォリオサイトです。
ミュージシャンのホームページらしく、本人が目立つように配置されていますが、微妙にイメージが拡大されたり縮小されたりという細工が施されています。

17. KOBE CHOCO

17.jpeg
http://kobechoco.jp

神戸旧居留地に構えるチョコレート専門店「KOBE CHOCO」のホームページです。
「BE INTO CACAO!!」のキャッチコピーが印象的なヒーローヘッダー部分はカルーセルになっており、おいしそうなカラフルなチョコレートをいくつも映して食欲と好奇心を掻き立てます。
左側にエレベーターメニュー、右側にソーシャルメディアシェアアイコンを配置しています。

18. 紙のミルフィーユ

18.jpeg
http://kamino-mf.com

「ずっと紙。もっと紙。」というキャッチコピーが印象的な、紙のミルフィーユのホームページです。
個性豊かなメモやノートが登場しますが、余白(ホワイトスペース)の取り方が上手で、素朴で落ち着いた印象を与えます。

19. 淡路ハイウェイオアシス

19.jpeg
http://www.awajishimahighwayoasis.com

淡路島の入口にある「淡路ハイウェイオアシス」のホームページヘッダーは、写真の上に白いペンで書いたような可愛いイラストがアニメーションのように動きます。
手書きのアニメーションは温もりを感じやすく、一気に心の距離を縮めてくれる役割があります。

20. 思い立ったら、旅日

20.jpeg
https://www.ab-road.net/article/omotabi/

海外旅行情報を発信するエイビーロードの特設サイトです。
こうしたサイトでは、海外旅行に行きたいと一瞬で思ってもらえることが重要ですが、爽やかな海の写真を使って見事にユーザーを引きつけています。

まとめ

ビジネスでも第一印象の大切さがよく言われますが、ホームページでも第一印象が与えるパワーは、Webマーケターが思っている以上に大きいものです。
今回ご紹介したホームページを参考に、ファーストビューでどのようにユーザーに思いを届けられるか、ぜひ考えてみてください。