ヘッダーの高さを0にして、視認性を極限まで高めたい：最高のウェブデザインを求めて…

この記事はただの日記です。技術的な話はほとんどありません。

以前からちょくちょくアナウンスしているとおり、このウェブサイトはもうすぐ新しいシステムに移ります。デザインはほとんど完成していますが、キャッシュやマイページといったシステムの細部はもうちょっと時間がかかりそう。

現在、メインコンテンツはヘッダーの下にありますが、今度からはすぐに始まります。ヘッダーは左に配置されますが、固定ではありません。

タブレットやコンピューターで画面を見た場合、タイトルと記事のメタ情報（執筆者と公開日時）が最上部にくるため、現在より視認性が向上しています。

私はずっと最高のユーザーインターフェースを追及してて、ヘッダーという存在と長年格闘してきました。スクロールしなければメインコンテンツが出てこない画面にはどうしてもしたくない…というこだわりを携えて、いろいろと工夫してきました。

そして「最高に美しいヘッダーはどんなものか？」と考えつづけた結果、

の2点に行きつきました。ある程度のメニューがないと、動線不足でユーザーが混乱しちゃう。でも、ごちゃごちゃありすぎると、それはそれで視認性が低下する。

そうしてたどり着いたデザインが、画面全体のpositionをrelativeにして、ヘッダーを左上に置くもの。ただしスマートフォンではあいかわらずいつものヘッダーがあります。今回のデザインはスマートフォン以外のデバイスに限ります。

ヘッダーの高さはそのメディアの本質とけっこう結びつく話かもしれません。ヘッダーの高さを極限までなくしたい動機は、記事を結論から書きたい動機と本質的に同じで、要するに

「さっさと見たいユーザーの期待に応えたい」

という哲学が根っこにあります。そのユーザーって私なんだけども…。

私はとにかくせっかち。スクロールも苦手で、さっさと結論を知りたいタイプ。だから、私の書いた記事はだいたい余計なくだりがほとんどなくて、たとえるならビスケットみたいな味わい。

ヘッダー内要素について

新しいデザインは今年はじめにつくった計算Xと同じく、ヘッダーが左にきますが、検索ボックス（検索バー）はありません。検索ボックスはモーダルにして、ロゴの下に検索モーダルを呼ぶアイコンを設置しました。

検索ボックスを常時表示にすると、現行デザインのようにヘッダーが分厚くなってメイン領域が圧縮されます。

また、ヘッダー内要素を分割して、それを左右にわけて表示するというやり方も開発中に試しましたが、納得がいくデザインは生まれませんでした。ヘッダー内要素はまとめて左に置くと視認性が良くなります。

ちなみにフッターは右下に配置しました。フッターも固定ではありません。

ヘッダーとフッターを固定すると、メインコンテンツに集中したいユーザーは「あああああっ！」ってなりそう。