24 Webサイトのヘッダーの例、変換の傾向とヒント

Webサイトは、スタイル、形式、および品質が異なります。 しかし、それらすべてに共通していることが1つありますか？ ヘッダー-ナビゲーションを容易にする上部のストリップ。

最小限のスペースしか占有していませんが、ヘッダーはWebサイトで最も深く関与している要素です。 印象を残そうとしている企業は、簡単で直感的でありながらユニークで刺激的な体験を提供するという完璧なバランスをとるよう努めます。

この投稿では、内訳を示しながら、24のWebサイトヘッダーの例を共有します。

• まさにウェブサイトのヘッダーとは
• あなたのウェブサイトのヘッダーに何を含めるか
• 変換を最適化するためのベストプラクティス

このようにして、マーケティング目標をサポートしながら、堅実なユーザーエクスペリエンスを提供できます。

ウェブサイトのヘッダーとは何ですか？

Webサイトのヘッダーは、通常Webサイトの上部に表示される視覚的な活版印刷のストリップまたはメニューです。 ロゴ、ナビゲーションタグ、ログインボタンなど、クリック可能なコンポーネントが多数含まれています。 事実上すべてのWebサイト（最も基本的なWebサイトでさえ）はホームページにヘッダーを備えており、多くのWebサイトには残りのページにヘッダーのバリエーションがあります。

非常に基本的な、すぐに認識できるWebサイトヘッダーは次のとおりです。

上でほのめかしたように、ウェブサイトのヘッダーには二重の責任があります。

• ナビゲーション。 何よりもまず、サイト訪問者をWebサイトの他のページに効果的に誘導できる必要があります。
• マーケティング。 正しく設計された場合、ヘッダーはあなたのビジネスのマーケティング資産および販促手段になることができます（そしてそうあるべきです）。

Webサイトのヘッダーには何を含める必要がありますか？

以下に、Webサイトのヘッダーに表示される可能性のあるいくつかの要素を示します。 ただし、すべてのヘッダーにこれらすべてが含まれるわけではないことに注意してください。 それはすべてあなたの業界、業種、そしてウェブサイトのフォーマットに依存します。 さらに、同じサイト内のどのページを表示しているかによって、ヘッダーが変わる場合があります。 たとえば、ホームページのヘッダーには5〜6個のクリック可能な要素が含まれている場合がありますが、リソースページでは、ヘッダーに含まれるクリック可能なアイコンの数が少ない場合があります。

ロゴ

ごくわずかな例外を除いて、Webサイトのヘッダーのすべてのバリエーションには、クリックするとユーザーをホームページに戻す会社のロゴが目立つように表示されます。 彼らが迷子になった場合、彼らはいつでもそれを頼りにして、彼らを慣れ親しんだ領域に戻すことができます。

ナビゲーションリンク

これは、Webサイトのヘッダーの中核でもあります。 通常、メインのナビゲーションオプションは5〜7要素のままにしておきますが、リンクするページはニッチによって異なります。 一部の企業では、ナビゲーションメニューから[会社概要]ページ、[製品またはサービス]ページ、[価格設定]ページ、[リソース]ページ、および[お問い合わせ]ページにリンクしています。 他の人にとっては、それはキャリアページまたは初めての患者ページにあります。 それはすべて業界によって異なります。

ほとんどのSaaSおよび技術Webサイトのヘッダーは次のようになります。

• 製品は、訪問者にさまざまな機能または製品タイプの詳細なビューを提供します。
• ソリューションは、訪問者をページ/ハブに導きます。そこでは、会社のプラットフォームをさまざまなシナリオで活用する方法や、さまざまなパッケージを確認できます。
• リソースには、多くの場合、ブログ、ケーススタディまたは紹介文、ナレッジベース、および/またはホワイトペーパーが含まれています。
• 価格設定により、訪問者はプラットフォームのさまざまなサブスクリプションパッケージが表示される包括的なページに移動します。 一部のSaaSプラットフォームは、価格設定パッケージを公開することを躊躇していることに注意してください。 これは、カスタマイズされ、統一された価格設定構造を欠いているエンタープライズソリューションに関して特に当てはまります。

