ホームページをおしゃれに見せるヘッダーデザイン作成のコツ

自分のホームページをデザインしようとすると、遅かれ早かれその道のプロにアドバイスを求めたくなる時が出てきます。（そんな時はぜひ Wix を試してみて下さいね）たとえば、ヘッダーのデザインを作成するとき。ヘッダーという言葉は聞いたことがありますか？ いろいろなサイトで常に目にしていますが、実はヘッダーに大きな可能性と役割があることを理解している方は少ないのではないでしょうか？

見栄えが良く機能性も両立したヘッダーのデザインは、思ったより手がかかるものです。ホームページを作成するときは、訪問者が最初に目にするのがヘッダーであることをまず意識しましょう。サイトに含まれるすべてのパーツと同じく、ヘッダーにもブランド要素をしっかりと反映させ、同じくらい戦略的かつクリエイティブな思考でデザインする必要があります。

この記事では、サイトを新規作成する場合にも、今あるサイトをリニューアルしたい場合にも役立つヘッダーデザインのベストプラクティスをご紹介します。サイトの外観にマッチするおしゃれなヘッダーを作成したいと思っている方は、ぜひ参考にしてみてください。

ホームページのヘッダーとは

ヘッダーとはその名の通り、Web サイトのページの上部にある横長のパーツのことです。ヘッダーは通常ページの上部に固定されているため、すべてのページで同じように表示されます。

ヘッダーの主な目的は、訪問者にサイトの基本的なコンテンツ構成を伝え、さらに閲覧してもらうよう促すことです。また、サイトのナビゲーション（訪問者が探している情報にたどり着けるよう案内する）ツールとしての役割も果たします。訪問者があるページから次のページへと移動する際、ヘッダーがあれば次に見たいページをすぐに探すことができます。

ヘッダーは Web サイト全体のトーンを設定する重要なパーツです。Web デザイナーたちはこぞってヘッダーのデザイン向上に熱心に取り組んでおり、その結果、ヘッダーのデザイン方法、ヘッダーに含めるコンテンツ、表示方法などが変化を遂げ、今では実にさまざまなバリエーションが登場しています。

ヘッダーに含めるべきコンテンツ

ホームページのヘッダーはデザインの重要な要素ですが、スペースとしてはそこまで大きくありません。その小さな（とはいえ、とても大切な）ヘッダースペースにどんな情報を盛り込むかはあなた次第です。

ヘッダーのデザインは、訪問者のサイトとのインタラクションを高めてくれるものであるべきです。そのため、ヘッダーでは「サイトの中で最も目立たせたい項目」を強調すると良いでしょう。ヘッダーを通じて、注目してほしいコンテンツに目を通してもらうよう訪問者を誘導するのです。

以下ではホームページのヘッダーに含まれる最も一般的な要素をご紹介します。これらはあくまで例なので、すべて追加する必要はありません。ヘッダーをデザインする際の参考にしてみてください。

ビジネス名

ヘッダーにビジネス名が記載されていれば、訪問者の人たちは今自分が目的のサイトを見ているかどうかをすぐに知ることができます。さらに、Web サイトのトップにビジネス名を表示することで、ブランドアイデンティティの強化にもつながります。

「ビジネス名」とは何も会社だけの特権ではありません。個人ブログやオンラインポートフォリオを作成する場合は、ヘッダーに自分の名前、屋号、イニシャルなどを積極的に使っていきましょう。名称をまだお持ちでない場合は、ビジネス名の作成ツールなども活用してご自身にぴったりのものを探してみましょう。

ロゴ

スモールビジネスや個人ブランドを運営している場合、ロゴの作成はもはや必須と言っても過言ではありません。どのような業界であっても、ロゴはすべてのマーケティングアセットの主役となる存在です。ブランドアイデンティティを強化するために、ホームページのヘッダーにもロゴを追加しましょう。ヘッダーはブランドの存在感を目立たせるにはもってこいの場所です。

ロゴをどこに配置したらいいか迷うことがあるかもしれませんが、「ここでなければいけない」といったルールはありません。実際のデザインでは、ヘッダーの中央や横に配置されている場合が多く見られます。ニールセン・ノーマン・グループの調査によると、Web サイトのヘッダーの左側にロゴを配置した場合、ユーザーはそのブランドをより良く記憶することができるそうです。このような傾向にならってロゴの配置を決めるのも良いですが、最終的にはあなた自身が満足できるデザインを採用することが大切です。

ヘッダーデザインのヒント：作成したロゴが比較的大きく、ヘッダーの領域に収まるかが心配な場合は、オリジナル版を簡略化したり小さくしてロゴのバリエーションを作成すると良いでしょう。

ナビゲーションメニュー

