スマホで窮屈になる原因は、文字サイズではない

よく使われる画面幅のうち、いちばん狭いところで、レイアウトがひとかたまりに詰まってしまう。

すぐに思いつくのは文字サイズを下げることです。私たちも3回下げましたが、そのたびにどこかが良くなり、別のどこかが悪くなりました。

計測そのものが嘘をつく

私たちは「何行に折り返したか」を指標にしていました。この数字には、嘘のつき方が2つあります。

① 非表示の要素は幅がゼロになる。閉じたパネルを測ると、行数は常に1行。完璧に見えます。

② はみ出しが切り取られていると、行数は増えない。テキストがはみ出していても、コンテナに切り取りの設定があれば、測れるのは元の行数のままです。画面では文の半分が消えているのに、数字の上では何も起きていません。

測るべきは行数ではなく、中身の実際の高さとコンテナの高さの比です。しかも、要素が本当に表示されている状態で測る必要があります。

狭い画面で詰まってしまうのは、たいてい一つひとつの要素が大きすぎるからではありません。どの要素にも、引き下がることが許されていないからです。

メインの内容、補足の説明、メタ情報、操作ボタン。どのブロックも、自分は必ずそこにいるべきだと思っています。幅が狭くなると全員が一緒に細くなり、結果としてどれも中途半端になります。

ブロックごとに階層を決め、どの幅を下回ったら何をするかを書いておきます。

⭐ 文字サイズを下げると、すべてが一緒に悪くなります。譲る順番を決めれば、残るべきものは元の質のまま残せます。