検索バー

インターネットの初期には、検索バーは現在よりもはるかに普及し、頻繁に使用されていました。 検索バーを見るとわかります。ほとんどのサイトでは、要素の機能を示すために虫眼鏡アイコンが使用されています。

ホームページのヘッダーよりもブログのメニューヘッダーに検索バーが表示される可能性が高くなります。 それでも、一部のサイトはホームページのヘッダーにそれを掲載しています。 主要なビデオホスティングプラットフォームであるBrightcoveは、興味深いことに検索バーを備えていますが、より一般的な価格設定要素を備えていません。

ショッピングカート

eコマースウェブサイトの定番であるこのCTAは右上にあり、ショッピングカートまたはショッピングバッグのアイコンのいずれかである必要があります。

ソーシャルメディアボタン

これらはより一般的にWebサイトのフッターに表示されますが、一部のWebサイトヘッダーにはソーシャルチャネルへのリンクが含まれています。 次に例を示します。

ログインフィールド

ログインオプションがあるWebサイトには、ヘッダーにもログインフィールドを含める必要があります。 アクティブな顧客の場合は、アクセスするためにパンチインできるユーザーとパスワードがあります。 ほとんどの主要なプラットフォームには、Googleアカウントを介してアクセスするオプションもあります。

CTA

この投稿のほとんどすべての例で気付くのは、ヘッダーに召喚状が含まれていることです。 これはWebサイトで最も頻繁に使用される要素であるため、これを利用してビジネス目標をサポートする必要があります。 これには、無料のツールの使用、何かへのサインアップ、ビジネスへの連絡、無料トライアルの開始などがあります。

ウェブサイトのヘッダーの例とトレンド

コンポーネントはわずかですが、Webサイトのヘッダーを構成する方法はたくさんあります。 あなたにアイデアとインスピレーションを与えるためにさらに多くのウェブサイトの例を見てみましょう。

左揃えのロゴが付いた1行のヘッダー

基本的ですが効果的なZohoには、クリック可能な4つのナビゲーション要素と検索バーがあります。 Zohoがどのように正しい配置を選択したかも注目してください。 これによりロゴが強調され、訪問者の注意を引く余地が広がります。

通知バー付きの1行ヘッダー

ヘッダー自体はごく普通のことですが、上部のバナーは、新しい、重要な、および/またはエキサイティングなものに注意を引くことを目的としています。 Elementorは最近これを使用して、WordPressのクラウ​​ドホスティングを提供するようになったことを発表しました。

SEランキングは現在、ウクライナのサポートを促進するために通知バーを使用しています。

もちろん、これらのバナーにはCTAが含まれます。 クリックすると、訪問者はバナーにオファーの詳細が記載された指定のランディングページに移動します。

2層ヘッダー

2層のヘッダーは、アイコンの1つの連続した行で訪問者を圧倒することなく、より多くのナビゲーションオプションを提示するのに役立ちます。

通知バー付きの2層hHeader

Amplitudeは、今後の会議を宣伝するために、2層のヘッダーの上に通知バーを追加しました。 通知バーの長さはヘッダーと同じであるため、雑然とした感じが少なく、サイトの別のセクションのように感じられます。

ユーティリティバー付きヘッダー（スティッキーバー）

一部のサイトでは、訪問者がページを下にスクロールするときにヘッダーが固定されるようにヘッダーを付加しています。 彼らの論理的根拠は単純です：あなたの訪問者にあなたのウェブサイトの任意の部分にいつでもナビゲートするオプションを提供します。

このヘッダーは、サイトの下部までずっと表示されます。

フローティングヘッダー

Mixpanelのホームページに見られるように、フローティングヘッダーはスティッキーバーに似ています。違いは、下にスクロールすると、ヘッダーの上下にWebページが表示されるため、フローティング効果が作成されることです。

メガメニュー付きヘッダー

一部のWebサイトは、ヘッダーで共有する情報が不足する余裕がありません。 そのような場合、メガメニューを使用すると非常に便利です。

マルチサイトナビゲーション付きヘッダー

