(主にモバイル機器の)限られた画面領域を利用するためには様々な手法が考えられている。ハンバーガー・アイコンを使ったグローバル・ヘッダーはその最たるもので、ウェブサイトでも採用するところが増えてきた。なぜ普通のグローバル・ヘッダーではダメなのかと言えば、ページを開いた時にグローバル・ヘッダーの大きさが邪魔になって、コンテンツが見えなくなってしまいやすいことが挙げられるだろう。Ian Coyleというウェブサイトではそれをページ内リンクを利用してうまく解決していた。
コンテンツの始まる部分にID属性を振っておき、そこへリンクして移動させることによってグローバル・ヘッダーが画面外に置かれるようになる。適切な要素にID属性を振るだけと言って良いので、コストはほとんどなしに実装でき、またグローバル・ヘッダーのサイズにも制限はほとんどない。
また、HTML5では#topでページの先頭に移動するように定められたので、グローバル・ヘッダーを表示させるには#topに移動させれば良いだけなのも手軽で優れている。画面ちょうどにグローバル・ヘッダーの大きさがなるように調節するときれいに作れるだろうし、移動した時のアニメーションなども作りやすいはずだ。
反面、運用には注意が必要そうで、外部から飛んでくることを考慮してJavaScriptで自動的にジャンプするようにしたり、replaceState()を使ってページ内リンクが表に出てこないようにしたりという工夫は必要にはなるだろう。主にこのような点でもうちょっと詰めるところはありそうだが、全般的に優れたアプローチと感じた。
グローバル・ヘッダーの機能性を保ちつつ、コンパクトなものとワイドなものを作るのは至難の業だ。ハンバーガー・アイコンがあまり良い評価をされないのは、専有するサイズという点では条件を満たしていても、その機能性と認識性に難があると考えられるからだ。一方でタブ・バーのような位置固定メニューは機能性という点では問題ないが、専有面積に問題があり、それに目をつぶったとしても、狭い画面に特化されすぎたきらいがあり、広い画面にあった同等のものを作るのはかなり難しいだろう。
タブ・バーではない位置固定メニューなら、スクロールすると隠れ、戻ると表示するような優れた実装があるが、ハンバーガー・アイコンの類いではなかなか良い実装は見ない。ハンバーガー・アイコンではなくロゴをトリガーにしたメニューの表示は悪くない気がするけれども、良い実装と言えるほどのものでもないだろう。
僕はどちらかというとこういう問題はナビゲーション項目の整理でやってしまう傾向が強く、融通がきかない実装にしてしまいがちだ。ページ内リンクを利用して、画面外にグローバル・ヘッダーを配置しておくというのは目からウロコだった。機会があれば利用してみたい。