固定ヘッダー・固定フッター|どちらを使うべき?【効果的な使い分け】

アイキャッチ
・固定ヘッダー(フッター)を有効活用したい
・固定ヘッダー(フッター)って必要?
・固定ヘッダーか固定フッターで悩んでいる

最近疑問に思ったことがあります。

「固定フッターと固定ヘッダーってどっちがいいんだ?」と。

導き出した結論は『ブログのスタイルに合わせて使い分けるべき』です。

ということで、効果的な設置方法もあわせて詳しく説明していきます。

 
チータツ
ツイッターでは毎日タメになる雑学を発信しています
よければ覗いてみてください

表示位置の違い

固定ヘッダーは画面最上部に表示され、固定フッターは画面最下部に表示されます。
その表示される位置の違いから、どちらがモバイルユーザーにとって有益なのかを考えます。

片手での操作感

片手操作

注意すべきは昨今のスマホの大画面化です
iPhoneSEを除けば、今のスマホ市場は5インチ・6インチ代のスマホばかりです。

一部の手の大きい人を除けば、画面上部は両手持ちじゃないと届かない領域になりつつあります。

つまり、「画面最上部に位置する固定ヘッダーは、片手でタップするのが難しい」ということです。

逆に画面最下部の固定フッターは、片手でもタップしやすいという違いがあります。

フッターは邪魔になりにくい

フッターが隠れる
親指でフッターは隠れる

ヘッダーもフッターも画面の一部を常に占有するという点では同じですが、人間の視野を考慮すると話は変わってきます。

固定ヘッダーは常に視界の上部に入りこみます。
しかし、固定フッターは記事を読む際、スクロールする親指で隠れます

固定フッターには「不要な時は隠れる」という利便性があるのです。

それにTwitterなどのSNSアプリでは当たり前のように固定フッターがあるので、慣れている人も多いでしょう。


設置できるコンテンツの違い

固定ヘッダーと固定フッターでは、設置できるコンテンツに差が生まれます。
その点で、どちらが利便性で勝るのかを考えてみましょう。

固定ヘッダーのコンテンツ

ヘッダー内のコンテンツ
当ブログが現在使っている固定ヘッダー

~固定ヘッダーに設置する主なコンテンツ~
サイトのタイトル
・メニューボタン
・検索ボタン

固定ヘッダーはタイトルが必須であるため、自由に設置できるコンテンツ量は少なくなってしまいます。

ページの見やすさを考慮した大きさであれば、『タイトル』と『メニューボタン』と検索ボタンぐらいしか設置できません。

常にブログタイトルが表示される

設置するコンテンツ量は制限されますが、それでもお釣りがくるほどのメリットです。

固定ヘッダーにブログのタイトルを表示しておけば、常に視界の片隅にブログ名が表示されます。
タイトルを通して興味を持ってもらえれば、回遊率は上がります。

強制的にブログタイトルを見てもらえるのが固定ヘッダーの強みです。

ヘッダーを固定していない場合は、記事を読み始めた際に少しブログ名が見えるだけなので、インパクトのあるブログ名であっても記憶には残りにくいでしょう。

固定フッターのコンテンツ

フッター内のコンテンツ
当ブログが以前に使っていた固定フッター

固定フッターの主な機能
・ホームに戻る
・シェアボタン
・メニューボタン
・ページのトップに戻る
・カテゴリー等

固定フッターはヘッダーと違って、自由なスペースが多い分、設置できるコンテンツ量も多いです。

『シェアボタン』や『ページトップに戻るボタン』などの定番のもの以外にも、オススメのカテゴリーなどを設置することもできます。

搭載するべき機能

フッター内のメニュー

最も必要な機能は『メニューボタン』です。

沢山の項目をページ内に配置すると、スマホの画面では非常に見えづらくなりますよね?
しかし、メニューボタンさえあれば、画面を埋めることなくコンテンツを沢山入れることができます。
そのため、「今時のブログではメニューが必須」と言っても過言ではありません。

また、これは固定フッターに限られますが、メニューの他に「オススメしたいジャンルのボタン」などを搭載するのも良いでしょう。

不要な機能

ゴミ箱

最も不要なコンテンツは『ページのトップに戻る』です。
そもそもトップに戻ることがあまりないことと、スマホであれば画面上端をタップすれば一瞬でトップへ戻ることができるからです。

