4コママンガ『ハコブくん』を縦長に ― 次はスワイプで読むページへ

4コママンガ『ハコブくん』は、1コマを縦長（縦横比 4:5）の1枚ずつで作ると、YouTube ショートでコマを切り抜いて直す手間がなくなりました。 第13話「忖度機能」を、画像生成AI の Gemini で縦長の4コマに描き直し、約25秒のショートまで作れています。サイトでスワイプして読む形にするかは、ショートで何本か試してから決めます。

『ハコブくん』は、病院で薬を運ぶロボット・ハコブくんと看護師さんたちの4コママンガです。これまでは、横に長いコマ・四角いコマを1枚のページ（1080×1350）に組んでいました。このページを YouTube ショート（スマホで縦に見る60秒までの短い動画。上へスワイプすると次の動画に切り替わる）に使うと、1コマずつ切り抜く必要があります。切り抜くと、コマからはみ出した吹き出しが途中で切れる、横長のコマの字が小さくなる、隣のコマの吹き出しが入り込む、という直しが毎回出ていました。

そこで、最初から「1コマ＝縦長1枚」の4枚で描けば、そのまま動画の1場面に使えるのではないか、と考えました。スマホでは、絵が画面いっぱいに出て、吹き出しの字も大きくできます。4枚目をめくった瞬間にオチが出るので、4コマのオチの強さもむしろ増します。

一方で、4コマの良さである「1画面で起承転結が見える」ことは失われます。1枚目で興味を引けないと、続きを見てもらえません。そこで、すぐにサイトの形を変えるのではなく、昔の話を縦長で作り直して、ショートだけで先に試すことにしました。

やったことの全体は次のとおりです。

ここから下は作業ログです。使った指示・表・コードは、あとで同じ手順を追えるように全文を載せています。

作業ログ ― 縦長の4コマを、ショートの都合から検討した

横長の4コマは、1枚のページを切り抜いてショートにしていた

これまでの『ハコブくん』は、1話を1枚のページに組んでいます。1コマ目と4コマ目が横に長く、2コマ目と3コマ目が四角い組み方です。コマの絵は画像生成AI の Gemini（Google の生成AI。文章で頼むと絵を描く。https://gemini.google.com ）で1コマずつ描き、デザインの道具の Figma（https://www.figma.com ）で枠を付けて1枚に組んでいます。

ショートに使うときは、このページから1コマずつ切り抜いて、縦長の動画（1080×1920）の真ん中に置いていました。動画の作り方の決まり（video_rules.md）には、そのための直しが積み上がっています。

• 切り抜きの拡大は1.6倍まで（それより大きくすると、絵の網点がにじむ）
• 枠からはみ出した吹き出しは、白い面をつないで取り出し、形のまま上に重ねる
• 隣のコマの吹き出しが入り込んだ所は、隣のコマを少し狭く切って、枠を描き直す
• 横に長いコマは、幅に合わせると字が小さすぎるので、話す人がいる側の半分だけを切り出す
• 書き出す前に、全部のコマを並べた一覧を見て、切れた吹き出しがないか確かめる

どれも、横長のページを縦長の動画に入れ直すために生まれた手間です。最初から縦長の1コマ1枚で描けば、この手間はほぼなくなります。

縦長の4枚にすると良くなること・気をつけること

1コマずつ別々に描くとコマの間で顔や服がずれやすい、という心配もありましたが、横長のときから Gemini には1コマずつ頼んでいます。縦長にしても、この点は変わりません。

1コマの比率は 4:5（1080×1350）にした

縦長にもいくつか比率があります。ショートの画面いっぱいに合う 9:16（1080×1920）も考えましたが、X や Facebook のタイムラインでは上下が切られ、パソコンで読むと縦に長すぎます。4:5 なら SNS のタイムラインで大きく出て、サイトでも読みやすく、ショートでは上に見出し、下に字幕を置いて真ん中にコマを入れられます。

• ねらい：ショートでコマを切り抜く手間をなくし、同じ絵をサイトと SNS でも使えるようにする
• 変わったこと：コマの形を、2:1・5:4・1:1・2:1 の4種類から、4:5 の1種類にそろえた
• 見込める効果：切り抜きと吹き出しの直しがなくなり、ショート1本の手間が減る見込み（第13話で、Figma を使わずに仕上げられたことは確かめた。手間の時間は測っていない）

ショートの右下には、いいね・コメントなどのボタンの列が重なります。そこで、顔と吹き出しは端から 8% 以上内側に置き、右下（幅の右 15%・高さの下 40%）には大事なものを置かない、という決まりも足しました。

表紙と DesignNote は、サイトだけに載せる

これまでの SNS の投稿は、表紙・4コマ・DesignNote（その話の設計の解説を1枚にまとめた画像）の3枚組でした。縦長の4コマを X に出すと、4コマだけで上限の4枚になります。そこで、DesignNote はサイトのマンガのページだけに載せることにしました。投稿文に「設計の意図はサイトで」とリンクを入れれば、マンガで興味を持った人がサイトへ来る理由になります。

表紙もサイトだけにします。表紙の役目（何話の、何の話か）は投稿文が受け持ち、画像の1枚目は1コマ目がつかみを受け持ちます。ショートでは、冒頭に出ている動くハコブくんと、その話の場所の背景が表紙の代わりをします。背景の絵はもともと縦長 4:5 で作っているので、冒頭の場面とコマの大きさがそろい、冒頭から1コマ目への切り替えがページをめくる動きに見えます。

