角の丸い四角の名前は？図形の違いとPowerPoint・Canvaでの作り方を2026年版で徹底解説
資料やWebサイト、アプリのボタン、SNS用の画像などでよく見かける、四隅が滑らかに丸くなった四角形。見慣れた形ですが、いざ名前を調べようとすると「角丸四角形」「角丸長方形」「角丸矩形」など複数の呼び方が見つかり、どれが正しいのか迷う人も少なくありません。
実は、これらの言葉は使用するソフトやデザイン分野によって使い分けられています。Microsoft PowerPointなら図形メニューから簡単に作成でき、IllustratorやFigmaでは角の丸みを細かく調整でき、Canvaならデザイン素材として手軽に取り入れられます。Web制作ではCSSの「border-radius」を使い、数値によって丸みを指定する方法が一般的です。2026年時点で押さえておきたい図形名の違いから、ソフト別の作り方、SVGによる描画、仕上がりを整えるコツまで解説します。
📌 【この記事の重要ポイントまとめ】
- 名前：一般的には「角丸四角形」「角丸長方形」、デザインや図形編集では「角丸矩形」と呼ばれます。
- 作り方：PowerPointは標準図形、IllustratorとFigmaは角丸調整機能、Canvaは図形素材、WebサイトはCSSのborder-radiusが便利です。
- 仕上げのコツ：角の半径だけでなく、図形の幅・高さ、文字の余白、線の太さとのバランスをそろえると、見た目が整います。
【まずは名前を確認】角の丸い四角形は何と呼ぶ？
角の丸い四角形を検索するとき、最も使いやすい呼び方は「角丸四角形」です。横長の形を指す場合は「角丸長方形」、図形編集やコンピューターグラフィックスの文脈では「角丸矩形」という名称も使われます。英語では「Rounded Rectangle」が代表的な表現です。
ただし、これらの名称が、すべてのソフトで厳密に区別された正式な図形名として使われているわけではありません。製品の日本語版ではメニュー名が異なる場合もあり、実際に操作するときは、利用しているソフトの図形一覧や公式ヘルプに記載された名称を確認するのが確実です。
特に注意したいのが「角丸長方形」と「角丸正方形」の違いです。角丸長方形は横幅と高さが異なる形、角丸正方形は縦横が同じ形を指します。「角の丸い四角」は両方を含む日常的な表現として使えます。
一方、「矩形」は長方形や長方形状の領域を表す技術用語です。「角丸矩形」と「角丸長方形」は、一般的なデザイン用途では同じような形を指すことが多く、名称だけで別の図形だと判断する必要はありません。
また、角が丸くなった図形は、数学的に厳密な意味での長方形とは異なります。長方形は四つの内角が直角である四角形ですが、角丸長方形は直線部分と曲線部分を組み合わせた形です。名称は、形状の特徴を伝えるためのデザイン上の呼び方として理解するとわかりやすくなります。
【ソフト別比較】角丸四角形の作り方と調整方法
角丸四角形の作り方は、どのソフトを使うかによって変わります。プレゼン資料を作るならPowerPoint、印刷物やベクター画像ならIllustrator、手軽なバナー制作ならCanva、Web画面やUIデザインならCSSやFigmaが候補になります。
Microsoft Support、AdobeのIllustratorユーザーガイド、Canvaヘルプセンター、Figmaヘルプセンター、MDNの技術資料で案内されている基本操作を整理すると、次のようになります。
| ツール | 基本的な作り方 | 角の丸みの調整 | 向いている用途 |
|---|---|---|---|
| PowerPoint | 「挿入」から「図形」を選び、角丸四角形を描く | 図形の調整ハンドルや、必要に応じて図形編集機能を使う | プレゼン資料、説明図、社内文書 |
| Illustrator | 角丸長方形ツール、または長方形ツールで作成する | 角のウィジェットや変形パネルで数値調整する | ロゴ、印刷物、アイコン、ベクター素材 |
| Canva | 「素材」内の図形から角丸四角形を追加する | 図形の種類に応じて角丸設定や調整項目を使う | SNS画像、サムネイル、広告バナー |
| Figma | 長方形ツールで図形を作成する | 右側のデザインパネルでCorner radiusを指定する | Webデザイン、アプリ画面、UIコンポーネント |
| CSS | HTML要素にborder-radiusを指定する | pxや%などの値で角の半径を調整する | Webサイト、ボタン、カード、入力欄 |
| SVG | rect要素で長方形を描画する | rxとryで角の丸みを指定する | 拡大縮小に強いアイコン、Web用図形 |
使いやすさを優先するなら、まずは標準図形が用意されているPowerPointやCanvaから始めるのがおすすめです。角の半径を数値で管理したい場合はIllustratorやFigma、コードで再利用したい場合はCSSやSVGが適しています。
【PowerPoint編】角丸四角形を作って丸みを調整する方法
PowerPointで角丸四角形を作る場合、複雑な操作や外部素材は必要ありません。標準の図形機能を利用するため、文字や色、枠線を後から変更でき、プレゼン資料の構成を調整するときにも便利です。
基本的な作成手順
1. PowerPointで編集したいスライドを開きます。
2. リボンの「挿入」から「図形」を選択します。
3. 図形の一覧から「角丸四角形」を選びます。表示名やメニューの配置はバージョンによって異なる場合があります。
4. スライド上でドラッグして、図形の幅と高さを決めます。
5. 図形を選択し、塗りつぶし、枠線、サイズなどを整えます。
角丸四角形を選ぶと、図形に黄色い調整ハンドルが表示される場合があります。このハンドルをドラッグすると、角の丸みを変更できます。サイズ変更用の白いハンドルなどとは役割が異なるため、角の調整には専用のハンドルを使うのがポイントです。
もし細かな形状変更が必要なら、「図形の書式」から「図形の編集」や「頂点の編集」などの機能を確認してください。Microsoft Supportでは、頂点や曲線を編集して標準図形をカスタマイズする方法も案内されています。ただし、通常の角丸四角形であれば、まずは標準図形の調整機能を使うほうが手軽です。
PowerPointで失敗しないためのポイント
第一に、図形を拡大縮小した後も、角の丸みが意図した印象になっているか確認しましょう。幅と高さの比率が変わると、同じ図形でも丸みの見え方が変化します。
第二に、図形内の文字に十分な余白を確保します。角の丸みを強くしたのに文字が端に寄っていると、窮屈な印象になります。文字の配置や内部余白も合わせて調整してください。
第三に、複数の図形を並べるときは、角の丸み、枠線の太さ、色の使い方をそろえます。見出し用の図形だけ角が大きく、説明用の図形は角が小さいと、意図がない限りデザインにばらつきが生まれます。
【Illustrator・Canva・Figma編】角丸長方形を細かく調整する
Illustrator、Canva、Figmaはいずれも角丸の図形を扱えますが、得意とする作業が異なります。図形の見た目だけでなく、後から編集する頻度や、最終的にどの形式で出力するかを基準に選ぶと効率的です。
Illustrator：数値と曲線を細かく管理したい人向け
Illustratorでは、ツールバーから角丸長方形ツールを選び、ドラッグして図形を作成できます。縦横比を固定した正方形を作りたい場合は、ドラッグ中にShiftキーを押します。
作成した図形を選択すると、角のウィジェットをドラッグして丸みを調整できます。さらに、変形パネルやプロパティパネルから角の半径を数値で指定する方法もあります。個別の角だけを変更したい場合は、ダイレクト選択ツールを使って角ごとに調整します。
Illustratorの特徴は、ライブシェイプとして編集可能な状態を保てることです。後から幅、高さ、角の半径を変更しやすいため、複数サイズのアイコンや印刷用データを作るときに向いています。一般的な角丸長方形では、まず角のウィジェットを利用し、複雑な図形では必要に応じて追加の編集機能を使うとよいでしょう。
Canva：テンプレートを使って素早く仕上げたい人向け
Canvaでは、編集画面の「素材」から「図形」を開き、角丸四角形に相当する形を追加します。その後、サイズや色、枠線などを調整して、文字や写真と組み合わせます。
角の丸みを変更したい場合は、選択中の図形や素材に角丸設定が用意されているか確認してください。Canvaのヘルプセンターでは、図形の種類に応じた編集機能が説明されており、すべての素材で同じ調整ができるわけではありません。特に、アップロードしたSVG素材は、通常の編集可能な図形と異なり、角の形状そのものを後から変更できない場合があります。
そのため、細かな角丸調整が必要なら、最初から編集可能な図形を選ぶのがコツです。SNS投稿やサムネイルなど、短時間で見栄えのよいデザインを作りたい場合は、テンプレートと標準図形の組み合わせが使いやすいでしょう。
Figma：画面設計やUIコンポーネントを統一したい人向け
Figmaでは、長方形ツールで図形を作成し、右側のデザインパネルにあるCorner radiusの項目で角の半径を設定できます。キャンバス上に表示される角のハンドルをドラッグして、見た目を調整することも可能です。
さらに、FigmaにはCorner smoothingという設定があります。これは通常の角丸半径とは異なり、角の曲線をより連続的で滑らかな形に調整するための機能です。角を単純な円弧で丸める表現と、いわゆる「スクワークル」のような形状を作る表現を区別したい場合に役立ちます。
Webサイトやアプリのボタン、カード、入力欄を複数作成するなら、角丸の値をルール化しておくと、画面全体の統一感を保ちやすくなります。単に一つの図形を整えるだけでなく、デザインシステムの一部として管理できる点がFigmaの強みです。
【CSS・SVG編】border-radiusで角丸四角形を描く方法
Webページ上のボタンやカードに角丸を付けるなら、CSSのborder-radiusを使う方法が基本です。画像を作成して貼り付ける必要がなく、サイズや色が変わっても、スタイルを変更するだけで形状を調整できます。
四隅を同じ半径で丸める基本形
.rounded-box {
width: 240px;
min-height: 100px;
padding: 16px;
border-radius: 12px;
background: #f2f5f9;
}
この例では、border-radiusに12pxを指定しています。値を大きくすると角が丸くなり、小さくすると直角に近づきます。0を指定すれば角丸はなくなります。
border-radiusは、一つの値で四隅をまとめて指定できるほか、二つ、三つ、四つの値を使って角ごとの半径を設定できます。MDNのCSSリファレンスによると、スラッシュを使えば横方向と縦方向の半径を別々に指定し、楕円状の角丸を表現することも可能です。
四隅の丸みを個別に変える例
.custom-box {
border-radius: 4px 16px 24px 8px;
}
四つの値は、左上、右上、右下、左下の順です。例えば、カードの右上だけを強調したい場合や、画像の上側だけに丸みを付けたい場合に使えます。
また、border-radius: 50%は、正方形なら円に近い形を、長方形なら楕円に近い形を作る際に利用できます。高さのあるボタンに大きな半径を指定すると、カプセル状の形にもできます。ただし、幅や高さによって仕上がりが変わるため、数値だけでなく実際の表示を確認することが大切です。
SVGで角丸四角形を描画する方法
SVGは、図形をベクター形式で表現するための形式です。長方形を描くrect要素にrxやryを指定することで、角丸四角形を描画できます。
この例では、横220、高さ100の長方形に、rxとryで角の丸みを指定しています。両方に同じ値を入れると、横方向と縦方向の半径が同じ角丸になります。異なる値を指定すれば、楕円状の丸みも表現できます。
CSSとSVGの使い分けは、何を作るかで決まります。Webサイトのカードやボタンなど、HTML要素の見た目を整えたいならCSSが便利です。一方、図形そのものをアイコンとして再利用したい場合や、パスや線などを組み合わせて複雑な形を作りたい場合はSVGが適しています。
【プロの結論】角の丸みは数値・比率・用途の3点で決める
角丸四角形の仕上がりを左右するのは、単純に角をどれだけ丸くするかだけではありません。図形のサイズ、配置する文字、線の太さ、周囲のデザインとの関係をまとめて考える必要があります。
1. 角の半径は図形の大きさに合わせる
小さなアイコンと大きなカードに同じ半径を設定しても、見た目の印象は異なります。小さい図形では丸みが強く見えやすく、大きな図形では同じ数値でも控えめに感じられることがあります。サイズが異なるパーツを並べる場合は、数値をそろえるだけでなく、視覚的なバランスも確認してください。
2. 丸みを大きくすれば、必ず見やすくなるわけではない
大きな角丸は柔らかく親しみやすい印象を作りやすい一方、強すぎると文字を置ける領域が狭くなり、図形全体がカプセル状に見えることがあります。反対に、丸みが小さすぎると、角丸にした意図が伝わりにくい場合もあります。伝えたい内容やブランドの雰囲気に合わせて調整するのが基本です。
3. 文字の余白と枠線をセットで調整する
角丸の図形では、文字が四隅に近づくほど窮屈な印象が強くなります。内側の余白を確保し、文字サイズや行間を整えましょう。枠線を付ける場合は、線が太すぎて角の曲線が重く見えないかも確認します。特に小さなボタンやアイコンでは、わずかな差が仕上がりに影響します。
4. 複数のツールを使うなら、完成形の基準をそろえる
PowerPointで作った図形を画像として書き出し、CanvaやWebサイトで利用する場合、同じ「角丸四角形」でも編集方法や表示サイズによって見た目が変わることがあります。共通のデザインを複数の媒体で使うなら、幅、高さ、角の半径、色、枠線の太さを記録しておくと、作り直す際にも統一しやすくなります。
用途別に整理すると、資料作成の速さを優先する人にはPowerPoint、ベクター編集や精密な形状管理を重視する人にはIllustrator、テンプレートを使った制作にはCanva、Web画面の設計にはFigmaやCSSが向いています。単一のソフトですべてを作るより、必要な編集機能と出力形式から選ぶほうが効率的です。
【角の丸い四角】に関するよくある質問（FAQ）
Q1：角の丸い四角の正式名称は何ですか？
A1：一般的には「角丸四角形」や「角丸長方形」と呼ばれます。図形編集やデザインの分野では「角丸矩形」、英語では「Rounded Rectangle」という表現も使われます。ソフトによってメニューの名称が異なるため、操作時には使用中の製品の図形一覧を確認してください。
Q2：角丸四角形と角丸矩形に違いはありますか？
A2：一般的なデザイン用途では、同じような形状を指すことが多く、名称だけで異なる図形と考える必要はありません。「矩形」は図形やコンピューターグラフィックスで使われる用語です。また、横長の形を角丸長方形、縦横が同じ形を角丸正方形と呼び分けると、形状を伝えやすくなります。
Q3：角丸四角形の角の丸みを細かく調整するにはどうすればよいですか？
A3：PowerPointでは図形の調整ハンドル、Illustratorでは角のウィジェットや変形パネル、Canvaでは対応する図形の角丸設定、FigmaではCorner radiusの項目を使います。WebサイトではCSSのborder-radius、SVGではrxとryで指定できます。数値による管理を重視する場合は、Illustrator、Figma、CSS、SVGが便利です。
まとめ：用途に合った角丸四角形を選び、仕上がりを整える
角の丸い四角は、一般的には「角丸四角形」「角丸長方形」、デザイン分野では「角丸矩形」などと呼ばれます。これらは使用するソフトや分野によって名称が異なることがあり、言葉だけで別の形状だと決めつける必要はありません。
作り方は用途に応じて選びましょう。PowerPointなら標準図形、Illustratorなら角のウィジェットや数値入力、Canvaなら編集可能な図形素材、FigmaならCorner radius、WebサイトならCSSのborder-radius、ベクター図形ならSVGのrxとryが役立ちます。
最後に意識したいのは、角の丸みを大きくすること自体を目的にしないことです。図形の幅と高さ、文字の余白、枠線の太さ、周囲のデザインとの一貫性を確認することで、資料やWeb画面、アイコンの見た目は大きく変わります。作成する目的と編集のしやすさを基準にツールを選び、適切な丸みを設定することが、見やすく使いやすいデザインへの近道です。 （出典: 角 の 丸い 四角（Yahoo!ニュース））
テクノロジーやライフスタイル領域を中心に執筆活動を行っています。趣味は写真撮影と旅行です。
