← ハシトシステム トップ English ツール ブログ
ロゴのJSON
サンプル:
プレビューと書き出し
表示:
書き出されるのは、いま表示している側です。作図モードなら補助線ごと、ロゴモードなら塗り面だけが入ります。SVGは clipPath と mask で領域を表す純粋なベクターなので、拡大しても輪郭が保たれます。PNGはブラウザのcanvasでその場ラスタライズしたものです。
AIに渡す仕様プロンプト

下の仕様をそのままAIに渡し、作りたいロゴのイメージを言葉で足して、返ってきたJSONを上の欄に貼ってください。仕様はここに全文があります。

あなたは「円と線だけのロゴ作図フォーマット(LogoMark Spec v1)」でロゴ・アイコンを設計します。
出力はこのフォーマットのJSONだけにしてください(説明文やコードフェンスは付けない)。

■ 考えかた
1) まず円と無限直線で「補助線」を引く(circles / lines)。
2) その補助線が区切る領域のうち、塗る場所を集合演算で選ぶ(fills)。
3) 塗った面だけがロゴになる。線そのものは出力されない。

■ 全体の形
{
  "version": 1,
  "view": { "size": 100, "background": "#f2f0e9" },
  "guide": { "color": "#b9b2a2", "width": 0.4 },
  "circles": [ { "id": "c1", "cx": 50, "cy": 50, "r": 30 } ],
  "lines":   [ { "id": "l1", "x1": 0, "y1": 60, "x2": 100, "y2": 60 } ],
  "fills":   [ { "in": ["c1"], "out": [], "side": { "l1": "left" }, "color": "#2b2b26" } ]
}
- view.size は正方形の一辺(16〜4000)。既定は 100。座標はすべてこの中で考える。
- view.background は背景色。"none" にすると背景なし(透明)。
- guide は作図モードで補助線を描くときの色と太さ。ロゴには出ない。
- circles は id・中心(cx,cy)・半径(r)。lines は id と通る2点。線は2点を通る「無限直線」で、線分ではない。
- id は英字で始まる24文字までの英数字・ハイフン・アンダースコア。円と直線を通して重複させない。
- circles / lines は各400件、fills は200件まで。

■ fills(塗る領域)の意味
{ "in": ["c1","c2"], "out": ["c3"], "side": { "l1": "left" }, "color": "#2b2b26" }
= c1 の内側 かつ c2 の内側 かつ l1 の左側 で、c3 の外側 の領域を塗る。
- in / out には「円の id」だけを書く。直線は side で扱う。
- side は「直線の id」→ "left" か "right"。x1,y1 から x2,y2 へ進む向きに対して、
  画面上で左側が "left"、右側が "right"。
  例: (0,60)→(100,60) の直線なら "left" は上側(yが小さい方)。
- in・out・side は書かなくてよいが、3つとも空にはしない(領域が決まらないため)。
- color は塗りの色、opacity は 0〜1(省略可)。
- fills は書いた順に上へ重なる。あとの塗りが前の塗りを隠す。

■ 形の作りかた
- 和集合(形をつなぐ)は fills を複数件並べる。1件で表せるのは「積と差」だけ。
- 三日月: 大きい円 in、少しずらした円 out。
- 葉・レンズ形: 2つの円を in で重ねる。
- 三角形・多角形: 直線3本以上の side を1件の fills に並べる。
- 抜き文字・穴: 背景と同じ色で塗るか、out で抜く。
- 円どうしをつなげて1つの塊にするときは、隣の円と必ず重ねる。離れていると隙間が出る。

■ 決まりごと
- 座標は必ず計算して具体的な数値で書く。式や変数は書かない。
- 小数は3桁までで足りる。円弧・ベジェ曲線・多角形・テキスト・画像は使えない。
- 左右対称にしたいときは、中心 x を view.size / 2 にそろえて座標を鏡写しにする。