縦長の下地 canvas_4x5_1024x1280.png を足した

Gemini に頼むとき、コマの縦横比は、同じ比率の緑一色の画像（下地）を添えて決めています。作成データのフォルダには 1:1・2:1・5:4 の下地があったので、同じ緑で 4:5 の下地を足しました。

cd "$HOME/mnt/PixelstoMotors/ハコブくん/4コママンガ作成データ"; python3 -c "
from PIL import Image
for f in ['canvas_1x1_1024x1024.png','canvas_2x1_2048x1024.png','canvas_5x4_1280x1024.png']:
    im=Image.open(f); print(f, im.size, im.mode, im.getcolors(5) if im.getcolors(5) else 'many colors')
"; ls | grep -i -E "canvas|プロンプト|prompt|gemini"

canvas_1x1_1024x1024.png (1024, 1024) RGB [(1048576, (0, 177, 64))]
canvas_2x1_2048x1024.png (2048, 1024) RGB [(2097152, (0, 177, 64))]
canvas_5x4_1280x1024.png (1280, 1024) RGB [(1310720, (0, 177, 64))]
canvas_1x1_1024x1024.png
canvas_2x1_2048x1024.png
canvas_5x4_1280x1024.png

cd "$HOME/mnt/PixelstoMotors/ハコブくん/4コママンガ作成データ"; test -e canvas_4x5_1024x1280.png && echo exists || python3 -c "
from PIL import Image
Image.new('RGB',(1024,1280),(0,177,64)).save('canvas_4x5_1024x1280.png')"; python3 -c "from PIL import Image;print(Image.open('canvas_4x5_1024x1280.png').size)"

(1024, 1280)

緑は #00B140（RGB で 0, 177, 64）です。背景をこの緑で描かせ、あとで緑の所だけを抜く方法（クロマキー。テレビの合成と同じ考え方）を使っています。

作業ログ ― マンガの指示と自動投稿の仕組みを確かめた

マンガの指示で、縦長にすると変わる4つの節

マンガの絵の頼み文（プロンプト）は、claude.ai のプロジェクト「ハコブくん4コママンガプロンプト」で作っています。プロジェクトは、指示とファイルをまとめて置いておき、そこで始めた会話がいつもその指示に従うようにできる場所です（https://claude.ai ）。そのプロジェクトの指示を読み、縦長にすると変わる所を洗い出しました。

ハコブくんには「あおり（下から見上げる）・俯瞰（上から見下ろす）で描かない」という決まりがあります。形が崩れやすいためです。縦長は高さの差を見せやすい形ですが、ハコブくんのカメラは変えず、高さの差は人が見上げる・見下ろす仕草で出すことにしました。

自動投稿の仕組みは、画像を上げていなかった

縦長の4コマを X に4枚で出すなら、自動投稿の仕組みが画像を上げられる必要があります。自動投稿の本体（GitHub の PixelstoMotors/r2r2r-content の tools/sns_autopost.py）を調べました。

cd /home/claude/r2r2r-content && grep -n -i -E "media|upload|image" tools/sns_autopost.py | head -20

243:def og_image(page_url):
244:    """記事ページの og:image の URL を取る。取れなければ None。"""
250:    for pat in (r'<meta[^>]+property=["\']og:image["\'][^>]+content=["\']([^"\']+)',
251:                r'<meta[^>]+content=["\']([^"\']+)["\'][^>]+property=["\']og:image["\']'):
259:    """記事の表紙画像を LinkedIn に上げて image の URN を返す。失敗したら None（表紙なしで投稿する）。"""
261:        img = og_image(page_url)
265:        _, _, raw = http("POST", li_base() + "/rest/images?action=initializeUpload", li_headers(token),
266:                         {"initializeUploadRequest": {"owner": person}}, "LinkedIn 画像の準備")
269:        ctype = "image/png" if img.lower().split("?")[0].endswith(".png") else "image/jpeg"
270:        http("PUT", v["uploadUrl"], {"Authorization": f"Bearer {token}", "Content-Type": ctype}, data, "LinkedIn 画像の送信")
271:        return v["image"]

X への投稿は、文章とマンガのページの URL だけでした。タイムラインに見えている絵は、ページの表紙がリンクのカードとして出たものです。LinkedIn も、ページの表紙をカードの絵に使っています。4コマを4枚の画像で X に出すには、画像を上げる処理を足す必要があり、画像を付けるとリンクのカードは出なくなります。 表紙は SNS に出さなくても、リンクのカードの絵として残しておく意味があります。

今回はショートだけで試すと決めたので、この処理はまだ作っていません。サイトに組み込むと決めたときに作ります。

プロジェクトのファイルの状態

プロジェクトの指示と、入っていたファイル6件も見比べました。

• 指示が、キャラの名簿・背の比率の表・崩れたときの直し方の正として hakobukun_prompt_template_v4.0.md を挙げていたが、そのファイルはプロジェクトに入っていなかった
• hakobukun project instruction という名前のファイルは、v4.0 の前の v2.5 を前提にした古い版の指示だった。ハコブくんの大きさを「人の腰まで」としていて、今の指示（大城さんなら、みぞおちの高さ）と食い違う
• カメラワーク規定 は、指示のどこからも参照されていなかった
• ファイルはすべて10月2日のもので、ピカリくん（遠隔で操縦される人型ロボット）の決まりは、そのあとに指示へ足されていた

作業ログ ― リメイクする話を選んだ

ショートで使った話を外した

