[{"data":1,"prerenderedAt":428},["ShallowReactive",2],{"\u002Fsquircle-generator\u002Fja":3},{"id":4,"title":5,"body":6,"description":265,"extension":421,"meta":422,"navigation":423,"path":424,"seo":425,"stem":426,"__hash__":427},"content\u002Fsquircle-generator\u002Fja.md","Ja",{"type":7,"value":8,"toc":404},"minimark",[9,14,27,38,42,88,91,94,122,124,127,129,142,145,158,160,167,169,207,210,219,223,232,250,253,259,345,354,357,375,378,400],[10,11,13],"h2",{"id":12},"squircleジェネレーターとは","Squircleジェネレーターとは？",[15,16,17,18,22,23,26],"p",{},"Squircleジェネレーターは、四角でも円でもない中間の輪郭を、CSSの",[19,20,21],"code",{},"clip-path: path()","やSVGコードとして書き出せるツールです。",[19,24,25],{},"border-radius","では丸くなりすぎるけれど、ただの角丸にもしたくないときに、角のなめらかさ・回転・比率・生成サイズを見比べながら形を詰めていけます。アプリアイコン、カード、ボタン、サムネイル枠など、少しやわらかい輪郭にしたいUIパーツと相性がいい構成です。",[15,28,29,30,33,34,37],{},"プレビューはSVGで確認でき、まずはプリセットで近い方向を選んでから細かく調整できます。出力形式も、CSS一式、",[19,31,32],{},"clip-path","の値、SVG path の ",[19,35,36],{},"d"," 属性、SVGコード全体から切り替えられます。",[10,39,41],{"id":40},"squircleジェネレーターの使い方","Squircleジェネレーターの使い方",[43,44,45,57,63,69,72,75,82],"ol",{},[46,47,48,49,52,53,56],"li",{},"まず ",[19,50,51],{},"プリセット"," から近い用途を選ぶか、",[19,54,55],{},"比率だけ変える"," でシルエットの方向を決めます。",[46,58,59,62],{},[19,60,61],{},"角のなめらかさ"," を動かして、丸寄りかスクエア寄りかを決めます。",[46,64,65,68],{},[19,66,67],{},"回転"," を 0° \u002F 45° で切り替えて、通常の向きか、ひし形寄りの向きかを選びます。",[46,70,71],{},"必要なら比率を見直して、正方形・横長・縦長などのシルエットを整えます。",[46,73,74],{},"必要なら fill カラーを変えて、プレビューやSVG出力の見え方を確認します。",[46,76,77,78,81],{},"実装サイズが決まっている場合は、",[19,79,80],{},"生成サイズ"," で幅と高さを設定します。",[46,83,84,87],{},[19,85,86],{},"出力形式"," を選び、使いたいコードだけをコピーします。",[10,89,90],{"id":90},"主な設定項目",[92,93,51],"h3",{"id":51},[15,95,96,97,100,101,100,104,100,107,100,110,113,114,117,118,121],{},"プリセット欄は、上段の「用途から選ぶ」と下段の「比率だけ変える」で役割が分かれています。",[19,98,99],{},"アプリアイコン","、",[19,102,103],{},"アバター \u002F バッジ",[19,105,106],{},"ボタン \u002F ピル",[19,108,109],{},"カード 4:3",[19,111,112],{},"サムネイル 16:9"," は、サイズ・回転・なめらかさも含めた出発点です。一方で ",[19,115,116],{},"1:1"," や ",[19,119,120],{},"16:9"," などの比率プリセットは、縦横のバランスだけを素早く変えたいときに向いています。",[92,123,61],{"id":61},[15,125,126],{},"まずここで全体の印象が決まります。値を下げると辺が残りやすく、ボタンやカードのような横長UIに合わせやすくなります。値を上げると角がほどけて、アイコンやサムネイル枠のようなやわらかい見た目に寄っていきます。",[92,128,67],{"id":67},[15,130,131,134,135,138,139,141],{},[19,132,133],{},"0°","は素直な向きです。カードやボタンの形を考えるならこちらのほうが見やすく、",[19,136,137],{},"45°","にするとSquircleyに近いひし形寄りの見え方になります。アイコンやバッジの輪郭を探るなら、",[19,140,137],{},"のほうが感覚をつかみやすいはずです。",[92,143,144],{"id":144},"アスペクト比",[15,146,147,148,150,151,154,155,157],{},"正方形だけでなく、横長や縦長のsquircleもすぐ試せます。たとえば",[19,149,116],{},"はアイコンやアバター向き、",[19,152,153],{},"4:3","や",[19,156,120],{},"はカードやサムネイル向きです。用途プリセットで方向を決めたあとに比率だけ微調整したいときも、この選択肢が役立ちます。",[92,159,80],{"id":80},[15,161,162,163,166],{},"ここで決めるのは、プレビューの拡大率ではなく、書き出す",[19,164,165],{},"path()","やSVGコードの基準サイズです。実装したいUIパーツのサイズが分かっているなら、その値に寄せて生成しておくと、あとで調整し直す手間を減らせます。",[92,168,86],{"id":86},[170,171,172,182,192,201],"ul",{},[46,173,174,177,178,181],{},[19,175,176],{},"CSS一式",": ",[19,179,180],{},".squircle"," のクラス定義ごとコピーしたいときに向いています",[46,183,184,187,188,191],{},[19,185,186],{},"clip-path の値",": 既存のCSSに",[19,189,190],{},"path('...')","だけを貼りたいときに使えます",[46,193,194,197,198,200],{},[19,195,196],{},"SVG path の d 属性",": SVGエディタや別のマークアップに",[19,199,36],{},"だけ渡したいときに便利です",[46,202,203,206],{},[19,204,205],{},"SVGコード全体",": 現在の fill カラーを含んだSVGとしてそのまま使えます",[92,208,209],{"id":209},"fillカラー",[15,211,212,213,215,216,218],{},"fillカラーは、プレビュー上で形の見え方を確かめるための設定です。CSSや",[19,214,165],{},"の出力には含まれませんが、",[19,217,205],{}," を選んだ場合は現在の色がそのままコードに入ります。",[10,220,222],{"id":221},"生成サイズで何が変わる","生成サイズで何が変わる？",[15,224,225,226,228,229,231],{},"このツールが出力する",[19,227,21],{},"は、比率だけで伸び縮みする形ではなく、幅と高さを前提にした座標値の集まりです。だから見た目の比率が同じでも、サイズを変えると",[19,230,165],{},"の中身も一緒に変わります。",[170,233,234,244,247],{},[46,235,236,239,240,243],{},[19,237,238],{},"240×135","と",[19,241,242],{},"480×270","は同じ16:9でも、出力される座標値は別になります",[46,245,246],{},"プレビューは見やすいように縮小表示されますが、生成コードは指定したサイズで再計算されます",[46,248,249],{},"実装サイズがあとで変わるなら、その時点で再生成したほうが意図に近い形を保ちやすくなります",[10,251,252],{"id":252},"出力例",[15,254,255,256,258],{},"240×240pxのサイズで ",[19,257,176],{}," を選ぶと、次のようなコードになります。",[260,261,266],"pre",{"className":262,"code":263,"language":264,"meta":265,"style":265},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".squircle {\n  width: 240px;\n  height: 240px;\n  clip-path: path('M 120 0 L 138.2 0.85 ... Z');\n}\n","css","",[19,267,268,284,301,313,339],{"__ignoreMap":265},[269,270,273,277,281],"span",{"class":271,"line":272},"line",1,[269,274,276],{"class":275},"sMK4o",".",[269,278,280],{"class":279},"sBMFI","squircle",[269,282,283],{"class":275}," {\n",[269,285,287,291,294,298],{"class":271,"line":286},2,[269,288,290],{"class":289},"sqsOY","  width",[269,292,293],{"class":275},":",[269,295,297],{"class":296},"sbssI"," 240px",[269,299,300],{"class":275},";\n",[269,302,304,307,309,311],{"class":271,"line":303},3,[269,305,306],{"class":289},"  height",[269,308,293],{"class":275},[269,310,297],{"class":296},[269,312,300],{"class":275},[269,314,316,319,321,325,328,332,334,337],{"class":271,"line":315},4,[269,317,318],{"class":289},"  clip-path",[269,320,293],{"class":275},[269,322,324],{"class":323},"sTEyZ"," path(",[269,326,327],{"class":275},"'",[269,329,331],{"class":330},"sfazB","M 120 0 L 138.2 0.85 ... Z",[269,333,327],{"class":275},[269,335,336],{"class":323},")",[269,338,300],{"class":275},[269,340,342],{"class":271,"line":341},5,[269,343,344],{"class":275},"}\n",[15,346,347,348,350,351,353],{},"同じ形から、",[19,349,186],{},"、SVG path の ",[19,352,36],{}," 属性、SVGコード全体も切り替えてコピーできます。",[10,355,356],{"id":356},"活用シーン",[170,358,359,362,369,372],{},[46,360,361],{},"アプリアイコンやプロフィール画像のベース形状を作りたいとき",[46,363,364,154,366,368],{},[19,365,153],{},[19,367,120],{},"のカード、サムネイル、ヒーロー画像枠を角丸より少し柔らかく見せたいとき",[46,370,371],{},"ボタンやバッジの角を丸くしすぎず、辺の印象も残したいとき",[46,373,374],{},"LPや管理画面で、アイコンからカードまで角のトーンをそろえたいとき",[10,376,377],{"id":377},"使うときの注意点",[170,379,380,386,395],{},[46,381,382,383,385],{},"生成される",[19,384,21],{},"は、選んだ幅と高さを前提にしたサイズ依存の出力です。要素サイズを変えるとpathの座標値も変わるため、サイズを変えたときは再生成したほうがズレにくくなります。",[46,387,388,389,391,392,394],{},"fillカラーはCSSや",[19,390,165],{},"の出力には含まれません。",[19,393,205],{}," を使うときだけ現在の色が反映されます。",[46,396,397,399],{},[19,398,21],{},"の対応状況はブラウザによって差があるため、実装前に対象環境で表示を確認してください。",[401,402,403],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":265,"searchDepth":286,"depth":286,"links":405},[406,407,408,417,418,419,420],{"id":12,"depth":286,"text":13},{"id":40,"depth":286,"text":41},{"id":90,"depth":286,"text":90,"children":409},[410,411,412,413,414,415,416],{"id":51,"depth":303,"text":51},{"id":61,"depth":303,"text":61},{"id":67,"depth":303,"text":67},{"id":144,"depth":303,"text":144},{"id":80,"depth":303,"text":80},{"id":86,"depth":303,"text":86},{"id":209,"depth":303,"text":209},{"id":221,"depth":286,"text":222},{"id":252,"depth":286,"text":252},{"id":356,"depth":286,"text":356},{"id":377,"depth":286,"text":377},"md",{},true,"\u002Fsquircle-generator\u002Fja",{"description":265},"squircle-generator\u002Fja","jMOmvxCKOAzFwF9srfhZ0VUDw4kqd1QHyf2UcooxB-o",1780055791916]