チャット風の画像を出すスキルを作ったよ｜Claude 風・ChatGPT 風・LINE 風に対応

Marie | まりーの小さな⚙️歯車⚙️ラボ🔬

2026年10月6日 21:21

TL;DR

チャット風の画像を作るスキルを、zip で配布する
AI 画像生成を使わなくて済む。セリフのテキストから、プログラムで組み立てる。
文字が崩れず、同じ入力からは、いつも同じ画像ができる
Claude 風・ChatGPT 風・LINE 風に対応。どれもライトとダークがある
エージェントに「このスキルをセットアップして」と頼むだけで使える
（Claude Code・Codex・Antigravity に対応。
Codex（ChatGPT アプリ版）と Antigravity CLI では、
セットアップから画像づくりまで通ることを確認した）
ライセンスは MIT または Apache 2.0。動作確認は Linux のみ

想定読者

Claude Code や Codex のような CLI エージェントを使っていて、
その会話を記事や資料で見せたい人
スクリーンショットだと、会話の範囲が分かりにくくて困っている人
AI 画像生成だと、文字が崩れたり、毎回見た目が変わったりして困った人
そのほか、AI との会話や、友だちとのトークを、
読みやすい画像にして見せたい人なら、だれでも

実機そっくりの画面が必要な人には、向いていない。
Claude 風と ChatGPT 風は、雰囲気を模した演出用の画像だ。

はじめに

AI とのやりとりや、友だちとのトークを、
チャット画面の画像にして見せたい。

そんなときに使えるスキルを作ったので、zip で配る。
Claude Code や Codex、Antigravity のようなエージェントに渡して、

「セットアップして」

と頼めば、使えるようになる。

上の画像は、AI 画像生成を使っていない。
セリフを書いた小さなテキストファイルから、
プログラムで組み立てたものだ。

作ったきっかけ

きっかけは、制作日記だった。
AI とのやりとりを、スクリーンショットではなく
読みやすい画像で見せたくて作り始めた。

ChatGPT のアプリの頃は、スマホでスクリーンショットを撮れば済んだ。
会話の吹き出しが、そのまま1枚の画像になったからだ。

ところが、Codex や Claude Code のような CLI では、
そうはいかない。
画面が端末の文字で埋まって、どこからどこまでが
ひとまとまりの会話なのか、見た目では分かりにくい。

しかも、画面は流れていくので、
あとから「あの場面」を切り取るのも大変だ。

だから、会話をあとから画像として組み立てる道具がほしくなった。

この記事は、2つに分かれている。

使うだけの人は、「使うだけの人へ」を読めば十分だ。
zip をもらって、「セットアップして」と頼むだけで使える
中身を知りたい人は、「もっと詳しく知りたい人へ」へ。
実際のやりとりや、仕組みや、細かい設定を書いてある

どんな画像ができるか

スタイルは3つある。
どれも、ライトとダークの両方を出せる。

Claude 風

冒頭の画像と同じ、Claude 風だ。
ベージュの画面に、左が AI、右が自分の吹き出し。

あえて実機そのままではなく、
見た人が思い浮かべる「Claude らしさ」に
寄せた演出にしてある。

ChatGPT 風

自分は右寄せのグレーの吹き出し、
AI は吹き出しなしの地の文。
こちらも実機の再現ではなく、雰囲気を模した演出だ。

LINE 風

緑の吹き出し、日付、既読、入力欄まで入っている。
セリフの話者に「@10:03」のように書けば、
吹き出しの横に時刻も出せる。
この LINE 風だけは、実機の画面に合わせてある。

スタンプも置ける。
上の画像のスタンプは、見本用に用意した画像だ。

なぜ AI 画像生成を使わないのか

チャット画面の画像は、AI 画像生成に頼むこともできる。
ただ、図解や記事の挿絵として使うには、困ることがあった。

文字が崩れることがある
吹き出しの左右や並び順が、思ったとおりにならない
作るたびに見た目が変わるので、シリーズものの記事でそろわない
直したいのが1行だけでも、最初から作り直しになりやすい
単純に、画像生成は待ち時間が長い