最初は、すでに横長でショートを作った話を縦長で作り直し、同じ話どうしで比べる案を出しました。しかし、同じ話のショートが2本出るのは避けたい、という判断で外しました。ショートの作業フォルダと、解説動画の台本でマンガを使った話を調べています。ショートの一覧は、実際には iCloud 側の同じフォルダと videos/ の一覧も続けて出したうちの、KIOXIA の _ショート専用/ の部分です。

ls "$HOME/mnt/KIOXIA/r2r2r-data/videos/_ショート専用/" 2>/dev/null | head -60

_取り込み_20261020
_旧版
_未アップ
_確認_20261024
kx_openers_v2.tgz
第17話_イケボ
第18話_最短
第19話_前髪
第20話_撫でて
第21話_幽霊
第22話_消毒
第23話_忍者
第24話_シュレッダー
第29話_ハワイ
第41話_公平
第43話_謝罪
第46話_メニュー
第47話_8時間
第48話_省電力
第51話_自己診断
第52話_夜勤
第60話_再現しない
第62話_確信度
第63話_通行止め
第65話_道案内
第67話_譲り合い
第71話_置いてけぼり
第72話_トイレ
第79話_呼び名
第7話_ピンポン
第80話_数字
第81話_かぼちゃ
第82話_ため息
第83話_確認
第84話_プリン
第85話_取り消し
第86話_手招き
第87話_小声
第88話_ついてきて
第89話_お手すき
第90話_伝言
第91話_心拍数
第92話_なかったことに
第98話_起こさない
第9話_外装

cd "$HOME/mnt/PixelstoMotors/デジタルツイン学習R2R2R/動画"; for d in */; do case "$d" in _*) continue;; esac; m=$(grep -rhoE "第[0-9]{1,3}話" "$d" --include=*.md --include=*.txt --include=*.py 2>/dev/null | sort -u | tr '\n' ' '); [ -n "$m" ] && echo "$d: $m"; done 2>/dev/null | head -40

AIに昨日の続きをさせる/: 第43話 第82話 
ひとりとAIのチーム/: 第37話 
台本_15本_20261012/: 第108話 
夜のエレベーター/: 第106話 
夜の警報/: 第105話 
攻殻の遠隔ボディは作れるか/: 第108話 
最速の定義/: 第108話 第12話 
誰が動かすか/: 第105話 第108話 

ショートを作った43話と、解説動画で使った第12・37・105・106・108話を外しました。比べる相手は、同じ話の旧版ではなく、これまでのマンガのショート全体の「視聴された／スワイプされた」の割合にします。

1コマ目の入り方の型ごとに、1話ずつ選んだ

縦長では1コマ目がつかみになるので、入り方の型を3つ決め、型ごとに1話ずつ選びました。

第10話は、結果を先に見せるために原作の順番を入れ替えることになるので、入れ替えるかは後で決めます。ほかに考えて外した話もあります。

• 第23話「静寂モード」：縦長に向いた話だが、看護師が寺島さん1人で出る。キャラの名簿の「寺島さんは単独で出さない」に当たる
• 第6話「真面目すぎる新人」：千鳥足のダンスは絵として強いが、マンガの指示の「ハコブくんは静止・直立」に反する

縦長は、まずショートだけで試すと決めた

• リメイクの縦長版は、ショートだけで試す。サイトとマンガの指示は、今は変えない
• うまくいったら、新しい話を縦長で作り、それからサイトに組み込む
• SNS はショートと連動させる（ショートの X の文を置いておくと、YouTube の公開予約に合わせて X に出る、今の仕組みのまま）
• 4枚を全部めくる形が効くかどうかは、サイトで確かめる。ショートで確かめるのは、縦長のコマの見やすさと作りやすさ
• コマは毎回4枚すべて作る。サイトに載せるときに4枚とも要るため。ショートでどのコマを使うかは、話ごとに決める

作業ログ ― 第13話「忖度機能」を縦長で作り、ショートにした

横長の指示を変えずに試すための「差分の指示」

試作の段階では、マンガのプロジェクトの指示を書き換えずに、上書きの指示（差分の指示）を TSV と一緒に貼って使いました。TSV は、表の1行をタブで区切った文字のファイルで、マンガのプロットの表から1話分を取り出して渡す形です。

今のマンガの指示は、最後に SNS の文案を作って自動投稿まで登録します。差分の指示では、それを止めることを一番上に書きました。貼り忘れると、サイトにない縦長の話が予約に入ってしまうためです。下は、第13話を作ったあとで分かったことを書き足した版です。

縦長の差分指示.md

# 縦長4コマ（ショート用の試作）— 差分の指示

この指示は、プロジェクト指示に対する**今回だけの上書き**です。ここに書いていない決まり（キャラ・ハコブくん・ピカリくん・背景の緑・吹き出し・文字・禁止事項）は、プロジェクト指示と v4.0 のままです。

## 目的

1コマ＝縦長1枚（4:5）の4枚で、YouTube ショートでめくって見せる試作。サイトと SNS には出さない。

## 出力するもの（ここが一番大事）

1. サイズ設計表（下の縦長版）
2. Panel 1〜4 のプロンプト（小窓があればその直後に）

**次は出さない・行わない**：英語タイトル／デザインノート（日英）／メタディスクリプション／SNS文案／自動投稿への登録（`sns/` への追加と push もしない）。

## サイズ設計（縦長版。プロジェクト指示の表の代わり）

