ブログ記事用に吹き出し画像が欲しくて、素材サイトをいろいろ探してみたんですが、これが意外と面倒で。しっぽの向きが逆だったり、線の太さが微妙に違ったり、「あとちょっと」で理想の形が見つからないんですよね。
かといって、Photoshopで自作するのもパスの操作が面倒だし…。「ただの吹き出し一つにこんなに時間かけるのもなぁ」と思って、結局ブラウザでサクッと作れるツールを作ってみました。
図形のフチをドラッグするだけでしっぽが生えてくる仕組みなので、数秒で好きな形の吹き出しが作れます。
吹き出し素材を探すのが面倒だった話
素材サイトで吹き出しを探すと、いくつか問題 があって。まず、しっぽの向きが逆だったり、線の太さが自分のイラストと合わなかったり。モコモコした形が欲しいのに見つからなかったりします。
自分で作ろうとしても、Photoshopで楕円と三角形を組み合わせて、パスを結合して…ってやってると、「たかが吹き出し一つにこんなに時間かけるのか」って気持ちになるんですよね。
そんな経緯で、もっと手軽に吹き出しを作れるツールがあればいいなと思って開発しました。
どんなツール？
ブラウザで吹き出しを作れるツールです。ベースの形や線のスタイルを選んだら、プレビュー画面のフチをドラッグするだけ。ドラッグした場所からしっぽが伸びてきて、先端の位置も自由に調整できます。
作った吹き出しは背景透過のPNG画像でダウンロードできます。
できること
- プレビュー画面のフチをドラッグして、好きな場所にしっぽを生成・調整
- 楕円、四角、モコモコ、ギザギザなど、形状や線の太さ・色を自由に設定
- 「漫画風」「思考風」などのプリセットで、ワンクリックで設定を呼び出し
- 標準(1x)と高解像度(2x)を選択して、背景透過PNGで書き出し
- 作成した吹き出しは個人・商用問わず自由に利用OK（クレジット不要）
- スマホ・タブレットのタッチ操作にも対応
使い方
基本的な流れは3ステップです。
- ベースの形を調整する
右側の設定パネルで形や線のスタイルを決めます。プリセットから選ぶのが簡単ですが、幅や高さ、線の太さなども細かく調整できます。
- しっぽを生やして調整する
左側のプレビュー画面で、図形のフチをクリック＆ドラッグします。その場所からしっぽが伸びてくるので、青いハンドルで先端の位置を調整します。
- ダウンロー ドする
「書き出し」セクションで解像度（1x/2x）を選んで、「PNGでダウンロード」ボタンを押せば完成です。
どんな時に使える？
こんな場面で使えます。
- ブログやWebサイトの解説画像に: イラストや写真にセリフを添えたい時に便利です。
- YouTubeのサムネイルや動画内のテロップに: ゲーム実況や解説動画でキャラクターにセリフを言わせる演出に。
- SNS投稿の画像に: イラストや写真に吹き出しを追加するだけで、投稿が面白くなります。
まとめ
吹き出しを探したり自作したりする手間が面倒だったので、ドラッグするだけで作れるツールを開発しました。作成した吹き出しは個人・商用問わず自由に使えます。ブログ、動画、SNSなどで活用してもらえると嬉しいです。