固定ヘッダーって今どう？最新の流行をチェックしてみたよ！

あけましておめでとうございます。ご存知鈴木です😀
今年もよろしくお願いいたします🙏

さて、GoogleのMFI導入を受けてWeb界隈のみなさまにおかれましては対応に追われていることと思いますが、
2017年一発目の本日は、みんな大好き「スマホ環境での固定ヘッダー/フッター」のイマを探っていきます！✌️

（おさらい）固定ヘッダー/フッターって

これや、

これですね。

CSSでいうと、

header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}

こんな具合で再現できるアレですね。

重要な動線を常に画面上部/下部に固定で配置しておくことで、サイト内回遊率やソーシャルメディアへのシェア率を高める効果があったりなかったりする重要なUIパーツのひとつですね。

ただでさえPCなどに比べて描画領域が限られているスマートフォンですが、そんな子たちの描画領域という限られた貴重なリソースを常に部分的に占有するという以上は、これはもちろんそれ相応のこだわりをもって臨まなければなりませんね！

というわけで、固定ヘッダー/フッターを採用している他のWebサイトさんたちがどんなこだわりをもっているのかこっそり覗いてきました👀

固定ヘッダー/フッターを採用しているWebサイトの具体例

まったく深い意図はないのですが、今回は女性向けのメディアサイト辺りを参考にさせていただきました👠　以下敬称略です〜〜🙈

ハウコレ

height: 50pxの固定ヘッダーのようです。ハンバーガーメニューと検索ボタンを両端に置いたとても一般的なレイアウトですね。
どちらのボタンもタップすることでそれぞれサブメニューが展開するタイプです。

WEAR

スクロール方向なんかを検出して、出たり出なかったりする固定ヘッダーですね。貴重な面積を最大限に活かすためにちょくちょく見られるタイプです。
height: 57pxで透明度10%のいい具合の透け感ヘッダーとなっておるようです。
アイコン・ロゴともアイコンフォントにしていて、高解像度ディスプレイへの対応もバッチリですね✨

オズモール

オズモールさんはどうやら高さは特に指定せず、ヘッダーコンテナにdisplay: tableを、アイテムをdisplay: table-cellを当てるなどしてうまいことやっているようで、ランドスケープにすると、画像の通りやや残念な感じになってしまいました…

モデルプレス

まいやんかわいいですね。
モデルプレスさんはロゴがheight: 36px、上下ボーダー、マージン等合わせて計height: 49pxとなっとるようです。
これまでとは異なり、ヘッダー右端に検索ボタン・メニューを寄せているすこし変わったレイアウトで、ロゴとアイコンもSVGを採用するなどなんだかおしゃれな雰囲気ですね。さすがの大手おしゃれメディアさんです🎉

これからの固定ヘッダー/フッター

ハンバーガーメニュー先輩の現在

巷ではやれお年寄りフレンドリーじゃないだのやれユーザーにワンアクション強いることになってどうのなど、ぼろっかすに言われることも少なくないハンバーガーメニューさんについては今回覗かせていただいたWebサイトの多くでは以前健在でした。

が、Web界隈の陣頭をもみくちゃになりながら率先して人柱となるべきWeb制作会社としては、やはり色々なことにチャレンジしていかなくてはならない！との啓示がありましたので、
この度の当社Webサイトリニューアルを機会に、ハンバーガーメニューを廃止するとともに、コンテンツ構成を見直し、常に３つの大カテゴリにアクセスできるようなシンプルなヘッダーを採用してみました😈

結果が出るまでにはしばらく時間はかかるかとは思いますが、取り急ぎの周りの反応を聞く限りではポジティブな意見が多いようなので、まずは一安心している次第です。

高解像度ディスプレイへの対応

今回Webサイトによって大きく対応が異なったのが、「ロゴ・アイコンのベクター化」です☝️
一昔前まではGIFだのPNGだのが主流だったこの領域ですが、モダンブラウザの大半でSVGがサポートされたことと旧IEのサポート終了を受けてか、ここ最近では猫も杓子もベクターアンドベクターです。

一方で、JPGやPNGのようなラスタ画像と比べて少なからずHTMLやCSSでの扱いが厄介なことは間違いないので、まずは天下のFont AwesomeさんやIcoMoonさんのような既存サービスを利用してみて、まずはその利便性を享受してみましょう！🐊

まとめ

さりげなく当社Webサイトのリニューアルの宣伝もぶっこんだ2017年一発目でしたが、いかがでしたでしょうか？

「女心と秋の空とWeb界隈の流行」ということわざもあります通り、ビッグウェーブにキャッチアップするだけで精一杯なこの世界ですが、
要はユーザーが使いやすいと感じるものこそが正解なので、そこだけは忘れずに、色んなことにチャレンジしつつ、日々よりよき答えを探し求めていきましょう。

かしこ。