Upgrade to Pro — share decks privately, control downloads, hide ads and more …

border-radiusだけじゃ足りない: Squircleがつくる自然なUI

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.

border-radiusだけじゃ足りない: Squircleがつくる自然なUI

【teamLab Study Session ~frontend~ #3 】にてチームラボのフロントエンドエンジニアが登壇用に作成したスライドです。

teamLab Study Session ~frontend~ とは

チームラボのフロントエンド班がチームラボ内で定期的に実施している勉強会を、フロントエンドの技術に興味ある参加者を募集し、オンラインで配信する勉強会です。

https://teamlab.connpass.com/event/393589/

Avatar for teamLab

teamLab PRO

June 10, 2026

More Decks by teamLab

Other Decks in Technology

Transcript

  1. © teamLab Inc. 所属| 2 自己紹介 2 チームラボ パッケージチーム フロントエンド班

    入江 俊吾 福岡出身 福岡→鹿児島→東京 うどんがすき(資さんうどんLOVE)
  2. © teamLab Inc. Squircleとは 「square(四角形)」と「circle(円)」を組み合わせた造語で、四角形と円の中間を表 現したもの。 square + circle =

    squircle • スーパー楕円として扱われるが、厳密に異なることが示されている。 • 一連のベジェ曲線を繋ぎ合わせることでその形状が構築される。 8
  3. © teamLab Inc. Squircleとは 2011年発売のNokia N9(MeeGo OS搭載) が、おそらく最初にSquircleを採用 9 By

    Animist - Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=16524080
  4. © teamLab Inc. Squircleとは 2013年のWWDCで発表されたiOS 7では、アイコンの形状が単なる角丸四角形では なく、「squircle(スクワークル)」と呼ばれる新しい形状へと変更された 10 iOS 6

    iOS 7 By Self-taken screenshot from an iPhone 5., Fair use, https://en.wikipedia.org/w/index.php?curid=37500638 By Self-taken screenshot from an iPhone., Fair use, https://en.wikipedia.org/w/index.php?curid=42630865
  5. © teamLab Inc. Squircleとは ジョニー・アイブの狙い 当時のAppleのチーフデザイナーであったジョニー・アイブ は、ユーザー体験を統一することを目的としていた。 一貫性のあるエコシステム iPhoneなどの物理的なハードウェアの滑らかな曲線をソフト ウェアであるiOSのアイコンにも反映させることで、物質的・

    非物質的なレベルの両方で「Appleらしさ」を強化し、シーム レスで一貫性のあるエコシステムを作り上げた。 11 Marcus Daweshttp://[email protected] - Wikipedia:Contact us/Photo submission, CC 表示-継承 3.0, https://commons.wikimedia.org/w/index.php?curid=19277958による
  6. © teamLab Inc. 数学的なSquircle スーパー楕円(Superellipse) 数学的研究からデザインへの応用 15 ガブリエル・ラメ Gabriel Lamé

    フランスの数学者。スーパー楕円の基礎 となる曲線の研究(ラメ曲線)を提唱。 ピート・ハイン Piet Hein デンマークの数学者。ラ メの研究を応用し、都市 計画や家具のデザインに スーパー楕円を導入。 不明 - http://www-history.mcs.st-andrews.ac.uk/history/PictDisplay/Lame.html, パブ リック・ドメイン, https://commons.wikimedia.org/w/index.php?curid=1702588による André Savik - このファイルは次の画像から切り抜かれたものです, CC 表示 3.0, https://commons.wikimedia.org/w/index.php?curid=4019752による
  7. © teamLab Inc. 数学的なSquircle スーパー楕円(Superellipse) 直交座標系における数学的定義は以下 16 x, y: 座標

    a: x軸方向の半径 b: y軸方向の半径 n: 形状を決めるパラメータ(実数)
  8. © teamLab Inc. 数学的なSquircle スーパー楕円(Superellipse) 17 a=1, b=1とする場合 ❖ n

    = 2 / 3 → 星型(アステロイド) ❖ n = 1 → ひし形 ❖ n = 2 → 正円 ❖ n > 2 → スーパー楕円 ❖ n = ∞ → 正方形
  9. © teamLab Inc. 数学的なSquircle 21 Fernandez-Guasti's squircle r=1とする場合 ❖ s

    = 0 → 正円 ❖ s = 1 → 正方形 ❖ 0 < s < 1 → スーパー楕円
  10. © teamLab Inc. 数学的なSquircle 簡単まとめ ➢ 角丸四角形   「完全な直線」と「完全な円弧」が繋ぎ合わさった図形 ➢ スクワークル(スーパー楕円)

      曲率(曲がり具合)が途切れることなく連続して変化するため、完全な直線部分は存在   しない 23
  11. © teamLab Inc. 実装してみよう Squircleをwebで実現する方法はいくつかあります 今回は以下の3種類紹介します 1. clip-pathを用いた実装 2. CSS

    Houdiniを用いた実装 3. corner-shapeを用いた実装 ※今回はなるべくcssを利用する方法をピックアップ 29
  12. © teamLab Inc. 実装してみよう 31 .clip-path-box { width: 200px; height:

    200px; background: #fff2b6; clip-path: path( 'M 100 0 L 132.21 0.24 L 145.06 0.94 L 154.7 2.12 L 162.59 3.79 L 169.29 5.95 L 175.07 8.61 L 180.09 11.8 L 184.45 15.55 L 188.2 19.91 \ L 191.39 24.93 L 194.05 30.71 L 196.21 37.41 L 197.88 45.3 L 199.06 54.94 L 199.76 67.79 L 200 100 L 199.76 132.21 \ L 199.06 145.06 L 197.88 154.7 L 196.21 162.59 L 194.05 169.29 L 191.39 175.07 L 188.2 180.09 L 184.45 184.45 L 180.09 188.2 \ L 175.07 191.39 L 169.29 194.05 L 162.59 196.21 L 154.7 197.88 L 145.06 199.06 L 132.21 199.76 L 100 200 L 67.79 199.76 \ L 54.94 199.06 L 45.3 197.88 L 37.41 196.21 L 30.71 194.05 L 24.93 191.39 L 19.91 188.2 L 15.55 184.45 L 11.8 180.09 \ L 8.61 175.07 L 5.95 169.29 L 3.79 162.59 L 2.12 154.7 L 0.94 145.06 L 0.24 132.21 L 0 100 L 0.24 67.79 \ L 0.94 54.94 L 2.12 45.3 L 3.79 37.41 L 5.95 30.71 L 8.61 24.93 L 11.8 19.91 L 15.55 15.55 L 19.91 11.8 \ L 24.93 8.61 L 30.71 5.95 L 37.41 3.79 L 45.3 2.12 L 54.94 0.94 L 67.79 0.24 Z' ); } https://web-toolbox.dev/tools/squircle-generatorこちらのジェネレーターから作成しました 🤔
  13. © teamLab Inc. 実装してみよう CSS Houdiniとは ➢ CSS エンジンの一部を公開する一連のAPI ➢

    CSS の拡張機能を作成することができる ➢ 新しいレイアウト手法を試したり、創造的な境界線やその他の効果を追加し たりすることが可能 ➢ … ここでは深く話しませんが、CSS のプロパティを発明して実装できてしまう!! 36
  14. © teamLab Inc. 実装してみよう CSS Houdiniとは W3C では Houdini に関係して8つの

    API 仕様が策定されている 今回は、そのうちの「CSS Painting API」を利用する  → HTML5 Canvasに似たJavaScriptの描画APIを使って、独自のグラフィックを    描画できる 今回は独自に作らず、既存のライブラリを使います https://github.com/wopian/smooth-corners 37
  15. © teamLab Inc. 実装してみよう メインの処理はloadSquirclePaintWorklet.tsに記載 38 type PaintWorkletCSS = typeof

    CSS & { paintWorklet?: { addModule(moduleURL: string): Promise<void> } } // CSS Paint API が使えるブラウザで、smooth-corners の paint worklet を登録する export const loadSquirclePaintWorklet = () => { const css = globalThis.CSS as PaintWorkletCSS | undefined; if (!css?.paintWorklet) { return; } css.paintWorklet.addModule('https://unpkg.com/smooth-corners'); } loadSquirclePaintWorklet.ts https://unpkg.com/[email protected]/lib/paint.js
  16. © teamLab Inc. 実装してみよう 39 import { type FC }

    from "react" import styles from "./index.module.css" import { loadSquirclePaintWorklet } from "./utils/loadSquirclePaintWorklet"; export const CssHoudiniBox: FC = () => { loadSquirclePaintWorklet(); return <div className={styles['css-houdini-box']} />; } index.tsx index.module.css .css-houdini-box { width: 200px; height: 200px; background-color: #fff2b6; /* Paint APIを呼び出し、角の曲率(nの値)を指定 */ mask-image: paint(smooth-corners); -webkit-mask-image: paint(smooth-corners); --smooth-corners: 4; }
  17. © teamLab Inc. 実装してみよう 見た目は良い感じ!! • widthも自由に変えられる! • javascriptなのでエンジニアでも触りやすい •

    パフォーマンスも良い だが、 • 学習コストが高め • 対応ブラウザを選ぶ(safari/firefoxは動きませんでした😭) • cssのみではない 42
  18. © teamLab Inc. 実装してみよう corner-shapeとは ➢ 角丸の形状を修正するために利用でき、適用される丸みの度合いに関してカ スタマイズ可能になる ➢ corner-shape

    は単独では機能せず、必border-radius とセットで使用する ➢ まだ実験的機能 44 round(初期値): 従来の標準的な丸角 squircle: スクワークル bevel: 直線的に斜めにカットした形状 scoop: 内側に丸くえぐれたようなカーブ notch: 内側に直角に切り取ったような形状 square: 角の丸みを無効化し、直角にする superellipse(n): スーパー楕円
  19. © teamLab Inc. 実装してみよう 46 .corner-shape-box { width: 200px; height:

    200px; background: #fff2b6; border-radius: 100%; corner-shape: squircle; } コードはこれだけ👀(どちらも同じ) .corner-shape-box { width: 200px; height: 200px; background: #fff2b6; border-radius: 100%; corner-shape: superellipse(2); }
  20. © teamLab Inc. 実装してみよう 見た目は良い感じ!! • widthも自由に変えられる! • cssのみで触りやすい •

    学習コストも低い だが、 • 対応ブラウザを選ぶ(safari/firefoxは動きませんでした😭) 48
  21. © teamLab Inc. 実装してみよう webkit • サポートすることは明言されている • https://github.com/WebKit/standards-positions/issues/229 firefox

    • Firefox向けの実装作業が開始されており、近日中にFirefox Nightly(開発版) にて利用可能になる見込み • https://github.com/mozilla/standards-positions/issues/823 49
  22. © teamLab Inc. まとめ 角丸とは違うSquircleの紹介 ❏ 円と四角形の中間的な図形 ❏ 角丸とは違ったより滑らかな図形 ❏

    数学的なSuqircleの紹介 ❏ スーパー楕円 ❏ Fernandez-Guasti's squircle ❏ Squircleの実装方法 ❏ clip-pathでの実装 ❏ css houdiniでの実装 ❏ corner-shapeでの実装 51
  23. © teamLab Inc. まとめ ➔ 四角形などの鋭い角や直角は「脅威」や「強」として認識されやすい ➔ 丸みを帯びた輪郭は「心地よさ」や「安全、親しみやすさ」を感じさせる ◆ それぞれの特性を生かしたUIを作れたら良い

    52 角丸は曲線と直線との間に切れ目(曲率の切り替え)があるので視線がカクつ きやすい ➔ スクワークルは継ぎ目なく滑らかなため、視覚的な摩擦やストレスを 感じにくい
  24. © teamLab Inc. 参考文献 • https://www.figma.com/blog/desperately-seeking-squircles/ • https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing • https://www.youtube.com/watch?v=YElVQqNwrJ4

    • https://picon.fun/design/20220617/ • https://spinners.work/posts/kudakurage-superellipse-desgin/ • https://squircular.blogspot.com/2015/09/fernandez-guastis-squircle.html • https://en.wikipedia.org/wiki/Nokia_N9 • https://en.wikipedia.org/wiki/IOS_7 • https://en.wikipedia.org/wiki/IOS_6 • https://konux.jp/blog/css-houdini-introduction/ • https://webfrontend.ninja/css-houdini/ • https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/corner-shape • https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Properties_and_values_API/Houdini • https://developer.chrome.com/blog/paintapi?hl=ja • https://github.com/wopian/smooth-corners 54