Squircleジェネレーターとは？

Squircleジェネレーターは、四角でも円でもない中間の輪郭を、CSSのclip-path: path()やSVGコードとして書き出せるツールです。border-radiusでは丸くなりすぎるけれど、ただの角丸にもしたくないときに、角のなめらかさ・回転・比率・生成サイズを見比べながら形を詰めていけます。アプリアイコン、カード、ボタン、サムネイル枠など、少しやわらかい輪郭にしたいUIパーツと相性がいい構成です。

プレビューはSVGで確認でき、まずはプリセットで近い方向を選んでから細かく調整できます。出力形式も、CSS一式、clip-pathの値、SVG path の d 属性、SVGコード全体から切り替えられます。

Squircleジェネレーターの使い方

1. まず プリセット から近い用途を選ぶか、比率だけ変える でシルエットの方向を決めます。
2. 角のなめらかさ を動かして、丸寄りかスクエア寄りかを決めます。
3. 回転 を 0° / 45° で切り替えて、通常の向きか、ひし形寄りの向きかを選びます。
4. 必要なら比率を見直して、正方形・横長・縦長などのシルエットを整えます。
5. 必要なら fill カラーを変えて、プレビューやSVG出力の見え方を確認します。
6. 実装サイズが決まっている場合は、生成サイズ で幅と高さを設定します。
7. 出力形式 を選び、使いたいコードだけをコピーします。

主な設定項目

プリセット

プリセット欄は、上段の「用途から選ぶ」と下段の「比率だけ変える」で役割が分かれています。アプリアイコン、アバター / バッジ、ボタン / ピル、カード 4:3、サムネイル 16:9 は、サイズ・回転・なめらかさも含めた出発点です。一方で 1:1 や 16:9 などの比率プリセットは、縦横のバランスだけを素早く変えたいときに向いています。

角のなめらかさ

まずここで全体の印象が決まります。値を下げると辺が残りやすく、ボタンやカードのような横長UIに合わせやすくなります。値を上げると角がほどけて、アイコンやサムネイル枠のようなやわらかい見た目に寄っていきます。

回転

0°は素直な向きです。カードやボタンの形を考えるならこちらのほうが見やすく、45°にするとSquircleyに近いひし形寄りの見え方になります。アイコンやバッジの輪郭を探るなら、45°のほうが感覚をつかみやすいはずです。

アスペクト比

正方形だけでなく、横長や縦長のsquircleもすぐ試せます。たとえば1:1はアイコンやアバター向き、4:3や16:9はカードやサムネイル向きです。用途プリセットで方向を決めたあとに比率だけ微調整したいときも、この選択肢が役立ちます。

生成サイズ

ここで決めるのは、プレビューの拡大率ではなく、書き出すpath()やSVGコードの基準サイズです。実装したいUIパーツのサイズが分かっているなら、その値に寄せて生成しておくと、あとで調整し直す手間を減らせます。

出力形式

• CSS一式: .squircle のクラス定義ごとコピーしたいときに向いています
• clip-path の値: 既存のCSSにpath('...')だけを貼りたいときに使えます
• SVG path の d 属性: SVGエディタや別のマークアップにdだけ渡したいときに便利です
• SVGコード全体: 現在の fill カラーを含んだSVGとしてそのまま使えます

fillカラー

fillカラーは、プレビュー上で形の見え方を確かめるための設定です。CSSやpath()の出力には含まれませんが、SVGコード全体 を選んだ場合は現在の色がそのままコードに入ります。

生成サイズで何が変わる？

このツールが出力するclip-path: path()は、比率だけで伸び縮みする形ではなく、幅と高さを前提にした座標値の集まりです。だから見た目の比率が同じでも、サイズを変えるとpath()の中身も一緒に変わります。

• 240×135と480×270は同じ16:9でも、出力される座標値は別になります
• プレビューは見やすいように縮小表示されますが、生成コードは指定したサイズで再計算されます
• 実装サイズがあとで変わるなら、その時点で再生成したほうが意図に近い形を保ちやすくなります

出力例

240×240pxのサイズで CSS一式 を選ぶと、次のようなコードになります。

.squircle {
  width: 240px;
  height: 240px;
  clip-path: path('M 120 0 L 138.2 0.85 ... Z');
}

同じ形から、clip-path の値、SVG path の d 属性、SVGコード全体も切り替えてコピーできます。

活用シーン

• アプリアイコンやプロフィール画像のベース形状を作りたいとき
• 4:3や16:9のカード、サムネイル、ヒーロー画像枠を角丸より少し柔らかく見せたいとき
• ボタンやバッジの角を丸くしすぎず、辺の印象も残したいとき
• LPや管理画面で、アイコンからカードまで角のトーンをそろえたいとき

使うときの注意点

• 生成されるclip-path: path()は、選んだ幅と高さを前提にしたサイズ依存の出力です。要素サイズを変えるとpathの座標値も変わるため、サイズを変えたときは再生成したほうがズレにくくなります。
• fillカラーはCSSやpath()の出力には含まれません。SVGコード全体 を使うときだけ現在の色が反映されます。
• clip-path: path()の対応状況はブラウザによって差があるため、実装前に対象環境で表示を確認してください。