クロソイド曲線を利用した視覚的にやわらかなコーナーをHTML要素に適用する、CSS clip-pathジェネレータを作った。 iOSのアプリアイコンの角にはCSSの border-radius のような一定比率ではない、特殊な曲率を用いた曲線が利用されており、視覚的に「自然でやわらか」な印象を与えます。 iOSで使われているのは「クロソイド」と呼ばれる曲線で、この曲線は高速道路のカーブでも利用されていることからも、視覚的だけでなく数学的・物理学的にも無理のない自然なものと言えます。 下図のRound Rectはコーナーに真円を使用し、Clothoid Rectにはクロソイド曲線を使用していますが、後者の方が機械的ではなく、どことなくやわらかな印象をお持ちになるのではないでしょうか。 このあたりのお話は以下の記事が大変くわしいので、ご興味ありましたらぜひ一読になってください。 • • • C