Figmaを使っていて「角丸を四隅それぞれ別の値に設定したい」「左右だけ、上だけ角を丸くしたい」と考えたことはありませんか。最新のFigmaでは、フレームや長方形に対して、各角を別々に調整できる機能が備わっています。この記事では、個別の角丸設定の方法からショートカット、注意点まで、実務で使えるテクニックを余すことなく解説します。
目次
Figma 角丸 個別 設定 の基礎 ― 全体 vs 個別の違い
角丸の設定は、形状デザインの印象を大きく左右します。まずは、全角を一括で角丸にする設定と、四隅それぞれを個別に設定する違いについて理解しましょう。これにより、デザインの一貫性を保ちつつ、部分的なアレンジが可能になります。最新のFigmaバージョンでは、それぞれの角を独立して設定できるようになっており、細やかなデザイン調整が可能です。
角丸を一括で設定するメリットと使いどころ
角丸を一括設定すると、全ての角に同じ丸みが適用されます。これはボタンやカードのような、視覚的一体感が求められる要素に適しています。例えば数値で8pxを指定すると、四隅すべてにその角丸が反映されます。手間が少なく、全角で統一感を得たいときに便利な方法です。
個別設定でできる具体的な変化
個別設定を使えば、上左右だけ角丸、下左右は角ばったまま、あるいは片側のみ大きく丸くするなど、自由度の高いデザインが可能です。例えばスピーチバブル型のデザインやタブUI、カードの一部だけを強調するボタンなど、個性的な表現ができます。これによりデザインのアクセントをつけたり情報の階層構造を視覚的に強めたりできます。
どの形状が個別角丸設定に対応しているか
個別の角丸設定は、主に長方形（Rectangle）とフレーム（Frame）で利用できます。スターや多角形、ベクターネットワークを含む閉じた形状にも対応する場合がありますが、線（Line）、矢印、単一ストロークのみのベクターネットワークなどでは設定できないことがあります。形状の種類によっては「独立した角」アイコンが表示されないこともあるので注意が必要です。
個別角丸設定の具体的手順とショートカット
ここからは「Figma 角丸 個別 設定」がどうやって操作できるのか、実際の手順を細かく説明します。画面上の設定方法だけでなく、ショートカットやドラッグでのビジュアル操作も含めて紹介するので、すぐに実践できるようになります。
右サイドバーで独立した角丸設定を使う手順
まず、角丸を設定したい長方形またはフレームを選択します。次に右サイドバーのデザインタブにある「Corner radius」の欄を見ると三角形のアイコンか四隅を表すアイコンがあります。そのアイコンをクリックすると、それぞれの角(top-left, top-right, bottom-right, bottom-left)の数値入力欄が現れます。そこに個別の数値を入力することで四隅それぞれの角丸が設定できます。
キャンバス上でドラッグや修飾キーを使う方法
長方形を選んだ状態で角丸ハンドル（四隅の小さな円）にマウスポインタを重ねると、角丸の操作可能なハンドルが表示されます。この時、Macならオプションキー、WindowsならAltキーを押しながらドラッグすることでその角だけを変更できます。このドラッグ操作を使えば直感的に角丸を調整でき、数値入力と併用するとより正確に設定できます。
ベクターモードでポイント単位で角を調整する方法
ベクターモード（パス編集モード）では、形状のアンカーポイント（頂点）をダブルクリックまたはEnterキーで選択可能です。その状態で特定の頂点を選び、サイドバーのCorner radius欄でその点だけの角丸を調整できます。フレームや長方形のような単純な形だけでなく、複雑なパスを持つ図形にも適用できますが、ベクターパスが閉じた形であることが前提となります。
角丸の滑らかさ（Corner Smoothing）と丸みの見せ方
角丸をどれだけ滑らかに見せるかは、単に角の半径だけでなく〈角丸の滑らかさ〉という設定が関わります。直線と曲線のつながり方や視覚的な印象が大きく変わるため、滑らかさの調整まで含めることで、デザインの品質がぐっと向上します。
Corner Smoothing の役割とは
角丸の滑らかさ（Corner Smoothing）は、丸みを表す曲線をより“滑らかに”見せるためのパラメータです。丸みの円弧が単純なベジエ曲線ではなく、より緩やかで自然な曲線になるように制御できます。通常の角丸だとカクカクした印象が残ることがありますが、滑らかさを高めることでその違和感を解消できます。
滑らかさを調整する手順
対象の形状を選択し、「独立した角丸」の設定を開くと角丸の数値入力欄の近くにスライダーや数値フィールドで滑らかさを調整する項目があります。スライダーを動かして滑らかさの割合を変えるか、iOSスタイルの滑らかさ設定を適用するオプションがあればそれを使います。デザインの文脈に応じて、アプリのアイコンやカードの角などで使い分けるとよいです。
見た目の変化を比較して最適な値を選ぶポイント
滑らかさが低い設定では角のアールがより直線的になり、シャープな印象になります。反対に滑らかさが高いと滑らかな曲線で角の接合部がやや丸みを帯び、柔らかい印象になります。デザインテーマ、デバイスのスクリーン、他のUI要素との調和を考慮して滑らかさを比較しながら値を決めると、統一感のあるUIになります。
コンポーネントやインスタンスでの制限とベストプラクティス
Figmaで個別角丸設定を使いこなすには、コンポーネントやインスタンスの挙動を理解しておく必要があります。特に配置やスタイルを共有する際、どこまで編集可能かを把握しておくと後からデザインが崩れることを防げます。
コンポーネントのインスタンスで角丸が固定されるケース
コンポーネントを作成した親（マスター）側で角丸を設定していないと、インスタンス側で独立して角丸を変更できない場合があります。Figmaではインスタンスに編集できないプロパティがあるためです。角丸の独立設定が必要な要素は、コンポーネントの設計段階で「個別設定可能」であることを考慮して親側で設定しておくことが望ましいです。
変数やスタイルとして角丸を管理する方法
角丸の値を変数やスタイルとして設定しておくことで、複数の要素に同じ角丸を適用したり、テーマ切替え時に変更を一括反映したりできます。各角それぞれに変数を割り当てられれば、左上・右上・右下・左下で異なる変数を使うことで一貫性と柔軟性の両方を確保できます。
設計ワークフローで注意すべき点
画面サイズが変動するレスポンシブデザインやAuto Layoutを使う場合、角丸を数値で設定するだけでなく、形状がどのようにリサイズされるかを確認しましょう。特に小さな要素に大きな角丸を適用すると角が潰れたり、形状が意図と異なる見た目になることがあります。テスト時には実際の出力ディスプレイで確認することが重要です。
よくあるトラブルと解決策
角丸設定は比較的シンプルですが、思わぬ制限や操作ミスによって期待した結果にならないことがあります。ここでは典型的な問題点と、それを回避または解決する方法を整理しておきます。
アイコンが表示されない・独立角丸が使えない
選択したオブジェクトが長方形またはフレーム以外の場合、独立した角丸用のアイコンが表示されないことがあります。また、インスタンスでは親側で角丸が固定されていると変更できません。このようなときは形状を長方形に変えるか、コンポーネントの親部分で設定を見直してください。
角の丸みが形状サイズによって正しく反映されない
角丸の数値が形状の幅や高さの半分を超えると、角丸が自動的に幅または高さの半分に制限されます。これは形が崩れるのを防ぐ仕組みです。極端に大きな角丸を設定する際には数値を形状の大きさと比較しながら調整してください。
編集を重ねると意図せず角丸が元の形状に戻る現象
グループ化・Boolean操作・Auto Layoutとの組み合わせで、角丸のプロパティがグループ全体の設定に吸収されてしまうことがあります。特にBoolean操作で複数の形を合成すると、個別角丸が使いづらくなる場合があります。その場合はBoolean合成前に角丸を調整するか、合成後に再度必要な角丸を調整するのがよいです。
応用テクニック：クリエイティブな使い方とUIへの実践
ここからは、角丸個別設定を使ってデザインに深みを与えたり、UIで印象を強めたりする応用テクニックを紹介します。単に四隅を変えるだけでなく、見せ方や機能性を兼ね備えた方法を覚えておきましょう。
対称デザインで片側だけ角丸にする方法
左右対称を保ちつつ、上側のみまたは下側のみ角丸にすることで視覚的なアクセントが作れます。例えば上左右に大きな丸み、下左右はシャープな角にすることでタブのような形状が作れます。このとき、独立角丸設定で上下左右それぞれ異なる値を入力し、対称性を数値で保ちます。
アイコン・カードデザインでの丸みの統一感を出す方法
複数のカードやアイコンを使うUIで、それぞれの要素が別々に角丸を持っていると見た目がバラバラになります。角丸の共通スタイルを変数として定義し、複数の要素に適用することで統一感が出ます。同じ角丸数値や滑らかさを使用することでUI全体が調和します。
見た目にインパクトを与える角丸の非対称デザイン
非対称デザインでは、例えば左上だけ丸めたり、右下を大きく丸めたりすることで動きや方向性を示すデザインが可能です。ゲームUIや通知カードなどで、非対称な角丸を使って注意を引かせたり、ユーザーの視線を誘導したりできます。ここでも独立角丸設定が必須です。
まとめ
Figmaでは枠や長方形に対して角丸を個別に設定する機能があり、単一数値による統一的な角丸とは異なる自由度あるデザインが可能です。独立角丸のアイコンを使う方法、キャンバス上でのドラッグと修飾キー、ベクターモードでの頂点操作など、複数の操作手順を理解することで制作のスピードと精度が上がります。滑らかさや形状の制限事項、コンポーネント・インスタンスの挙動も押さえておくことで後戻りの修正が少なくなります。
コメント