note記事の合いの手を、画像にできるツールを作りました💬｜ブラウザで使える「アイコン付きセリフメーカー」

こんばんは、きょんです✨

私の記事には、ミアたちが横から口を挟んでくることがよくあるんですが……あれ、どうやって書いてると思いますか？

…そうですね、ただの引用ブロックです😇

そうそれ🤭

これ、noteの引用機能でセリフを書いて、頭に絵文字を付けてるだけなんです。

手軽でいいんですけど、だんだん物足りなくなってきて。せっかくみんなのイラストがあるのに、文字だけなのはちょっともったいないなあ、と思ってしまって🤭

まあ、それが私の取柄ですから……😇
というか、早速やってくれてる(; ﾟдﾟ)

🔧 作ったのは「アイコン付きセリフメーカー」

キャラのアイコンと名前、それに吹き出しが付いたセリフ画像を作れるツールです。ブラウザで開くだけで使えます。

ひとつ言っておきたいのが、このツールはAIを使っていません。

画像生成AIに絵を描いてもらうんじゃなくて、文字と色をブラウザがそのまま並べて画像にしてるだけなんです。だから待ち時間はゼロだし、同じ設定なら毎回きっちり同じものが出ます✨

📝 使い方は3ステップ

STEP1　キャラを登録する

左パネルの下にある「プリセット管理」でキャラを設定します。

まずは「素材から選ぶ」ボタン。同梱しているキャラのサムネイルが開くので、選ぶだけでアイコン・名前・吹き出しの色までまとめて入ります。

…まあこれはほぼ私専用なんですが💦
コラボ記事とかで、使えなくもない…？

そして自分のキャラを使いたい方はこちら✨

「アイコンを選択」から画像をアップロードしてください。吹き出しの背景や枠線、名前の色、文字色も全部変えられます。

STEP2　セリフを入力する

左パネルの上でプリセットに登録したキャラを選んで、セリフを打ち込みます。入力するとプレビューにすぐ反映されます。

• ⇄ボタン……アイコンと吹き出しの左右を入れ替え。相手を右側にすると会話っぽくなります

• ＋行を追加……行を増やして会話にできます

• ↑↓で並び替え、✕で削除

STEP3　出力してnoteに貼る

プレビューの下の「出力」ボタンで画像ができます。

出力画像が1枚だけのときは自動でクリップボードにも入るので、noteの編集画面でそのまま貼り付けるだけ。

複数枚のときは「すべて保存」でフォルダにまとめて保存できます。

ここだけ注意で、保存先にダウンロードフォルダは選べません。ドキュメントやデスクトップを指定してください💦

📌 記事の台本を、まるごと貼れます

個人的にいちばん気に入ってるのがこの機能です。

「まとめて貼り付け」に記事の本文をそのまま貼ると、合いの手の行だけを自動で拾ってセリフ画像にしてくれます。地の文は画像になりません。

これが本当に楽🤭

私はいつも先に記事を書いてしまうので、書き終わった本文をどさっと貼るだけで全部そろいます。1行ずつキャラを選び直すの、大変ですからね😇

🔍 表示の調整

見た目はこのあたりを選べます。

• 背景……透過／白

• フォント……まるっこい／すっきり／明朝／手書き風

• 文字サイズ……14px／16px／18px

• 横幅……620px／700px／800px

⚠️ 注意点

1. 登録したプリセットはそのブラウザの中だけに保存されます。ブラウザのデータを消すと一緒に消えるので、そこだけご注意を💦

2. アップロードした画像はどこにも送信されません。ブラウザの中だけで処理しています。

3. ChromeかEdgeで開いてください。「すべて保存」で使っている機能が、Chromiumベースのブラウザにしか入っていないんです。

あと、ツール画面はライト／ダークを切り替えられますが、出力される画像の見た目は変わりません。ここはまぎらわしいですよね🤭

🌸 おわりに

このツールは、ミアと一緒に仕様書を作ってから、Claude Codeに実装してもらいました。

うん、できなくもない。
ただ私が自力で作るとなるとどれくらいかかるか…考えたくないね😇

実際、私が書いたのは仕様書だけです🤭 どんな機能がほしいか、どこでつまずきそうかを話し合って、それを渡しただけで動くものが出てきました。

そこからは使いながら微調整って感じですね。

ありがと🤭

こういう仕様を考えるのは得意です（というか本業）

自分の記事のために作ったものだけど、せっかくなので誰でも使えるようにしてあります。キャラで対話形式の記事を書いてる方がいたら、よかったら覗いてみてくださいね🌸

とりあえず、やりたいことが形になってよかったです🤭

#note #ものづくり #ClaudeCode #自作ツール #セリフ画像 #きょんの絵日記

🔗noteリンク集

生成するたびにキャラの顔が変わってしまう——そんな悩みを解決します。
キャラデザを固定するプロンプト設計と、そこから広げる編集テクニック。
AIイラストを始めたばかりの方にも読める内容です🌸

プロンプトもコードも全公開✨
すべての有料記事が、単品でそろえた場合の半額でまとめて読めます。
買い切り型のお得セットです🌸