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

ワンクリックでSVGをコピーし、Figmaイラストレーター・Webにそのまま貼れます。

角丸四角+しっぽ
四角+しっぽ
だ円+しっぽ
雲形(考え事)
ギザギザ(爆発)
角丸(しっぽ無し)
240
高さ 140
角丸 24
しっぽ 34
線のスタイル
線の太さ 3
✎ 文字を入れる
中の文字(任意)
文字サイズ 20
SVGをコピーしました
📖 使い方・くわしい説明

いろいろな形の吹き出し(フキダシ)を選んで、しっぽの位置・色・サイズをその場で微調整できるツールです。 「素材集から探すのが面倒」「サッと作って微調整したい」というときにどうぞ。

使い方

  1. まず上の「形を選ぶ」から、使いたいフキダシの形をクリックします(角丸四角・楕円・雲形・ギザギザなど)。まよったら「📖 カタログから選ぶ」もどうぞ。
  2. 「雲形(考え事)」を選んだときは、上に出る「雲のもよう」でふわふわ・もこもこ・ゆらゆらの模様を選べます。シャッフルやたね番号の入力で、色々な雲の形を試したり同じ形を再現したりできます。「ギザギザ(爆発)」を選んだときは、ギザの数・深さ・ふぞろいをスライダーで調整できます。
  3. しっぽ付きの形なら、しっぽの位置(3×3のアイコンから下-中・左・右など)を選びます。
  4. 幅・高さ・角丸・しっぽの大きさ・線のスタイル(ふつう/手書き)・線の太さ・色をスライダーや色選択で微調整します。塗りを透明にして線だけにもできます。
  5. 必要なら「✎ 文字を入れる」を開いて、中に入れる文字を入力します(空欄なら形だけ)。
  6. 「SVGをコピー」を押してFigmaやイラレのキャンバスにそのままペーストするだけでOK。ダウンロードして.svgファイルとして保存もできます。

こんな場面で使えます

  • バナーやLP、スライドに、ちょっとしたセリフのフキダシを置きたいとき
  • 図解やマニュアルで、注釈・補足をフキダシで示したいとき
  • 素材集を探し回らず、好きな形・色・サイズのフキダシをその場で作りたいとき
  • 線だけ・塗りだけなど、デザインに合わせてカスタムしたいとき

よくある質問

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