コーナースタイル

コーナースタイルについて

Startify-UIでは、デザイントークンの一環として、要素に対するコーナースタイルのルールを設けています。UIデザインの観点から、特に角に丸みを持たせる角丸スタイルが頻繁に用いられており、さまざまなバリエーションの角丸スタイルを提供しています。

角丸スタイルとバリエーション

角丸のデザインは、直線的なデザインに比べて視覚的に柔らかく、親しみやすい印象を与えます。これにより、ユーザーがインターフェースに対してストレスなく操作できるようになることが期待できます。また、角丸の要素は、他の直線的な要素と視覚的に区別されやすくなります。ボタンやカード、モーダルウィンドウなどの要素を強調することができます。

また、角丸スタイルは現代的で洗練された印象を与え、現代のウェブサイトやアプリケーションのUIで多く採用されているスタイルであり、トレンドに合ったデザインを実現します。

角丸のサイズ

角丸スタイルの丸みの大きさには、小さな丸みから大きな丸みに至るまで、さまざまなオプションを提供しています。これにより、デザインの目的やコンテキストに応じて、最適な角丸の大きさを選択することができます。

角丸スタイルの丸みの大きさは標準的な文字サイズである16pxを基準に、最小の25%から最大の300%まで、Startify-UIのデザイントークンで定義されているサイズスケールの値に合わせて段階的にサイズが調整されています。また、要素のサイズに合わせて半径サイズの丸みになるよう調整される相対値も用意されており、これら全ての角丸サイズはユーティリティクラスとして提供されており、簡単に任意のサイズの角丸スタイルを適用することができます。

角丸の適用箇所

角丸スタイルは四隅すべてに適用するだけでなく、上部のみや右下のみなど、特定の角に対しても適用できます。これにより、デザインに動きや導線を加えることができ、ユーザーの注意を引くための効果的な手段となります。たとえば、タブ型UIコンポーネントのデザインでは上部の角のみを丸くすることで、重要な情報を視覚的に強調することができます。

角丸サイズ同様に、これらの角丸の適用箇所もユーティリティクラスとして提供されており、UI要素の開発を効率良く進めることができます。