15+ Beautiful Website Headers and Why They Work So Well

ユーザーがWebサイトで最初に目にするのは何ですか？

その通り、ヘッダーです。

それが十分に魅力的でない場合、明確でない場合、ユーザーはただ去っていき、二度と戻ってこないかもしれません。 ユーザーの注意を引きつけ、ウェブサイトの訪問者とのつながりを確立する上で重要な役割を果たします。

このため、次の行では、ウェブサイトのヘッダーをデザインする際に知っておくべきヘッダー デザインの原則に取り組みます。

従うべきヘッダー デザインの原則

調査研究によると、ユーザーの視線は次の 3 つのパターンのいずれかに従って Web ページ上を移動します：

• The Gutenberg pattern

Image Source: https://vanseodesign.comThe Gutenbergパターンは、テキストが多いコンテンツに適用することができます。 これは、読者の視線が一連の水平方向の動きでページを横切ったり下降したりすることを示唆します。

• Z 形パターン

Z字パターンは、ページをスキャンするときにユーザーの目がたどる経路を定義したもので、Z字の形をした経路を指します。 読者がすばやくスキャンするランディングページのデザインに推奨されます。

例：

• The F-shaped pattern

このパターンは、オンライン媒体で最もよく使われる、コンテンツのブロックを読むスタイルについて説明しています。 ユーザーはすばやく Web ページをスキャンし、目は F パターンに従います。

例:

これらのパターンについての詳細は省きますが、これらのモデルのいずれについても、上部の水平線が、訪問者がページをスキャンし始める場所だということを強調したいと思います。 ヘッダーは、ユーザーの注意を引き、ページの残りの部分を探索するよう促すフックとして機能する必要があります。 だから、ヘッダーに何を含めるかについてよく考える必要があります。

• Strong hero image

ヒーロー画像は、ウェブページの折り目の上に表示される非常に大きなバナー画像です。 これは、ヘッダー セクションに含まれ、ユーザーが Web サイトに到着したときに最初に目にするものです。 また、ヒーロー画像には、ビジネスのユニークセリングポイント（USP）に訪問者の注意を引きつける目的もあります。 ベストプラクティスでは、ヒーロー画像に実際の人物の顔を使用することで、訪問者がブランドにより親近感を抱くようになるとされています。 コミュニケーションは、より人間的で個人的なものになるのです。 Drift.com

• Unique selling point (USP)

USPは、ビジネスの存在理由を説明するフレーズです。 それは、そのビジネスが何を、なぜ、誰のために行うのかを明らかにする必要があります。 また、競合の中でブランドを際立たせるような、ユニークな特徴やメリットも強調すべきです。 強力なUSPは、ウェブサイトの訪問者に正しいメッセージを伝え、最終的に彼らを顧客に変えるために不可欠です。

ソース: miro.com

• ブランド名

ブランド名は、人々がサイトのアイデンティティに慣れるようにし、人々があなたのビジネスのアイデンティティに対して持つイメージを強化するものです。 また、Web サイトのヘッダーから切り出しても、容易に認識できるものでなければなりません。 また、Webサイトのヘッダーに配置することで、すべてのユーザーとの個人的なつながりを確立する上で重要な役割を果たすはずです。 多くの企業が、ユーザーがスクロールダウンして製品/サービスの特徴にたどり着くのを待たずに、動画の力を使ってメッセージを上手に伝えているのは、このためです。 また、78%の人が毎週オンラインビデオを視聴し、55%の人が毎日オンラインビデオを視聴していることも忘れてはなりません。

Source: wistia.com

• Call to action (CTA)

CTA とはメッセージ（通常はボタン上）を指し、ウェブサイトの訪問者から特定の反応を引き起こすためのものです。 コールトゥアクションは、明確に定義され、Web サイト訪問者が理解しやすいものでなければなりません。 当然ながら、ヘッダーに配置されたCTAは、訪問者がWebサイトへの旅を始める場所で、それぞれのユーザーから希望するアクションを取得する可能性が高まります。

このような場合、

このような場合は、シンプルで明確、魅力ある見出しにすることが一般的ルールです。 調査によると、「ユーザーが折り返しの上と下の情報をどう扱うかの差は、平均84%」だそうです。 ですから、これらの数字をできる限り減らすことに力を注ぐのがベストです。 そして、あなたが何を発信したいかについて自分でいくつかの目標を設定した場合、あなたはそれを最善の方法で行うでしょう。

大規模なWebサイトでは、www.youtube.com、ヘッダーに充てるスペースをほんのわずかな量に制限しています。 これは、ユーザーの注意を製品やサービス、ビデオ（YouTubeなど）など、より重要なものに向けさせる意図があるからです。

ヘッダーが必要ない場合もありますし、必要だとしても小さいものでいいのです。

