四角でも丸でもない形！Squircleを取り入れたUI考察
こんにちは、株式会社アジケでUIデザイナーを担当していますサイトウです。
皆さまは「Squircle(スクワークル)」という形の名前をご存知ですか？
ご存知の方も多いと思いますが、スクワークルとは、丸っこい四角、または四角っぽい丸とも言える形のことで、代表的なものだとiOSのアプリアイコンに使われている形のことです。
日本の記事だとスクワークルに言及したものがなかなか見当たらない一方で、海外の記事やFigmaのプラグインだと群とヒット件数が上がり、このギャップは何なのか、兼ねてから謎に感じていました。
この一見「珍しく」感じるものの、実は「馴染みのある形」とも言えそうな「スクワークル」について考察してみます。
1. トレンドなのか？？
まず、UIデザインにて、スクワークルと言えそうな形が使われてきた事例を調べてみました。
◉ 2013年：Apple/iOS
ちょうど今から10年前に、Appleが全体的にフラットなデザインのiOS7を発表したとき、アプリアイコンにスクワークルが採用されていました。
ユーザーインターフェイスの世界でスクワークルがデビューしたのはここが初なのではないでしょうか。
◉ 2016年：Instagram
UIの世界にスクワークルが登場してから3年後に、インスタグラムがロゴをスクワークルの形にアップデートしました。
2023年現在もそのままです。
◉ 2020年：clubhouse
冒頭でも述べたアプリ「clubhouse」がリリースされ、かなり丸みの強いスクワークルが採用されています。
この頃になると、Adobeのアイコンも角丸がかけられたものに変わったり、Dribbleなどの「見た目のイケてる」UIデザインサンプルで、スクワークルが多く採用されている様子を見受けられるようになったように感じます。
▼clubhouse
▼角丸ありに変わったイラレのアイコン
▼Dribbbleで見かけるスクワークル
◉ 2023年：あちこち！？
最近だとどうでしょうか。
長方形のボタンなどは、スクワークルとは少しカテゴリが違うかもしれませんが、少なくもとここ１年、新しめのWebツールを観察していると、今時ってこんな角丸つけるの？？と驚くほど丸みが付いたUIを見かけます。
Googleドライブ
少し前にGoogleサービス全般のUIがアップデートされ、よりフラットに、全てのパーツがより「丸っこく」なったと思います。
Googleドライブの、画面左上の新規追加のボタンは、スクワークル並みに強い角丸が採用されています。
オンラインmtgで音声の書き起こしをしてくれる拡張機能「tl;dv」
今年に入って見つけた、オンラインmtgをボタン一つで録画、文字起こしや要約をしてくれる「tl;dv」という拡張機能の画面UIも、全体的にパーツが丸っこい！
こちらも単に角丸の強い横長のボタンと言ってしまえばそれまでですが、スクワークルっぽさは確実に意識されているように感じます。
また、何年のものなのかわからなかったですが、ポケモンゲームの画面や、セキュリティソフト「ESET」のデスクトップアイコンにも、スクワークルを感じる形をちらほら見受けることがあります。
そんなところで全体を振り返ってみると、
「スクワークル」を取り入れることが流行っている！というよりも、
UIがどんどん丸っこくなっていくというトレンドの潮流の先に、
スクワークルやスクワークルらしさが自然と取り入れらることがある状況なのかなと自分は解釈しました。
2. どうやって作るのが正解？
さて、そんなスクワークルですが、UIデザインをする時、ただ四角に角丸を強くかけただけだとそれっぽく見えるものの、四角が膨張しているような形は再現ができませんでした。
ネットで調べてみた結果、3つほど、簡単に作ることができる方法を見つけました。
※イラレ等を含むと風呂敷が広がりすぎてしまうため、今回はFigmaで作る前提でお話を進めさせていただきます。
１）コーナースムージング
四角に角丸を付け、さらにコーナースムージングをかけると、カーブが緩やかになり、ころっとした四角を作ることができます。
（コーナースムージングとは、早めに曲がってくれるので緩やかなカーブを描くことができるFigmaの機能です）
しかし、これだけだとぷっくりと膨張したような四角は再現ができません。そこで、、↓
２）4つの円を重ね、パスを切り抜く
文字の通り、丸を4つ作って重ね合わせ、面が重なっている中央の部分のパスを切り抜く方法です。
画像のAからCのように、丸が重なり合う中央部分の面積を大きすればするほど、丸っこい形をくり抜くことができました！
これでだいぶ表現の幅が広がりそうです！
ロゴを作る際に、円の曲線を頼りに形を作っていく方法があるかと思いますが、それと同じだなと思いました。
例えばYoutubeや、ワーナーブラザーズミュージックのロゴは、スクワークルっぽい形をしていますが、四角形に角丸を付けるだけでは再現が出来ませんでした。
そこで、上記に記載した円で土台を作り、そこにさらに角丸をつけるとぴったりと同じ形を再現することができました。
3）プラグインやジェネレーターを使う
0から作るのは難しいそう・・・と感じた時は、ジェネレーターを使って直感的に、かつ素早く生成することもできるようです！
◉ Squircle (Figmaプラグイン)
Figmaでスクワークルを生成できるプラグインです。
グラデーションや透過など、細かい指定もできます。
どうやらFigma上で書き出されるCSSコードにはスクワークルを表現する値が反映されないため、あくまでもsvgやpngなどの作成に適していそうです。
◉ Squircley
SVGデータが作れるWebページ。
バーを動かすことで、丸みの調節ができます。
※こちら残念ながら、気付いた時にはリンク先がなくなっておりました。。いつか復活することを願い参考リンクを残しておきます。
3. 何て呼ぶのが正解？
ここまでスクワークルについて調べてみましたが、肝心の「日本語でなんと呼ぶのが正解なのか」は未だ謎のままです。
スーパー楕円と呼ばれている記事も見受けられましたが、スーパー楕円の直訳は「Superellipse」という単語が別でありました。
「 Squircle/スクワークル」とは別の扱いとするのが正しいのかもしれません。
また、wikipediaのページを日本語訳をかけると、「スクイクル」と変換されますが、youtubeなどで海外の方が発音しているのを聞くと「スクワークル」という言い方が近そうです。
やはり少々言いづらいですね、、
何かいいネーミングがないか議論をしたいところです。
https://www.youtube.com/watch?v=gjtTcyWL0NA
4.終わりに：デザインの引き出しの一つに…
いかがでしたでしょうか。
自分の中ではまだまだ謎が多いスクワークルですが、柔らかさ・温かさ・洗練さを同時に表現できるこの形は、これからもUIやwebデザインをするとき引き出しの1つとして持っておきたいなと思います。
一方で、使い方によっては丸みのある表現がサービスが目指す雰囲気に合っていなかったり、丸っこいオブジェクトを乱列することで安定感が損なってしまったり、見づらくなってしまう場合もあるため、使用する際はそのサービスに適切かどうか十分に検討する必要があるなとも思います。
スクワークルに詳しい方、同じく気になっている方がいらっしゃいましたら、是非、アジケでお話ししましょう🤝
最後まで読んでいただきありがとうございました！
🎨メンバーを募集しています！【チーム伴走型のサービスデザイン会社｜アジケ】✒️
アジケでは、一緒に「人にとって豊かな体験をデザインすることで、『味気ある世の中』をつくる ”同志”を募集しています！
＜働き方＞
・フルリモートワークOK
・フレックスタイム制（コアタイム11:00~16:00）
＜現在募集中のポジション＞
・UXデザイナー/ディレクター
・UI/UXデザイナー
・リードエンジニア（テックリード）
・24卒 新卒
詳細は採用サイト 、またはWantedly をご覧ください！
＜アジケってどんな会社？を3分でお伝えします＞
<数字で見るアジケ紹介 〜こんな社員が働いています〜>
選考の前段階として、お互いを知るカジュアル面談も大歓迎です！
「まだ応募までは決めきれないけど、会社のことを知りたい」という方もお気軽にご連絡ください🙌
（カジュアル面談ご希望の方はこちらのページからどうぞ！ ）
採用に関するご不明、ご質問などがございましたら、お気軽に recruit@ajike.co.jp までご連絡ください📩
▼アジケのカルチャーを知りたい方｜アジケのカルチャーデック
https://www.craft.do/s/ki01ioOMjsgvSv
▼アジケの事業内容と今後の展望を知りたい方｜アジケの事業紹介
https://www.craft.do/s/K8K1fm63kxSmG8
この記事が気に入ったらサポートをしてみませんか？