Update: 2024/4/28

ヘッダーって何？作り方のポイントをおさえておしゃれなWebサイトをつくろう

Webサイトを制作するにあたり、重要な役割を担うものが「ヘッダー」です。インターネット上では目にする機会も多いですが、よく理解できていない方もいるでしょう。Webサイトのヘッダー作成においては、おさえておきたいポイントがあります。

ヘッダーについて知りたい方
ヘッダーを作成してみたい方
ヘッダーの作成時に注意すべきことを知っておきたい方

ヘッダーは、Webサイトで集客を図るにあたって重要なものです。これからWebサイトの制作を検討する方は、ヘッダーについて理解を深めておきましょう。

Webサイト制作のプロが貴社のお悩みを解決します！データ分析、UX/UI設計に基づく戦略とデザインで伝えたい価値を伝わるカタチに。ビジネス成果に貢献するWebサイト制作・構築を提供します。

＼まずは無料相談！2営業日以内に返信／

Webサイトの制作・改善を相談する

資料ダウンロード

Webサイトのヘッダーが重要な役割をもつ意味
Webサイトのヘッダーを作る際に注意すること
おしゃれなヘッダーにしたい！参考にしたいデザインを3つ紹介
まとめ

Webサイトのヘッダーが重要な役割をもつ意味

Webサイトでヘッダーが重要とされるのには、いくつかの理由があります。Webサイトを活用してマーケティング活動を行うときには、「いかにユーザーを離脱させないか」がポイントです。ユーザーがすぐに離脱するようなページでは、サービスの利用に至らず、思うような成果にも期待できません。

ユーザーの離脱を防ぐために、重要となるものがヘッダーです。離脱を防ぐにあたってヘッダーは、以下のような役割を担っています。

ヘッダーの役割

ファーストビューの位置にあるので非常に重要
商品やサービスなどの企業情報を載せることで信頼性を高める
固定のヘッダーであればサイト閲覧中ずっと見られることになる

ファーストビューの位置にあるので非常に重要

ファーストビューとは、Ｗebページに表示される上部エリアのことです。Webサイトを訪れたユーザーが最初に目にする部分になるため、集客を行う上で重要な要素といえます。従来、ユーザーは自分が欲しい情報を求めてWebサイトを訪れます。しかし、自分の求める情報がないと分かれば、すぐにページから離れてしまうものです。

実際にユーザーは、Webサイトを訪れて3秒で「自分の求める情報があるかを判断する」とされています。つまり、最初に目にするファーストビューを見て判断するユーザーは、非常に多いということです。ファーストビューでページから離脱されては、他のページを見てもらえません。売り上げにも大きな影響を与えるため、離脱させないようなデザインを施すことが大切です。ファーストビューは、ユーザーの興味をひくようなデザインを考えましょう。

ファーストビューに関しては下記の記事にて詳しく紹介しておりますので、あわせてご覧ください。

ファーストビューの重要性とは？知らないと損する8つの注意点を解説

ファーストビューはWebページを開いた時にパッと目に入る画面のため、Webサイトだけでなくその企業の印象まで左右しかねません。しかし、ファーストビューについて「どれほど重要なのかわかっていない」「具体的にどんなデザインが良いのかわからない」という方は多いのではないでしょうか。そこでこの記事では、ファーストビューの重要性や作成時の注意点などをお伝えしていきます。

商品やサービスなどの企業情報を載せることで信頼性を高める

Webサイトを活用した集客を行う際、重要となることはWebページの信頼性を高めることです。信頼性の低いWebサイトのサービスでは、利用しようと思うユーザーは少なく、売り上げにも期待できません。

例えば運営元や問い合わせ先が記載されておらず、安さばかりを強調するページでは、「何だか怪しい」と不安を感じるユーザーもいるでしょう。信頼できないままだと、サービスの利用に至る確率も低くなってしまいます。

信頼性を高めるためには、ヘッダーに企業情報やサービス情報を掲載することが効果的です。明確な情報を載せることで、ユーザーへ安心感を与えることができます。ヘッダーに記載する際には、画像やキャッチコピーを活用しましょう。ユーザーが内容をイメージしやすくなるため、より安心感を与えることができるでしょう。

その他、信頼感を与えるWebデザインを意識することも重要です。下記の記事にて詳しく紹介しておりますので、あわせてご覧ください。