Web サイトのナビゲーションメニューは、通常ヘッダー上に配置されます。ナビゲーションメニューとはサイトに含まれるアイテム（例：「会社概要」ページなど）のリストのことで、それぞれのアイテムをクリックすると該当するページに遷移します。ヘッダーは訪問者が必ず目にするものであるため、ここにメニューを配置するのはとても効果的です。訪問者に分かりやすいナビゲーションを提供することで、ユーザーエクスペリエンスの向上も期待できます。

ショッピングカート

Web サイトをデザインする際に重要なのは、「ユーザーが見たいページを探す前に、その場所に誘導」できるようにすることです。サイトにネットショップが併設されている場合、ヘッダーにショッピングカートを追加することでチェックアウトのプロセスを簡略化し、より便利に進められるようになります。ユーザーがサイトを閲覧し、カートに商品を追加していく際に、ヘッダーにショッピングカートのアイコンがあれば自然とチェックアウトへ進むことができます。こうすることで、（あなたと購買客の両方にとって重要な）ネットショップの最終目標である「注文を完了し、簡単に支払いを行う」をスムーズに達成できる確率が高まります。

検索バー

ヘッダーに検索バーを追加しておけば、訪問者はサイト上で探している情報を検索し、それに関連する情報に確実にたどり着くことができます。ユーザーは最も関心のあるトピックに関連する記事を検索する傾向が高いため、特にブログページなどに追加すると良いでしょう。

検索バーなどの便利機能は、Web サイトのヘッダーに配置することをお勧めします。ヘッダーであればページの上部から簡単に機能にアクセスできますし、訪問者が見逃す心配もありません。

ログイン

会員制の Web サイトを作成する場合、通常はユーザーにログインしてもらう必要があります。これは一般公開していない限定情報を保護するためで、会員が有料の定期購入プランを契約しているかどうかに関わらず、サイトの会員限定コンテンツにアクセスするには認証情報の入力が必要です。そのため、サイト上の分かりやすい場所にログインページへのリンクを配置しておくとよいでしょう。訪問者全員が目にするヘッダーは、やはりこの場合も最も理想的な場所だと言えます。

SNS リンク

SNS のフォロワーは多いに越したことはありませんよね。ユーザーを誘導するために、Web サイトに SNS アイコンを追加している例も多くあります。サイトから自分の SNS チャンネルにリンクを張り、サイト訪問者からのフォローやいいね！を獲得しましょう。

通常、SNS リンクは Web サイトのヘッダーやフッターに含まれています。これらをサイトの一番上（ヘッダー）に追加すれば、訪問者にいち早く見てもらえる可能性が高まります。しかし、ヘッダー部分のスペースが足りないという場合は無理やり詰め込む必要はありません。ほとんどのユーザーは SNS アイコンがフッターに配置されていることを認識しているため、フッターまでスクロールして確認してくれる場合も少なくありません。

言語

あなたのサイトは多言語に対応していますか？他言語サイトの運営は労力を要しますが、リソースが許せば挑戦してみると良いでしょう。他言語サイトを開設し、ローカライズされたコンテンツを提供することでオーディエンスの基盤を大幅に増やすことができます。

翻訳が完了し、コンテンツをアップロードしたら、次に海外からの訪問者が希望する言語でサイトを閲覧できるようにしましょう。ヘッダーに言語メニューを追加すれば、対応している言語オプションを分かりやすく表示することができます。

ヘッダーデザインのベストプラクティス

繰り返しますが、ホームページのヘッダーデザインにルールはありません。伝統的な横長のナビゲーションメニューも良いオプションですが、枠にとらわれない自由な発想でデザインを楽しみましょう。限られたスペースにいかに情報を盛り込んでいくのかという点で、ヘッダーのデザインには工夫と努力が必要です。

どのような方向性を選ぶにせよ、ヘッダーをデザインする際には次のような点を意識すると良いでしょう。

はっきりとした読みやすいフォントを使用する

ヘッダーはページの最上部に位置し、最も重要かつ情報量の多い要素を含んでいるため、読みやすさが重要であることは言うまでもありません。ヘッダーを作成する際には、ブランドアイデンティティを象徴しながらも、極めて読みやすいフォントを選ぶことが重要です。テキストは読者をガイドするためにあるのですから、読解に手間がかかるような難解なフォントは避けましょう。

デザインの一貫性を意識する

ヘッダーのサイズ、色、形などで特に決まったルールはありませんが、ヘッダーデザインは目立ちながらもサイトと一体感のある、絶妙なバランスに仕上げたいものです。ほどよく存在感があり、サイトの他の部分の外観を彩るデザイン要素としての役割を兼ね備えたヘッダー構成を意識しましょう。

