Corner Radius — モバイルアプリにおける角の半径とは

Corner radiusとは？

Corner radiusは、長方形要素の角の丸みの度合いを決定する数値です。値が大きいほど角はより丸くなります。値が0の場合は角は直角（90°）のまま、短辺の半分に等しい値では、要素は円（正方形の場合）または直線辺を持つ角丸長方形（カプセル）になります。

モバイルデザインでは、corner radiusは次の用途に使用されます：カードとタイル、ボタン、入力フィールド、モーダルウィンドウ、画像とアバター、進行状況インジケーター、チップとバッジ。各要素タイプには、Material DesignとHuman Interface Guidelinesに基づく推奨範囲があります。

Material Design 3（Google、2026）によると、角丸は3つのレベルに分類されます：小（4 dp）— ボタンと入力フィールド用、中（8～12 dp）— カードとシート用、大（16～28 dp）— ダイアログとボトムシート用。Apple HIG（2025）は、システム要素（UIButton、UITextField）には10～12 ptの統一corner radiusを、モーダル表示には20+ ptを推奨しています。

iOSのCorner radius: CALayerとSwiftUI

iOSでは、角丸はCALayerのcornerRadiusプロパティを通じて実装されます。UIKitでは、すべてのUIViewにレイヤーがあり、そのcornerRadiusを設定できます。より複雑な丸み（異なる角に異なる半径）には、UIBezierPathと組み合わせてmaskedCornersとCACornerMaskを使用します。

// UIKit: CALayerによる丸み付け
import UIKit

let cardView = UIView()
cardView.backgroundColor = .systemBackground
cardView.layer.cornerRadius = 12
cardView.layer.maskedCorners = [
    .layerMinXMinYCorner,
    .layerMaxXMinYCorner
]

SwiftUIでは、丸みはcornerRadius()修飾子またはRoundedRectangleを使用したClipShapeで設定します。SwiftUIはclipped()とoverlay()を組み合わせたUIRectCornerによる個別の角丸もサポートしています。

// SwiftUI: RoundedRectangleによる丸み付け
import SwiftUI

VStack {
    Text("Corner Radius 16")
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blue)
        )
}

// 個別の角丸
RoundedRectangle(
    cornerSize: CGSize(width: 16, height: 16),
    style: .continuous
)

Continuous corner radiusは、AppleがiOS 7以降で使用している丸みスタイルです。従来の半径（円形）とは異なり、連続半径は円弧の代わりに3次ベジェ曲線を使用してより滑らかな丸みを生成します。SwiftUIはRoundedRectangleのstyle: .continuousパラメーターでこのスタイルをサポートしています。Appleは視覚的に自然であるため、すべてのシステム要素にcontinuous corner radiusを推奨しています。

AndroidのCorner radius: shapeとCompose

Androidでは、角丸は伝統的にres/drawableフォルダのXML shapeリソースを通じて実装されます。ShapeはcornerRadiusとsolidパラメーターで背景形状を定義します。異なる角には<corners android:bottomLeftRadius="..." />を使用します。Material Design 3では、テーマサポートと動的形状を持つMaterialShapeDrawableが追加されました。

<!-- res/drawable/bg_card.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white" />
    <corners android:radius="12dp" />
</shape>

Jetpack Composeでは、丸みはModifierのshapeパラメーターで設定します。Composeは各角とスタイル（CircularShapeまたはCutCornerShape）に異なる半径をサポートするRoundedCornerShapeを提供します。Composeはグラフィックストロークと組み合わせたRoundedCornerShapeを通じてcontinuous corner radiusもサポートしています。

// Jetpack Compose: RoundedCornerShapeによる丸み付け
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

Card(
    shape = RoundedCornerShape(
        topStart = 16.dp,
        topEnd = 16.dp,
        bottomStart = 4.dp,
        bottomEnd = 4.dp
    ),
    elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
) {
    Text(text = "カスタム丸みのCard")
}

Android ViewシステムのMaterialShapeDrawableは、drawableを再作成せずにcorner radiusを動的に変更できます。正確な設定にはShapeAppearanceModelを使用し、各角ごとにcornerFamily（roundedまたはcut）とcornerSizeを個別に設定します。

適切なcorner radiusの選び方

Corner radiusの選択は、要素の種類、使用コンテキスト、プラットフォームによって異なります。普遍的なルールはありませんが、Material DesignとApple HIGは標準コンポーネントに対して明確な推奨事項を提供しています。主な原則：丸みは目立つべきですが、コンテンツを妨げてはいけません。

コントラストルール：同じインターフェースで異なるcorner radiusを持つ要素は、視覚的な違いが目立つように少なくとも4 dp異なる必要があります。1画面で3レベルの丸みを使用しないでください。視覚的なノイズになります。Material Design 3は、画面ごとに最大2レベルの丸みを推奨しています：1つはコンテナ（カード、ダイアログ）用、もう1つはインタラクティブ要素（ボタン、フィールド）用です。

FlutterのCorner radius

Flutterでは、角丸はBorderRadiusクラスを通じて実装され、Radius.circular()またはRadius.elliptical()値を受け入れます。FlutterはBorderRadius.only()およびBorderRadius.horizontal()/vertical()による個別の丸みをサポートしています。ClipRRectウィジェットは、指定されたBorderRadiusに従って子要素をクリップします。

// Flutter: ClipRRectとContainerによる丸み付け
import 'package:flutter/material.dart';

Container(
    decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16.0),
            topRight: Radius.circular(16.0),
            bottomLeft: Radius.circular(4.0),
            bottomRight: Radius.circular(4.0),
        ),
    ),
    child: Text('カスタム角丸'),
)

// ClipRRectとImage
ClipRRect(
    borderRadius: BorderRadius.circular(12.0),
    child: Image.network(
        'https://example.com/image.jpg',
        fit: BoxFit.cover,
    ),
)

FlutterのClipRRectは、画像や複雑なウィジェットを丸い境界線に沿ってクリップする必要がある場合に使用します。単純な背景コンテナの場合は、borderRadius付きのBoxDecorationで十分です。これは別のクリッピングレイヤーを作成しないため、より効率的です。Material Flutter 3.22+は、ContinuousRectangleBorderを通じてcontinuous corner radiusをサポートしています。