1. Choose the fill first

Start by deciding whether the bubble should behave like a quiet UI element or a visible focal point. Solid fills are usually enough for product UI and annotations. Gradients work best when the bubble itself needs to carry visual weight.

If you plan to use a gradient, set the colors and angle before you fine-tune the tail. It is easier to judge the final balance once the fill is already close to the real use case.

2. Set the tail with intent

Isosceles tails feel softer and more neutral. Right-angle tails feel more directional and work well when the bubble needs to point at a nearby UI element, screenshot detail, or illustration.

After choosing the tail type, adjust the side, size, and position. The flip option matters only for right-angle tails and is most useful when the pointer direction feels slightly off.

3. Type with realistic copy

Edit the text directly inside the preview and use an amount of copy that is close to the real component. That makes it much easier to judge line breaks, padding, and the distance between the text block and the tail.

If the final component will hold only one short sentence, do not test with a paragraph. The preview is most useful when it matches the intended density.

4. Copy the right code format

Use the CSS tab when you want a direct stylesheet snippet. Use the JSX tab when you are moving quickly inside a React component or a Tailwind-friendly prototype.

Before shipping, rename classes and move values into your own tokens or conventions so the bubble fits naturally inside your codebase.

5. Export when you need an asset

PNG is the faster choice for slides, docs, and social assets. SVG is better when the bubble still needs to be scaled or composed further inside a design tool.

The generator is focused on the bubble itself. Export here, then place the result inside the larger layout where the rest of the composition belongs.

Before you ship

• Check the bubble with copy that is close to the real text length.
• Confirm that the current no-border limitation is acceptable for the design.
• Preview the result at the size where it will actually be used.

1. 先に塗りの方向を決める

まず、静かなUI部品として使うのか、見せ場として使うのかを決めます。 単色はUIや注釈向きで、グラデーションは吹き出し自体に視線を集めたい場面に向いています。

グラデーションを使うなら、しっぽを細かく詰める前に色と角度を先に決めるのがおすすめです。 塗りがほぼ決まってからのほうが、最終バランスを判断しやすくなります。

2. しっぽは意味を持って調整する

二等辺のしっぽは柔らかく中立的で、直角のしっぽは方向性を出しやすい形です。 近くのUI要素やスクリーンショットの一点を指したいときは、直角のほうが収まりやすいことがあります。

形を選んだら、辺、サイズ、位置を調整します。反転は直角しっぽ専用で、指したい向きが少しズレるときに使うと効果的です。

3. 使う文字量に近い状態で試す

プレビュー内で直接テキストを編集し、実際に使う量に近い文字数で確認します。 そうすると、折り返し、余白、しっぽとの距離感を現実に近い状態で見られます。

最終的に一文だけ入れる予定なら、長い段落で確認しないほうが判断しやすくなります。 プレビューは、実際の密度に近いほど役に立ちます。

4. 用途に合った形式でコードを持ち帰る

スタイルシートへそのまま貼るなら CSS タブ、React コンポーネントや Tailwind 前提の試作に持ち込むなら JSX タブが向いています。

実案件へ入れるときは、クラス名や値の持ち方をプロジェクト側の命名やトークンに寄せておくと扱いやすくなります。

5. アセットが必要なら書き出す

PNG はスライド、資料、SNS素材にすぐ置きたいときに便利です。SVG は拡大縮小や、デザインツール内での再配置が必要なときに向いています。

このツールは吹き出しそのものの生成に絞っています。全体レイアウトは、書き出したあとに別のデザイン環境で組み合わせるのが自然です。

仕上げ前の確認

• 実際に使う文字量に近い状態で見た目を確認する。
• 現状の「枠線なし」がデザイン上問題ないか確認する。
• 最終的に使う表示サイズで一度見直す。