--- title: "Squircleジェネレーター - squircleのclip-pathやSVGコードを生成" description: 角のなめらかさや回転、アスペクト比、生成サイズを調整しながら、squircleのclip-pathやSVGコードを作れるツールです。アイコン、カード、ボタン、サムネイル向けのプリセットから始めて、使いたい形式だけコピーできます。 canonical_url: "https://web-toolbox.dev/tools/squircle-generator" meta: author: K "og:description": 角のなめらかさや回転、アスペクト比、生成サイズを調整しながら、squircleのclip-pathやSVGコードを作れるツールです。アイコン、カード、ボタン、サムネイル向けのプリセットから始めて、使いたい形式だけコピーできます。 "og:image": "https://web-toolbox.dev/og/ja/tools/squircle-generator-af6bee17.png" "og:image:alt": Squircleジェネレーター "og:image:height": "630" "og:image:width": "1200" "og:title": "Squircleジェネレーター - squircleのclip-pathやSVGコードを生成" --- > Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt) # **Squircleジェネレーター** squircleのclip-pathやSVGコードを生成 ## **Squircleを調整** ### **プリセット** **用途から選ぶ** 用途は出発点として選び、比率は縦横だけを素早く変えられます 角のなめらかさ 値が高いほど丸く、低いほどスクエア寄りになります **fillカラー** ## **生成サイズ** 基準サイズ 240 × 240px **幅** **高さ** **縦横比を固定** このサイズで path を再計算し、プレビューは縮小表示します ## **プレビュー** **出力形式** **生成されたコード** ``` .squircle { width: 240px; height: 240px; clip-path: path('M 120 0 L 175.33 0.19 L 189.6 0.77 L 199.46 1.75 L 207.12 3.13 L 213.39 4.92 L 218.65 7.16 L 223.11 9.87 L 226.91 13.09 L 230.13 16.89 L 232.84 21.35 L 235.08 26.61 L 236.87 32.88 L 238.25 40.54 L 239.23 50.4 L 239.81 64.67 L 240 120 L 239.81 175.33 L 239.23 189.6 L 238.25 199.46 L 236.87 207.12 L 235.08 213.39 L 232.84 218.65 L 230.13 223.11 L 226.91 226.91 L 223.11 230.13 L 218.65 232.84 L 213.39 235.08 L 207.12 236.87 L 199.46 238.25 L 189.6 239.23 L 175.33 239.81 L 120 240 L 64.67 239.81 L 50.4 239.23 L 40.54 238.25 L 32.88 236.87 L 26.61 235.08 L 21.35 232.84 L 16.89 230.13 L 13.09 226.91 L 9.87 223.11 L 7.16 218.65 L 4.92 213.39 L 3.13 207.12 L 1.75 199.46 L 0.77 189.6 L 0.19 175.33 L 0 120 L 0.19 64.67 L 0.77 50.4 L 1.75 40.54 L 3.13 32.88 L 4.92 26.61 L 7.16 21.35 L 9.87 16.89 L 13.09 13.09 L 16.89 9.87 L 21.35 7.16 L 26.61 4.92 L 32.88 3.13 L 40.54 1.75 L 50.4 0.77 L 64.67 0.19 Z'); } ``` CSS と clip-path は指定サイズに合わせて再計算されます ## 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一式**` を選ぶと、次のようなコードになります。 ```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()**`の対応状況はブラウザによって差があるため、実装前に対象環境で表示を確認してください。 **使ってみてどうでしたか？** 最終更新: 2026年5月28日 ### **関連ツール** - [

**Border Radiusジェネレーター**

](https://web-toolbox.dev/tools/border-radius-generator) - [

**Box Shadowジェネレーター**

](https://web-toolbox.dev/tools/box-shadow-generator) - [

**CSS背景パターンジェネレーター**

](https://web-toolbox.dev/tools/css-background-pattern-generator) - [

**CSSフィルタージェネレーター**

](https://web-toolbox.dev/tools/css-filter-generator) - [

**CSSグラデーションジェネレーター**

](https://web-toolbox.dev/tools/css-gradient-generator) - [

**グラデーションテキストジェネレーター**

](https://web-toolbox.dev/tools/gradient-text-generator) - [

**CSSカーソルビューワー**

](https://web-toolbox.dev/tools/css-cursor-viewer) - [

**SVG to CSS変換**

](https://web-toolbox.dev/tools/svg-to-css) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/squircle-generator#webpage","@type":"WebPage","description":"角のなめらかさや回転、アスペクト比、生成サイズを調整しながら、squircleのclip-pathやSVGコードを作れるツールです。アイコン、カード、ボタン、サムネイル向けのプリセットから始めて、使いたい形式だけコピーできます。","name":"Squircleジェネレーター - squircleのclip-pathやSVGコードを生成","url":"https://web-toolbox.dev/tools/squircle-generator","breadcrumb":{"@id":"https://web-toolbox.dev/tools/squircle-generator#breadcrumb"},"isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/squircle-generator"]}]},{"@id":"https://web-toolbox.dev/tools/squircle-generator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"角のなめらかさや回転、アスペクト比、生成サイズを調整しながら、squircleのclip-pathやSVGコードを作れるツールです。アイコン、カード、ボタン、サムネイル向けのプリセットから始めて、使いたい形式だけコピーできます。","name":"Squircleジェネレーター - squircleのclip-pathやSVGコードを生成","operatingSystem":"Windows, macOS, Linux, Android, iOS"},{"@id":"https://web-toolbox.dev/tools/squircle-generator#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"ホーム","item":"https://web-toolbox.dev/","position":1},{"@type":"ListItem","name":"CSS","item":"https://web-toolbox.dev/categories/css","position":2},{"@type":"ListItem","name":"Squircleジェネレーター","item":"https://web-toolbox.dev/tools/squircle-generator","position":3}]}]} ``` ## Sitemap See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.