【実例あり】Webデザインで信頼感や誠実さを与える方法とは

「信頼感のあるWebデザインって何だろう？」「具体的に何をすれば安心感のあるサイトになるんだろう？」このような疑問をお持ちではないでしょうか。本記事では、ユーザーに信頼感を与えられるWebサイトを作成したいとお考えの人に向け、ユーザーから信頼感を得られるサイトの特徴から実際の事例までを紹介していきます。

固定のヘッダーであればサイト閲覧中ずっと見られることになる

ヘッダーに情報を記載するときは、「固定ヘッダー」の活用を検討しましょう。固定ヘッダーとは、ページをスクロールしても常に表示されるヘッダーのことです。

従来、ヘッダーはページを読み進めていくと見えなくなってしまい、情報が隠れるというデメリットがありました。ヘッダーに記載された情報が欲しいとき、わざわざサイト上部に戻る必要があり、ストレスに感じるユーザーもいます。

対して固定ヘッダーを活用すれば、必要なときにいつでも情報の確認が可能です。閲覧や操作もスムーズに行えるため、ユーザーのストレスを軽くできます。加えてユーザーの利便性にも考慮したデザインにすると、さらにストレスを減らすことができ、Webサイトの信頼性も高まるでしょう。

HTMLとCSSでヘッダーを作る方法

ヘッダーを作成するときは、HTMLとCSSを組み合わせて作成します。HTMLでサイトの主な構成を作成し、CSSで文字やデザインに装飾を行います。これら2つを組み合わせて作成することによりデザインの幅も広がり、ユーザーの目をひきやすい魅力的なヘッダーの作成が可能です。ヘッダーの具体的な作成については、下記のように進めていきます。

ヘッダーの作成方法

HTMLでつくる方法
CSSで作る方法

HTML

HTMLでヘッダーを作成するときは、<header>のコードを使うことが一般的です。コードはコンピューターへ指示を与える役割を担っており、範囲を指定することで実際の画面にも内容を反映させていきます。

ヘッダーを作成する場合、表示させたい内容を<header>で囲います。実際のコードを見てみましょう。

【ヘッダーのコード例】

上記のように<header>は、最初と最後に使用します。ヘッダーのコードを記述するときは、<header>に続いてサイトのタイトル名を記載するのが一般的です。タイトルの次は、ナビゲーションメニューの設定を行います。設定を行うとヘッダーにメニューを表示させることができ、項目をクリックすることで別のページへ移動が可能です。ナビゲーションメニューの設定には、冒頭に<nav>タグを使います。

その後、<ul>と<li>を用いてメニューを設定していきます。このとき<li>タグ内の文字を<a>タグで囲いリンクを貼り付けることで、リンク先のページへ移動させることが可能です。以上で基本的なコードの記述は、完了となります。コードの挿入が完了したら、ブラウザ上で確認してみましょう。

CSS

HTMLを挿入したら、デザインを施すためにCSSを挿入します。CSSでは、主に以下のような装飾が可能です。

文字のサイズや色、行間などの設定
背景の色や画像、ボーダーなどの設定
レイアウトや余白などの設定

CSSを挿入するときは、はじめに基本となる書式を理解しておくことが必要です。CSSは、「どこに（セレクタ）」、「なにを（プロパティ）」、「どうするのか（値）」を記述する形で構成されています。例えば、大見出しのサイズを36pxにしたい場合のケースを見てみましょう。

【CSSのコード例】

h1(セレクタ)｛

　　　　　　　　　font-size(プロパティ): 36px（値）;

｝

上記の記述がCSSの基本となる書式です。加えてcolorを使えば文字色の指定ができ、font-weightでは文字の太さを設定できます。他のタグも組み合わせて使うことで、さまざまな調整が可能です。また、ヘッダーを固定させるときは、positionを「fixed」に設定します。

なおCSSの記述には、3つのパターンがあります。直接的にコードを書き込む「インライン」と「ヘッダー埋め込み」、外部リンクで挿入する「外部参照」の3つです。イメージしやすいように、ヘッダー埋め込みの記述例で見てみましょう。

【ヘッダー埋め込みでCSSを記述する例】

<head>

<style>

h1｛

　　　　font-size: 36px;

