ホームページのヘッダーの役割とは？作り方やデザイン例を解説

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

ホームページのヘッダーとは、ページ上部に配置されている領域であり、どのページに移動しても変わらず表示される点が特徴です。一般的なページのヘッダーは、以下のような要素で構成されています。

• ロゴ
• グローバルナビゲーション
• サイト内検索
• お問い合わせや資料請求ボタン

構成要素はWebページの種類によって異なり、ECサイトの場合はカートボタン、会員制サイトの場合はログインボタンなどが配置されています。

フッターとの違いとは？

ヘッダーがホームページの上部に配置されるのに対し、フッターは下部に配置されている領域であることから、「対の関係」ともいわれています。

一方、ページに移動しても変わらず表示できる点や、ホームページ内での移動をしやすくし、利便性を高める役割がある点などは共通しています。

ホームページのヘッダーの役割

ここからは、ホームページにおけるヘッダーの主な役割を3つ紹介します。

ユーザーの興味を引き付ける

ヘッダーの1つ目の役割は、ユーザーの興味を引き付けることです。

初めてホームページを訪れたユーザーの多くは、ヘッダー付近を見て必要な情報がありそうか、その先まで読み進めるかを判断するといわれています。

そのため、誘目性の高いデザインや、ホームページに何があるかがひと目でわかるような作りにしておくことが大切です。

商品・サービスの内容を端的に伝える

ヘッダーの2つ目の役割は、商品・サービスの内容を端的に伝えることです。

ヘッダーに自社の商品・サービスが記載されていれば、それらを求めているユーザーはその後もホームページを読み進めたり、回遊したりするでしょう。

一方、ユーザーの多くはホームページを隅々までじっくりと見ない傾向にあり、ヘッダーに商品・サービスの情報がないだけで離脱してしまうケースも少なくありません。

商品・サービスや自社のブランディング

ヘッダーの3つ目の役割は、商品・サービス・自社のブランディングをすることです。

ヘッダーは、ホームページ内のどのページに移動しても表示されるように、固定できる特徴があります。この特徴を利用して、商品・サービスを連想させる色合いやデザインで統一することで、視覚的なブランディング効果も期待できます。

自社が特に知ってほしい商品やサービス、自社に抱いてもらいたいイメージに合わせたデザインにするとより効果的です。

▷ホームページ制作でやってはいけない8つの項目｜解決案も含めて解説

ホームページに最適なヘッダーのサイズ

ホームページのヘッダーサイズは、ユーザーにどんな印象を与えたいか、どのくらいの情報を掲載したいかなどによって異なる点に注意しましょう。

明確な正解はありませんが、PC向けのページで70px〜140px、スマホ向けのページで50〜70px程度が最適なサイズと考えられます。実際に、大手企業をはじめとする多くのホームページでこの範囲内のサイズが採用されています。

例えば、シンプルさを押し出したい場合は、デザイン性にこだわりすぎず文字だけにして、低い位置に設置するとよいでしょう。情報提供を優先したい場合は、検索窓などを設置して高めの位置に設定するのがおすすめです。

ホームページのヘッダーの作り方

ここかrはあ、ホームページのヘッダーの具体的な作り方を3つ紹介します。

HTMLで作成する

1つ目の方法は、HTMLを用いて自社で作成する方法です。

HTMLにはヘッダーを作成するためのコードが用意されており、headerタグでテキストを囲めば、テキストの部分がヘッダーとして認識されます。実際のコードは以下のように記載します。

＜header＞

＜h1＞

＜a href=”/”>ホームページのタイトル

＜/h1＞

＜nav class=”nav”＞

＜ul＞

＜li>＜a href=”#”>設置したいメニュー1＜/a＞＜/li＞

＜li>＜a href=”#”>設置したいメニュー2＜/a＞＜/li＞

＜li>＜a href=”#”>設置したいメニュー3＜/a＞＜/li＞

＜li>＜a href=”#”>設置したいメニュー4＜/a＞＜/li＞

＜/ul＞

＜/nav＞

＜/header＞

さらに充実したヘッダーにしたい場合は、対応するコードを組み込む必要があります。

CMSで作成する

CMSを利用する場合、ツールによって操作方法は異なりますが、ヘッダーの編集画面が用意されているのが一般的です。

もともと備え付けられているテンプレートや、任意の画像をアップロードして自由にヘッダーを作成できます。ツールによっては簡単にカラム数を変更できたり、ドラッグ・アンド・ドロップでパーツを組み替えたりできる場合もあります。

CMSはHTMLに比べて視覚的・直感的に作成できるため、専門知識がなくても比較的容易にイメージどおりのヘッダーを作成できるでしょう。

▷ホームページを自分で制作する方法！初心者におすすめのツールや自作のメリット・デメリット

専門業者に依頼し作成する

自社で作成するのが困難な場合、または技術的に複雑なヘッダーを作成したい場合は、専門業者に依頼して作成するのもひとつの方法です。

その場合は、自社が求めるデザインを作れることに加えて、制作実績が豊富でサポートが充実している業者を選びましょう。

▷サブスク型ホームページ制作会社8選｜メリット・デメリットや従来型との比較