このスキルは、
セリフのテキストから、プログラムで組み立てる。
だから、AI 画像生成を使わなくて済む。
これが、いちばんのメリットだ。

日本語の長い文章でも、文字が崩れない
吹き出しの左右や並び順が、書いたとおりになる
同じ入力からは、いつも同じ画像ができる。
シリーズものの記事でも、見た目がそろう
直したいのが1行だけなら、テキストを1行直すだけでいい。
最初から作り直さなくて済む
生成の待ち時間も、生成の回数も、気にしなくていい

使うだけの人へ

ここだけ読めば、使える。
むずかしいことは、エージェントがやってくれる。

ノート PC の前で、zip を展開してセットアップを頼もうとしている Marie の後ろ姿

1. zip をもらう

コードは MIT と Apache 2.0 の
デュアルライセンスだ。
どちらか好きなほうを選んで使える。

自由に使って、改造して、配ってもらって構わない。
ただし、無保証なので、使うのは自己責任でお願いしたい。

動作確認は Linux でしかしていない。
macOS と Windows については、
「もっと詳しく知りたい人へ」の
「動作確認の範囲」を見てほしい。

2. 「セットアップして」と頼む

zip を展開して、できたフォルダを
使っているエージェントに渡す。
そして、こう頼む。

「このスキルをセットアップして」

あとは、エージェントが進めてくれる。

途中で聞かれるのは、
自分用のアイコンと表示名を
設定するかくらいだ。

管理者権限（sudo）が要る作業が
あるときは、先に確認してくれる。

Codex で試したら、
4分弱で終わった。

そのときの実際のやりとりは、
「もっと詳しく知りたい人へ」にある。

3. 画像を作ってもらう

セットアップが終われば、あとは頼むだけだ。

「このやりとりをチャット風の画像にして」
「LINE 風のグループトーク画像を作って」
「ChatGPT 風で、ダークモードの画像もほしい」

セリフファイル（台本）は、
自分で書く必要はない。

会話の内容を伝えるだけで、
エージェントが書いて、画像にしてくれる。

直したいところがあれば、
「ここを変えて」と頼めばいい。

ダークにする、LINE 風にする、といった変更も同じだ。
何を変えられるかは、次の「4.」にまとめてある。

できた画像は、幅 620px の
2倍の解像度で、角は透明になる。

4. 頼めば変えられること

「ダークにして」「LINE 風にして」のように頼めば、変えてくれる。
変えられるのは、次のようなところだ。

見た目：Claude 風・ChatGPT 風・LINE 風
明るさ：ライト（明るい）か、ダークか。両方を一度に作ることもできる
自分のアイコンと表示名：一度決めれば、いつも同じになる
LINE 風の細かいところ：既読、時刻、未読バッジ、入力欄
日付などの区切りと、「（中略）」の表示
画像の添付：スクリーンショットやスタンプを、発言に付けられる
自分側のアイコン：出すか、消すか。
Claude 風は出る。ChatGPT 風と LINE 風は、実機どおり出ない
連投のときのアイコン：同じ人が続くとき、2つ目以降を省くか、毎回出すか。
LINE 風は毎回出る（実機どおり）。Claude 風と ChatGPT 風は省く
画像の大きさ

自分のアイコンと表示名を決めておくと、たとえば、こうなる。
前の記事で作った、LINE 風のグループトークの例だ。
右側の自分（Marie）にも、アイコンと名前が出ていて、
既読、時刻、スタンプも入っている。

LINE 風のグループトークの例。自分（Marie）のアイコンと名前、既読、時刻、スタンプが入っている

指定の名前や書き方は、
「もっと詳しく知りたい人へ」の「設定で変えられること（一覧）」にある。

5. うまくいかなかったら、うまくいったら

うまくいかなかったら、ぜひ教えてほしい。
エージェントの種類や、OS（Linux・macOS・Windows）、
どこで止まったかを、
コメントで知らせてもらえると直しやすい。
エラーが出たなら、その文章もあるとありがたい。

