コマ割り・画像・吹き出し・キャプション・効果音を YAML か JSON で書くと、その場で漫画ページになります。画像は URL かアップロードで指定できます
台本は手で書いてもよいのですが、下の仕様をそのまま AI に渡し、描きたい話の筋・登場人物・台詞を言葉で足すと、この仕様どおりの YAML が返ってきます。それを上の欄に貼れば描画されます。
あなたは「Manga Spec v1」という YAML 形式で漫画の台本を書きます。
出力はこの形式の YAML だけにしてください(説明文やコードフェンスは付けない)。
■ 全体の形(最上位のキー)
version: 1
page: # ページ全体(px)
width: 1200
height: 1700
background: "#ffffff"
margin: 48 # 外側の余白
gutter: 24 # コマとコマの間隔
order: rtl # コマを読む順。rtl = 右から左(日本の漫画)、ltr = 左から右
images: # 画像に名前を付ける(任意)。値は URL か、アップロードしたファイル名
hero: https://example.com/a.jpg
layout: # コマ割り。rows は上から順に「その行のコマ数」または「各コマの幅の比」
rows: [2, 1, [1, 2]] # 1行目は2コマ、2行目は1コマ、3行目は幅1:2の2コマ(比は読む順。rtl なら右から)
rowHeights: [1, 1.4, 1] # 行の高さの比(任意。省略すると等分)
panels: # コマの配列。layout のマスに読む順(rtl なら右上から)に入る
- image: hero # 画像。名前 / URL / アップロード名 / {src: …, fit: …}
bubbles: # 吹き出しの配列
- text: "おはよう!\n今日もいい天気だね"
x: 70 # 中心の位置(コマに対する %)
y: 25
tail: [40, 70] # 尻尾の先端(コマに対する %)。話者の口元を指す
captions: # ナレーション(黒地に白文字の枠)
- text: 翌朝
pos: top-left
sfx: # 効果音(縁取りつきの大きな文字)
- text: ドーン
x: 60
y: 70
rotate: -12
■ コマ(panels の各要素)
image 画像。文字列(URL / images の名前 / アップロード名)か、次のオブジェクト
src 画像の指定(必須)
fit cover(コマを埋める・既定)/ contain(全体を収める)/ fill(引き伸ばす)/ none(原寸)
scale 拡大率(既定 1)。cover で 1.3 にすると寄りになる
x, y 見せたい位置(%、既定 50)。cover で x: 0 は左端、100 は右端を見せる
offsetX, offsetY px のずらし
flipX, flipY true で左右/上下反転
opacity 0〜1
filter CSS filter(grayscale(1) / sepia(0.6) / contrast(1.3) など)
rotate 角度(度)
background コマの背景色(既定 #ffffff)
border 枠線。{width: 5, color: "#000"} か、数値(太さ)か、false(枠なし)
radius 角の丸み(px)
x, y, w, h 4つそろえて書くと layout のマスを使わず、ページ内側の % で自由配置になる
z 重なり順(大きいほど手前)
bubbles / captions / sfx 下記の配列
■ 吹き出し(bubbles の各要素)。文字列だけ書くと text とみなす
text 台詞(必須)。改行は \n または YAML の複数行
x, y 中心の位置(コマに対する %、既定 50)
w, h 大きさ(コマに対する %)。省略すると文字量から自動で決まる
shape round(楕円・既定)/ rect(角丸四角)/ burst(ギザギザ・叫び)/ thought(モクモク・心の声)/ cloud(雲)/ none(枠なし)
tail 尻尾。[x, y](先端のコマ内 %)/ 方向名(bottom-left, top, right など)/ none(既定)
thought は自動で小さな丸の尻尾になる
vertical true(縦書き)/ false(横書き)/ auto(既定。日本語なら縦書き)
font {size: 28, family: "…", weight: 700, style: normal, color: "#000"}
fill, stroke, strokeWidth 塗り・線の色・線の太さ(既定 白 / 黒 / 3)
padding 文字と枠の余白(px、既定 14)
lineHeight 行間(倍率、既定 1.35)
align left / center / right
maxWidth, maxHeight 自動サイズのときの上限(コマに対する %、既定 46 / 60)
rotate 角度(度)
opacity 0〜1
autoFit true(既定)なら w / h に収まらない文字を小さくする
keepInside true(既定)ならコマからはみ出す位置を内側へ寄せる
■ キャプション(captions の各要素)
text(必須)、pos(top-left / top / top-right / left / center / right / bottom-left / bottom / bottom-right)、
x, y(左上の %。pos より優先)、w(%)、font、color、fill(既定 #000)、stroke、strokeWidth、padding、lineHeight、align、maxWidth、rotate、opacity
■ 効果音(sfx の各要素)
text(必須)、x, y(中心の %、既定 50)、size(px、既定 90)、rotate(既定 -12)、color(既定 黒)、
stroke(縁取りの色、既定 白)、strokeWidth(既定 10)、font(family / weight / style)、letterSpacing、opacity、vertical
■ 既定値の一括変更(任意)
defaults:
panel: {border: {width: 6}, background: "#fff"}
bubble: {font: {size: 30}, vertical: true, tail: bottom-left}
caption: {fill: "#000", font: {size: 24, color: "#fff"}}
sfx: {size: 100, color: "#d00"}
image: {fit: cover, filter: grayscale(1)}
■ 複数ページ(任意)
pages:
- layout: {rows: [2, 1]}
panels: [ … ]
- layout: {rows: [1, 1]}
panels: [ … ]
■ 決まりごと
- コマの数は layout のマス数以下にする(自由配置のコマは数えない)。
- % は 0〜100 が基本。吹き出しの x, y は「中心」、キャプションの x, y は「左上」。
- 台詞は1つの吹き出しに 30 文字程度まで。長い台詞は吹き出しを分ける。
- 尻尾の先端は話者の口元の位置を指す。画像に話者が写っている場合はその位置に合わせる。
- 画像が無いコマは background に色を付け、captions や sfx で状況を説明してよい。
- 色は #rrggbb か色名。不明なキーは無視される(綴りに注意)。
■ 例(4コマ)
version: 1
page: {width: 800, height: 2000, margin: 40, gutter: 20}
layout: {rows: [1, 1, 1, 1]}
panels:
- background: "#e8f0fe"
captions: [{text: "起", pos: top-left}]
bubbles: [{text: "今日は漫画を作るぞ", x: 65, y: 40, tail: [30, 85]}]
- background: "#fff3e0"
captions: [{text: "承", pos: top-left}]
bubbles: [{text: "絵は…描けない", x: 35, y: 45, shape: thought, tail: [70, 85]}]
- background: "#fce4ec"
captions: [{text: "転", pos: top-left}]
bubbles: [{text: "写真と\n吹き出しで\nいいのでは?", x: 60, y: 40, shape: burst, tail: [30, 85]}]
sfx: [{text: "ピコーン", x: 25, y: 30, size: 60}]
- background: "#e8f5e9"
captions: [{text: "結", pos: top-left}]
bubbles: [{text: "完成", x: 50, y: 45, shape: rect}]
では、次の内容をこの形式の YAML にしてください。
内容:
| 場所 | キー | 意味 |
|---|---|---|
| 最上位 | version | 仕様の版。いまは 1。 |
| page | width / height / background / margin / gutter / order | ページの大きさ(200〜6000px)・背景色・外側の余白・コマの間隔・読む順(rtl 右から/ltr 左から)。既定は 1200×1700、余白 48、間隔 24、rtl。 |
| images | 任意の名前: URL | 画像に名前を付ける。値は URL、data:、アップロードしたファイル名のいずれか。 |
| layout | rows / rowHeights | コマ割り。rows: [2, 1](行ごとのコマ数)、rows: [[1, 2]](幅の比。読む順に並べる)、"2x3"(列×行)の3通り。省略するとコマ数ぶんの縦1列(4コマ向け)。 |
| panels[] | image / background / border / radius | コマの画像・背景色・枠線({width, color} か数値か false)・角丸。 |
| panels[] | x / y / w / h / z | 4つそろえるとページ内側の % で自由配置。z は重なり順。 |
| image | src / fit / scale / x / y / offsetX / offsetY / flipX / flipY / opacity / filter / rotate | 画像の出し方。fit は cover / contain / fill / none。x y は見せたい位置(%)。filter は CSS filter の文字列。 |
| bubbles[] | text / x / y / w / h / shape / tail / vertical | 台詞・中心位置(%)・大きさ(%、省略で自動)・形(round / rect / burst / thought / cloud / none)・尻尾([x, y] か方向名か none)・縦書き(true / false / auto)。 |
| bubbles[] | font / fill / stroke / strokeWidth / padding / lineHeight / align / maxWidth / maxHeight / rotate / opacity / autoFit / keepInside | 見た目の細かい指定。font は {size, family, weight, style, color}。 |
| captions[] | text / pos / x / y / w / font / fill / stroke / strokeWidth / padding / align / rotate | ナレーション枠。pos は top-left など9か所。x y は左上の %。 |
| sfx[] | text / x / y / size / rotate / color / stroke / strokeWidth / font / letterSpacing / vertical | 効果音。縁取り(stroke)つきの大きな文字。 |
| defaults | panel / image / bubble / caption / sfx | 各要素の既定値をまとめて変える。個々の要素の指定が優先。 |
| pages[] | page / layout / panels | 複数ページ。最上位の page と defaults は全ページに効く。 |
rows: [2, 1, 2] と書くと、上から「2コマ・1コマ・2コマ」の5コマになり、panels の要素が読む順(既定は右から左、上から下)にマスへ入ります。幅を変えたい行は [1, 2] のように比で書きます。行の高さは rowHeights で比を指定できます。マスより多いコマは描かれず、指摘が出ます。マスに縛られたくないコマは x / y / w / h の4つを % で書くと自由配置になり、z で重なり順を決められます。
既定の fit: cover はコマを画像で埋め、はみ出た分は切り取ります。どこを残すかが x と y(%)で、x: 0 なら左端、x: 100 なら右端が残ります。scale: 1.5 で寄りに、fit: contain で全体を収めます。同じ画像を複数のコマで使い、コマごとに x / y / scale を変えると、1枚の写真から「引き」と「寄り」のコマが作れます。
tail: [40, 70] のように、コマの中で話者の口があるあたりの座標(%)を書くと、そこへ向けて尻尾が伸びます。方向だけ決めたいときは tail: bottom-left のような方向名でも書けます。心の声は shape: thought にすると尻尾が小さな丸の連なりになります。叫びは burst、説明的な台詞は rect が向きます。日本語の台詞は自動で縦書きになり、vertical: false で横書きにできます。
YAML/JSON の構文が壊れている場合はその行を、仕様に合わない値の場合は panels[1].bubbles[0].x のような場所とおおよその行を示します。綴りの違うキーは無視して描きますが、黄色の注意として一覧に出るので気づけます。値の誤りが1つでもあれば描画せず、指摘だけを出します(半端な絵が正しい絵に見えるのを避けるためです)。
PNG はプレビューと同じ見た目をそのまま保存します(倍率を選べます)。SVG は吹き出しや文字を図形として保存するので、あとから Illustrator や Inkscape で台詞の位置や色を直せます。SVG の中では、アップロードした画像は埋め込まれ、URL の画像は URL のまま参照されます。フォントは表示側の環境に依存します。複数ページの台本は、ページごとに別ファイルとして保存されます。
いいえ。YAML/JSONの解釈、画像の読み込み、コマ割りと吹き出しの描画、PNG/SVGの書き出しまで、すべてお使いのブラウザ内で完結します。画像ファイルも台詞もサーバーへ送信・保存されません。
どちらでも同じ内容を書けます。手で書くなら引用符や波括弧が要らないYAMLが短く、プログラムやAIに書かせるならJSONが確実です。入力欄は先頭の文字で自動判別し、ボタン一つで相互に変換できます。
他のサイトの画像は、そのサーバーがCORSを許可していない場合、ブラウザの安全機構によりcanvasからの書き出しが禁止されます。画面上のプレビューには表示できても保存できません。その画像をいったん手元に保存し、このページにアップロードして画像名で指定すると書き出せます。
はい。ページ内の「AIに渡す仕様プロンプト」をコピーし、末尾に描きたい内容を書き足してAIに渡すと、この仕様に沿ったYAMLが返ってきます。それを入力欄に貼れば描画されます。仕様に合わない値があれば行番号つきで指摘されるので、その文面をAIに戻して直させることもできます。