ホームページのヘッダーを作成する際のポイント

ここからは、ヘッダーを作成する際に知っておくと良いポイントを3つ解説します。

コンセプトに沿った見やすいデザインを心がける

ホームページのヘッダーは、サイトのコンセプトに沿いつつも、見やすくシンプルなデザインを心がけましょう。ヘッダーの役割は訪れたユーザーの興味を引くことであり、視認性・利便性が重要なためです。

欲しい情報がすぐに見つかり、サイト内を回遊しやすい作りになっていると、ユーザーから喜ばれ、高評価を得られる可能性が高まります。

ユーザーの視線を意識する

ユーザーの視線の動きを理解し、その動きに沿った作りにすることも大切です。多くのユーザーの視線の動きは「Z型」あるいは「F型」のいずれかであるといわれています。

Z型

Z型とは、ページの左上→右上→左下→右下と、アルファベットの「Z」の形で読み進める視線の動き方です。

情報量の多いページを閲覧する場合に多い動き方で、ファーストビューにあたる左上に注目が集まりやすい特徴があります。そのため、ヘッダーの左上に重要なコンテンツを設置しましょう。

F型

F型とは、ページの左上→右→一段下がって左→右と、順序正しく視線をスライドさせていく視線の動き方です。

F型はそのページのリピーターに多い動き方といわれており、比較的隅々までページを閲覧するため、最上部すべてに注目が集まるのが特徴です。

デバイスごとの見え方を意識する

ホームページは、PC・スマホ・タブレットなど、デバイスによって見え方が異なります。PCでは綺麗に表示されるのに、スマホで見るとレイアウトが崩れてしまうようなホームページにならないよう、デバイスごとの見え方は必ずチェックしましょう。

特に、大画面のPCに合わせてヘッダーを作ると、スマホなどの小さな画面では読みづらく、タップもしづらいデザインになりがちなため注意が必要です。

ホームページのヘッダーのデザイン例

最後に、優れたヘッダーを設置している4つのホームページを紹介します。

株式会社舞台ファーム

株式会社舞台ファームは、農作物の生産・加工・販売や、農業経営に関するコンサルティングを手がけている企業です。

同社のヘッダーは、テキスト・アニメーション・画像を組み合わせて、しっかり目を引く作りになっている点が大きな特徴です。最上部に主要なコンテンツをテキストで並べ、カーソルを合わせると美しい画像とともに詳細ページへのリンクが現れます。

野菜・畑・加工品の画像を使いつつ、ページ全体は野菜や自然を連想させるグリーンカラーで統一されており、農業関連のブランディングにも成功しています。

株式会社マーケットエンタープライズ

株式会社マーケットエンタープライズは、ネット型リユース事業・メディア事業・モバイル通信事業を手がける企業です。

同社のヘッダーは比較的コンパクト・シンプルな作りで、直下のアニメーションに目が行く作りとなっています。主要なコンテンツがテキストで並んでおり、カーソルを合わせることで詳細ページへのリンクが表示される仕組みです。

特に優れているのは、ヘッダーに問い合わせ画面へのリンクが目立つように設置されていることと、いつでもサイトマップと各ページへのリンクが開けるボタンが設定されていることです。

利便性が高く、どこからでも問い合わせや任意のページにジャンプできるため、ユーザーのアクションを取りこぼしにくい作りといえるでしょう。

司法書士青木事務所

司法書士青木事務所は、わかりやすさに重きを置いたヘッダーが印象的です。

ページ全体がモノトーンなデザインになっており、ヘッダーだけが浮き出て目立つように作られています。また、あえてシンプルでかわいいイラストを採用することで、難解な印象を持たれがちな「司法書士」という領域に、柔らかく親しみやすい雰囲気を作り出しています。

ヘッダーの作りがとにかくシンプルなため、はじめてホームページを訪れた人でも、気軽にサイト内を読み進められるでしょう。

株式会社れんせい

株式会社れんせいは、学習塾「3.14コミュニティ」を運営しています。

3.14コミュニティのホームページでは、ヘッダーの左上にサイト名とロゴが設置され、主要コンテンツがテキストで並べられています。各コンテンツにポインターを合わせると、プルダウン型で詳細ページへのリンクが表示される、比較的シンプルなデザインです。

ヘッダーに問い合わせ先の電話番号と対応可能な曜日・時間帯のほか、申込み・問い合わせボタンが設置されています。学習塾・個別指導の性質上、他社と比較検討するユーザーが多く、資料請求や問い合わせがユーザーのファーストアクションになります。

その意味では、必須で最重要である項目を効果的にヘッダーに配置していることがわかります。

ヘッダーはホームページの印象を決める重要な要素

ヘッダーはホームページの上部に位置する領域であり、ユーザーの興味を引いたり、自社の商品・サービスを端的に伝えたりする役割があります。

どのページに移動しても表示できる特徴があるため、重要な項目やサイト全体のコンテンツへのリンクなどを設置するのが一般的です。

常に表示できるため、デザイン次第でホームページの印象が変わる重要な要素です。ヘッダーの特徴や活用方法を理解して、サイトの成長につなげましょう。