クラスター C4: CSS とデザイン
CSS の角丸とシェイプのビジュアルガイド
角丸や形状は階層感、押せそうかどうか、ブランドトーンに直結します。場当たり的に値を増やすより、体系化したほうが安定します。
角丸はトークン化する
カード、入力欄、ボタン、ダイアログがそれぞれ別の radius を持つと、UI 全体が寄せ集めのように見えます。
まず半径スケールを決め、コンポーネント役割ごとに割り当てると、レビュー基準も明確になります。
シェイプは意味のある場面で使う
- 三角形や切り欠きは吹き出し、ポインター、案内導線に向いています。
- 複雑な clip-path は限定的に使い、矩形ベースのフォールバックを持つ。
- 形状アクセントは装飾ではなく意味づけと一貫性のために使う。
実用的な入出力例
入力
コンポーネント: プロモカード 要件: 16px の柔らかい角丸 + 右上のノッチ
出力
border-radius: 16px clip-path: polygon(...) 低機能環境では角丸のみへフォールバック