うまく動いたときも、教えてもらえると嬉しい。
「この環境で動いた」という報告が増えると、
動作確認の範囲が広がって、ほかの人も安心して使える。
ひとことだけでも、とても助かる。

もっと詳しく知りたい人へ

ここから先は、中身が気になる人向けだ。
読まなくても、使うことはできる。

実際にやってみた（Codex）

Codex に zip を添付して、
「セットアップして」と頼んでみた。
かかった時間は、4分弱。

下の2枚は、そのときの実際のやりとりだ。
セリフは Codex の記録から、原文のまま取っている。
エージェントが裏でやっていた作業は、
「（中略）」にしてある。

ここで見てほしいのは、3つある。

まず、スキルを置く場所を聞かれていない。

何も言わなくても、
ユーザーレベルの
~/.codex/skills/ に入った。

置き場所の質問が1つ減るだけで、
だいぶ気楽になる。

次に、聞かれたのは
「アイコンと表示名も設定する？」の1つだけ。

「する。」と答えると、
Codex は答えを待たずに、
先にスキル本体と実行環境の
セットアップを進めている。

そして、最後に見本の画像まで作って、
動くことを確かめてから報告している。

「できたと思う」ではなく、
「画像ができた」で終わるわけだ。

後半は、自分用のアイコンと表示名を決める流れ。

アイコンの画像は、
画像をドラッグ＆ドロップしただけで
受け取ってもらえた。
パスを打つ必要はない。

Codex は、その画像をスキルのフォルダにコピーして、
画像として使えることまで確かめている。

表示名を聞かれるのは、
画像を受け取ったあとだ。

画像と名前を一度に聞かれないので、
1つずつ答えればいい。

答えた内容は、
スキルの speakers.json に書かれる。

これで、セリフファイルの話者を
me と書くだけで、
いつも同じアイコンと表示名で
出てくるようになる。

ちなみに、この2枚の右側のアイコンと名前は、
ここで決めたものと同じだ。

セットアップは、何をしているのか

エージェントは、
フォルダの中の説明書（SETUP.md）を読んで、
次のことをやってくれる。

スキルを置く（ユーザーレベルの ~/.claude/skills/ など。
置き場所は聞かれない）
Python の確認と、必要なものの用意
日本語と絵文字のフォントの確認
見本を実際に画像にして、動くことの確認

必要なものは、Python 3.9 以上と、
画像にするための Playwright と Chromium。

システムの Python に Playwright が無いときは、
スキルのフォルダに専用の環境を作って
自動で入れてくれるので、手元の Python は汚れない。

フォントを入れたり、
足りないライブラリを入れたりするときに
管理者権限（sudo）が要る場合は、
エージェントが先に確認してから
実行する決まりにしてある。

Codex は、スキルの置き場所への書き込みを、
既定では止めることがある。

そのときは、エージェントが
承認を求めてくるので、許可してあげてほしい。

自分でやりたい人は、
次のコマンドでも同じことができる。

python scripts/setup.py --install-to ~/.claude/skills

設定で変えられること（一覧）

「使うだけの人へ」の「頼めば変えられること」の詳細版だ。
内容は重なるけれど、こちらは指定の名前まで書いてある。

セリフファイルの先頭に @ で始まる行を書くか、
画像にするコマンドにオプションを付けると、変えられる。
どれも、エージェントに「ダークで」「LINE 風にして」と頼めば、やってくれる。

見た目

@style（または --style）：Claude 風・ChatGPT 風・LINE 風の切り替え。
省略すると、Claude 風になる
@theme（または --theme）：ライトかダークか。
--both-themes で、両方を一度に作れる
@title：上部のタイトルバーの文字

話者

@speaker：その台本だけの話者を決める
（キー、表示名、左右、アイコン画像）
speakers.json：繰り返し使う話者を登録しておく。
自分のアイコンと表示名は、ここに書かれる
左右の指定：左がAI や相手、右が自分

LINE 風だけの設定

@read：自分の発言に「既読」や「既読 2」を付ける
@badge：ヘッダー左上の未読バッジの数
@input：下の入力欄を出すか、消すか
発言の時刻：話者に @10:03 のように書くと、吹き出しの横に出る

