角の丸い四角は何と呼ぶ？作り方・角丸調整・用途別の選び方を2026年版で徹底解説

資料やWebサイト、アプリのボタンなどで見かける、角が滑らかに丸くなった四角形。一般的には「角丸四角形」や「角丸長方形」と呼ばれますが、使用するソフトやデザインの目的によって名称や作り方が異なります。PowerPointやWord、Excelで手軽に描く方法から、Illustratorで曲率を細かく調整する方法、CSSのborder-radiusを使ってHTMLに角丸デザインを実装する方法まで、知っておくと便利なポイントは少なくありません。

2026年現在、角の丸い四角は、プレゼン資料の強調枠、Webサイトのカード型レイアウト、スマートフォンのUI、画像素材など幅広い用途で使われています。大切なのは、単に角を丸くすることではなく、形の正しい呼び方を理解し、用途に合った丸みを選ぶことです。ここでは、各ソフトの公式ヘルプやMDN Web Docsの技術資料を踏まえ、基本用語から実践的な調整方法まで整理します。

📌 【この記事の重要ポイントまとめ】

• 要点1：角の丸い四角は一般に「角丸四角形」「角丸長方形」と呼ばれ、厳密には正方形か長方形かで区別できます。
• 要点2：PowerPoint・Word・Excelでは図形機能、Illustratorでは角丸長方形ツール、Web制作ではCSSのborder-radiusを使うのが基本です。
• 要点3：角丸の半径、図形の縦横比、用途、素材のライセンスを確認すると、見た目と使いやすさの両方を整えられます。

【まず名称を整理】角の丸い四角は何と呼ぶ？角丸四角形と角丸長方形の違い

角の丸い四角の名前を探している場合、最初に覚えておきたいのは「角丸四角形」と「角丸長方形」の2つです。どちらも四隅に丸みを持たせた形を表す言葉ですが、一般的なデザイン用語と、ソフトウェアの画面に表示される図形名は必ずしも一致しません。

英語では、角が丸くなった長方形を「Rounded Rectangle」と呼びます。Adobe Illustratorの公式ヘルプでも「角丸長方形」という名称が使われており、このツールで角の丸い正方形と長方形の両方を作成できます。一方、Microsoft Officeの図形では「角丸四角形」という名前が使われることがあります。

つまり、検索時には「角丸四角形」と「角丸長方形」の両方を使うと、ソフトの操作方法や素材を見つけやすくなります。

角丸四角形と角丸長方形の違い

形状を幾何学的に区別する場合、ポイントになるのは縦と横の長さです。

• 角丸正方形：縦と横が同じ長さで、四隅が丸くなった形。
• 角丸長方形：縦と横の長さが異なり、四隅が丸くなった形。
• 角丸四角形：角を丸めた四角形を広く指す表現。ソフトによっては、角丸長方形と同様の図形を意味します。

たとえば、アプリアイコンの背景のように縦横が同じ形は角丸正方形、横長のボタンや説明用の枠は角丸長方形と呼ぶと、形状を伝えやすくなります。ただし、デザイン現場では「角丸四角形」が両方を含む総称として使われることもあるため、厳密な区別が必要な場合は縦横の寸法も併記すると確実です。

もう一つ押さえておきたいのが、角丸とカプセル型の違いです。角丸長方形は角に一定の丸みを持たせた形で、カプセル型は両端が半円に近い形です。横長の図形で丸みを大きくするとカプセル型に近づきますが、両者は必ずしも同じデザインを指すわけではありません。

【PowerPoint・Word・Excel】角丸四角形の描き方と調整方法

Microsoft Officeで角丸四角形を作るなら、基本的には「挿入」タブから図形を選ぶ方法が簡単です。PowerPoint、Word、Excelはいずれも図形を挿入して塗りつぶしや枠線を調整する仕組みを備えています。メニューの表示位置や名称は、利用するOSやバージョンによって異なる場合があります。

PowerPointで角丸四角形を作る

PowerPointは、プレゼン資料の見出し枠、情報カード、図解、ボタン風の装飾などを作るのに適しています。

1. 「挿入」タブを開き、「図形」を選択します。
2. 長方形のグループから「角丸四角形」を選びます。
3. スライド上でドラッグして、希望する大きさの図形を描きます。
4. 図形を選択し、必要に応じて角の調整ハンドルをドラッグします。
5. 「図形の書式」から塗りつぶし、枠線、線の太さなどを設定します。

