すべてはファーストビューで決まる！日本発の美しいヒーローヘッダーのホームページ20選

更新日: 2018年06月01日

CMS・サイト制作

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

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

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

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

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

1. Stripe club

http://gogc.jp

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

2. voice cream 奈良

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

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

https://daikanyamalaw.com

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

4. 913

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

5. 高塚鍼灸治療院

http://acumo49.com

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

6. MTRL (マテリアル)

https://mtrl.net

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

7. Wailea

https://wailea.co.jp

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

8. NEST INN HAKONE

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

9. 大栄鉄工所

https://daiei-ironworks.co.jp

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

10. DEPART inc.

https://depart-inc.com

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

11. 十和田市現代美術館

http://towadaartcenter.com

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

12. MURO

http://www.mu-ro.jp

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

13. TOKYO BASE

http://www.tokyobase.co.jp

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

14. いとう養鶏場

http://ito-eggfarm.com

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

15. モンチッチ

http://monf.jp

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

16. MIYAVI

http://myv382tokyo.com

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

17. KOBE CHOCO

http://kobechoco.jp

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