アイコンの出し方

@own：自分側（右）のアイコンを、出す（icon）か、消す（none）か。
既定は、Claude 風が出る。ChatGPT 風と LINE 風は出ない
@group：同じ人が続くときの、2つ目以降のアイコンを、省く（on）か、毎回出す（off）か。
既定は、LINE 風が毎回出す。Claude 風と ChatGPT 風は省く

台本の中の飾り

区切りのラベル：「== 10月4日 ==」のように、日付などを中央に出す
「...」だけの行：「（中略）」の表示
画像：発言に画像を添付する。何も添付しないと、中央に単独で出る
太字：セリフの中で使える

出力

--out：画像の保存先
--width：画像の幅（既定は note の本文幅の 620px）
--scale：解像度の倍率（既定は2倍）
--keep-html：途中の HTML も残す（見た目の調整用）

本物とは違う設定にもできる

図解に使うときは、実機どおりでないほうが
わかりやすいことがある。

そのため、次の2つは切り替えられる。

自分側（右）にも、アイコンと名前を出す
同じ人の発言が続くとき、2つ目以降のアイコンを省く

台本を自分で書くなら

中身を見たい人や、手で直したい人のために、
書き方を紹介しておく。

セリフファイルは、話者の名前とセリフを書くだけだ。

@title: 旅行の計画を相談
@speaker: me | わたし | right
me: 来月の連休に、1泊2日で温泉に行きたいんだけど
claude: 予算とエリアを教えてもらえる？

画像にするコマンドは、これ。

python scripts/render_chat.py 旅行.chat.txt --both-themes

--both-themes をつけると、ライトとダークの両方が出る。
書き方の詳細は SKILL.md に、
見本は examples/ に入っている。

配布ファイルの中身

zip の中には、次のものが入っている。

SETUP.md：エージェント向けのセットアップ手順
SKILL.md：スキルの本体（セリフファイルの書き方など）
README.md：人間向けの説明
scripts/：画像にするプログラムと、
セットアップ用のプログラム
agents/：Codex で表示される名前などの設定
examples/：この記事の画像のもとになった見本
LICENSE：ライセンスの案内
LICENSE-MIT、LICENSE-APACHE：それぞれのライセンス本文
NOTICE：商標についての注意

動作確認の範囲

動作確認は Linux でしかしていない。
そのなかで、**Codex（ChatGPT アプリ版）**では
「セットアップして」と頼んで、
画像づくりまで通ることを確かめた。

Codex CLI は、スキルの置き場所に
対応させてあるが、
実際に動かしての確認は、まだできていない。

Claude Code は、セットアップ用の
プログラムと画像づくりを
直接動かして確かめている。

Antigravity CLI（agy コマンド）にも、
zip を渡して「セットアップして」と頼んで、
画像づくりまで通ることを確かめた。

Antigravity の IDE 版は、
スキルの置き場所に対応させてあるが、
実際に動かしての確認は、まだできていない。

macOS と Windows でも動くように
作ってはあるが、実機では試せていない。

うまく動かなかったときや、
動いたときの報告は、
「使うだけの人へ」の最後に書いたとおり、
コメントでぜひ教えてほしい。

注意してほしいこと

「風」は、公式の画面ではない

Claude 風と ChatGPT 風は、公式の画面ではない。
本物の画面と間違われるような使い方や、
なりすましに使うのは、やめてほしい。

商標についての注意は、
NOTICE に書いてある。

実在の会話を載せるとき

実際のやりとりを画像にするときは、
相手の許可や、個人情報の扱いに気をつけてほしい。

実在人物の名前や固有名詞は、ぼかしたり、
置き換えたりしてから載せるのがおすすめだ。

おわりに

「こんなスタイルも作ってほしい」「ここが使いにくかった」
といった声があれば、コメントで教えてもらえると嬉しい。

実際に試してみた感想も、ぜひ聞かせてほしい。

Threads では、日々のことを
もう少し気ままに発信している。
よかったらのぞいてみて。

この記事がよかったら、
スキやコメント、フォローで
応援してもらえると嬉しい。

Marie