← ハシトシステム トップ English ツール ブログ
台本(YAML または JSON)
サンプル:
画像(アップロード)
URL の画像は image: https://… でそのまま使えます。ただし相手サーバーが CORS を許可していない画像は、プレビューはできても PNG に書き出せません(その場合はアップロードしてください)。アップロードした画像はこのページを離れると消えます。
プレビューと書き出し
AIに渡す仕様プロンプト

台本は手で書いてもよいのですが、下の仕様をそのまま 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
pagewidth / height / background / margin / gutter / orderページの大きさ(200〜6000px)・背景色・外側の余白・コマの間隔・読む順(rtl 右から/ltr 左から)。既定は 1200×1700、余白 48、間隔 24、rtl
images任意の名前: URL画像に名前を付ける。値は URL、data:、アップロードしたファイル名のいずれか。
layoutrows / rowHeightsコマ割り。rows: [2, 1](行ごとのコマ数)、rows: [[1, 2]](幅の比。読む順に並べる)、"2x3"(列×行)の3通り。省略するとコマ数ぶんの縦1列(4コマ向け)。
panels[]image / background / border / radiusコマの画像・背景色・枠線({width, color} か数値か false)・角丸。
panels[]x / y / w / h / z4つそろえるとページ内側の % で自由配置。z は重なり順。
imagesrc / 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)つきの大きな文字。
defaultspanel / image / bubble / caption / sfx各要素の既定値をまとめて変える。個々の要素の指定が優先。
pages[]page / layout / panels複数ページ。最上位の pagedefaults は全ページに効く。

使いかたの勘どころ

コマ割りは layout.rows で決める

rows: [2, 1, 2] と書くと、上から「2コマ・1コマ・2コマ」の5コマになり、panels の要素が読む順(既定は右から左、上から下)にマスへ入ります。幅を変えたい行は [1, 2] のように比で書きます。行の高さは rowHeights で比を指定できます。マスより多いコマは描かれず、指摘が出ます。マスに縛られたくないコマは x / y / w / h の4つを % で書くと自由配置になり、z で重なり順を決められます。

画像の見せたい位置は fit・scale・x・y

既定の fit: cover はコマを画像で埋め、はみ出た分は切り取ります。どこを残すかが xy(%)で、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 の違い

PNG はプレビューと同じ見た目をそのまま保存します(倍率を選べます)。SVG は吹き出しや文字を図形として保存するので、あとから Illustrator や Inkscape で台詞の位置や色を直せます。SVG の中では、アップロードした画像は埋め込まれ、URL の画像は URL のまま参照されます。フォントは表示側の環境に依存します。複数ページの台本は、ページごとに別ファイルとして保存されます。

よくある質問(FAQ)

アップロードした画像や台詞はサーバーに送られますか?

いいえ。YAML/JSONの解釈、画像の読み込み、コマ割りと吹き出しの描画、PNG/SVGの書き出しまで、すべてお使いのブラウザ内で完結します。画像ファイルも台詞もサーバーへ送信・保存されません。

YAMLとJSONのどちらで書けばよいですか?

どちらでも同じ内容を書けます。手で書くなら引用符や波括弧が要らないYAMLが短く、プログラムやAIに書かせるならJSONが確実です。入力欄は先頭の文字で自動判別し、ボタン一つで相互に変換できます。

URLで指定した画像がPNGに書き出せないのはなぜですか?

他のサイトの画像は、そのサーバーがCORSを許可していない場合、ブラウザの安全機構によりcanvasからの書き出しが禁止されます。画面上のプレビューには表示できても保存できません。その画像をいったん手元に保存し、このページにアップロードして画像名で指定すると書き出せます。

AIに台本を書かせることはできますか?

はい。ページ内の「AIに渡す仕様プロンプト」をコピーし、末尾に描きたい内容を書き足してAIに渡すと、この仕様に沿ったYAMLが返ってきます。それを入力欄に貼れば描画されます。仕様に合わない値があれば行番号つきで指摘されるので、その文面をAIに戻して直させることもできます。