■ 例(三日月)
{"version":1,"view":{"size":100,"background":"#f2f0e9"},
"circles":[{"id":"moon","cx":50,"cy":50,"r":34},{"id":"cut","cx":64,"cy":40,"r":31}],
"lines":[],
"fills":[{"in":["moon"],"out":["cut"],"color":"#2b2b26"}]}

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

キーの一覧

場所キー意味
最上位version仕様の版。いまは 1。違う値なら注意書きを出して読める範囲で描く。
viewsize / background正方形の一辺(16〜4000。既定は 100)と背景色。none で背景なし。
guidecolor / width作図モードで補助線を引く色と太さ。ロゴモードには出ない。
circles[]id / cx / cy / r円の名前と中心・半径。r は 0 より大きい数値。
lines[]id / x1 / y1 / x2 / y2直線の名前と、その直線が通る2点。線分ではなく無限直線として扱う。
fills[]inこの円たちの内側(すべて満たす)。円の id の配列。
fills[]outこの円たちの外側(どれの内側でもない)。円の id の配列。
fills[]side直線の id → left / right。2点を結ぶ向きに対して画面上のどちら側か。
fills[]color / opacity塗りの色と不透明度(0〜1)。色の既定は #2b2b26

この仕様には「線を描く」命令がありません。円と直線はあくまで領域を切り分けるための補助線で、出力されるのは fills で選んだ面だけです。線状の形が欲しいときは、少しずらした2つの円や2本の直線で細い領域を作って塗ります。

使いかたの勘どころ

「左」がどちらか迷ったら

直線の left は、x1,y1 から x2,y2 へ歩いていくときの左手側です。画面のY軸が下向きなので、外積の符号は数学の座標系と反対になりますが、見た目は「進行方向の左」で合っています。たとえば {"x1":0,"y1":60,"x2":100,"y2":60} は右向きの直線なので、left は上側です。同じ直線を逆向きに書けば左右が入れ替わります。判断に迷ったら作図モードにして、leftright を入れ替えて見比べるのが早いです。

形をつなぐ(和集合)は fills を並べる

fills の1件が表せるのは「かつ(積)」と「除く(差)」だけです。2つの円を1つの塊にしたいときは、{"in":["a"]}{"in":["b"]} の2件を並べます。サンプルの「雲」は円3つと直線1本で、円ごとに1件ずつ、どれも同じ直線の上側という条件を付けています。逆に、ある面だけをへこませたいときは、その1件に out を足します。

切り欠きは円の交点の位置で決まる

円をいくつか並べて直線で底を切るとき、隣り合う円の交点が切り取り線より上にあると、そこだけ底が持ち上がって切り欠きになります。「雲」のサンプルでは、交点の y がおよそ72、切り取り線が71なので、底は一本の直線としてつながります。円を大きくするか、直線を下げるか、円を近づけるかのどれかで直せます。作図モードにすると交点の位置がそのまま見えます。

共有リンクの中身

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

よくある質問(FAQ)

なぜ円と直線だけでロゴを作るのですか?

円と直線は、中心・半径・2点の座標という少ない数値だけで決まります。その補助線が囲む領域から塗る場所を選ぶ形にすると、輪郭がすべて円弧か直線になり、拡大しても単色にしても崩れないロゴになります。線を1本動かすと、それに触れている面がまとめて変わるのも利点です。

書き出したSVGはそのまま使えますか?

使えます。塗りは clipPath の入れ子(積集合)と mask(差集合)で表しているので、中にラスタ画像を持たない純粋なベクターです。何倍に拡大しても輪郭が保たれ、色はSVGの fill を書き換えれば後から変えられます。PNGはブラウザのcanvasでその場でラスタライズしたものです。

作図モードとロゴモードは何が違いますか?

作図モードは円と直線を細線ですべて見せ、塗り面を薄く重ねます。どの補助線がどの面を作っているかを確かめるための表示です。ロゴモードは塗り面だけを描き、補助線を消します。切り替えは表示だけの違いで、どちらの状態もSVGとPNGで書き出せます。