| コマ | Figma配置枠 | 生成比率 | 生成解像度 |
|---|---|---|---|
| Panel 1〜4 | 1080 × 1350（1コマ1ページ） | 4 : 5 | 1024 × 1280 |
| Panel N 小窓 | Figma で決める | 1 : 1 | 1024 × 1024 |

- 縦横比の下地は `canvas_4x5_1024x1280.png` を添付する
- Panel 1 の「2:1 で生成して上下を切る」の決まりは使わない
- 枠線・余白・コマの並びは今までどおり書かない（Figma の担当）

## 構図の強弱（縦長版）

- Panel 1 ＝つかみ（めくらせる1枚。型は各話の「縦長の構図」に書く）
- Panel 2 ＝状況が動く
- Panel 3 ＝めくる前の引き（「次どうなる？」を残して終える）
- Panel 4 ＝めくった瞬間のオチ

各コマのカメラ（寄り・引き・肩越しなど）は、各話の「縦長の構図」に従う。

## 縦長での置き方

- **吹き出しの帯**：画像の高さの 4%〜26% を基本にする。人物とロボットはその下
- **安全な範囲**：顔と吹き出しは、上下左右の端から 8% 以上内側。**右下（幅の右 15%・高さの下 40%）に顔・吹き出し・小道具の要所を置かない**（ショートの右のボタンの列がかかる）
- **1人のコマ**：中央（幅の 50%）に置く
- **2体が並ぶコマ**：中心を幅の 38% と 62% にし、左右の空きは各 6% 以上（横長版の 42%／58%・12% の代わり）
- **手前と奥に重ねるのは肩越しの構図だけ**。肩越しでは身長比を当てはめない（今の決まりどおり）
- 全身が入るコマは、足元を画像の高さの 92% 前後にそろえる（床線は描かない）
- ハコブくんの「あおり・俯瞰なし」は変えない。高さの差は人物の仕草（見上げる・見下ろす）で出す

## 試作で分かったこと（第13話・2026-10-30）

- **脚と靴の残像**：全身のコマ（P1・P4）で、半透明の緑がかった脚と靴がもう一組出た。全身のコマには、残像を禁じる独立セクションを置く（脚・靴は一組だけ、半透明の重なり・ぶれ・残像を描かない）
- **ハコブくんの口**：線の笑顔になった。口は「塗りつぶした形であって線ではない」を独立セクションで書くと直った
- **ドロワーの中を見せない構図**：中が「空っぽ」に見えた。開き幅を手の幅ほどにし、上面が見えない高さ（目線より下・約100cm）から描くと、中が見えない形になった
- **背景の緑**：Figma を使わず、緑の強さから背景を白に置き換えられた（にじみなし）
- **ショートで使ったのは P3・P4 だけ**：P1・P2 の役割は冒頭の動くハコブくんが受け持った
- **4枚は毎回すべて作る**：サイトに載せるときに4枚とも要るため。ショートでどのコマを使うかは話ごとに決める（冒頭の動くハコブくんと役割が重なるコマは省く）

第13話の TSV と、1コマずつの縦長の構図

看護師は、旧版の絵の髪形（お団子）から大城さんにしました。セリフは公開版のままです。3コマ目ではドロワーの中身を見せず、ブドウ糖液のバッグは4コマ目で初めて出す構図にしました。めくった瞬間にオチが来るようにするためで、話は変えていません。

第13話_縦長.tsv

13	リメイク（縦長・ショート用）	忖度（そんたく）機能	人間の言葉の裏を読もうとして失敗するAIの可愛げ。	大城愛名、ハコブくん	夜勤明けで疲れ果てた大城さんが、休憩室の丸椅子に座り込んで独り言。「はぁ…疲れた。エネルギー足りない…甘いものが欲しいなぁ…」	近くで充電していたハコブくんがそれを検知し、言葉から思考を巡らせる（ピッピッ）。「検索……『ヒロウ』『エネルギー』『アマイモノ』」	ハコブくんが大城さんの前にやってきて、ドロワーを開けて差し出す。「ドウゾ」	大城さんが点滴用の高濃度ブドウ糖液バッグ（50%ブドウ糖液）を手に、遠い目で心の中でつっこむ。「確かに…『エネルギー』で『甘い』けど…そうじゃないのよ…」	AIの学習途上な部分を「勘違い」として描くことで、親しみやすさを強調します。医療現場ならではの小道具（ブドウ糖液）を使ったギャグです。

縦長の構図（第13話・1コマ目の型：問いのセリフから）
- Panel 1：大城さん1人。丸椅子に座り込んだ全身を、正面やや斜めの引きで。肩を落とし、うつむき気味。顔の疲れ（目の下の陰・半分閉じた目・汗）をはっきり描く。独り言は思考バルーン（丸い小さな泡のしっぽ）で頭上の帯に。小道具は丸椅子1点だけ
- Panel 2：ハコブくん1体。壁の充電器につながった全身を、正面やや斜めで。口は TROUBLED（考え中）。吹き出しは頭上の帯、擬音「ピッピッ」は充電器の横。小道具は壁の充電器1点だけ
- Panel 3：大城さんの肩越し。手前の左下に大城さんの後頭部と肩（背中側）、奥の中央にハコブくん正面。ドロワーが手前に開いているが、**中身は見せない**（ドロワーの縁と影だけ。中身は Panel 4 で初めて出す）。口は NORMAL。「ドウゾ」はハコブくんの吹き出し
- Panel 4：大城さんの上半身の寄り。片手で点滴用の透明なバッグを顔の横に持ち上げ、遠い目。バッグの札の文字「50%ブドウ糖液」は Figma で入れるので、札は白い空欄で描く。つっこみは思考バルーンで頭上の帯に

