gabrielobholz-corner-smoothing

Apple Corner Smoothing

Apple／iOS風のコーナースムージングがデザインで求められている場合は、特に一般的なFigmaのコーナースムージング60%の見た目を再現する場合、パスベースのジオメトリを使用してください。CSSのborder-radiusだけでは、この形状を表現できません。

クイックリファレンス

必要なもの	使用方法
DOM／SVGの長方形	幅、高さ、半径、スムージングから<path d="...">を生成する
CSSのみのコンポーネント	問題がなければclip-path: path("...")を使用し、そうでなければインラインSVGを使用する
Canvas／WebGL	同じサンプリング済みのスーパー楕円の点をポリゴン／パスとして使用する
Figmaとの一致	Apple／iOS風の目標値として60%を使用する
通常の角丸	smoothing: 0を使用する

コピーして使えるコードについては、implementation.mdを参照してください。

基本原則

1. 半径を大きくしてごまかさない

border-radiusを大きくすると変わるのは半径であり、コーナーの遷移ではありません。Apple風のスムージングでは半径を維持したまま、直線の辺からコーナーへの遷移を滑らかにします。

2. パスを優先する

SVGのパスデータ、clip-path: path(...)、CanvasのPath2D、またはフレームワーク固有のベクターパスを使用してください。これにより、レイアウトのハック、入れ子のマスク、疑似要素、エッジケースの不具合を避けられます。

3. 半径をクランプする

半径は必ずmin(width, height) / 2にクランプしてください。これにより、コンポーネントが小さくなったり、レスポンシブに変化したりしたときに、パスが自己交差するのを防げます。

4. 60%をAppleの目標値にする

Apple／iOS風のコーナーを求められ、他の値が指定されていない場合は、smoothing: 60を使用してください。通常の円形のborder-radiusには0%、最大限に装飾的な形状にする場合のみ100%を使用してください。

5. レイアウトを維持する

スムージング用のパスは、描画／クリッピングのみに影響させてください。スムージングをアニメーションするときに、要素の幅、高さ、パディング、レイアウトの寸法を変更しないでください。

6. ボックスではなくパスをアニメーションする

スムージングをアニメーションするときは、width、height、radiusを一定に保ち、生成されたパスのみを更新してください。ラベルや数字もアニメーションする場合は、サイズ固定のコンテナーと等幅数字を使用してください。

実装ワークフロー

1. 指定された幅、高さ、半径、スムージングの割合を確認します。
2. SVGを使用できる場合は、<path>を描画して、そのd属性を設定します。
3. HTML／CSSを使用する必要がある場合は、ブラウザーのサポートと拡大縮小が問題ないときに限りclip-path: path(...)を使用してください。そうでなければ、要素の背面または前面にSVGを配置します。
4. ユーザーが別の値を指定していない限り、Apple／iOS風にはsmoothing: 60を使用します。
5. 小さいサイズと最大半径で検証します。

よくある間違い

間違い	修正方法
border-radius: 52pxを指定してスムージングと呼ぶ	スムージング済みのパスを生成する
ボックスの半分を超える半径を指定する	半径をクランプする
スムージングのアニメーション中にレイアウトが変わる	レイアウトを固定し、パスのみを更新する
使い捨てのパス文字列を使う	radiusとsmoothingを受け取る再利用可能な関数を使う
デフォルトで100%を適用する	Apple／iOS風には60%を使用する
エッジをぼかすCSSマスクを使う	SVGパスまたは滑らかなベクタークリップを優先する

レビューチェックリスト

• 半径が短い方の辺の半分にクランプされている
• 特に指定がない限り、Apple／iOS風にはsmoothing: 60が使われている
• 形状がborder-radiusのみの近似ではなく、パスベースになっている
• スムージングの変更中に幅、高さ、レイアウトがずれない
• 生成されたパスが正方形と長方形の両方で機能する
• clip-path: path()がサポートされていない場合に備えて、コンポーネントにフォールバックまたは許容できる動作がある