角丸の余白法則は、なぜ綺麗に見えるのか？
角丸の中に別の角丸を配置する場合、余白の大きさに合わせて外側の角丸の数値を設定すると、綺麗に配置できる法則が以前話題になっていました。
quick tip for nested radii → your corners will look a lot better if you set the outer radius to the sum of the inner radius + padding pic.twitter.com/oh9ABFSuQ1
— Aleks (@aleksliving) August 5, 2023
読みやすいように、日本語での表記も記載します。
このポストを拝見した際、参考になると感心しました。その後、多くの方が同様にこの計算式を紹介するようになりました。
これが出来てるかどうかでUIデザイナーとしてのスキルレベルがだいたい測れる。 pic.twitter.com/ZucNPmVxQU
— Brandon K. Hill | CEO of btrax 🇺🇸x🇯🇵/2 (@BrandonKHill) February 8, 2024
しかし私は「なぜこの計算式を用いると綺麗な角丸を作れるのか？」を言語化できず、モヤモヤしていました。
今回はそのモヤモヤを解消するために、実際にいくつかのパターンをデザインをしながら、検証していきたいと思います。
まずは法則を試してみる
余白の法則を実際にいくつかのパターンで試してみます。せっかくなので、美しい比率とされる「黄金比」と「白銀比」を並べて比較してみたいと思います。
■ パターン1（外側の角丸16px・余白8pxの場合）
数値が近いせいか、そこまで大差が無く、どれも綺麗な角丸を描いております。
■ パターン2（外側の角丸60px・余白40pxの場合）
余白の間が大きい影響か、「余白の法則」の内側の角丸が若干角張っており、「黄金比」と「白銀比」はやや丸みがあります。
■ パターン3（外側の角丸120px・余白16pxの場合）
余白の法則は美しい楕円を描いていますが、「黄金比」と「白銀比」の場合、角丸箇所が詰まって見えてしまっています。
■ パターン4（外側の角丸120px・余白80pxの場合）
黄金比と白銀比はやや丸みを帯びた内側の角丸となっております。
「余白の法則」を使うことで、ある程度、安定した綺麗な角丸を作ることができました。黄金比・白銀比よりも、様々なパターンで一貫して綺麗な角丸が描けたことを比較することで証明できたかと思います。
この余白の法則は一体何の法則なのか
本題に入ります。黄金比・白銀比と比較すると、角丸が綺麗に作りやすい法則と呼べますが、綺麗に描ける理由は一体何なのでしょうか。
それぞれの余白の数値を調べてみると…
角丸と直線箇所に、赤色で余白を記載して計測してみました。
「余白の法則」の角丸は余白がどこも8pxですが、「内側の角丸が0px」の場合では、角丸箇所の余白が4.5pxと異なることが分かりました。
内側の角丸が無いことで角丸箇所が余白が詰まり、外側と内側の余白の面積が異なるため、違和感に繋がっているものと考えられます。
先ほどのパターンの余白数値はこちらです。
■ パターン1
■ パターン2
■ パターン3
■ パターン4
つまりこの法則は、外側と内側の角丸の余白面積を均一にする法則と言えるでしょう。そして余白面積が均一になることで、綺麗に見えるという効果が得られております。
様々な綺麗な角丸
内側の角丸とはやや逸れますが、綺麗に角丸手段は他にもあり、代表的なものとしてスーパー楕円というものがあります。
このスーパー楕円は、フランスの数学者ガブリエル・ラメ(Gabriel Lamé)氏の曲線の研究をもとに、デンマークの数学者ピート・ハイン(Piet Hein)氏がデザインしました。
丸よりも丸みを感じると言われるこのスーパー楕円は、iPhoneのアプリアイコンやサッカーのスタジアムの形状で設計されるなど、日常でも広く活用されている楕円です。
このように綺麗な角丸を作り出す法則や計算式が存在し、更に詳細に探求すると、1px単位で数値を微調整することで、さまざまな美しい角丸に出会えます。角丸のデザインは研究の価値があるテーマであり、その奥深さにワクワクさせられますね。
さいごに
「余白の法則」を使って角丸を作ると、綺麗に調整することが分かりましたが、必ずしも法則に従わなくても綺麗に見えることも分かりました。
そのため、特に初学者は「法則に従わないといけない…！」と囚われる必要はありません。これはあくまで手段であり、1つの案として上手に活用していきましょう。
こうした法則も単に使うだけでなく、その背後にある理由も探っていくと、デザインがさらに楽しくなりますね。これからも探求を続けていきます。（他にご意見などあればコメント・ポストをお待ちしております。）
参考記事
この記事が気に入ったらサポートをしてみませんか？