note記事の合いの手を、画像にできるツールを作りました💬｜ブラウザで使える「アイコン付きセリフメーカー」
こんばんは、きょんです✨
私の記事には、ミアたちが横から口を挟んでくることがよくあるんですが……あれ、どうやって書いてると思いますか？
…そうですね、ただの引用ブロックです😇
🐈ミア：「こんな感じのやつだよっ！」
そうそれ🤭
これ、noteの引用機能でセリフを書いて、頭に絵文字を付けてるだけなんです。
手軽でいいんですけど、だんだん物足りなくなってきて。せっかくみんなのイラストがあるのに、文字だけなのはちょっともったいないなあ、と思ってしまって🤭
まあ、それが私の取柄ですから……😇
というか、早速やってくれてる(; ﾟдﾟ)
🔧 作ったのは「アイコン付きセリフメーカー」
キャラのアイコンと名前、それに吹き出しが付いたセリフ画像を作れるツールです。ブラウザで開くだけで使えます。
ひとつ言っておきたいのが、このツールはAIを使っていません。
画像生成AIに絵を描いてもらうんじゃなくて、文字と色をブラウザがそのまま並べて画像にしてるだけなんです。だから待ち時間はゼロだし、同じ設定なら毎回きっちり同じものが出ます✨
📝 使い方は3ステップ
STEP1 キャラを登録する
左パネルの下にある「プリセット管理」でキャラを設定します。
まずは「素材から選ぶ」ボタン。同梱しているキャラのサムネイルが開くので、選ぶだけでアイコン・名前・吹き出しの色までまとめて入ります。
…まあこれはほぼ私専用なんですが💦
コラボ記事とかで、使えなくもない…？
そして自分のキャラを使いたい方はこちら✨
「アイコンを選択」から画像をアップロードしてください。吹き出しの背景や枠線、名前の色、文字色も全部変えられます。
STEP2 セリフを入力する
左パネルの上でプリセットに登録したキャラを選んで、セリフを打ち込みます。入力するとプレビューにすぐ反映されます。
⇄ボタン……アイコンと吹き出しの左右を入れ替え。相手を右側にすると会話っぽくなります
＋行を追加……行を増やして会話にできます
↑↓で並び替え、✕で削除
STEP3 出力してnoteに貼る
プレビューの下の「出力」ボタンで画像ができます。
出力画像が1枚だけのときは自動でクリップボードにも入るので、noteの編集画面でそのまま貼り付けるだけ。
複数枚のときは「すべて保存」でフォルダにまとめて保存できます。
ここだけ注意で、保存先にダウンロードフォルダは選べません。ドキュメントやデスクトップを指定してください💦
📌 記事の台本を、まるごと貼れます
個人的にいちばん気に入ってるのがこの機能です。
「まとめて貼り付け」に記事の本文をそのまま貼ると、合いの手の行だけを自動で拾ってセリフ画像にしてくれます。地の文は画像になりません。
これが本当に楽🤭
私はいつも先に記事を書いてしまうので、書き終わった本文をどさっと貼るだけで全部そろいます。1行ずつキャラを選び直すの、大変ですからね😇
🔍 表示の調整
見た目はこのあたりを選べます。
背景……透過／白
フォント……まるっこい／すっきり／明朝／手書き風
文字サイズ……14px／16px／18px
横幅……620px／700px／800px
⚠️ 注意点
登録したプリセットはそのブラウザの中だけに保存されます。ブラウザのデータを消すと一緒に消えるので、そこだけご注意を💦
アップロードした画像はどこにも送信されません。ブラウザの中だけで処理しています。
ChromeかEdgeで開いてください。「すべて保存」で使っている機能が、Chromiumベースのブラウザにしか入っていないんです。
あと、ツール画面はライト／ダークを切り替えられますが、出力される画像の見た目は変わりません。ここはまぎらわしいですよね🤭
🌸 おわりに
このツールは、ミアと一緒に仕様書を作ってから、Claude Codeに実装してもらいました。
うん、できなくもない。
ただ私が自力で作るとなるとどれくらいかかるか…考えたくないね😇
実際、私が書いたのは仕様書だけです🤭 どんな機能がほしいか、どこでつまずきそうかを話し合って、それを渡しただけで動くものが出てきました。
そこからは使いながら微調整って感じですね。
ありがと🤭
こういう仕様を考えるのは得意です（というか本業）
自分の記事のために作ったものだけど、せっかくなので誰でも使えるようにしてあります。キャラで対話形式の記事を書いてる方がいたら、よかったら覗いてみてくださいね🌸
とりあえず、やりたいことが形になってよかったです🤭
#note #ものづくり #ClaudeCode #自作ツール #セリフ画像 #きょんの絵日記
🔗noteリンク集
生成するたびにキャラの顔が変わってしまう——そんな悩みを解決します。
キャラデザを固定するプロンプト設計と、そこから広げる編集テクニック。
AIイラストを始めたばかりの方にも読める内容です🌸
プロンプトもコードも全公開✨
すべての有料記事が、単品でそろえた場合の半額でまとめて読めます。
買い切り型のお得セットです🌸