ちなみに、私の使っているThe Thorでは固定フッターの有無にかかわらず「トップへ戻るボタン」が表示されるのですが、スマホには不要なので排除しました。

関連記事

・『ページトップへ戻る』ボタンを消したい・右下の矢印ボタンを消したい・無駄な機能は省きたい画面右下に表示される『ページトップへ戻る』ボタン(もしくは『先頭へ戻る』ボタン)って必要ないですよね?少なくとも、先頭へ戻る機能[…]

ページトップへ戻る

また、『ホームへ戻るボタン』や『シェアボタン』はメニューの中に設置できるため不要です。
『シェアボタン』に関しては、記事の最後に表示するだけでも十分でしょう。
記事を読まずにシェアするような人は自分以外に居ないですから。


固定フッター・ヘッダーの強みと弱み

それでは、ここまでの情報を一旦整理します。

固定ヘッダー
・片手操作ではタップしづらい
常に上部に映るため、視界が狭まる
ブログ名が表示されるため、ブログ自体に興味を持ってもらえる

固定フッター
・片手操作でもタップしやすい
指で隠れるため、邪魔にならない
自由に設置できるコンテンツが多い


アクセス上位30サイトの採用率

人気

ここからは客観的な情報を参考にしてみたいと思います。

上位ランカーであれば細かい所まで考えて作られているはずなので、ここは先人の知恵をお借りしましょう。

ということで、アクセス数上位30サイトを見て回った結果がこちらです。
※サイト選別はブログ部さんのランキングを参考にさせていただきました。

 固定フッター固定ヘッダー何もナシ
採用サイト数7716
採用率23%23%53%

結果としては、一番多いのが固定フッター・ヘッダーを両方使っていないブログ、次いで固定フッター・ヘッダーが同着2位となりました。

ブログのジャンルで異なる結果

上位30ものブログを回って、見えてきたことがあります。

雑記ブログは固定ヘッダーでタイトルを強調している
特化ブログは固定フッターにオススメのジャンルを設置しているか、何も設置していない
・固定ヘッダーは狭くしている
・固定フッターは狭くするか、メニューだけ右端に設置している

雑記ブログはファンをつけるために固定ヘッダーでタイトルを強調しています。

また、特化ブログの場合は回遊率を考えて固定フッターを設置、もしくはユーザビリティを考えて何も設置しないという選択をしているようです。

画面上部にアドセンス広告を貼っているブログも5サイトあったため、広告のために使い分けているということも考えられますね。

そもそも固定ヘッダー・フッターは必要か?

統計結果では固定ヘッダーもフッターも使わないブログが一番多かったですね。
それで不安になった方も居るかと思います。

実際、コンテンツの見やすさを考えて設置しないという選択肢はアリだと思います

しかし、先ほども記述したとおり、現在のスマホ市場は5インチ6インチが当たり前になってきています
そのため、サイズに気をつけて設置すれば、そこまで邪魔にはならないかとは思います。

とはいえ、必要がないのに設置するのは無駄、むしろマイナスです。
本当に必要かどうかをしっかり考えましょう。


【まとめ】目的は明確に、モバイルフレンドリーに

スマホを持った女の子

それではまとめです。

 雑記ブログ → 固定ヘッダーで名前を売る、ファンを付ける
 特化ブログ → 固定フッターで巡回率を上げる、誘導する

~気をつけるポイント~
・タップしやすいのは固定フッター
・記事の閲覧を妨げない大きさに調整(特にヘッダー)
・ヘッダー(フッター)内のメニュー設置は必須
・固定フッターには誘導したいカテゴリー等を設置する
・『ページトップに戻る』やシェアボタンは不要

大事なことは「何のために固定ヘッダー・固定フッターを設置するか」を考えることです。

「回遊率が上がれば良いな」と言って、なんとなくデフォルトのまま設置しても邪魔にしかなりません。

機能性とユーザーの利便性を兼ね備えたものを作りましょう!


【おまけ】ヘッダーの大きさ調整用CSS

私の使っているテーマ “The Thor” にはヘッダーの細かい大きさ調整機能がなかったため、CSSで調整しました。

参考までに載せておきます。

@media only screen and (max-width: 480px){ .l-header {  padding-top: 10px!important;  padding-bottom: 5px!important; }}

あくまで私のサイトロゴに適した数値になっています。
細かい調整はpaddingの数値を弄ってください。

もしPCの表示も変えたい場合は、一番上の”@media only screen…”の行と、一番下の ” } “の行を削除してください。