ホームページのヘッダーの役目とは？作成方法とコツも解説！

ホームページを開いたとき、トップページ最上部へ帯状に表示された部分がヘッダーです。

訪問者のほとんどが目にする部分で、パソコンやスマートフォン、タブレットなど、どの端末でも表示されます。

 

トップページにのみヘッダーを置くサイト、サイト内全てのページに同じヘッダーを置くサイトがあり、デザインはさまざまです。

 

ヘッダーに必要な要素

ヘッダーにはホームページのタイトルとグローバルメニューが必要です。

ホームページタイトルにはトップページへのリンクをつけ、他ページからいつでもトップへ飛べるようにします。

グローバルメニューとはサイト内に設置した主なコンテンツへいけるメニューです。

 

サイトタイトルは、コーポレートサイトであれば企業名・サービスや商品、ショップなどのブランドサイトであればそのロゴを利用すると良いでしょう。ホームページに不可欠な要素に電話番号などのお問い合わせ先もありますが、ヘッダーに詰め込むと情報量が多すぎて見づらくなります。

 

サイトの目的やターゲットに合わせ、必要に応じて掲載しましょう。

 

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

ホームページのヘッダーには重要な役割があり、十分手間をかけて設置する必要があります。

訪問者がホームページを閲覧するときの特徴とあわせてヘッダーが持つ役割を解説します。

 

訪問者の興味をひく

初めてホームページを訪れた人は、「じっくりとサイト内を見ない」と言われます。

ざっとヘッダー付近を眺めて気になれば詳しく閲覧するため、ヘッダー部分は訪問者の興味をひき、より詳しい内容を読んでもらうために重要です。

 

建物の玄関にあたる部分がヘッダーであり、入りやすい玄関はその先へ簡単に足を進められます。

その先が見づらく、行き止まりのようなつくりではユーザーは離れてしまうため、一目で何があるかを把握し有用な情報があると思ってもらう工夫が必要です。

 

商品やサービス内容を伝える

訪問者は、ホームページをヘッダー部分から下に向かってジグザグに閲覧するといわれます。

ユーザーが最初に見る部分で、会社のメイン商品やサービス内容をわかりやすく伝えると、有用な情報と判断されやすいです。

 

初見では簡単にしか見ないユーザーも、目立つ画像やキャッチコピーがあれば直観的に理解でき、興味につながります。

 

ホームページの統一感を出す

ホームページによってはヘッダー部分を固定表示にする場合があります。

ヘッダーをどのページも同じにするメリットは、統一感が演出できる点です。

 

類似のサービスや商品、店舗など、複数のサイトで比較・検討を行うユーザーは、今どのサイトを閲覧しているのか迷うことがあります。

ホームページ内で共通のヘッダーを利用することで、各サイトを切り替えながら情報を収集していても、自社ホームページを見失われにくくなります。

 

自社ホームページのヘッダーを訪問者が興味を持つものに変えたい人のために、作成方法を紹介します。

CMSを利用しているか、すべての管理を自社で行っているか、制作会社に委託しているかなど、状況により異なります。

 

 headerタグにて設定

HTML・CMSを自身で組んでヘッダーを設定する場合には、「header」のタグを使いましょう。

＜header＞～～～＜/header＞

上記のタグ内に囲まれた箇所がヘッダーとして認識されます。

 

サイトによってヘッダー内に盛り込む要素は異なりますが、たとえばH1タグでタイトルを設定したり、グローバルナビゲーションを盛り込んだりします。

 

その場合は以下のように記載します。

 

＜header＞

＜h1 class="title"＞サイトのタイトル＜/h1＞

＜nav class="gnav"＞

＜ul class="nav_group"＞

＜li class="nav_menu"＞＜a href="#"＞会社概要＜/a＞＜/li＞

＜li class="nav_menu"＞＜a href="#"＞サービス一覧＜/a＞＜/li＞

＜li class="nav_menu"＞＜a href="#"＞料金表＜/a＞＜/li＞

＜li class="nav_menu"＞＜a href="#"＞問い合わせ＜/a＞＜/li＞

＜/ul＞

＜/nav＞

