🖇️
角丸の半径はどう設計するべき？
UIデザインの基礎：角丸の半径はどう設計するべき？
UIデザインにおいて「角丸（ボーダー半径）」の設計は、視覚的な心地よさや一貫性に大きな影響を与えます。特に外側と内側の角丸がズレて見えると、全体の仕上がりが雑に感じられることも。
この記事では、角丸の基本設計ルールをわかりやすく解説します。
❌ よくある間違い：「半径を同じにする」
外側の半径 = 内側の半径
この設計だと、角のカーブがぴったり一致せず、不自然なズレが生じてしまいます。角の重なり部分がきつく見えてしまい、結果的にデザインが歪んで見える原因に。
✅ 正しい設計：「パディング分を加える」
外側の半径 = 内側の半径 + パディング
これは最も自然な設計方法です。
たとえば：
- 内側の角丸：16px
- パディング：8px
- → 外側の角丸：24px
このように設計すると、角のカーブがきれいに一致し、視覚的に滑らかで整った印象になります。
🎯 まとめ
| 項目 | 値 |
|---|---|
| 内側の半径 | 16px |
| パディング | 8px |
| 外側の半径 | 16px + 8px = 24px |
💡 ワンポイントアドバイス
- ボーダーや背景を重ねるデザインでは、角丸の継承関係を意識しよう。
- デザインツール（FigmaやSketchなど）でも、この法則を意識すると一貫したUIが作れます。
- コンポーネントの使い回しがしやすくなり、保守性もアップ！
🔚 おわりに
UIの「角丸」は一見些細な部分ですが、細部のこだわりがプロダクト全体の質感を左右します。
今回のような基礎知識を押さえておくだけでも、ぐっとレベルアップしたデザインが可能になりますよ！
Discussion