【Webデザイン】角丸はどれくらいがいい？border-radiusで印象が変わる

Webサイトを作っていると、ボタンやカード、画像などでよく使うのが

border-radius

です。

角を少し丸くするだけでも、デザイン全体の印象はかなり変わります。

今回は、角丸の大きさによってどんな印象になるのかをまとめます。

border-radiusとは？

border-radiusは、要素の角を丸くするCSSです。

例えば、

.card {

  border-radius: 12px;

}

とすると、カードの四隅が少し丸くなります。

数値を大きくするほど、丸みも強くなります。

角丸が小さい場合

例えば、

border-radius: 4px;

のように小さめにすると、

きちんとした印象

シャープな印象

落ち着いた印象

ビジネス向け

になりやすいです。

企業サイトや、少しかっちりしたデザインにも合わせやすいです。

8px〜16pxくらいは使いやすい

Web制作では、

border-radius: 8px;

border-radius: 12px;

border-radius: 16px;

くらいは、とても使いやすいサイズです。

このくらいなら、

柔らかさは出るけれど、丸すぎない

というバランスになります。

カードや画像、入力フォームなどにも使いやすいです。

角丸を大きくすると柔らかい印象に

例えば、

border-radius: 24px;

border-radius: 30px;

など、大きめにすると、

親しみやすい

かわいい

柔らかい

カジュアル

な印象になります。

美容系、カフェ、子ども向け、女性向けなどのデザインとも相性が良いです。

50%にすると円になる

正方形の要素に、

border-radius: 50%;

を指定すると、丸い形になります。

プロフィール画像やアイコンなどでよく使われます。

例えば、

.icon {

  width: 80px;

  height: 80px;

  border-radius: 50%;

}

とすると、丸いアイコンになります。

角丸は統一感も大切

デザインするときに意外と大切なのが、

ページ内のborder-radiusをバラバラにしすぎないこと

です。

例えば、

カードは 16px

画像は 12px

ボタンは 30px

など、ある程度ルールを決めておくと、サイト全体に統一感が出ます。

逆に、

カード 7px

画像 23px

ボタン 14px

フォーム 31px

のように毎回違う数値を使うと、少しまとまりのない印象になることがあります。

ボタンは少し大きめでもOK

ボタンの場合は、カードよりも丸みを強くすることがあります。

例えば、

.button {

  border-radius: 999px;

}

とすると、左右が大きく丸くなったカプセル型のボタンになります。

最近のWebサイトでもよく見かける形です。

親しみやすく、クリックできる場所だと分かりやすいのも特徴です。

デザインによって使い分ける

ざっくりとした目安としては、

4px〜8px

→ シャープ・きちんとした印象

10px〜16px

→ 自然・柔らかい・使いやすい

20px以上

→ かわいい・カジュアル・親しみやすい

50%

→ 円形

というイメージです。

もちろん絶対的なルールではありません。

サイト全体の雰囲気に合わせて調整することが大切です。

まとめ

border-radiusは、ただ角を丸くするだけのCSSですが、数値によってデザインの印象が大きく変わります。

小さな角丸ならシャープに、大きな角丸なら柔らかく親しみやすい印象になります。

Webサイトを作るときは、

「なんとなく丸くする」のではなく、どんな印象にしたいのか

を考えて数値を決めると、より統一感のあるデザインになります。

普段見ているWebサイトでも、「このカードは何pxくらいの角丸かな？」と意識して見ると、デザインの勉強にもなります。