＜/header＞

 

また、別途でstyle.cssのファイルを作成し、各内容についてレイアウトを指定します。

 

header {

  width: 100%;

  height: 100px;

  background-color: #fff;

  display: flex;

}

 

.title {

  margin-right: auto;

}

 

.nav_menu {

  list-style: none;

  padding: 15px;

}

 

CMSを利用する

ヘッダーを作成するためには、まず自社が契約中のCMSの管理画面を開き、ヘッダーの編集ページを開きます。

提供されたデザインテンプレートをもとにする、または自社で用意した画像を登録してヘッダーにします。

テンプレートを選択しない場合はカラム数も自由に変更できるため、自社イメージに合うタイプを選びましょう。

ヘッダーに入れたいパーツを選択すると、自動でヘッダーに追加されます。

その後ホームページタイトルを配置して、最後に必ず保存をしましょう。

 

CMSを使うと視覚的にヘッダーを制作できるため、Web制作初心者もイメージどおりのデザインをそのまま形にしやすいです。

位置の微調整や個性的なヘッダーを作りたい場合は、対応が難しいかもしれません。

自社で対応しきれない部分は提供会社へ相談する、または専門の制作会社への依頼を検討しましょう。

 

ホームページ制作会社へ依頼する

ヘッダーなどを凝ったデザインにしたいものの、自社だと対応が難しいといった場合には、ホームページ制作会社への依頼がおすすめです。

数あるWebサイト制作会社の中から自社に合う業者を見つけるポイントを解説します。

 

制作実績が豊富

ヘッダーに限らずホームページの制作実績が豊富な業者は、その会社のイメージに合った制作が得意です。

依頼者が持つ理想の形や企業理念にもとづいたデザインの提案を、積み重ねた実績を元に提案してもらえます。

 

特に同業他社の実績が豊富な業者にすると、過去の経験もありスムーズな打ち合わせと制作を期待できます。

もし同業他社の経験が全くない業者でも、制作自体の実績が豊富な場合は一定のクオリティで仕上がる可能性が高いです。

ヘッダー制作を相談し、試しに見積を出してもらっても良いでしょう。

 

料金体系がわかりやすい

盛り込む内容やボリュームにより費用が異なりますが、ある程度詳しい料金設定を事前に教えてもらえる業者は安心です。

小規模サイトのヘッダー制作を考えていたものの、ボリュームの大きなサイトばかりを扱う業者へ依頼しては、予算が合わないかもしれません。

 

公式サイトに料金表やプランの一覧が載っている業者に相談してみましょう。

 

サポートが充実している

ヘッダーを含むホームページの制作を依頼した場合、更新が不可欠です。

見やすく目につきやすいヘッダーを掲載しても情報が古いままでは集客力は下がります。

 

できあがったサイトの公開後、どう運用するかも制作の段階で決めておきましょう。

制作業者の中には運営を業者任せにせず、自分で更新したい人へのサポートを行うところもあります。

例えば業者の提供するサービスのユーザーは、セミナーを通じて情報リテラシーの向上や会社に応じたコンサルティングが受けられるなどです。

 

ホームページヘッダーはユーザーが興味を持ちやすいデザイン・内容がおすすめですが、自社の雰囲気に合うことも必要です。

ヘッダー制作で気をつけるとよいポイントを3つ解説します。

 

シンプルでわかりやすいデザイン

ホームページのヘッダーデザインはあくまでシンプルを心がけ、見やすく読みやすい文字配置がポイントです。

訪問者が求める情報を見つけやすい場所に配置すると、すぐに情報が発見でき喜ばれます。

ヘッダーがわかりやすいと閲覧しやすいサイトとの評価もされやすく、多くのユーザーから高い評価を期待できます。

 

中にはくり返しサイトを訪れる人も増え、集客アップに貢献するサイトになります。

 

最低限必要な情報に厳選

商品やサービスへの思い入れが強い企業、多岐に渡る商品やサービスを扱う会社などの場合、ヘッダーに盛り込みたい情報が増えてしまいがちです。

しかし多くの情報をヘッダーのスペースに詰め込んでも見づらく、ユーザーは離れやすいため必要最低限の情報を厳選して載せましょう。

 