よく言われる「良いヘッダーの基本」としては、次のようなものがあります。あくまで一つの考え方として参考にすると良いでしょう。

• ヘッダーのサイズは、ユーザーのコンテンツ体験を阻害しないぐらいの大きさに留める。

• ヘッダーの配色やフォントなどの視覚的な要素は、サイトの他の部分のデザインと一貫性を保つようにする。

明確な CTA（行動喚起）ボタンを追加する

サイトを通じてビジネスを成長させたいと思っているなら、ヘッダーに効果的な CTA（行動喚起）ボタンを追加して多くの人にクリックしてもらいましょう。例えば、レストランサイトであれば、ヘッダーに「ご注文はこちら」という CTA ボタンを設置します。また、非営利団体のホームページの場合は、「今すぐ寄付する」ボタンで訪問者からの寄付を募るのも良いでしょう。CTA ボタンには、期待するアクションを明確に示した魅力的なメッセージを1〜2語で記載しましょう。

イラストやアニメーションを追加する

ヘッダーに空きスペースがある場合は、イラストやアニメを添えて華やかさをプラスしてみましょう。ベクターアートを使用すれば、高解像度かつあらゆるサイズの Web 用グラフィックを簡単に追加することができます。イラストやアニメーションを取り入れることで、サイトに生き生きとした印象をプラスし、訪問者に嬉しい驚きを与えることができます。

ヘッダーの可能性を追求する

ヘッダーはすべて同じデザインにする必要は全くありません。Web デザインの進化にともない、多くのホームページが斬新かつ興味深いヘッダーデザインを採用するようになっています。自分のサイトのヘッダーをデザインする際には、以下のようなユニークなバリエーションもいくつか検討してみてください。あなたが求める Web デザインのニーズに対して、より良い解決策が見つかるかもしれません。

固定ヘッダー

固定ヘッダーは各ページの上部に常に表示されるため、ユーザーはどこにいてもヘッダーを見ることができます。シンプルなデザインですが、すべてのページからいつでも情報にアクセスできるため、優れたナビゲーション体験を提供します。

ナビゲーションの非表示（ハンバーガーメニュー）

最近はホームページにハンバーガーメニューを採用する Web デザイナーも増えてきています。ハンバーガーメニューはレスポンシブデザインで見られるメニューの表示形式です。サイトの上部に3本の横線アイコンが固定表示され、クリックすると簡略化されたナビゲーションメニューが表示されます。「ハンバーガーメニュー」というアメリカンな名前はさておき、皆さんも一度は目にしたことがあるのではないでしょうか。

ハンバーガーメニューは、サイト上のスペースを節約しながらユーザーに豊富なオプションを提供できるので、ミニマルな Web サイトデザインを好む場合に理想的です。さらに、ハンバーガーアイコンを遊び心溢れるデザインに変えることだってできます。

モバイルヘッダー

最近では、多くの人が移動中にスマホからホームページを閲覧しています。そのため、モバイルサイトのデザインは以前にも増して重要視されるようになっています。ヘッダーに関しても、スマートフォンで見た場合に正しく表示されるかを必ず確認しておきましょう。ヘッダーのサイズやコンテンツを調整したり、モバイルサイトではハンバーガーメニューに切り替えるなどの設定を行うと良いでしょう。

縮小ヘッダー

サイトに美しい背景画像を設定したが、ヘッダーを追加すると隠れてしまう…という場合におすすめのデザインです（ヘッダーを追加しないというオプションもなきにしもあらずですが、この記事を読んだ後はきっと、ヘッダーデザインに挑戦してみたいと思っていただけるのでは？）。

縮小タイプのヘッダーは、ユーザーがスクロールダウンするにつれて Web サイトの背景に溶け込むように非表示になります。常に見えるわけではありませんが、訪問者にはそこにヘッダーがあるということは伝わります。実用性はさておき、このヘッダーデザインはサイトに視覚効果を追加したい場合に最適です。絶妙な3次元効果を生み出すパララックススクロールと組み合わせると、さらにデザイン性を追求したサイトに仕上がります。

メッセージ入りヘッダー

ホームページのヘッダーにテキストを追加することで、パーソナルなメッセージや企業のスローガンなどを訪問者に最初に伝えることができます。ここでいうメッセージとはページタイトルやビジネス名ではなく、情報提供やモチベーション喚起を目的としてヘッダーのスペースに表示されるテキストのことです。例えば、あなたのブランドやサービスに関連するインスピレーションを与えるような言葉や、格言を取り入れてみるのはどうでしょう。また、ビジネスに関する最新情報を追加したり、訪問者への歓迎メッセージなどを追加するのも良いでしょう。

ライター： Wix Team