← ハシトシステム トップ English ツール ブログ
図柄のJSON
サンプル:
プレビューと書き出し
SVGが本体です。線だけの図柄はSVGなら何倍に拡大しても輪郭が保たれ、あとから色や太さも変えられます。PNGはブラウザのcanvasでその場ラスタライズしたものです。
AIに渡す仕様プロンプト

このツールの本題は、下の仕様をそのままAIに渡し、描きたい図柄のイメージを言葉で足して、返ってきたJSONを上の欄に貼ることです。仕様はここに全文があります。

あなたは「円と線だけのSVG作図フォーマット(Circle-Line Spec v1)」で図柄を書きます。
出力はこのフォーマットのJSONだけにしてください(説明文やコードフェンスは付けない)。

■ 全体の形
{
  "version": 1,
  "canvas": { "w": 800, "h": 800, "bg": "#0b0b10" },
  "stroke": { "color": "#ffffff", "width": 1.5, "cap": "round", "join": "round", "dash": "", "opacity": 1 },
  "shapes": [ ここに図形を並べる ]
}
- canvas.w / canvas.h は 16〜4000 の数値。bg は背景色で、"none" にすると透明。
- stroke は全図形の既定値。書かなければ上の値が使われる。
- shapes は最大5000件。

■ 図形は3種類だけ
円  { "t": "c", "x": 中心X, "y": 中心Y, "r": 半径 }
直線 { "t": "l", "x1": 始点X, "y1": 始点Y, "x2": 終点X, "y2": 終点Y }
円弧 { "t": "a", "x": 中心X, "y": 中心Y, "r": 半径, "a0": 開始角, "a1": 終了角 }

■ 角度
- 度数法。0°が右(+X方向)、90°が下、180°が左、270°が上(画面のY軸が下向きのため)。
- a0 から a1 へ向かって回る。a1 が大きければ時計回り、小さければ反時計回り。
- 差が360以上なら全周。a0 と a1 を同じ値にしてはいけない。

■ 図形ごとの上書き(すべて任意)
"s"  線の色("#ff0044" / "orange" / "rgb(255,0,68)")
"w"  線の太さ(0以上の数値)
"d"  破線("6 4" または [6,4]。書かなければ実線)
"f"  塗りの色(書かなければ塗りなし)
"o"  不透明度(0〜1)

■ 決まりごと
- 座標はキャンバスの内側に収める。小数は3桁までで足りる。
- ベジェ曲線・多角形・テキスト・画像・グラデーションは使えない。曲線は円弧をつないで表す。
- 座標は必ず計算して具体的な数値で書く。式や変数は書かない。
- 対称な図柄は角度を等分し、同じ形の繰り返しは1件ずつ座標を展開して並べる。

■ 例(円・十字・破線の半円)
{"version":1,"canvas":{"w":400,"h":400,"bg":"#0b0b10"},"stroke":{"color":"#ffffff","width":1.5},"shapes":[
{"t":"c","x":200,"y":200,"r":150},
{"t":"l","x1":50,"y1":200,"x2":350,"y2":200},
{"t":"l","x1":200,"y1":50,"x2":200,"y2":350},
{"t":"a","x":200,"y":200,"r":90,"a0":0,"a1":180,"d":"6 4"}
]}

では、次の図柄をこのフォーマットのJSONにしてください。
図柄:

キーの一覧

場所キー意味
最上位version仕様の版。いまは 1。違う値なら注意書きを出して読める範囲で描く。
canvasw / h / bg幅・高さ(16〜4000)と背景色。既定は 800 / 800 / #0b0b10none で背景なし。
strokecolor / width / cap / join / dash / opacity全図形の既定。cap は butt / round / square、join は miter / round / bevel。
shapes[]t種類。c(円)・l(直線)・a(円弧)のどれか。
t = cx / y / r中心と半径。r は 0 より大きい数値。
t = lx1 / y1 / x2 / y2始点と終点。
t = ax / y / r / a0 / a1中心・半径・開始角・終了角(度)。
shapes[] 任意s / w / d / f / oその図形だけの線色・太さ・破線・塗り・不透明度。書かなければ stroke の既定に従う。

キーを短くしてあるのは、同じ図柄でも文字数が減り、AIの出力もURLの共有リンクも短くなるためです。読み書きの負担は「3種類しかない」ことで吸収しています。

使いかたの勘どころ

角度の向きに気をつける

画面のY軸は下向きなので、角度が増える向きは見た目には時計回りです。{"t":"a","x":400,"y":400,"r":200,"a0":0,"a1":90} は右(3時の位置)から下(6時の位置)へ、右下を通る四分円になります。反時計回りにしたいときは "a0":90,"a1":0 のように終了角を小さくします。真上から描き始めたいときは -90 を起点にするのが分かりやすいです。

エラーは行番号で返る

JSONの構文が壊れている場合はその位置の行と桁を、仕様に合わない値の場合はその図形が書かれている行を示します。カンマ抜けのような構文エラーは1件目で止まりますが、値の誤りは全件まとめて出るので、AIに戻すときはそのまま貼れば足ります。図形が1件でも不正なら描画はしません(半端な図が正しい図に見えるのを避けるためです)。

曲線は円弧の連なりで作る

この仕様にはベジェ曲線がありません。滑らかな曲線が必要なときは、接する位置に中心をずらした円弧を並べます。サンプルの「円弧の敷き詰め」は、正方形のセルの隅を中心にした四分円を2本ずつ置いているだけですが、隣のセルと端点が一致するので途切れのない曲線に見えます。円弧をつなぐコツは、次の円弧の中心を前の円弧の端点と中心を結んだ直線上に置くことです。

共有リンクの中身

共有リンクは ?d= に図柄そのものを入れています。先頭の1文字が方式で、z は deflate-raw で圧縮したもの、u は無圧縮です。残りは base64url なのでURLの中で壊れません。図柄はサーバーに保存されないので、リンクを配った相手にだけ届きます。逆に、リンクを失うと図柄も失われます。

よくある質問(FAQ)

なぜ円と線と円弧だけなのですか?

部品を3種類に絞ると、図柄が数値の並びだけで決まります。ベジェ曲線やパスの制御点が無いぶん、人が読んでも意味が分かり、AIに書かせても座標の計算だけで済みます。作れる形は減りますが、円弧をつなげれば曲線は表現できます。

AIに図柄のJSONを書かせるにはどうしますか?

ページ内の「AIに渡す仕様プロンプト」をコピーし、その末尾に描きたい図柄の説明を足してAIに渡してください。返ってきたJSONをこのページの入力欄に貼れば、その場で図になります。仕様に合わない値があれば行番号つきで指摘されるので、その文面をAIに戻せば直せます。

共有リンクはどのくらいの長さになりますか?

JSONを空白なしにしてから deflate-raw で圧縮し、base64url にしてURLへ入れます。図形100件程度なら1000文字前後です。圧縮に対応していないブラウザでは自動で無圧縮になり、その場合は長くなります。図柄そのものがURLに入るので、サーバーには何も保存されません。