　　　　font-weight: bold;

　　　　color: #ff0088

｝

</style>

</head>

ヘッダー埋め込みで挿入する際には、上記のように<style>を使って記述します。このように、作成したHTMLへCSSを挿入することで装飾が可能です。CSSにはプロパティやカラーなどにも数多くの種類が存在しており、一度に覚えるのは大変なため、少しずつ理解を深めていきましょう。

Webサイトのヘッダーを作る際に注意すること

Webサイトのヘッダーを作成するときには、注意すべきことがあります。やみくもにヘッダーを作成しても、理想とする結果にはつながりません。効果的なヘッダーを作成するときには、おさえておきたいポイントがあります。

ヘッダー作成時の注意点

サイトのコンセプトに沿ってデザインする
ヒーローヘッダーのデザインにする際は導線先をつける
ユーザビリティを意識する

サイトのコンセプトに沿ってデザインする

ヘッダーを作成する際には、サイトのコンセプトに合ったデザインを施すことが大切です。

サイトを訪問して最初に目に入る部分であるため、「このサイトは何を目的としているのか」ということが一発で分かるようなデザインを意識しましょう。そうすることで分かりやすく、ページに長く滞在してもらいやすくなります。

また、ヘッダーに写真やイラストを挿入するとより効果的です。人は見た目で印象を決めることが多いとされており、画像などを用いることでより印象に残りやすくなります。ただし、用いる画像もサイトのコンセプトに適したものが必要です。コンセプトと合っていない画像やデザインを施しても、こちらの意図がきちんと伝わりません。

ユーザーは自分の欲しい情報を求めてサイトを訪れます。ページからの離脱を防ぐには、「自分の求める情報がありそう」と思ってもらう必要があります。そのためには、コンセプトに沿ったヘッダーのデザインを心掛けましょう。

ヒーローヘッダーのデザインにする際は導線先をつける

ヒーローヘッダーとは、ヘッダーを表示させる手法のひとつです。ヘッダーに使う画像や動画の、ファーストビューを覆い尽くすように表示させます。これまでヒーローヘッダーの活用は海外サイトが主流でしたが、近年では国内サイトでも見られるようになりました。

ヒーローヘッダーは、ユーザーに大きなインパクトを与える一方で、サイト下部へ誘導するための工夫も必要です。ヒーローヘッダーでは、画像などが画面いっぱいに広がることになるため、そこでサイトが終わったと勘違いする方もいます。それ以降のページを閲覧してもらえなくなってしまうため、勘違いさせない対策が必要となります。

対策としては、「導線先」をつけることが効果的です。導線先とはWebサイトにおいて、ユーザーを次のページに導く経路をいいます。例えばアイコンやテキストを利用して、スクロールバーへの誘導を図るなどがよく用いられる手法です。他にも導線先の工夫には、さまざまなものがあります。Webサイトの至るところに工夫を凝らして、うまくユーザーを誘導しましょう。

ユーザビリティを意識する

ヘッダーを作成するときは、ユーザーの使いやすさを意識することが大切です。ユーザーが使いやすいと感じれば信頼性も高まり、成果にも期待できます。

例えばユーザーがサイトを閲覧する際の目線について考えてみましょう。ユーザーの目線にはパターンがあり、一般にサイトを閲覧するときは、Ｚ型とＦ型と呼ばれる流れで読み進めていくとされています。企業名など目立たせたいものは、目線の流れを意識して適切な箇所に配置することで、ユーザーの印象に残りやすいです。

また、ヘッダーのナビゲーションは、他ページのリンクが表示されるようにするのもおすすめです。ワンクリックするだけで、トップページから目的のページへ誘導できます。これらの対策を行うことで、ユーザーの目にも留まりやすくなり、別のページへ誘導もしやすくなるでしょう。

Webサイトにおけるユーザビリティの重要性については下記の記事にて詳しく紹介しておりますので、あわせてご覧ください。

webサイトにおけるユーザビリティの重要性と5つの改善施策を紹介

ユーザビリティはWebサイトのコンバージョンを左右させる大事な要素です。いざユーザビリティを向上させようと考えてもどのようにしたらよいのかわからない方も多いでしょう。今回の記事ではWebサイトにおけるユーザビリティの情報を中心に紹介します。

