iOSでボタンの角を丸くする方法｜Storyboardとコード両方で実装する手順

iOSアプリのUIデザインでは、角が丸くなったボタンを目にすることがよくあります。「あの丸みはどうやって実現しているのだろう？」と疑問に思ったことはありませんか？

この記事では、ボタンの角を丸くする2つの方法をわかりやすく解説します。ひとつはStoryboardを使う方法、もうひとつはコード（プログラム）から設定する方法です。どちらも数分で実装できるので、ぜひ試してみてください。

方法1：Storyboardを使ってボタンの角を丸くする

まずは、Interface Builder（Storyboard）だけで完結する方法から見ていきましょう。

ステップ1：新規プロジェクトを作成する

Xcodeを起動し、メニューから「File」→「New」→「Project」を選択します。テンプレートには「Single View Application」（またはApp）を選び、プロジェクト名を「RoundedButton」として作成しましょう。

ステップ2：ボタンを配置する

Main.storyboardを開き、ライブラリからButtonをドラッグ＆ドロップして画面に配置します。

ステップ3：User Defined Runtime Attributesを設定する

配置したボタンを選択した状態で、右側のユーティリティエリア（Inspector）を開きます。「Identity Inspector」タブ内にあるUser Defined Runtime Attributesに、以下の値を追加してください。

• Key Path：layer.cornerRadius
• Type：Number
• Value：10（任意の数値）

Valueに入れる数値を大きくすると角丸が強くなり、小さくすると控えめな丸みになります。デザインに合わせて調整してみてください。

方法2：コードでボタンの角を丸くする

次に、Swiftのコードから設定する方法を紹介します。

まずMain.storyboard上のボタンをViewController.swiftに@IBOutletとして接続し、名前を「doButtonRounded」とします。そのうえで、ボタンのlayer.cornerRadiusプロパティに任意の値を代入すれば完了です。

実際のコード全体は以下の通りです。

import UIKit
class ViewController: UIViewController {
    @IBOutlet var doButtonRounded: UIButton!
    override func viewDidLoad() {
        super.viewDidLoad()
        doButtonRounded.layer.cornerRadius = 20
    }
}

まとめ

ボタンの角を丸くするには、Storyboardの「User Defined Runtime Attributes」を使う方法と、コードでlayer.cornerRadiusを設定する方法の2つがあります。

• Storyboardのみで完結したい場合：Runtime Attributesが便利
• 動的に値を変更したい・他のUI部品にも適用したい場合：コードでの設定がおすすめ

cornerRadiusの値は自由に変更できるので、アプリのデザインに合わせて最適な丸みを見つけてください。応用として、clipsToBounds = trueやmasksToBoundsを組み合わせれば、画像の角丸表示などにも同じ考え方が使えます。