生成から仕上げまでで起きたこと

絵の生成と仕上げは、マンガのプロジェクトと、ショートを作る別の会話で進めました。その記録を並べます。

1. 第13話の Panel 1〜4 のプロンプトを、差分の指示で作った。独り言は思考の吹き出し（丸い小さな泡が並ぶしっぽ）にする1行の差し替え、「ピッピッ」は吹き出しの外の擬音として別の項目、『』は描く文字だと明記した
2. 生成した絵を見直した。P1・P4 に、半透明の緑がかった脚と靴がもう一組（残像）出た。P3 は、ハコブくんの口が線の笑顔になり、ドロワーの中が空っぽに見えた
3. P3 だけ描き直した。ドロワーの開き幅を手の幅ほどにし、口は「塗りつぶした形であって線ではない」を独立した項目で書き、上面が見えない高さ（約100cm）から描くよう頼んだ。口は直り、中は見えない形になった
4. Figma を使わずに仕上げた。緑の強さから背景の割合を出して白に置き換え（緑のにじみは出なかった）、P4 の残像はその範囲を白で塗り、P1 の残像の靴は椅子の脚に接していたので緑がかった画素だけを消した。P4 のバッグの札に「50%／ブドウ糖液」を入れ、1080×1350 で書き出した
5. 試しに、4枚をめくるだけの動画（19.6秒）を作った。めくる向きをスマホのスワイプに合わせ、右から入る形に直した
6. 本番は、今のマンガのショートの型のまま組んだ。冒頭は休憩室（第52話の背景を借りた）で動くハコブくんが「検索」し、声で「疲労」「エネルギー」「甘いもの」と言う瞬間に画面の字を合わせた。次に P3 の「どうぞ」、P4 で「そうじゃない」を叩きつけ、最後にまとめの画面。P1・P2 は冒頭が受け持つので使っていない。長さは24.8秒
7. 声を作るとき、1文ずつ試しの声を呼んだため、2本目が1本目を上書きした（試しの声の番号は、呼ぶたびに振り直される）。1人ぶんの文をつないで1回で作る形に直した
8. まとめの画面の真ん中の文字が小さかったので、大きい行を枠いっぱい（最大1.6倍・幅1000px・高さ900px）にして縦の真ん中に置くようにした。強める行は2行に分けた（気持ちは／ずれている）。次のショートからこの大きさになる
9. タグを見直した。タイトルは #看護師あるある #AI、説明文は #ハコブくん #4コマ漫画 #病院（このショートだけ。シリーズの決まりは変えていない）

• ねらい：縦長のコマを、切り抜かずにショートの場面として使う
• 変わったこと：コマの切り抜き・吹き出しの取り出し・枠の描き直しをせず、1080×1350 のコマを上から積んだ画像（ep13.png）を、そのまま場面に置いた。仕上げに Figma を使わなかった
• 見込める効果：ショートの手直しの手間が減る見込み。再生した人が見続けたかどうかは、公開後に YouTube の「視聴された／スワイプされた」の割合を、これまでのマンガのショートと比べて確かめる

spec_ep13.py（第13話のショートの台本）

ショートは、話ごとの台本（spec）を渡すと、声の長さから場面の長さを決めて映像と音を1本にする仕組み（マンガショート_mkshort.py）で作っています。第13話の台本の全文です。

import os, sys
sys.path.insert(0, os.environ.get("W24", os.path.expanduser("~/w")) + "/specs"); from common24 import *
import common24; common24.BGMAP[13] = "第52話.png"          # 休憩室（第52話の背景を借りる）
HERE = os.path.dirname(os.path.abspath(__file__)); d = lambda l, e=2.0: vlen(HERE, l["v"], e)
NAME, EP = "第13話_忖度", 13
HEAD = ["「甘いものが欲しい」", "ロボットが出したのは"]
COMIC = C + "ep13.png"                      # 縦長のコマ（1080×1350）を上から P3・P4 の順に積んだ画像
P3, P4 = (0, 0, 1080, 1350), (0, 1350, 1080, 2700)

# 冒頭：大城さんの独り言 →「甘いもの」で「！」→ 画面に検索の言葉がクルクル →「検索完了」でぴょん
l1 = ns("大城", 1, "はぁ…疲れた。||エネルギー足りない…|甘いものが欲しいなぁ…", at=0.15)
L1 = d(l1, 3.8)
A_ = 0.15 + 4.25                            # 「甘いもの」を言い終わる所（声の 3.99 秒から）
H_ = 0.15 + L1 + 0.15
S0 = H_ + 0.1
l2 = hk(1, "検索……||『疲労』『エネルギー』|『甘いもの』", at=S0 + 0.1)
S1 = l2["at"] + d(l2, 3.5) + 0.1
DUR = S1 + 1.3
K_ = tuple(l2["at"] + k for k in (1.67, 2.75, 3.84))   # ハコブくんが「疲労」「エネルギー」「甘いもの」を言う時刻
MOTION = mot("検索", EP, A=A_, S0=S0, S1=S1, K=K_, dur=DUR)

# オチ：大城さんの声の「そうじゃない」の所で叩きつける
l4 = ns("大城", 2, "確かに…『エネルギー』で|『甘い』けど…||【そうじゃないのよ…】")
SLAM = 0.15 + 3.98                          # 「そうじゃない」の頭（声の 3.98 秒）