ヘッダーへ入れるものは、ホームページタイトル・グローバルメニュー・企業のロゴや画像ですが、中でもグローバルメニューのデザインはサイト全体の閲覧に関わるため重要です。

ごくシンプルで内容のわかりやすいメニューにしぼり、掲載します。

 

デバイスごとの見え方をチェック

ホームページの閲覧はパソコンだけでなくスマートフォンやタブレットなど、あらゆる端末から行います。

ヘッダーがパソコンからはきれいに表示されるものの、スマートフォンから見ると崩れる場合があるため、あらゆるデバイスでの見え方チェックも不可欠です。

 

パソコンでヘッダーを制作すると、画面が大きいため文字が小さくなりがちです。

スマートフォンで表示したときに文字が小さすぎないか、ナビゲーションがタップしづらくないか、などのチェックも重要です。

 

どんなヘッダーがユーザーの興味を引くかわからない、これから初めて自作する人に向けて、参考になるデザイン例をご紹介します。

自社で扱う商品やサービス、企業イメージなどをもとにどのタイプが合うか検討してみてください。

 

サイトマップの役割も持つヘッダーデザイン

ヘッダーの下方にグローバルメニューが並び、主要なページが一目でわかるデザインです。

情報量が多くどのページから閲覧するべきかユーザーに悩ませず、見たい情報のページへすぐに誘導ができます。

 

扱う商品やサービスの多い企業の場合、メニュー項目へカーソルを置くとドロップダウンメニュー表示されるヘッダーにすると詳しい情報にたどりつきやすいです。

下層のページ数が多いホームページはヘッダーから下層へ一度に飛べる工夫があると、ユーザーが離れにくくなります。

シンプルさを重視したヘッダーデザイン

ホームページタイトルとグローバルメニューのみをすっきりと載せるデザインです。

ヘッダーの背景画像も奇抜でないシンプルな写真、全面ではなくヘッダー半分以下に画像を配置するとシンプルなヘッダーができあがります。

 

使用する色も背景画像が青なら白文字でさりげなく入れる、モノクロ画像の中に目立たせたいグローバルメニューの部分のみ赤文字にするなどのデザインがあります。

シンプルなヘッダーは目立たせたい部分だけ強調する文字や色を使うと自然に目を引くため、理想的なヘッダーになります。

 

さらにすっきりさせるためグローバルメニューを置かず、ヘッダーの端にハンバーガーメニューを配置する方法も可能です。

スペースが限られるスマホ表示にはおすすめで、海外ではパソコンサイトにも採用されています。

 

アイコンつきでスマホ表示がわかりやすい

パソコン画面ほど横幅のないスマートフォン画面は表示できるヘッダーサイズは小さくなります。

ハンバーガーメニューでメニューを隠しつつ、ユーザーの多くが知りたいメニューだけを厳選してアイコンをつけて目立たせ、見つけやすくするデザインがあります。

 

例えば全国チェーンの飲食店は店舗検索メニュー、不動産会社の場合は買う・売る・借りる・貸すなど目的別メニューをアイコン付きで表示するとわかりやすく、ユーザーが下層まで閲覧する気持ちがわきます。

 

充実したホームページを下層まで見てもらうには、ヘッダーの印象が重要です。

一目見てユーザーが興味を持つデザイン、求められる最低限必要な情報を載せて下層ページに入りやすい工夫をしましょう。

 

簡単なヘッダー作成は初心者も可能ですが、日々の業務を行いつつ片手間での作成は難しい作業です。

その場合はプロの力を借りて無理なく目的に合ったヘッダーをつくりましょう。

ある程度ホームページ制作の知識があれば、ホームページツールを提供する会社と契約し、既にできあがったホームページ構造の中で自由にヘッダー作成する方法も便利です。

 

当社で提供する基本レイアウト設計の中にヘッダー部分のレイアウトも含まれています。

コンテンツ制作もオプションで対応可能なため、デザインで悩む場合もご相談頂けます。

ぜひ一度、お気軽にお問い合わせください。

FREECODEの付帯サービスラインナップはコチラから！