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

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

teamLab Study Session ~frontend~ とは

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

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

Transcript

1. © teamLab Inc. border-radiusだけじゃ足りない: Squircleがつくる自然なUI 入江 俊吾 チームラボ パッケージチーム 所属 teamLab Study Session ~frontend~ #3
2. © teamLab Inc. 所属｜ 2 自己紹介 2 チームラボ パッケージチーム フロントエンド班 入江 俊吾 福岡出身 福岡→鹿児島→東京 うどんがすき（資さんうどんLOVE）
3. © teamLab Inc. 導入 早速ですが、みなさん 3
4. © teamLab Inc. 導入 二つのボタンの違いはわかりますか？ 4 角丸 (border-radius) Squircle
5. © teamLab Inc. 導入 🤔…? 5
6. © teamLab Inc. 導入 重ねてみると、違いがなんとなくあることがわかる 6 微妙にズレてる
7. © teamLab Inc. Squircleとは？ 7
8. © teamLab Inc. Squircleとは 「square（四角形）」と「circle（円）」を組み合わせた造語で、四角形と円の中間を表 現したもの。 square + circle = squircle • スーパー楕円として扱われるが、厳密に異なることが示されている。 • 一連のベジェ曲線を繋ぎ合わせることでその形状が構築される。 8
9. © 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
10. © 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
11. © teamLab Inc. Squircleとは ジョニー・アイブの狙い 当時のAppleのチーフデザイナーであったジョニー・アイブ は、ユーザー体験を統一することを目的としていた。 一貫性のあるエコシステム iPhoneなどの物理的なハードウェアの滑らかな曲線をソフト ウェアであるiOSのアイコンにも反映させることで、物質的・ 非物質的なレベルの両方で「Appleらしさ」を強化し、シーム レスで一貫性のあるエコシステムを作り上げた。 11 Marcus Daweshttp://www.marcusdawes.commarcus@marcusdawes.com - Wikipedia:Contact us/Photo submission, CC 表示-継承 3.0, https://commons.wikimedia.org/w/index.php?curid=19277958による
12. © teamLab Inc. 数学的なSquircle 12
13. © teamLab Inc. 数学的なSquircle スーパー楕円（Superellipse） 13
14. © teamLab Inc. 数学的なSquircle スーパー楕円（Superellipse） 形の印象と定義 四角形と楕円形のちょうど中間にあたる、四角のよう な丸のような、とても柔らかい印象を与えてくれる 形の特性 意外と「正円」は固い 均一な整った形にはある種の「強さ・固さ」がある 14
15. © 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による
16. © teamLab Inc. 数学的なSquircle スーパー楕円（Superellipse） 直交座標系における数学的定義は以下 16 x, y: 座標 a: x軸方向の半径 b: y軸方向の半径 n: 形状を決めるパラメータ（実数）
17. © teamLab Inc. 数学的なSquircle スーパー楕円（Superellipse） 17 a=1, b=1とする場合 ❖ n = 2 / 3 → 星型（アステロイド） ❖ n = 1 → ひし形 ❖ n = 2 → 正円 ❖ n > 2 → スーパー楕円 ❖ n = ∞ → 正方形
18. © teamLab Inc. 数学的なSquircle パラメータnを変化して、視覚的に観察してみましょう 18 https://kmj247.csb.app/superellipse.html
19. © teamLab Inc. 数学的なSquircle Fernandez-Guasti's squircle 19
20. © teamLab Inc. 数学的なSquircle Fernandez-Guasti's squircle 直交座標系における数学的定義は以下 20 x,y: 座標 r: 半径 s: 四角さを決定するパラメータ
21. © teamLab Inc. 数学的なSquircle 21 Fernandez-Guasti's squircle r=1とする場合 ❖ s = 0 → 正円 ❖ s = 1 → 正方形 ❖ 0 < s < 1 → スーパー楕円
22. © teamLab Inc. 数学的なSquircle パラメータsを変化して、視覚的に観察してみましょう 22 https://kmj247.csb.app/fernandez-guasti.html
23. © teamLab Inc. 数学的なSquircle 簡単まとめ ➢ 角丸四角形 　　「完全な直線」と「完全な円弧」が繋ぎ合わさった図形 ➢ スクワークル（スーパー楕円） 　　曲率（曲がり具合）が途切れることなく連続して変化するため、完全な直線部分は存在　　 しない 23
24. © teamLab Inc. figmaで表現 24
25. © teamLab Inc. figmaで表現 figmaでは、以下のように設定することで表現できます。 25 https://help.figma.com/hc/ja/articles/360050986854-角の半径とスムージングの調整
26. © teamLab Inc. figmaで表現 figmaではcssコードが確認できるのですが、角丸とSquircleと一緒になってます。 26
27. © teamLab Inc. figmaで表現 ただし、スムージングを設定するだけではもっと丸っこくすることはできない。 もっと細かく設定したい場合はプラグインが必要 https://www.figma.com/community/plugin/930173909910797614/squircle 27
28. © teamLab Inc. 実装してみよう 28
29. © teamLab Inc. 実装してみよう Squircleをwebで実現する方法はいくつかあります 今回は以下の3種類紹介します 1. clip-pathを用いた実装 2. CSS Houdiniを用いた実装 3. corner-shapeを用いた実装 ※今回はなるべくcssを利用する方法をピックアップ 29
30. © teamLab Inc. 実装してみよう clip-pathを用いた実装 30
31. © 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こちらのジェネレーターから作成しました 🤔
32. © teamLab Inc. 実装してみよう 32 storybookで表示の確認
33. © teamLab Inc. 実装してみよう 33 サイズを変更するとズレる
34. © teamLab Inc. 実装してみよう 見た目は良い感じ！！ だが、 • widthを変えたい場合はclip-pathを作り直し • コードが長い ◦ これならsvgの方が良い • エンジニアが触りづらい 34
35. © teamLab Inc. 実装してみよう CSS Houdiniを用いた実装 35
36. © teamLab Inc. 実装してみよう CSS Houdiniとは ➢ CSS エンジンの一部を公開する一連のAPI ➢ CSS の拡張機能を作成することができる ➢ 新しいレイアウト手法を試したり、創造的な境界線やその他の効果を追加し たりすることが可能 ➢ … ここでは深く話しませんが、CSS のプロパティを発明して実装できてしまう！！ 36
37. © teamLab Inc. 実装してみよう CSS Houdiniとは W3C では Houdini に関係して8つの API 仕様が策定されている 今回は、そのうちの「CSS Painting API」を利用する 　→ HTML5 Canvasに似たJavaScriptの描画APIを使って、独自のグラフィックを 　　 描画できる 今回は独自に作らず、既存のライブラリを使います https://github.com/wopian/smooth-corners 37
38. © 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/smooth-corners@1.1.0/lib/paint.js
39. © 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; }
40. © teamLab Inc. 実装してみよう 良い感じ！ 40
41. © teamLab Inc. 実装してみよう clip-pathと違って、サイズを変えても大丈夫👍 41
42. © teamLab Inc. 実装してみよう 見た目は良い感じ！！ • widthも自由に変えられる！ • javascriptなのでエンジニアでも触りやすい • パフォーマンスも良い だが、 • 学習コストが高め • 対応ブラウザを選ぶ（safari/firefoxは動きませんでした😭） • cssのみではない 42
43. © teamLab Inc. 実装してみよう corner-shapeを用いた実装 43
44. © teamLab Inc. 実装してみよう corner-shapeとは ➢ 角丸の形状を修正するために利用でき、適用される丸みの度合いに関してカ スタマイズ可能になる ➢ corner-shape は単独では機能せず、必border-radius とセットで使用する ➢ まだ実験的機能 44 round（初期値）: 従来の標準的な丸角 squircle: スクワークル bevel: 直線的に斜めにカットした形状 scoop: 内側に丸くえぐれたようなカーブ notch: 内側に直角に切り取ったような形状 square: 角の丸みを無効化し、直角にする superellipse(n): スーパー楕円
45. © teamLab Inc. 実装してみよう こちら から動作を確認できる 45
46. © 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); }
47. © teamLab Inc. 実装してみよう 47 見た目も完璧🤩
48. © teamLab Inc. 実装してみよう 見た目は良い感じ！！ • widthも自由に変えられる！ • cssのみで触りやすい • 学習コストも低い だが、 • 対応ブラウザを選ぶ（safari/firefoxは動きませんでした😭） 48
49. © teamLab Inc. 実装してみよう webkit • サポートすることは明言されている • https://github.com/WebKit/standards-positions/issues/229 firefox • Firefox向けの実装作業が開始されており、近日中にFirefox Nightly（開発版） にて利用可能になる見込み • https://github.com/mozilla/standards-positions/issues/823 49
50. © teamLab Inc. まとめ 50
51. © teamLab Inc. まとめ 角丸とは違うSquircleの紹介 ❏ 円と四角形の中間的な図形 ❏ 角丸とは違ったより滑らかな図形 ❏ 数学的なSuqircleの紹介 ❏ スーパー楕円 ❏ Fernandez-Guasti's squircle ❏ Squircleの実装方法 ❏ clip-pathでの実装 ❏ css houdiniでの実装 ❏ corner-shapeでの実装 51
52. © teamLab Inc. まとめ ➔ 四角形などの鋭い角や直角は「脅威」や「強」として認識されやすい ➔ 丸みを帯びた輪郭は「心地よさ」や「安全、親しみやすさ」を感じさせる ◆ それぞれの特性を生かしたUIを作れたら良い 52 角丸は曲線と直線との間に切れ目（曲率の切り替え）があるので視線がカクつ きやすい ➔ スクワークルは継ぎ目なく滑らかなため、視覚的な摩擦やストレスを 感じにくい
53. © teamlab Inc. 入江 俊吾 チームラボ パッケージチーム 所属 border-radiusだけじゃ足りない: Squircleがつくる自然なUI ご清聴ありがとうございました！ teamLab Study Session ~frontend~ #3
54. © 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