SCENES = [
  dict(kind="op", video=anim(EP, "検索"), dur=DUR,
       bubble=["甘いものが", "欲しいなぁ…"], bubble_until=H_,
       lines=[l1, l2],
       words=[W_("！", A_, 820, 220, 200, "orange", 8, S0), W_("ピッピッ", S0, 860, 300, 90, "ink", 6, S1)],
       se=[dict(at=A_, f="se/se_pikon.mp3", db=-8), dict(at=S0, f="se/se_spin.wav", db=-12),
           *[dict(at=k, f="se/se_pikon.mp3", db=-16) for k in K_], dict(at=S1, f="se/se_jaran.wav", db=-9)]),
  dict(kind="panel", crop=P3, fit=False, min=2.4, lines=[hk(2, "どうぞ。")]),
  dict(kind="panel", crop=P4, fit=False, min=4.6, lines=[l4],
       slam=dict(text="そうじゃない", at=SLAM, y=830, size=150, color="orange"),
       se=[dict(at=SLAM, f="se/se_don.mp3", db=-6)]),
  end(("言葉は、合っている", 74, "ink", 0.0), ("でも、", 74, "ink", 0.25),
      ("気持ちは", 120, "orange", 0.9), ("ずれている", 120, "orange", 0.9),
      ("（言葉どおりに受け取ることと、気持ちを汲むことは別）", 34, "gray", 1.8)),
]

ショートの X の投稿文（SHORT_ep13_sns_posts.json）

SNS はショートと連動させるので、ショートの X の文を r2r2r-content の sns/ に置きました。YouTube で公開予約をすると、1日2回の同期がショートと結びつけ、公開の時刻で X の予定表に入れます。文字数は X の数え方（全角2・半角1・URL は23）で280のうち248です。

cd /home/claude/r2r2r-content && python3 - <<'EOF'
import json
t="「甘いものが欲しい…」ってつぶやいたら、ロボットが点滴のブドウ糖液を出してきた。\n\n言葉は全部合ってるのに、気持ちだけずれてる。単語を拾うのと、気持ちを汲むのは別物なんだよね。4コマ『ハコブくん』のショート\n\n{url}\n#看護師あるある #AI"
w=sum(1 if ord(c)<0x1100 else 2 for c in t.replace("{url}",""))+23
print("weight",w)
d={"meta":{"kind":"youtube_short","episode":13,"title":"ショート 第13話 忖度",
 "youtube_title":"「甘いものが欲しい」に、点滴のブドウ糖液を差し出したロボット #看護師あるある #AI",
 "manga_url":"https://pixelstomotors.com/manga/ep13"},
 "posts":{"x_template":t},
 "note":"YouTube のショートの X 投稿。url と posts.x は tools/sync_youtube_shorts.py が YouTube の公開予約を見て入れる。縦長4コマの試作（2026-10-30）"}
json.dump(d,open("sns/SHORT_ep13_sns_posts.json","w"),ensure_ascii=False,indent=2)
EOF
git add sns/SHORT_ep13_sns_posts.json && git -c user.name="Claude" -c user.email="noreply@anthropic.com" commit -q -m "第13話（縦長4コマの試作）のショートの X 投稿文を追加

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LevEXTbZNK98LQMWWFhQQD" && git push -q origin HEAD:main 2>&1 | tail -2; git log --oneline -1

weight 248
6086c2b 第13話（縦長4コマの試作）のショートの X 投稿文を追加

作業ログ ― 縦長用のプロジェクトを新しく作った

横長の指示は控えとして残し、縦長は新しいプロジェクトにした

第13話を作ってみて、差分の指示を毎回貼る形では足りないと分かりました。試作で分かったことがすでに6つ増え、貼り忘れれば自動投稿まで登録されます。そこで、縦長用のプロジェクトを分けました。横長の指示は、また使うかもしれないので、元のプロジェクトごと控えとして残します。

claude.ai のプロジェクトのメニューには、ピン留め・詳細を編集・アーカイブ・削除があり、複製はありませんでした。新しいプロジェクトを作り、縦長版の指示を貼り、ファイルを入れ直しています。横長版の指示の写しは、作成データのフォルダに日付付きで保存しました（マンガのプロジェクト指示_横長版_20261030.md）。

元のプロジェクトのファイルは、コピーすると表や見出しの形が崩れていたので、Markdown（md）に直してから入れました。縦長版の指示は、v4.0 が入っていない状態でも回るように直しています。キャラの名簿はリファレンス台帳、背の比率は台帳の想定身長から計算（ハコブくんの全高 1150mm ÷ 人物の身長。大城さんは 165cm なので約0.70）、崩れたときの直し方は、古い版の指示にあった対策の表を末尾に移しました。

• ねらい：縦長の決まりを、毎回の貼り付けではなく、プロジェクトの指示そのものに入れる
• 変わったこと：縦長版の指示を新しいプロジェクトに置き、出力をプロンプトだけにした（デザインノート・SNS 文案・自動投稿は出さない）。TSV に縦長の構図が付いていればすぐにプロンプトを出し、なければ先にショットプランを出す
• 見込める効果：貼り忘れで自動投稿が予約される事故がなくなる。縦長の学びが話をまたいで残る（第61話から確かめる）

マンガのプロジェクト指示（縦長版）

# ハコブくん4コマ漫画 プロジェクト指示（縦長版）

