ヘッダーとは?
![ヘッダーとは?](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
ヘッダーは下の図の矢印で示した部分で、一般的にサイトの最上部に位置するパーツです。必ずしも最上部である必要は無く、ヘッダーの上に重要なメッセージや広告や配置するサイトなどもあります。
なお設置できるヘッダーは1ページにつき1つです。
![ヘッダー](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
ヘッダーの上部固定機能について
![ヘッダーの上部固定機能について](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
フライヤーのヘッダーには『上部に固定表示されるもの』と『上部に固定表示されないもの』の2種類があります。ヘッダーを上部固定にすると、下記のように下にスライドした際も画面上部にヘッダーが残ります。
![上部固定](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
■上部固定のメリット
ヘッダーを上部固定にすることで、ヘッダーに配置したボタンにアクセスしやすくなるというメリットがあります。
例えば飲食店のホームページの場合、ページに訪れた人は今は店の近くにおり、訪問を検討している場合があります。その際、画面内にヘッダーが固定され電話ボタンが常に出ていることで、利用者はスムーズに予約確認などが行え便利です。
その他にも、店名やロゴを常に表示することで印象に残すといった効果も期待できます。
■上部固定のデメリット
ヘッダーを上部に固定すれば、当然その分コンテンツの表示領域が狭くなります。画面を広く使いコンテンツに集中してもらいたい場合はヘッダーを固定しないという方法もあります。
ヘッダーの種類
![ヘッダーの種類](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
ここからはフライヤーで使用可能なヘッダーを紹介します。
■テキスト+テキストリンク
![テキスト+テキストリンク](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
『サイト名のテキスト』と『テキストリンク』で構成されたヘッダーです。
サービスのロゴを使用したく無い場合など、極力シンプルにしたい場合にオススメです。
■ロゴ画像+テキストリンク
![ロゴ画像+テキストリンク](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
『ロゴ画像』と『テキストリンク』で構成された非常にポピュラーなヘッダーです。
手持ちのロゴ画像を使用し、かつシンプルにしたい場合にオススメです。
■テキスト+リンクボタン
![テキスト+リンクボタン](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
『サイト名のテキスト』と『リンクボタン』で構成されたヘッダーです。
サービスのロゴを使せず、リンクボタンや電話ボタンを設置したい場合にオススメです。なお電話ボタンはリンクボタンに変更可能です。
■ロゴ画像+リンクボタン
![ロゴ画像+リンクボタン](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
『ロゴ画像』と『リンクボタン』で構成された非常にポピュラーなヘッダーです。
手持ちのロゴ画像を使用し、リンクボタンや電話ボタンを設置したい場合にオススメです。なお電話ボタンはリンクボタンに変更可能です。
■テキスト+長方形リンク2個+SPオーバーレイ
![テキスト+長方形リンク2個+SPオーバーレイ](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
『サイト名のテキスト』と『リンクボタン』で構成されたヘッダーですが、『リンクボタン』はスマートフォン表示になると、画面下部に固定で表示されます。
■ロゴ画像+長方形リンク2個+SPオーバーレイ
![ロゴ画像+長方形リンク2個+SPオーバーレイ](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
『ロゴ画像』と『リンクボタン』で構成されたヘッダーですが、『リンクボタン』はスマートフォン表示になると、画面下部に固定で表示されます。
■テキスト+画像リンク2個+SPオーバーレイ
![テキスト+画像リンク2個+SPオーバーレイ](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
『サイト名テキスト』と『リンク画像』で構成されたヘッダーですが、『リンクボタン画像』はスマートフォン表示になると、画面下部に固定で表示されます。
リンク画像は用意した画像を設定できます。
■ロゴ画像+画像リンク2個+SPオーバーレイ
![ロゴ画像+画像リンク2個+SPオーバーレイ](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
『ロゴ画像』と『リンク画像』で構成されたヘッダーですが、『リンクボタン画像』はスマートフォン表示になると、画面下部に固定で表示されます。
リンク画像は用意した画像を設定できます。
■テキスト+長方形リンク1個+SPオーバーレイ
![テキスト+長方形リンク1個+SPオーバーレイ](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
『サイト名のテキスト』と『長方形リンク1個』で構成されたヘッダーですが、『長方形リンク』はスマートフォン表示になると、画面下部に固定で表示されます。
■ロゴ画像+長方形リンク1個+SPオーバーレイ
![ロゴ画像+長方形リンク1個+SPオーバーレイ](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
■テキスト+画像リンク1個+SPオーバーレイ
![テキスト+画像リンク1個+SPオーバーレイ](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
『サイト名のテキスト』と『画像リンク1個』で構成されたヘッダーですが、『画像リンク』はスマートフォン表示になると、画面下部に固定で表示されます。
■ロゴ画像+画像リンク1個+SPオーバーレイ
![ロゴ画像+画像リンク1個+SPオーバーレイ](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
『ロゴ画像』と『画像リンク1個』で構成されたヘッダーですが、『画像リンク』はスマートフォン表示になると、画面下部に固定で表示されます。
ヘッダーの使い分け
![](/media/assets/loading-white-a1a5f7013bd97ba7eb803cf6801dd19d063a536da0c19fd7d2fa8cc76b2df8ed.png)
ヘッダーの使い分け方に明確な定義はありませんが、
実店舗が有り、メニューや製品のページがある場合はテキストメニューを使う物
サービスなどのホームページで、お問い合わせや申し込みボタンューや製品のページがある場合はリンクボタンを使う物
が作りやすいかもしれません。