1. Choose the visual style

Start by selecting a solid fill or a gradient. Solid bubbles are useful for UI states and simple callouts. Gradient bubbles are better when the speech bubble itself needs to carry visual emphasis in a hero, card, or annotation.

If you choose a gradient, adjust both colors and the angle before tuning the shape. It is easier to judge the tail position once the background treatment is already close to the final look.

2. Shape the tail intentionally

Switch between isosceles and right-angle tails depending on the tone you want. Isosceles feels softer and more general-purpose. Right-angle tails feel more graphic and directional, which can work well in product annotations or comic-inspired layouts.

After selecting the tail type, adjust the side, size, and offset. The flip control is only relevant to right-angle tails and is best used when the bubble points toward a nearby UI element or illustration.

3. Edit the text directly inside the preview

Click into the speech bubble preview and type directly. This makes it easier to judge line length, padding, and the relationship between the text block and the tail before you copy any code.

For production use, keep the preview text close to the amount of copy you expect in the final component. That gives you a more realistic sense of bubble proportions and export size.

4. Copy the generated CSS when the shape is settled

Expand the generated code panel and copy either the vanilla CSS or the JSX-oriented Tailwind version. The CSS output is the best choice when you want a direct stylesheet snippet. The JSX tab is helpful when you want to move quickly inside a React component or prototyping environment.

Before shipping, rename the class or move the style values into your own design tokens so the speech bubble fits the naming conventions of your codebase.

5. Export assets when code is not enough

PNG export is useful for quick placement in slides, documentation, or social assets. SVG export is more flexible if you need scaling or you want to open the result in a design tool for additional composition.

Keep in mind that the generator is optimized for clean bubble output, not full poster composition. Export the speech bubble here, then place it inside your design system or artboard where the rest of the layout belongs.

Common mistakes to avoid

• Choosing the tail position before the text length is realistic.
• Expecting the current output to provide a true border treatment.
• Testing only on a small mobile viewport when the final asset will be used on desktop or large-format visuals.

1. まず見た目の方向を決める

最初に単色かグラデーションかを選びます。単色はUIの部品やシンプルな注釈向きで、グラデーションはヒーロー、カード、キャンペーン訴求など、 吹き出し自体に視線を集めたい場面に向いています。

グラデーションを使う場合は、しっぽの位置を細かく詰める前に色と角度を大まかに決めておくと、最終イメージとの差が少なくなります。

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

二等辺のしっぽは柔らかく汎用的で、直角のしっぽはややグラフィカルで方向性を出しやすいです。 注釈や説明ラベルのように「どこを指しているか」が重要な場面では、直角のほうが収まりやすいことがあります。

形状を選んだら、辺・サイズ・位置を調整します。反転ボタンは直角しっぽ専用で、近くのUI要素や画像のどこを指すかに合わせて使うと効果的です。

3. テキストはプレビュー内で直接編集する

プレビューの吹き出し内をクリックして直接入力すると、行の折り返しや余白、しっぽとのバランスを見ながら調整できます。

実際に使う想定に近い文字量で試すと、最終的な比率や書き出しサイズの判断がしやすくなります。

4. 形が決まってからコードをコピーする

生成コードパネルを開き、Vanilla CSS か Tailwind CSS (JSX) をコピーします。スタイルシートに直接貼るなら Vanilla CSS、 React コンポーネント上で素早く検証したいなら JSX タブが便利です。

実案件に入れる際は、クラス名や値の持ち方を自分の設計ルールに合わせて調整し、デザイントークンや既存命名に寄せるのがおすすめです。

5. コードだけで足りないときは画像を書き出す

PNG はスライド、ドキュメント、SNS素材にそのまま置きたいときに便利です。SVG は拡大縮小やデザインツールでの再配置に向いています。

このツールは吹き出しそのものの生成に最適化されているため、ポスターや複雑なレイアウト全体は別のデザイン環境で組み合わせる前提で使うと相性が良いです。

よくある失敗

• 実際の文字量を決める前に、しっぽ位置だけを先に詰めてしまう。
• 現状の出力に、本格的な枠線表現まで含まれている前提で進めてしまう。
• 最終用途がデスクトップ中心なのに、小さなモバイル幅だけで見た目を判断してしまう。