おしゃれなヘッダーにしたい！参考にしたいデザインを3つ紹介

現在では多くの企業がWebサイトを運用しており、ヘッダーのデザインにも力を入れています。なかには、デザイン性と使いやすさを兼ね備えた秀逸なWebサイトも存在します。そのようなサイトを参考にすると、自社サイトのヘッダー作成にも役立つでしょう。

ここでは、参考にしたいデザインを3つご紹介します。ぜひ自社サイト制作の参考にしてください。

参考にしたいヘッダーデザイン3選

イトキン株式会社
marchen(メルヘン)・grimms heim（グリムスハイム）
認定こども園高木学園附属幼稚園

「イトキン株式会社」

イトキン株式会社は、幅広いアパレルブランドを提供する企業です。レディース服をはじめ、キッズ服なども取り扱っています。イトキン株式会社では、さまざまなものをスタイリングしていくことをビジョンとされています。

そのためWebサイトも、シンプルかつスタイリッシュにまとめられていることが特徴です。トップページの上部は白黒の画像を採用しており、ページ下部に進むにつれ他色が使用されています。そのため、ページにメリハリのある印象です。トップページ下部の項目は、テキストごとに区切られており、見やすいデザインとなっています。

ヘッダーのデザインについても、標準的でシンプルなデザインです。ヘッダーは白を背景に黒い文字で記載するのみとなっており、すっきりとした印象を与えます。多色を使用したときのようにごちゃごちゃしておらず、見やすいこともポイントです。

ヘッダーのメニューには基本的な企業情報をはじめ、企業の最新情報なども掲載されています。また、メニューのなかには取り扱いブランドの項目も設けられています。ブランドが一覧として確認できるため、目当てのブランドを簡単に探すことが可能です。シンプルかつ利便性の高いサイトとなっているため、シンプルなデザインを検討する際は、参考にしてみましょう。

「marchen(メルヘン)・grimms heim（グリムスハイム）」

メルヘンとグリムスハイムは、大阪府にあるケーキ屋さんです。「愉快で自由気ままな旅をするケーキ」をコンセプトに、大阪府内でメルヘンとグリムスハイムの2店舗を運営しています。

サイトの特徴としては、コンセプトに基づき旅を連想させるようなデザインです。トップページには、トランクケース内に貼り付けられたケーキ、ランタンなど旅と関連するアイテムを写した画像が使用されています。また、サイト全体の背景には薄いブラウンが使用されており、おしゃれで優しい雰囲気のデザインです。

また、アクセスマップにもこだわりが感じられます。アクセスマップには、キャラクターを使ったアニメーションのようなデザインが施されています。サイトの雰囲気を崩すことなく、コンセプトにマッチしたデザインといえます。

ヘッダーについては、サイトと一体感があるデザインとなっています。サイトと同色の薄いブラウンを背景に白い文字を使うことで、サイトの雰囲気を維持しつつも分かりやすい印象です。また、ヘッダーと共に営業日と連絡先が常時表示されています。利用したいときに探す必要がないため、予約などもスムーズに可能です。

メニューのページでは商品の紹介だけでなく、注文の流れも分かりやすく記載されています。必要な箇所に必要な情報が記載されているため、ユーザーにとっては使いやすいサイトといえるでしょう。

「認定こども園高木学園附属幼稚園」

認定こども園高木学園附属幼稚園は、神奈川県にあるこども園です。Webサイトではイラストや写真が全体的に使用されており、こども園であることをイメージしやすいデザインとなっています。

トップページ上部には、園内における子ども達の写真が使われており、ページ全体から活発で明るい印象を受けるデザインです。加えてページ内のイラストにカーソルを合わせると、絵が動くなど細部にもこだわりが感じられます。またトップページは、2色の背景によって項目ごとに分けられており、見やすいレイアウトです。3つの項目を2色で分けているため、すっきりとしておりストレスを感じることもありません。

ヘッダーのデザインに関しては、文字だけでなくイラストで表現されていることが特徴です。カーソルを合わせる度にアニメーションが再生され、子どもが見ても飽きにくい仕様となっています。見た目だけでなく、ヘッダーが固定されているなど使いやすさも考慮されています。こども園の雰囲気を伝えつつ、使いやすさも考慮したクオリティの高いサイトといえるでしょう。