同じ「丸み」でも、比べる相手が違えば別の表に置く

フッターの上の角を丸めています。ページの下に別の面が敷かれている、という見え方を作るためです。

ところが、実機で見返すと「もう少し丸くていい、50pxでもいいくらい」と感じました。当時は14pxでした。

丸みは1つの表で持っている#

このサイトでは、角の丸さを6段階の表で持っています。既定値より意識的に小さくしてあります。

表で持っている理由は、調整を1か所で終わらせるためです。「全体的にもう少し角を立てたい」と思ったとき、この表の数字を書き換えれば、丸みを指定しているすべての場所が同じ方向へ動きます。個別に書いていたら、直し漏れた場所だけが取り残されます。

一番大きい値を50pxにすればいい、ではなかった#

最初に考えたのは、表の一番大きい値を50pxにすることでした。フッターはその値を使っているので、これで目的は果たせます。

しかもこの値は、調べたらサイト全体でフッター1か所しか使っていませんでした。他に影響が出ないので、書き換えても壊れません。

それでもやめました。

比べる相手が違うものは、同じ表に置けない#

考え直して分かったのは、この表が何のためにあるかでした。

DEFAULTから一番大きい値までは、1本の段階になっています。小さいものから大きいものへ並んでいて、ボタン、入力欄、タグ、カードのように本文の中に置かれる部品のためにあります。

これらの部品には共通点があります。画面の中で隣り合って並ぶので、互いの丸みを見比べられるということです。ボタンよりカードのほうが少し丸い、という関係が意味を持ちます。だから同じ段階の上に居る必要があります。

フッターは違います。幅が画面いっぱいあり、隣に並ぶものがありません。比べる相手は画面の縁だけです。

なぜ14pxでは足りなかったのか#

数字の話も書いておきます。

同じ半径でも、対象が横に広いほど、角の丸みは相対的に小さく見えます。幅300pxのカードの14pxと、幅1200pxのフッターの14pxでは、目に入る割合が違います。

フッターの角を丸めているのは、そこに背景がわずかに覗いて「下に別の面が重なっている」と伝えるためです。角が丸いことに気づけない大きさでは、その役割を果たしません。14pxは、部品としては十分でも、面としては足りませんでした。

今回の学び#

まず、壊れないことは、変えてよい理由にはならないこと。使っている場所が1か所しかなければ、書き換えても何も起きません。ただし表の意味は変わっていて、次にその表を使う人が想定外の値を受け取ります。影響が出るのが今日でないだけです。

次に、同じ言葉で呼んでいるものが、同じ決め方とは限らないこと。部品の丸みは隣と比べて決まり、面の丸みはそれ単体で伝わるかで決まります。決め方が違うものを1本の段階に押し込むと、どちらかが無理をすることになります。

そして、例外は、例外だと分かる場所に置くこと。段階の中に極端な値を混ぜると、段階のほうが読めなくなります。外へ出して名前を付ければ、なぜそこにあるのかを書き残せます。書き残せる形にすること自体が、判断を残す手段になります。