”Setロゴマーク”
2021年2月2日  |  Design

Clubhouseの曲線が美しい理由

Set アートディレクターのタルマです。

最近急激に日本で流行り始めたClubhouseで少し見かけた話題ですが、一般的なアプリと違う丸み帯びたかわいいデザインが特徴的で、通常は丸でトリミングされていることの多いプロフィール写真も「楕円」のような形で表示されています。

これがかわいい!と一部で盛り上がってるのを最近見かけます。たしかにいいですよね。

なぜこんなに絶妙な滑らかさで描くことができるのか。ただの角丸ではないのか?

結論から言うと、見た瞬間わかる人もいると思いますが、これは数学者であるPiet Heinが生み出した「スーパー楕円」と呼ばれる手法で作られている曲線です。

この楕円について少し書いてみようと思います。

 

「角丸」では描くことができない

下の画像は僕のアイコンですが、この楕円を通常のイラレの角丸の機能を使って重ねてみても、どう頑張っても隙間が空いてしまいます。イラストレーターの角丸の作られ方は四角形の角に円を置き、その接線から弧を結ぶようにしてできています。これを「シングルアール」と呼びます。(正式名かはわかりませんが)

 

そもそも、デザイン業務の中では普通の考え方ではあります。

実際にロゴや書体、グラフィックの制作においても、普通の角丸をそのまま使うことはほとんどありません。

普通に直線から円の弧へつないでしまうと、そのつなぎ目の部分がかくばって見えるので、滑らかに見えないのです。なのでこの部分を丁寧に補正します。

 

たとえば、比較的ジオメトリックに作られた書体「Futura」(直線と半円を結合したわかりやすい例なので”U”)であっても普通の角丸(赤い線)を重ねた時にこれだけのズレがあります。

 

グラフィックデザインの業界ではとても普通のことですが、このような細かい操作によってデザインはより美しくなっていきます。このような操作は、あくまで人の目で見て調整していくことが基本です。

それに対して、Piet Heinの曲線は計算によって導かれます。(数学者なので当然ですが)

 

 

 

Piet Heinの曲線はなぜ作られたのか

ピート・ハイン(Piet Hein/1905年12月16日-1996年4月17日/男性)は、デンマークの数学者、発明家、デザイナー、作家、詩人。コペンハーゲン出身。コペンハーゲン大学の理論物理学研究所、デンマーク工科大学で学び、1972年にエール大学から名誉博士号を授与された。16世紀のオランダの国民的英雄ピート・ピエターズズーン・へイン(Piet Pieterszoon Heyn)の子孫でもある。

 

Piet Heinがこの曲線を生み出した経緯はグラフィックデザインではなく道路の計画の途上で提案した形でした。

ストックホルム中心街セルゲル広場のロータリーの設計を行っていた時に、「四角だと流れが悪い」「楕円だとカーブがキツすぎる」と悩んでいたときにその問題を解決したのがこの楕円だと言われています。

 

その楕円は

(x/a)2+(y/b)2=1

という式で表され、描く方法がわかっていれば誰でも描くことができます。

 

もともとは交通の問題を解決するために生まれたデザインでしたが、そのシルエットがあまりに美しいことから、その後も建築のデザインや、プロダクトデザインの分野で大いに活用されました。


Source of photo:https://slapmobler.jp/item/super-elliptical-table/

 


Source of photo:https://slapmobler.jp/item/super-elliptical-table/

 

 

また、グラフィックデザインでも多くこの曲線を活用した作品が見受けられます。僕が思うに、原研哉さんはこの曲線を多く活用されている方なのかな、と思っています。作ったプロセスを知らないので違うかもしれませんが、以下の作品は少なくともそのように見えます。(実際に重ねて調べました)

 

羽田空港POWER LOUNGEのロゴデザイン


© Tokyo Airport Restaurant Co., Ltd.

 

「アークレイ」のロゴマーク


© ARKRAY, Inc

 

公式Webサイトの左上に表示されるアイコンも…

 

 

たまたま原さんのデザインに着目しましたが、他にも無数にこの曲線を活用したデザインが存在します。こうやって観察してみると、いかにこの曲線が目の肥えたデザイナー達からの支持を得ているかがわかります。

 

 

取り急ぎ、簡単に描く方法が一応ある。

Adobeイラストレーターを使ってこの図形を簡単に描く方法があるので、それを最後に紹介しておこうと思います。

 

まず、ふたつの円を用意し、一方が1.25倍の大きさになるように描き、中心で重ねます。

 

 

 

その後、円の四角のアンカーをダイレクト選択ツールでつまんで、大きい方の円に水平・垂直に点をずらして接線を作ります。

 

 

すると、こんな感じになりますね?

 

 

 

 

そとの円を消すとこんな感じです。

これが、一応簡単な描き方だそうです。

 

実際は計算によって出しますので、イラストレーターのスクリプトで描くのがより正確でしょう。

 

 

 

 

そんな感じで、Clubhouseのデザインを見ていろいろ思い出した今日この頃でした。