角丸四角形では、図形の内部や付近に黄色いひし形の調整ハンドルが表示される場合があります。このハンドルを動かすと、図形のサイズを変えるだけでは調整しにくい角の丸みを変更できます。ハンドルが表示されない場合は、選択している図形や利用環境を確認してください。

タイトルや重要な数値を目立たせたいときは、図形の塗りつぶし色と文字色のコントラストを確保し、丸みを控えめにすると読みやすくなります。装飾を増やすより、図形のサイズや余白をそろえるほうが、資料全体の統一感を保ちやすい点もポイントです。

Wordで角丸長方形を作る

Wordでは、説明文の囲み、注意書き、案内カード、チラシの見出しなどに角丸四角形を利用できます。

1. 「挿入」タブから「図形」を開きます。
2. 角丸四角形を選び、文書上でドラッグして描画します。
3. 必要に応じて図形を選択し、書式設定で塗りつぶしと枠線を変更します。
4. 図形内に文字を入力するか、用途に応じてテキストボックスと組み合わせます。

Wordで注意したいのは、図形の形と文書内での配置が別の設定だという点です。図形そのものがきれいにできていても、本文との回り込みや配置方法によっては、文章の流れが不自然になることがあります。印刷物に使う場合は、画面上だけでなく印刷プレビューでも確認しましょう。

また、写真を角丸に見せたい場合は、図形を描くだけでなく、Microsoft サポートが案内する「図形に合わせてトリミング」機能も選択肢になります。写真自体を角丸の形に合わせたい場合に便利です。

Excelで角丸四角形を作る

Excelでは、表の説明、グラフの注釈、ダッシュボードの見出し、KPIの表示枠などに角丸四角形を利用できます。

1. 「挿入」タブから「図形」を選択します。
2. 角丸四角形を選び、ワークシート上でドラッグします。
3. 図形の書式設定で色や枠線を整えます。
4. 必要に応じて角の調整ハンドルを動かし、丸みを調整します。

Excelでは、図形とセルを混同しないことが大切です。通常の角丸四角形は、セルの罫線や背景色ではなく、ワークシート上に配置するオブジェクトです。表の行や列のサイズを変更した際に、図形の位置や大きさが意図どおりになるかも確認しておきましょう。

表のデータそのものを見せたい場合は、角丸四角形を使いすぎるとセルとの境界が分かりにくくなることがあります。図形は重要な指標や補足情報に限定すると、情報の優先順位を整理しやすくなります。

【IllustratorとCSS】角丸長方形を細かく調整する方法

デザインの再現性や数値による管理を重視する場合は、Adobe IllustratorやCSSが有力な選択肢です。Officeの図形が資料作成に向いているのに対し、Illustratorはベクター形式の制作、CSSはWebページの表示やレスポンシブデザインに向いています。

Illustratorで角丸長方形を描く

Adobe Illustratorの公式ヘルプ「角丸長方形ツールを使用した角の丸い正方形や長方形の作成」では、角丸長方形ツールを使って図形を描き、コーナーハンドルで角の丸みを調整する手順が案内されています。

1. ツールバーから「角丸長方形ツール」を選びます。
2. ドラッグして、角の丸い長方形を描画します。
3. 正方形にする場合は、Shiftキーを押しながらドラッグします。
4. 図形内のコーナーハンドルをドラッグして、角丸の大きさを調整します。
5. プロパティパネルなどで幅と高さを指定し、必要な寸法に整えます。

より細かな調整が必要な場合は、ライブシェイプのプロパティや変形パネルを利用します。Adobe公式ヘルプでは、角丸の半径を数値で指定する方法や、角ごとに異なる丸みを設定する方法も説明されています。

たとえば、ロゴやアイコンでは、見た目のバランスを優先しながら角丸を調整することがあります。一方、複数のカードやボタンを同じデザインルールでそろえる場合は、半径の数値を統一したほうが管理しやすくなります。

また、Illustratorには「効果」メニューから角を丸くする方法もあります。Adobeの公式ヘルプによると、効果を使った変形は、形状そのものを確定的に変更せず、あとから変更や削除が可能です。編集を繰り返す可能性がある図形では、こうした方法も検討できます。

CSSのborder-radiusでHTMLの角丸デザインを作る

WebサイトやWebアプリで角の丸い四角を作る場合、基本となるのはCSSの「border-radius」プロパティです。HTMLで要素を配置し、CSSで角の丸みや色、余白などを設定します。border-radius自体は図形名ではなく、要素の角を丸めるためのCSSプロパティです。