通常、小売やeコマースのWebサイトで見られるように、マルチナビゲーションヘッダーを使用すると、ユーザーはある姉妹会社のサイトから別の会社のサイトに簡単にジャンプできます。

左揃えの垂直ヘッダー

従来とは異なるヘッダーの最初の例では、同じナビゲーションメニュー項目の多くが左に垂直にぶら下がっています。

右揃えの垂直ヘッダー

同じコンセプトですが、今回は右側に垂直に配置されています。 これらの人たちは、各メニュー項目も垂直に吊るすことで、さらに一歩進んだ。

ハンバーガースライドイン

あまり一般的ではありませんが、それでも魅力的なハンバーガーメニューは、洗練されたWebデザインの優れたデモンストレーションです。 メニューがスライドすると背景が暗くなり、クリック可能なオプションに訪問者の注意を引くのに役立ちます。

これが同じことですが、反対側にあります。

フルテイクオーバースライドイン

Vimeoのように、本当に大胆になり、メニューを画面全体に拡張できます。

ウェブサイトヘッダーのベストプラクティス

• 色のコントラストを使用します。 最低限、ヘッダーの背景色と選択したフォントの比率は4.5：1である必要があります。 これは、ヘッダーとその周囲に含まれる二次情報にも当てはまります。 ヘッダーメニューが表示されたら、ページの背景を暗くして、より焦点を絞ることもできます。
• CTAを含めます。 これについては上で述べましたが、もう一度言及する価値があります。 ビジネスに連絡する場合でも、無料のツールを試す場合でも、試用を開始する場合でも、
• 粘着性を持たせます。 一部のWebサイトは、そのデザインと動的なスクロールテリングで簡単に驚かされますが、最終的に、ほとんどのWebサイトには1つの明確な目的があります。それはコンバージョンです。 訪問者がバウンスする前に、訪問者に価値を提供するのに約15秒かかるため、訪問者が常に重要なページに移動できるようにする必要があります。 言うまでもなく、常に重要なCTAを確認してください。
• 直感的にしてください。 あなた自身のウェブサイトのために1つを選ぶ前に、あなたのニッチの競争相手と他のサイトを調べて、最も一般的なものを見てください。 ウェブサイトのナビゲーションは、独自性や「破壊的」を目指して努力すべき分野ではありません。
• モバイル向けに最適化します。 顕微鏡でしか表示されないフォントサイズを使用しない限り、モバイルでは水平ヘッダーはオプションではありません。 最も一般的なアプローチは、モバイルブラウジング用のハンバーガーメニューを構成することです。

必要に応じて、モバイル向けに最適化するときに検索バーやCTAボタンを失う必要がないことは注目に値します。 Hubspotの機能は次のとおりです。

• シンプルなフォントにこだわる。 UXに関しては読みやすさがすべてであり（そして、結局のところ、コピーライティング心理学も）、サイトの最も基本的なクリック可能な要素に関しては、二重に重要です。 Sans Serifフォントは、非常に読みやすいため、Webサイトのヘッダーテキストによく使用されます。

良いことに、レモネードはヘッダーフォントにロゴフォントを使用していませんでした。

ウェブサイトのヘッダー：繊細なアートフォーム

さまざまな形やサイズで提供されるWebサイトのヘッダーは、サイトの成功に不可欠です。 より伝統的なデザインを選択する場合でも、もう少し実験的なデザインを選択する場合でも、普遍的なベストプラクティスに従うことが重要です。 Webサイトがヘッダー要素にアクセスした場合、それはまったく気づかれません。 あなたのサイトへの訪問者は、簡潔でありながら刺激的なナビゲーション体験を提供されて帰ってきます。 多くの場合、これは最終的なビジネス目標に向けて彼らを導くのに役立ちます。 特定のページにアクセスする場合でも、実際に有料の顧客に変換する場合でも。

著者について

Yoni Yampolskyは、Elementorのマーケティングマネージャーです。 Elementorは、1,000万人を超えるアクティブユーザーを擁し、ほぼすべての人がコードフリーで魅力的なWordPressWebサイトを作成できるようにしています。