概要 UIに関するTipsで、次のようなものがよく流れてきます。 「角丸がかかっている要素の内側に、更に角丸の要素を配置するときは内側の角丸 = 外側の角丸 - 間の余白にすべし」というものです。 このルール自体は数学的にも理にかなっており、外側と内側の角丸の余白面積を均一にする法則として機能します。 しかし、このミクロなTipsだけに注目してしまうと、アプリケーション全体の設計において重要な視点が抜け落ちてしまいます。 角丸の設計においても、個別の要素レベルでの最適化から一歩引いて、全体での一貫性を考慮したマクロな設計が必要なのです。 この記事では、角丸設計において「木を見て森を見ず」にならないための考え方と、実装時の具体的な対策について紹介します。 対象読者 UIデザイナー・フロントエンドエンジニア デザインシステムの構築・運用に関わる方 プロダクト開発でデザインと実装の両面を考慮する