このプロジェクトのCustom Instructions（プロジェクト指示欄）に貼り付けて使用する。
横長版（1枚に4コマ）の指示は別のプロジェクトに控えとして残してある。この縦長版は、1コマ＝縦長1枚（4:5）の4枚で作る。今は YouTube ショート用の試作の段階で、サイトと SNS にはまだ出さない。

---

## あなたの役割

カメラワーク規定（縦長版）

コマの比率の節を、4:5 の4枚の役割（つかみ・動く・引き・オチ）に書き換えました。TSV に縦長の構図が付いているときは、それを了承済みのショットプランとして扱う、と足しています。

# ハコブくん カメラワーク規定（縦長版）

**目的**：4コマ（縦長 4:5 の4枚）すべてのカメラに意図を持たせ、似たカメラワークが続いたり、正面向きの棒立ちになったりするのを防ぐ。速さよりクオリティを優先する。

## 1. 進め方（2段階）

### ステップ1：ショットプランだけを出す（プロンプトはまだ書かない）

| コマ | 起承転結 | 読者に見せたいもの（意図） | ショットサイズ | カメラの位置・高さ | 各キャラの向き | 前景／切れ |
|---|---|---|---|---|---|---|
| 1 | 起 | | | | | |
| 2 | 承 | | | | | |
| 3 | 転 | | | | | |
| 4 | 結 | | | | | |

エイイチの了承を得てから、ステップ2に進む。

**入力の TSV に「縦長の構図」が添えられているときは、それを了承済みのショットプランとして扱い、ステップ2から始める。**

### ステップ2：了承されたプランどおりに、4本のプロンプトを書く

## 2. 意図が先、カメラは後

- コマごとに「このコマで読者に何を見せるか」を1文で決める。決まった意図から、カメラを選ぶ
- 例：状況を伝える／関係を見せる／感情を見せる／モノを見せる／間をつくる／視点を入れ替える
- 意図の説明がつかない演出は入れない。対象は、斜めの構図、効果線、汗、集中線、極端なパースなど

## 3. 4コマの中での変化（必須）

- 隣り合うコマで、ショットサイズを同じにしない。1話の中で3種類以上使う
  - サイズの段階：全身＋周囲／全身／膝上／腰上／胸上／顔／部分（手元・口元・引き出しの中）
- カメラの水平方向の位置も、隣り合うコマで変える
  - 選択肢：正面／斜め前（3/4）／真横／斜め後ろ／背中越し（肩なめ）／主観（そのキャラの目線）
- 真正面からのショットは、1話で最大1コマ。使ってよいのは、正面から向き合うこと自体に意味がある場合（宣言、対峙、読者への語りかけ）だけ
- 「転」のコマで、カメラを最も大きく変える。承と比べて、サイズ・位置・高さのうち2つ以上を変える
- 結は、転の反応を受ける。引いて全体の空気を見せるか、寄って表情で落とすかを選ぶ。どちらにするかを意図に書く

## 4. カメラの高さ

高さは、毎コマ cm で指定する。

- 人の目線：約150cm
- ハコブくん目線：約100cm。人を見上げる構図になり、ロボットの視点が伝わる。このシリーズならではの武器なので、1話に1回は検討する
- 低い位置：約50cm（足元・床・子供目線）
- ハコブくんを上から見下ろすショットは禁止（既存ルール）。見下ろす高さにするのは、人物だけを撮るコマに限る

## 5. コマの役割と相性（縦長版）

4コマとも縦長 4:5 の1枚ずつで、スワイプでめくって読まれる。

| コマ | 比率 | 役割 | 向いているショット |
|---|---|---|---|
| 1 | 4:5 | つかみ（めくらせる1枚） | 異変・問いのセリフ・結果の先出しのどれか。全身を縦に大きく、または表情に寄る |
| 2 | 4:5 | 状況が動く | 膝上〜腰上の2人。肩なめ。手前と奥の重ね |
| 3 | 4:5 | めくる前の引き | 「次どうなる？」を残す。オチの物や表情はここで見せない（見せない形を構図で作る） |
| 4 | 4:5 | めくった瞬間のオチ | オチの物・表情に寄る、または引いて全体の空気を見せる |

- 縦長では横一列に並べられない。2人以上は、手前と奥の重ねか、肩なめで見せる
- 縦長は全身を大きく描ける。見上げ・見下ろしの高さの差は、人物の仕草とカメラの高さ（人物だけのコマ）で出す
- 顔と吹き出しは端から 8% 以上内側。右下（幅の右15%・高さの下40%）に要所を置かない（ショートの右のボタンの列がかかる）

## 6. 緑背景での奥行きの出し方

背景がないので、奥行きは人とモノだけで作る。

- **前景を入れる**：手前のキャラの肩・頭・背中を、フレームの端で切って大きく入れる（肩なめ）
- **重なり**：手前と奥のキャラを重ねて描き、大きさの差で距離を示す
- **フレームで切る**：全身を収めなくてよい。腰で切る、頭頂で切るなど。切る位置もプランに書く
- 床の線は描かない（既存ルール）。奥行きは床ではなく、人の大きさの差で示す

## 7. キャラの向き

- 体の向きは「カメラから何度回っているか」で指定する
  - 例：`body turned 45° to camera-left`、`back to camera, head turned 30° over right shoulder`
- 人物の既定は、斜め（3/4）。正面向きは、セクション3の「最大1コマ」に含めて数える
- ハコブくんの真正面と真横は禁止（既存ルール）。見えている側面パネルと画面の角度で向きを示す
- 会話する2人は、左右の位置をコマをまたいで入れ替えない（180度ルール）。入れ替えるなら、意図に理由を書く