基本的な書き方は、次のとおりです。

border-radius: 12px;

この指定では、原則として4つの角に12pxの半径を設定します。値を大きくすると丸みが強くなり、小さくすると直角に近い形になります。0を指定すれば角丸はなくなります。

CSSでは、角ごとに異なる値を指定することもできます。たとえば、次のように記述すると、左上・右上・右下・左下の順に異なる丸みを設定できます。

border-radius: 4px 8px 12px 16px;

MDN Web Docsの解説によると、border-radiusは長さの単位だけでなくパーセントでも指定できます。たとえば、幅と高さが等しい正方形の要素に50%を指定すると、円形になります。

border-radius: 50%;

ただし、横長の要素に50%を指定した場合は、円ではなく両端が丸いカプセル型に近い形になります。円形のアイコンを作りたいなら、要素の幅と高さを同じにすることがポイントです。

CSSを使う利点は、角丸の数値をコードで管理できることです。複数のボタンやカードに同じ値を適用すれば、サイト全体のデザインを統一しやすくなります。HTML 角丸デザインを実装する際は、角丸だけでなく、文字の可読性、余白、境界線、背景色もあわせて設計しましょう。

【作り方を比較】どのソフトが最適？角丸四角形の調整方法一覧

角丸四角形の作り方は、必要な精度や完成後の用途によって選ぶのが合理的です。単発の資料ならOffice、複雑な図形やロゴならIllustrator、Webサイトの部品ならCSSが適しています。

この比較で重要なのは、見た目が似ていても、調整の考え方が異なることです。Officeでは図形を選択して画面上で調整する方法が中心ですが、Illustratorでは数値を使って形状を管理でき、CSSではコードとして再利用できます。

特に複数の画面やページで同じ角丸を使う場合、CSSの共通ルールやIllustratorの数値設定を活用すると、修正の手間を減らせます。一方、数個の図形を手早く作るだけなら、Officeの図形機能で十分です。

【角丸デザインの使い方】最適な丸みとフリー素材の選び方

角丸の調整で迷いやすいのは、「どのくらい丸くすればよいのか」という問題です。万能の正解はありませんが、図形の大きさ、掲載する文字量、周囲のデザイン、利用する媒体を基準にすると選びやすくなります。

用途に応じて角丸の強さを選ぶ

• ビジネス資料：丸みを控えめにし、見出しや注釈の区別を明確にする。
• Webサイトのカード：写真や本文の枠に適度な丸みを付け、コンテンツをグループ化する。
• ボタンや操作部品：周囲のUIと形状を統一し、文字と背景のコントラストを確保する。
• アプリアイコン：正方形を基準に、アイコンの絵柄やブランドの雰囲気に合わせて調整する。
• 図解やフローチャート：図形の意味を識別できるようにし、装飾よりも情報の整理を優先する。

角丸を強くすると、柔らかく親しみやすい印象を作りやすくなります。一方で、あらゆる要素を大きく丸めると、見出し、入力欄、ボタンなどの役割が似て見え、画面全体のメリハリが弱まる場合があります。

実際の調整では、最初に小さな丸みを設定し、図形の大きさや文字の余白を整えてから、必要に応じて半径を大きくする方法が有効です。丸みだけでデザインを改善しようとせず、余白や配色も含めて確認することが大切です。

角丸四角形のフリー素材を使うときの注意点

自分で描画する時間を減らしたい場合は、「角丸四角形 フリー素材」や「角丸長方形 SVG」といった検索語で素材を探す方法があります。ただし、無料でダウンロードできることと、自由に利用できることは同じではありません。

素材を選ぶ際は、次の点を確認しましょう。

• 利用条件：商用利用の可否、クレジット表記の必要性、再配布の制限を確認する。
• ファイル形式：色や形を細かく編集するならSVGなどのベクター形式、簡単に貼り付けるならPNGなどを検討する。
• 背景の扱い：透明背景が必要なのか、背景色を含む画像なのかを確認する。
• 寸法と品質：掲載先に必要なサイズを満たしているか、拡大時に輪郭が劣化しないかを確認する。
• 形状の一貫性：複数の素材を並べる場合、角丸の強さや線の太さがそろっているかを確認する。

とくにSVG素材は、ベクター形式であれば拡大縮小に強く、編集可能なデータなら色や形状も調整しやすいという利点があります。ただし、素材によっては編集しにくい構造になっていたり、利用条件が異なったりするため、ファイル形式だけで判断するのは避けましょう。

