この記事は DeNA 21新卒×22新卒内定者 Advent Calendar 2021 の14日目の記事です。
新着記事の情報は DeNA 公式 Twitter アカウント @DeNAxTech でキャッチできるので、ぜひフォローをお願いします！
はじめに
こんにちは。やまそう@yamasoです。
DeNA22卒内定者で、大学ではデザインと情報工学を組み合わせたデザイン情報学を専攻しています。
これまで大学では、チームハッカソンに出場したり、ちょっとしたゲームを作ったり、Flutterアプリ開発の長期インターンに参加したりしていました。（学生生活や就活の振り返りなどは, 12/26開催, 学生向けの DeNA TechCon 2021 Winter のLT会にて少しお話することになりましたので、ぜひ参加してください！）
研究室は、曲線(面)の研究や、デザインシステム, 方法論などの研究がおこなわれている「デザインシステム計画研究室」に所属しています。
この記事のテーマ
さて、今回は、卒業研究にて「曲率に着目し曲線の性質を定量化する手法を用い、モノの印象などを体系化し、それを創作活動に活かす」ような研究を行っているので、この記事では**「曲率・曲線」×「デザイン」、そして「対数美的曲線」**についての話、紹介をします。
デジタルプロダクト・UIデザインや、曲率に着目したデザインの分解に興味がある方にぜひ読んでいただきたいです。
近年のデジタルプロダクトのUIデザイン
突然ですが、以下の二つの角丸四角形（大きさは同じ）の違いがわかりますでしょうか？
良く見ると、右の角丸四角形の方が若干優しく、滑らかな角丸に感じませんか？
重ねてみると、このような若干の違いがあります。（白色ではみ出ているものが左の角丸四角形）
実は、左がillustratorなどで普通に角を丸くした四角形、右がiOSのアプリアイコンUIなどで使われている**「Continuous Corner Curve」**と呼ばれる角丸四角形をトレースしたシルエットです。
プロダクトデザインにおいて、直線から角丸等への切り替わり時の錯視を軽減するために、半径の違う角丸を組み合わせる「アプローチR」のような概念ですね。
①, ②の角丸四角形は若干の違いですが、確かに印象に影響を及ぼし、UIとして並べてみると、その"綺麗さ"や"美しさ"、"優しさ"などの印象により大きな影響を与えることが考えられます。
このように、②のようなUIデザインで使用される角丸四角形は、クロソイド曲線（曲率を徐々に変化させて作られる緩和曲線の一種）や、最近のデジタルプロダクトのUIデザインにて、より優しく滑らかな印象を与える要素としてたびたび話題にあがる「スーパー楕円」に近いもので制作されていることがわかります。
スーパー楕円とは
\begin{vmatrix}
\frac{x}{a}
\end{vmatrix}^{n}
+
\begin{vmatrix}
\frac{y}{b}
\end{vmatrix}^{n}
1
で表すことができる、通常の楕円(n=2)の累乗部分を任意の数字へ置き換えた形です。
[Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%BC%E3%83%91%E3%83%BC%E6%A5%95%E5%86%86)より [Ag2gaeh](https://commons.wikimedia.org/w/index.php?curid=61976776) - 投稿者自身による作品, CC 表示-継承 4.0
しかし、このような違いは、並べて見ても具体的な違いがわかりにくいので、角丸の曲線部分の曲率を分析し、曲率半径をプロットすることでその特徴を明らかにする方法を紹介します。
# 曲線性質の定量化（曲率プロファイル）
曲線には、構成点において、曲線にきれいに接する曲率円がそれぞれ存在し、曲率円と曲率の関係は以下のようになっています。
つまり、**曲率半径が大きいほど曲率（曲がり具合）が小さく、曲率半径が小さいほど曲率が大きく**なります。
この曲率に着目し、等間隔おきに抽出した曲線の構成点へ曲率半径をプロットしたものを**「曲率プロファイル」**とよび、これによって曲線の性質を分析し、考察することができます。
例として、さきほどの角丸四角形の曲率プロファイルを比較してみるとこのようになります。
このように、曲率を見てみると、その特徴が視覚的に表れ、①の方は曲率が変わらず一定になっているのに対し、②のUIデザインで用いられるアプリアイコンのシルエットの方は、**角丸の部分の曲率がなめらかに、直線との接続部に向けてきれいに変化している**ことがわかります。
# 対数美的曲線について
上記までで、曲率に着目して曲線を観察することの紹介をしてきましたが、このように曲率がなめらかに変化する曲線をillustratorなどでサッと描くことは難しく、さらにその調整は個々のデザイナーの経験に依るところが大きく、再現性においての問題があります。
そこで、先ほどの「曲率プロファイル」に加え、曲線全体の曲率変化の特性を定量化し、調べるための手法である**「曲率対数分布図」**と、の紹介をします。
曲率対数分布図は、曲率プロファイルにおいて、定義した各曲率半径区間 ρj に含まれる構成点の、全体における割合（長さ頻度 sj）を算出し、ヒストグラム化したものの頂点を結ぶことによって表されます。
このヒストグラムの頂点を結ぶことによってできるカーブを *C curve* とよび、これに対するこれまでの研究によって、数多くの自然造形物や工芸品、工業製品の主要断面図やキーライン曲線が分析された結果、それらの**曲率対数分布図の C curve が一定の傾きを持った直線に近くなっている**ことがわかり、さらに、任意の2か所の位置で曲線を切って取り出し、任意の倍率に変換したときに元の曲線と一致する「自己アフィン性」を持つことが明らかになっています。
※自己アフィン性のイメージ↑
そして、このような性質をもつ曲線が**「対数美的曲線」**と定義され、定量的に美しい曲線の1つであるといわれています。
さらに、これら一連の研究による分析によって、対数美的曲線は、その曲率対数分布図の特徴や*C curve*の傾き方によって、（**発散型, 定速型, 収束型, 山形, 谷型, シングルR**）の6タイプに体型化されています。本記事では、代表的な3タイプを以下に紹介します。
「発散型」や「収束型」はデザイナのスケッチの中にも頻繁に表れることも明らかになっており、このように**体系化された曲率対数分布図のC curveの傾きと、両端点の曲率半径を指定することができれば、デザイナがスケッチの中で描くような美しい曲線を創成することができます。**（「発散型」は曲率半径が大きい方から小さい方にペンを加速させながら曲線を描いたようなイメージ、「収束型」は曲率半径が小さい方から大きい方にペンを加速させながら曲線を描いたようなイメージです。）
# まとめ
このように、Webやスマホアプリなど、デジタルプロダクトにおいても**「曲率」**に着目して分析を行うことで、より精密なデザインや、より思い通りの印象に近いUIデザインの調整が可能になるのではないかと感じています。
そして、近年は、例示したiOSのアプリアイコンのように、曲率がなめらかに変化する曲線や「スーパー楕円」を用いた優しい、丸みのあるデザインが採用されている様子も散見されるので、紹介した研究・分析手法によって明らかになった"美しい曲線"の一つである**「対数美的曲線」**のデジタルプロダクトやUIデザインにおける利用の可能性、そしてそれに対してユーザーが抱く印象などを探っていきたいです。
このような視点からもデザインやUXを考えつつ、プロダクト開発を進められるエンジニアを目指して、頑張っていきたいと思います。
## 参考文献
[原田利宣：デザイナのための「美しい曲線」再考, デザイン学研究, Vol.55, No.2, pp.75-82(2008)](https://www.jstage.jst.go.jp/article/jssdj/55/2/55_KJ00005019713/_article/-char/ja/)