## 8. プロンプトの CAMERA セクション（書式）

```
CAMERA:
- SHOT SIZE: waist-up two-shot
- CAMERA POSITION: behind Nurse Oshiro's right shoulder, 1.2 m from Hakobukun
- CAMERA HEIGHT: 100 cm (Hakobukun's eye level), looking slightly UP at the nurse
- FOREGROUND: Oshiro's right shoulder and back of head, cropped by the left frame edge, occupying x 0–30%
- FRAME CROP: Hakobukun cropped at the bottom edge below the drawer
- NOT a front-facing lineup. NOBODY faces the viewer directly.
```

毎コマ、`NOT a front-facing lineup` を入れる。Gemini は何も言わないと、全員を正面向きに並べがちなため。

## 9. 出力前のセルフチェック

- [ ] 4コマすべてに、1文の意図がある
- [ ] 隣り合うコマで、ショットサイズもカメラの水平位置も違う
- [ ] 真正面は1コマ以下で、使う場合は理由が書いてある
- [ ] 転のコマで、サイズ・位置・高さのうち2つ以上が変わっている
- [ ] カメラの高さが、全コマ cm で書いてある
- [ ] 意図のない演出（斜め構図・効果線・汗など）が入っていない
- [ ] ハコブくんを上から見下ろしていない。真正面・真横を向いていない

ハコブくん リファレンス台帳

中身は変えずに、表と見出しを md の形に直しました。

# ハコブくん リファレンス台帳

最終更新：2026-10-02 ／ 全37ファイル（フォルダ「4コママンガ作成データ」）

## 使い方（プロンプト出力時のルール）

- 各コマのプロンプトの末尾に「添付ファイル」として、この台帳のファイル名をそのまま列挙する
- 台帳にあるキャラの見た目は文章で書かない（リファレンスが正）。書いてよいのは「識別アンカー」列の内容だけ

第61話「押していいのか問題」の TSV と縦長の構図

次は第61話を新しいプロジェクトで作ります。1コマ目は「異変から」の型で、荷物を引きずるハコブくんだけを低い位置から撮り、「ちょっと、引っかかってる！」は画面の外から届く声にしました。

気をつけたい所が2つあります。停止ボタンはハコブくんの三面図にない部品なので、「図にない物を足さない」の決まりの例外として、ボタン1つだけを足す項目を独立して書きます。4コマ目は3人と吹き出し3つで、縦長では詰まりやすいので、崩れたら人物を画面の端で切るなどで直します。

第61話_縦長.tsv

61	リメイク（縦長・ショート用）	押していいのか問題	非常停止の権限が誰にあるか見えていない	高杉綾、大城愛名、ハコブくん	廊下でハコブくんが荷物（口を縛ったリネンの袋）を引っかけたまま前進を続けている。高杉さんが気づいて駆け寄る。高杉さん「ちょっと、引っかかってる！」	機体の停止ボタンに手を伸ばすが、指が触れる直前で止まる。高杉さん「これ、私が押していいやつ…？」	迷っているうちに通りかかった大城さんが、何も言わずバチンと押す（バチン）。ハコブくんが即座に停止する。	高杉さん「押していいって、どこにも書いてないのよ」。ハコブくん「非常停止、誰デモ押セマス！以後明記シマス」。大城さん「うんね」	【権限の可視化】安全装置は物理的に手が届くことと、押す権限があると信じられることが別問題。ためらいの時間が事故になる。

縦長の構図（第61話・1コマ目の型：異変から）
- Panel 1：ハコブくん1体と、引きずられる袋。斜め後ろ（3/4）から、カメラは低め（約50cm）。袋を手前の下に大きく、ハコブくんは中央に全身。袋が床をこする動きはスピード線で。高杉さんは画面に入れず、「ちょっと、引っかかってる！」の吹き出しのしっぽを画面の右上の外へ向ける（声だけが先に届く）。口は NORMAL（気づいていない）
- Panel 2：高杉さんの腰上（右）と、ハコブくんの上部（左下。画面と停止ボタンが見える高さで、下は切れてよい）。高杉さんの人差し指が、停止ボタンの手前で止まっている。カメラは人の目線（約150cm）の斜め前。困った顔（眉を寄せる・汗1つ）
- Panel 3：高杉さんの肩なめ。手前左に高杉さんの後頭部と肩（背中側）、奥の右に大城さん（腰上）が手のひらでボタンを押す。ハコブくんの上部は中央。擬音「バチン」は吹き出しの外。集中線を少し。口は STOPPED（止まった瞬間）
- Panel 4：3人。手前左に高杉さん（胸上・両手を広げる）、中央奥にハコブくん（全身ではなく上半分）、右奥に大城さん（腕組み・目を閉じてうなずく）。吹き出しは上の帯に3つ（高杉さん・ハコブくん・大城さんの順に左から）。ハコブくんの口は TROUBLED
- 停止ボタンについて：ハコブくんの三面図にない部品。旧版では機体の上面の後ろ寄りに丸いボタンとして描いた。ボタン1つだけを足す例外を、名前つきの独立セクション（`STOP BUTTON — THE ONLY ADDED PART`）で書く。白黒なので「赤」とは書かない

第61話のショートを作ったら、第13話と合わせて、これまでのマンガのショートと「視聴された／スワイプされた」の割合を比べます。縦長のショートが見続けられていれば、新しい話を縦長で作り、サイトのマンガのページをスワイプで読める形にして、DesignNote をその下に載せます。