すべてはウェブサイトの特殊性によるのです。

• Curiosity

特定の Web サイトでは、読者の好奇心を刺激するヘッダーを設定することが適切でしょう。 読者はもっと知りたくなり、もっと知りたくなり、急いでストーリーの続きを探そうとするはずです。 彼らはそこで大きな約束をしています。 「何でもデザインする」。 そして、あなたはこれをテストするよう誘われています。

• Action

場合によっては、ヘッダーから直接アクションを起こした方がよいこともあります。 コールトゥアクションを使用すると、ボタンをクリックするか、Web サイトで他のインタラクションを実行するように、ユーザーをすぐに呼び出すことができます。 また、購入する準備ができていない場合は、デモを予約するオプションもあります。

• 信頼

訪問者に信頼を与えることから始めると便利かもしれません。 後で何らかの行動を起こしてもらうためには、正しい判断ができたと十分に確信してもらわなければなりません。 彼らは、世界最大のCRMであると述べています。 さて、あなたは、世の中の99％の企業はその分野で一番乗りではないと言うかもしれません。 そして、あなたは正しいでしょう。 しかし、以下を読めば、間違いなく使えるものがあるはずです。 その製品がいかに効率的であるかを示すケーススタディがあるのです。

• 痛み

いったいなぜ、読者に、特にヘッダーから痛みを鼓舞したいのでしょうか？ 多くの企業は、FUD 原則 (恐怖、不確実性、疑念) に基づいてマーケティングを行っています。 コンバージョンプロセスの早い段階で、恐怖や痛みが、すぐにソリューションを適用し、その痛みを薄れさせる決断の引き金となります。

これは、サイバーセキュリティサービス、物理セキュリティサービス、ヘルスケアや年金基金のアプローチにもなりえます。

このようなアプローチは、COVID のワクチン接種の必要性やシートベルトの着用を人々に認識させたいキャンペーンで活用できます。

• Laughter

おそらく、訪問者と最初から感情的につながりたいのでしょう。 そして、そのためには、彼らを笑わせるに越したことはないのです。 そして大声で笑うことです。

• Familiarity

ユーザーの状況を、ヘッダーで提示された同様の状況と結びつけることで、ある程度の親近感が生まれます。

Types of Headers for Different Types of Websites

ウェブサイトの特異性によって、あるヘッダーが他のものより全体のデザインによく合います。

• CTA-focused header

Blue Apron の場合、ウェブサイトのヘッダーは、大きなヒーロー画像の代わりに大きな動画が使用されています。

次に、同じように居心地の良い、おいしい体験から利益を得るために、ユーザーに行動を起こすように誘うCTAがあります。

CrazyEggのWebサイトは、ユーザーに製品のライブデモを行うように誘うヘッダーを備えています。 彼らの製品は、まさにこのようなリアルタイムのデモンストレーションにぴったりなのです。 そして、その製品の利点を即座に証明してくれます。 風船の中の男性の手が、視線をボタンに向けています。

• Brand-focused header

これはブランドアイデンティティとブランディング要素に焦点を当てたヘッダーの美しいWebサイトの例です。 ロゴ、上部のブランドロゴの色の複製、そしてスローガンが含まれています。

• Content-focused header

これはブログや雑誌など、記事や物語を促進するものに非常に適しています。

しかし、私はいくつかの例外を見つけました。

パタゴニアはトップページでショップを宣伝していませんが、世界に変化をもたらすという彼らの取り組みを示すストーリーを押し出しています。

Ikea の場合、画面の左側でオンライン ストアの 1 つへの訪問を促し、残りの半分で Ikea のストーリーを読むようユーザーに促しています。

• Video background-focused header

BUKWILD はウェブサイトのヘッダーに3種類のビデオを統合しました。 それぞれの動画は対応する部分にマウスを乗せると再生されます。 面白いのは、ビデオをより大きな「絵」の一部として、ブランドを表現するためにクリエイティブに使っている点です。

• Product-focused header

オンラインファッション店のCroppの場合、最新のコレクションがヘッダーで紹介されています。

Threadless.com ではウォールアートに文脈を置き、CMYK Squadをフィーチャーしました。 ヘッダーには、「スクワッド」によってヘッダーに提示されたそのシナリオに、ある意味で属していると感じるすべての人のために、明確なCTAも含まれています。

• Personal branding-focused header

旅行ブログ Alex in Wanderlandの場合、ウェブサイトのヘッダーでは、アレックスの写真以外に、ユーザーはこのヘッダーに物語の始まりを見ているのです。 “Five years and counting on the road… “とあります。 これは、読者がもっとストーリーを探したくなるように誘うものです。

最後に…

ヘッダーは、ウェブサイトの成否に大きく貢献します。 技術的に言えば、この上部は当然ながら、人々がWebサイトで最初に接するものです。

。