読む邪魔をしない

スマートフォンで自分の記事を読んでいて、気になることがありました。

画面の上に、ヘッダーと目次がずっと貼り付いたままです。どちらも便利なつもりで置いたものですが、読んでいるあいだは、ただ場所を取っています。

貼り付いたものは、面積を占め続ける#

スマートフォンの画面の高さは、だいたい本文15〜20行ぶんです。そこにヘッダーが1行、目次のバーが1行居座ると、実際に読める範囲は1割ほど減ります。

減るだけならまだしも、目次のバーはいま読もうとしている行の上に半透明でかぶさります。スクロールしている最中がいちばん邪魔です。

3つの変更#

1. ヘッダーは「量」ではなく「向き」で判断する#

最初に考えたのは「300pxスクロールしたら隠す」でした。単純ですが、これだと読み進めるほど隠れっぱなしになります。メニューを開きたくなったとき、ページの先頭まで戻ることになります。

採用したのは、スクロールの向きで判断する方式です。

下へ読み進んでいる  → 隠す（読むのに要らない）
上へ戻し始めた      → 出す（何かしたいはず）
ページの先頭付近    → 必ず出す

上へのスクロールは、たいてい「前に戻りたい」「別の場所へ行きたい」という合図です。その動作を、ヘッダーを呼び出す操作として兼ねさせています。新しい操作を覚えてもらう必要がありません。

細かいが要る配慮が3つあった#

ひとつめはわずかな揺れを無視すること。指の震えや慣性の揺り戻しで数px動くたびに出し入れすると、ヘッダーが点滅します。6px未満の移動は無視しています。

ふたつめは画面の端で引っ張ったとき。iPhoneでは画面の一番上でさらに引っ張ると、スクロール位置がマイナスになります。そのまま計算すると「上に動いた」と誤判定します。0で止めるようにしました。

みっつめはメニューを開いているあいだは隠さないこと。開いた本人の操作でヘッダーごと消えたら、何が起きたのか分かりません。

2. 目次は「消す」のではなく「薄くする」#

目次も同じように隠す案がありました。やめました。

この目次のバーには読了の進捗も出しています。消すと、どこまで読んだかが分からなくなります。

開いているときは薄くしません。開いているのは読むためではなく選ぶためなので、そこで薄くすると目的の見出しを探せなくなります。

3. 2つの追従が、食い違った#

ここで問題が出ました。

目次は「ヘッダーの高さ（56px）ぶん下」に貼り付く指定になっています。ヘッダーがそこにある前提です。

ところがヘッダーは引っ込むようになりました。すると——

画面の上端
   ↓
（56pxの空白）   ← ヘッダーが居たはずの場所
   ↓
目次のバー       ← 宙に浮いて見える

目次だけが、意味のない隙間を空けて浮きます。

状態を、渡さずに共有する#

ヘッダーが隠れているかどうかを、目次に伝える必要があります。素直に考えると「上から順に受け渡す」ですが、この構成では間にあるページ全体を作り替えることになります。

選んだのは、ページ全体に1つの値を置く方法です。

ヘッダー: --header-offset = 3.5rem（表示中）/ 0rem（隠れている）
目次    : 貼り付く位置 = --header-offset

ヘッダーは自分の状態を書くだけ、目次はその値を見るだけです。お互いを直接知らないまま、位置だけが揃います。

あえてTailwindを使わなかった箇所#

このサイトのスタイルはTailwind CSSで書いています。今回の位置指定も書けますが、1か所だけ普通のCSSにしました。

理由は、壊れ方です。Tailwindのクラス名を書き間違えると、CSSが生成されないだけで、ビルドは成功します。

4. 先頭へ戻るボタン#

最後に、よくあるボタンを置きました。ここでも1つだけ気を付けた点があります。

薄くして消したボタンは、見えないのに押せます。透明度を0にしただけでは、そこにある扱いのままです。キーボードで操作している人には、見えない項目に順番が回ってきます。

見えないあいだは押せない・順番が回ってこない・読み上げられないの3つを揃えました。見た目と実体を一致させています。

あわせて、端末の「動きを減らす」設定を尊重しています。滑らかに移動するのが心地よい人ばかりではありません。

今回の学び#

まず、常に出しておくものと、必要なときだけ出すものを分けること。便利だから常に出す、を積み重ねると、本文が読める面積だけが減っていきます。何のために画面を開いているのかに戻って決めるべきです。

次に、「隠す」の前に「薄くする」を検討すること。困っているのが重なりなら、濃さを変えるだけで解決することがあります。消してしまうと、その要素が持っていた別の役割まで一緒に失います。

そして、動かすものが増えたら、位置の前提を疑うこと。固定されている前提で書いた数値は、片方が動き出した瞬間に嘘になります。今回は「ヘッダーの高さ」がそれでした。

最後に、確かめにくい場所ほど、壊れたら気づく書き方を選ぶこと。同じ結果になる書き方が2つあるなら、間違えたときに黙って消えないほうを選ぶ価値があります。