角丸

定義

角丸(border-radius)は、四角い要素の四つの角をどれくらい丸く削るかを決める値です。 値が0なら角はそのまま尖った状態で、値を大きくするほど角がやわらかく内側へ丸まっていきます。 かなり大きな値を指定したり、高さの半分以上を指定したりすると、両端が完全に丸い ピル(pill)形になります。同じボタン、同じカードでも、この値ひとつで かっちりして真面目な印象になったり、やわらかくて親しみやすい印象になったりします。 だからこそ角丸は、色や書体と同じくらいプロダクトの性格を大きく左右する値なのです。

なぜ重要か

角丸は、ユーザーが画面を見た瞬間に無意識に受け取る「雰囲気」を決めます。 角張ったコーナーは正確で技術的、そして重みのある印象を与えるので、金融や管理画面のように 信頼が重要な場面によく合います。反対に丸い角はやわらかく親しみやすい印象を与えるので、 一般ユーザー向けのアプリや遊び心のあるサービスでよく使われます。さらに大切なのは 一貫性です。同じ画面の中でボタンは少し丸く、カードはかなり丸く、入力欄は角ばっている、 というふうにバラバラだと、ユーザーは言葉でうまく説明できなくても、どこか整っていないと 感じてしまいます。角丸をいくつかの決まった値にそろえると、その微妙な散らかった感じが消え、 別々の画面や要素が「ひとつのプロダクト」だというまとまりを持つようになります。 こうして角丸は、小さな値ひとつで信頼感の方向と画面の完成度を同時に整える、 思っている以上に力の強い要素なのです。

よくある間違い

• 要素ごとに角丸の値をバラバラに指定してしまうことです。ボタンは6、カードは12、 バッジは20というふうにルールなく散らばると、画面全体が微妙にちぐはぐになって まとまりがなくなります。値をいくつかに決めておき、その中からだけ選ぶほうがずっと安定します。
• 外側の箱と、その中に入る要素の角丸をバラバラの値にしてしまうことです。 カードの角は丸いのに中の画像は角ばっていると、角に不自然なすき間ができてしまいます。 内側は外側より少し小さい値に合わせると、二つの曲線が自然に重なります。
• とても小さな要素に大きすぎる角丸を指定してしまうことです。高さの低いボタンに大きな値を 与えると、すでにピルのように完全に丸まっていて、さらに大きくしても変化がなく、 むしろ形がつぶれて見えます。要素の大きさに合わせて値を調整してこそ、狙った形になります。

実務のヒント

• プロダクトの中で角丸の値をあらかじめ決めてそろえましょう。たとえばボタンは8、 カードは14というふうに役割ごとに値を固定しておけば、新しい画面を作るたびに悩まずに 一貫した印象を保てます。こうして決めた値はトークンで管理するとさらに楽になります。
• 完全に丸いピル形は、タグやフィルターチップ、トグルのような小さく繰り返される要素に 絞って使いましょう。本文カードのような広い面積にピルを使うと、形が誇張されて かえって落ち着かなく見えます。
• 狙った性格に合わせて値の大きさを決めましょう。真面目で技術的な雰囲気なら小さく、 親しみやすくてやわらかい雰囲気なら大きくするのが基本です。

関連概念