角丸とは？

枠や画像などの角を丸くする表現。

Rounded Corners

別名：border-radius

枠や画像などの角を丸くする表現。

まず、短く答えると

角丸の意味

カード、画像、ボタンの雰囲気を整えます。丸める量をそろえると、サイト全体に統一感が出ます。CSSではborder-radiusで指定します。

Webサイトやアプリの見た目、情報の並び方、利用者の操作を考える場面で登場します。

見た目の好みだけでなく、迷わず使えるか、スマートフォンでも読みやすいかという視点で確認します。

カードと写真の角丸を8pxで統一し、ボタンはもう少し丸くします。

覚え方のコツ

役割

枠や画像などの角を丸くする表現。

理解の深さ

まずは「何をするものか」と具体例を結び付けて覚えれば十分です。

確認の視点

見た目の好みだけでなく、迷わず使えるか、スマートフォンでも読みやすいかという視点で確認します。

混同しないために

「角丸」は枠や画像などの角を丸くする表現ものです。一方、「UI」は人がサービスを操作する接点ものです。役割を分けて考えると、二つのつながりを理解しやすくなります。

きれいに見えることだけを目的にせず、読みやすさ、操作のしやすさ、さまざまな利用環境を一緒に考えることが大切です。

よくある疑問

A枠や画像などの角を丸くする表現。

A「UI」、「CSS」、「デザインシステム」と一緒に覚えると、役割や使われる場面の違いが分かりやすくなります。

AIに相談してみる

［　］の部分を自分の状況に合わせて書き換えてください。

以下の画面のカード・画像・ボタンの角丸を整理してください。サイトの雰囲気と部品の役割を踏まえ、統一して使える数値とCSS例を提案してください。 変更理由も短く示し、情報が足りない場合は先に質問してください。

サイトの雰囲気・画面仕様またはCSS：
［ここに貼り付け］

秘密情報は入力しないでください

ほかの言葉も調べてみませんか？