また、角丸四角形のような単純な形状は、PowerPointやIllustrator、CSSで自作するほうが早いケースもあります。既製素材を探す時間と、必要な形を直接作る時間を比較して選ぶと効率的です。

【プロの結論】角丸四角形で失敗しないための判断基準

角の丸い四角を扱う際、最初に決めるべきなのはソフトではなく、完成した図形を何に使うかです。印刷する資料なのか、Webページ上のボタンなのか、繰り返し利用するアイコンなのかによって、最適な制作方法は変わります。

判断基準を3つに整理すると、次のようになります。

• 手早く作りたい：PowerPoint・Word・Excelの図形機能を使う。画面上で形を確認しながら作業できる。
• 形状を細かく管理したい：Illustratorを使う。角丸の半径や図形の寸法を指定し、ベクター素材として編集できる。
• Webで一貫したデザインを実装したい：CSSのborder-radiusを使う。数値をコードで管理し、複数の要素に適用できる。

もう一つ、見落とされやすいのが、図形の寸法と角丸の関係です。同じ半径を設定していても、小さなアイコンと大きなカードでは丸みの見え方が異なります。数値をそろえるだけでなく、実際に表示する大きさで見比べることが、自然なデザインにつながります。

逆に、角の丸い四角が必ずしも最適とは限りません。厳格さや精密さを強調したい図表では、直角の長方形が適している場合もあります。既存のデザインシステムがあるなら、そのルールを優先し、独自の丸みを追加しすぎないことも重要です。

角丸四角形の描き方を覚えること自体は難しくありません。名称、作成ツール、角丸の調整方法、利用先の4点を整理すれば、資料制作からWebデザインまで、目的に応じた形を選びやすくなります。

【角の丸い四角】に関するよくある質問（FAQ）

Q1：角の丸い四角は正式には何と呼びますか？
A1：一般には「角丸四角形」や「角丸長方形」と呼びます。英語ではRounded Rectangleが使われます。正方形に角丸を付けたものを角丸正方形と呼ぶこともあります。ソフトウェアによって図形名が異なるため、操作方法を調べるときは使用ソフトの名称も加えて検索すると便利です。

Q2：PowerPointやWord、Excelで角の丸みを変更できますか？
A2：角丸四角形を選択した際に黄色いひし形の調整ハンドルが表示される場合は、そのハンドルをドラッグして丸みを調整できます。図形の種類や使用環境によって操作が異なることもあるため、必要に応じて書式設定の項目も確認してください。

Q3：CSSで角の丸い四角を作るには何を指定すればよいですか？
A3：CSSのborder-radiusプロパティを使用します。たとえば、border-radius: 12px;と指定すると4つの角に丸みを設定できます。正方形の要素を円形にしたい場合は、幅と高さを同じにし、border-radius: 50%;を指定します。

Q4：角丸四角形と角丸長方形は別の図形ですか？
A4：幾何学的に区別する場合は、縦横が等しいかどうかがポイントです。ただし、デザインソフトでは角丸四角形という名称が広い意味で使われることもあります。ソフトの操作方法を調べる場合は、画面に表示される図形名を優先してください。

Q5：角丸四角形のフリー素材は商用利用できますか？
A5：素材ごとに利用条件が異なります。無料配布されていても、商用利用、加工、再配布などに制限が設けられている場合があります。ダウンロード前にライセンスを確認し、必要な表記や利用条件を守って使用してください。

まとめ：角の丸い四角は用途に合った作り方と丸みで選ぶ

角の丸い四角は、一般に角丸四角形や角丸長方形と呼ばれます。正方形か長方形かという形状の違いに加え、ソフトによって図形名や調整方法が異なることを押さえておくと、検索や制作がスムーズになります。

PowerPoint・Word・Excelでは図形機能、Illustratorでは角丸長方形ツールや半径の数値指定、Web制作ではCSSのborder-radiusが基本です。手軽さを優先するのか、細かな形状管理を重視するのか、Web上で共通のデザインを運用するのかによって、適した方法を選びましょう。

最後に、角丸の強さだけでデザインの良し悪しを判断しないことも大切です。図形の寸法、文字の読みやすさ、余白、配色、利用条件まで含めて整えることで、角の丸い四角は単なる装飾ではなく、情報を分かりやすく伝えるための実用的なデザイン要素になります。 （出典: 角 の 丸い 四角（Yahoo!ニュース））