コーナースムージングとは？ たった1ミリが、UIデザインを大きく変える

四角形はデザインに使われる図形のなかでも特にオーソドックスな存在ですが、四角形をそのまま使わず、角部を丸く加工した形もよく見かけます。この加工は、デザイン用語で「角丸」と呼ばれるものです。

しかし、図形のデザインは日々進歩しており、近年では通常の角丸をさらに進化させた「コーナースムージング」と呼ばれるデザインも見られるようになりました。

今回は、コーナースムージングの概要と、Webデザインツール『Figma』でコーナースムージングを適用する方法について解説します。

コーナースムージングとは？

コーナースムージングとは、図形の角に丸みをつけることです。

通常の角丸に比べ、コーナースムージングを適用した図形は直線部分との境界がよりなめらかなため、「スーパー楕円（super-ellipse）」と呼ばれることもあります。

▲出典：UX Planet

画像左側の青い図形が普通の角丸、右側がコーナースムージングを適用した状態です。

一見あまり違いがないように見えますが、図形を重ねて比較すると角の丸みがよりなめらかになっていることが分かります。

▲角を丸くしただけだとピンクの部分が出っ張っているが、コーナースムージングでは白い部分の形状になる（出典：UX Planet）

コーナースムージングを使うべき理由

ハッキリ言って、図形を重ねなければ普通のユーザーには普通のな角丸とコーナースムージングの違いは分からないでしょう。しかし、コーナースムージングは有効なデザインだと考えられており、Apple製品やClubhouseのアイコンなどでも活用されています。いったいどんな効果があるのでしょうか。

答えは、「人間が角を見るときの習性」にあるとされます。角をなめらかにすると、人間の目は要素から要素へ視線を動かしやすくなるのです。実際に角ばった図形と丸みのある図形を見て、違いを感じてみましょう。

まずは、以下の図形を交互に見てみてください。

▲出典：UX Planet

では、以下の図形も同様に交互に見てみましょう。

▲出典：UX Planet

最後に、コーナースムージングを適用した図形を交互に見てみましょう。

▲出典：UX Planet

いかがでしょうか？

角ばった図形よりも丸みを帯びた図形のほうが、視線を移しやすいと感じた方もいるはずです。人間の目は基本的にまっすぐな線を追うようにできているため、角にぶつかると視線が止まり、次の要素に目を移しにくくなります。

コーナースムージングを適用すれば角がなくなり、視線がカーブに沿ってなめらかに移動するようになります。

コーナースムージングをUIデザインに落とし込んだときの見え方

2つの図形を見比べただけでは、コーナースムージングの効果をあまり実感できなかった方もいるでしょう。そこで、「全く角に丸みがない図形」「一般的な角丸を適用した図形」「コーナースムージングを適用した図形」をUIデザインで活用した場合を再現してみました。

UIデザインにコーナースムージングを適用した場合の差を、具体的に見てみましょう。

▲角に丸みがない状態（出典：UX Planet）

まず、角に丸みがない図形を活用した場合。この場合ですと、デザインにやや「トゲトゲしい」印象を感じます。人によっては古臭さを感じるかもしれません。

▲角に丸みをつけた状態（出典：UX Planet）

次に、図形に一般的な角丸を適用した場合。前のデザインに比べてどことなく印象が柔らかくなり、モダンになったような気がします。

▲コーナースムージングを適用した状態（出典：UX Planet）

最後は、コーナースムージングを適用した場合です。一般的な角丸と大きくは変わりませんが、こちらのほうがさらに柔らかなデザインに見えます。

▲それぞれの比較（出典：UX Planet）

それぞれの比較画像を見ても、やはりコーナースムージングが一番自然で、柔らかい印象を与えているように感じられます。

コーナースムージングをFigmaで適用する方法

コーナースムージングの効果は実感できたでしょうか？ 複数の図形を見比べ「私も使ってみたい！」と思った方もいるかもしれません。

コーナースムージングは、Figmaを使えば簡単に適用できます。

Figmaにて、independent cornersオプション（四角形の四隅を表すマークが目印）をオンにすると、その下に三点リーダーのようなボタンが現れます。これをクリックすれば、四角形にコーナースムージングを適用するバーが現れます。

▲UX Planetの画像をもとに編集部加筆

コーナースムージングの度合いは、0%から100%まで調整できます。なお、iOS13以降ではコーナースムージングがすべての要素に適用できるようになっており、デフォルトの設定は60%です。

おわりに

コーナースムージングは、パッと見てすぐわかるような、劇的な違いをうむわけではありません。しかし、UIデザインにおいては細やかな気配りがとても重要です。

コーナースムージングのようなちょっとした工夫が、ユーザビリティの向上や、エンゲージメント率の改善につながるのです。

（執筆：Nick Lawrence　翻訳：Asuka Nakajima　編集：齊藤颯人　提供：UX Planet）