吹き出し(スピーチバブル)SVGメーカー

いろいろな形の吹き出し(フキダシ)を選んで、しっぽの位置・色・サイズをその場で微調整。
できあがったらワンクリックでSVGをコピーして、Figmaイラストレーター・Webにそのまま貼れます。
「素材集から探すのが面倒」「サッと作って微調整したい」というときにどうぞ。

1. 形を選ぶ

角丸四角+しっぽ
四角+しっぽ
だ円+しっぽ
雲形(考え事)
ギザギザ(爆発)
角丸(しっぽ無し)
しっぽの位置
240
高さ 140
角丸 24
しっぽの大きさ 34
線の太さ 3
線の色
塗りの色
中の文字(任意)
文字サイズ 20
SVGをコピーしました

使い方

  1. まず上の「形を選ぶ」から、使いたいフキダシの形をクリックします(角丸四角・楕円・雲形・ギザギザなど)。
  2. しっぽ付きの形なら、しっぽの位置(下-中・左・右など)を選びます。
  3. 幅・高さ・角丸・しっぽの大きさ・線の太さ・色をスライダーや色選択で微調整します。塗りを透明にして線だけにもできます。
  4. 必要なら中に入れる文字を入力します(空欄なら形だけ)。
  5. 「SVGをコピー」を押してFigmaやイラレのキャンバスにそのままペーストするだけでOK。ダウンロードして.svgファイルとして保存もできます。

こんな場面で使えます

よくある質問

コピーした吹き出しはどこに貼れますか?
「SVGをコピー」を押すとSVGコード一式がクリップボードに入ります。Figmaやイラストレーターのキャンバスにそのまま貼り付け(⌘V / Ctrl+V)すると編集できるベクターとして配置されます。HTMLやMarkdownにSVGコードとして貼り付けることもできます。
色や線の太さは後から変えられますか?
このツール上で線の色・塗りの色・線の太さをスライダーや色選択で調整できます。塗りを「透明(なし)」にして線だけのフキダシにすることも可能です。貼り付けた後もFigmaやイラレ側で自由に編集できます。
しっぽ(テール)の向きは選べますか?
下・左・右・上それぞれに対し、左寄り・中央・右寄りなどの位置を選べます。しっぽ無しのスタイル(角丸・ギザギザ)を選んだときはしっぽの設定は無効になります。
中に文字を入れられますか?
テキスト欄に文字を入れると、吹き出しの中央に文字が入ったSVGを書き出します。空欄のままなら形だけのフキダシになります。フォントサイズも調整できます。
シェア B!