4 ポイント 投稿者 xguru 2020-06-16 | 4件のコメント | WhatsAppで共有

Squircle - Square(四角形)とCircle(円)の中間にある図形

HomePodからキーボードのボタン、アプリアイコンまで、すべてSquircle形状

このように作ると、鋭い角の部分や急激な切り替わり部分がなくなり、

→ 大量生産された製品のような工業的な感じが薄れ、やわらかく温かい印象を与えるようになる

何かをやわらかくするために曲率を使うのは古くからある概念で、

1959年にはPiet Heinが交通問題を解決するためにロータリーにSuperellipseカーブを与えたこともあり、

Zaha Hadid(東大門DDPの建築家)の建築スタイルも、やわらかい丸みのある形を多く用いるため未来的な形に見える

4件のコメント

 
godrm 2020-06-16

上のかっこ内の単語が入れ替わっていますね!!

 
xguru 2020-06-16

うわっ、こんなミスを……(泣) えーん、修正しておきました。

 
godrm 2020-06-16

これはもともと rounded rect だったものが、特許訴訟の後にカーブへ変わったと記憶しています。今ではR値ではなく、微細な曲率を維持していますね。

 
xguru 2020-06-16

Wikipediaにも登録されている単語です。

https://en.wikipedia.org/wiki/Squircle

実際にアプリやサービスに適用する方法

https://medium.com/@arthurofbabylon/…

FigmaではCorner Smoothing機能を使い、iOSアプリではUIBezierPathを使っていますね。

より数学的なアプローチはFigmaのブログに。"Desperately seeking squircles"

https://www.figma.com/blog/desperately-seeking-squircles/