takato(@n8takato)です!
![](https://takatoblog.org/wp-content/uploads/2022/07/man-300x300.png)
XDで吹き出しを作る方法を知りたい
この記事は上記の課題に向けて作成します。
XDでデザインを作成する際吹き出しを作ることがあると思います。
XDでは簡単に吹き出しを作ることが出来ます。
この記事ではXDで吹き出しを作る簡単な方法を紹介します。
この記事を読むメリット
- XDで吹き出しを作る簡単な方法がわかる
この記事を書いた人
![](https://takatoblog.org/wp-content/uploads/2022/07/takato.jpg)
この記事を書いた僕はこんな人です!
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
目次
XDで吹き出しを作る方法
早速XDで吹き出しを作る方法を説明します。
下記のような吹き出しを作ることをゴールとします。
![今回作成する吹き出しはこのようなものです。](https://takatoblog.org/wp-content/uploads/2022/10/xd-speech-bubble01.jpg)
XDで吹き出しを作成する手順は下記の通りです。
XDで吹き出しを作る手順
- 複数の楕円を作成
- 作成した楕円を合体
- 吹き出しの尻尾を作成
- 吹き出しと尻尾を合体
複数の楕円を作成
始めに吹き出しの元になる楕円を複数作成します。
楕円は「楕円形ツール」から作成することが出来ます。
![①「楕円ツール」より楕円を作成します。](https://takatoblog.org/wp-content/uploads/2022/10/xd-speech-bubble02.jpg)
楕円を1つ作ったらコピペで増やしてください。
![②作成した楕円を複製します。コピペで複製してください。](https://takatoblog.org/wp-content/uploads/2022/10/xd-speech-bubble03.jpg)
作成した楕円を合体
続いて複数の楕円を合体します。
全ての楕円を選択した状態で「合体」を選択します。
※「合体」は画面右側のメニューにあります。
![③複製した楕円を全て選択した状態で「合体」を選択します。](https://takatoblog.org/wp-content/uploads/2022/10/xd-speech-bubble04.jpg)
これで吹き出しのベースとなる部分が完成しました。
![④吹き出しのベースが完成しました。](https://takatoblog.org/wp-content/uploads/2022/10/xd-speech-bubble05-1.jpg)
吹き出しの尻尾を作成
次は吹き出しの尻尾の部分を作成します。
吹き出しの尻尾は「ペンツール」で作成します。
※吹き出しの縁の太さと尻尾の縁の太さを揃えるようにしましょう。縁のサイズは図形を選択した状態で「サイズ」から調節出来ます。
![⑤「ペンツール」で吹き出しの尻尾を作成します。⑥吹き出しの縁の太さに合わせます。](https://takatoblog.org/wp-content/uploads/2022/10/xd-speech-bubble06.jpg)
吹き出しと尻尾を合体
最後に吹き出しと尻尾を合体します。
先ほどと同じくそれぞれの図形を選択して「合体」を選択します。
![⑦吹き出しと尻尾を選択した状態で「合体」を選択します。](https://takatoblog.org/wp-content/uploads/2022/10/xd-speech-bubble07.jpg)
これで吹き出しの完成です。
![⑧吹き出しの完成です。](https://takatoblog.org/wp-content/uploads/2022/10/xd-speech-bubble08.jpg)
XDでは吹き出しが簡単に作れる!
最後にまとめです。
XDで吹き出しを作る手順
- 複数の楕円を作成
- 作成した楕円を合体
- 吹き出しの尻尾を作成
- 吹き出しと尻尾を合体
XDでは簡単に吹き出しが作れます。
知らなかったという方は是非試してみてください。
XDに関する他の記事はこちら
あわせて読みたい
![](https://takatoblog.org/wp-content/uploads/2022/09/convert-xd-to-illustrator-300x157.png)
![](https://takatoblog.org/wp-content/uploads/2022/09/convert-xd-to-illustrator-300x157.png)
【2024年版】XDをIllustratorに変換する方法!
XDデータをIllustratorに変換したい この記事は上記の課題に向けて作成します。 XDでは簡単にIllustratorデータに変換することが出来ます。 この記事ではXDデータをIllu...
あわせて読みたい
![](https://takatoblog.org/wp-content/uploads/2022/09/xd-drop-shadow-300x157.png)
![](https://takatoblog.org/wp-content/uploads/2022/09/xd-drop-shadow-300x157.png)
【2024年版】XDでドロップシャドウを作る方法!
XDでドロップシャドウを作る方法を知りたい この記事は上記の課題に向けて作成しています。 XDでは簡単にドロップシャドウを作成することが出来ます。 この記事ではXDで...
あわせて読みたい
![](https://takatoblog.org/wp-content/uploads/2022/09/xd-wavy-line-300x157.png)
![](https://takatoblog.org/wp-content/uploads/2022/09/xd-wavy-line-300x157.png)
【2024年版】AdobeXDで波線を作る方法を紹介!
XDで波線を作る方法を知りたい この記事は上記の課題に向けて作成しています。 web制作をしていると波線を作ることがたまにあります。 僕も最近波線を作成しました。 そ...
あわせて読みたい
![](https://takatoblog.org/wp-content/uploads/2022/09/xd-text-arch-300x157.png)
![](https://takatoblog.org/wp-content/uploads/2022/09/xd-text-arch-300x157.png)
【AdobeXD】文字をアーチ状にする方法を紹介!
XDで文字をアーチ状にする方法を知りたい この記事は上記の課題に向けて作成しています。 XDでデザイン制作をしていると文字をアーチ状にしたくなる時があります。 この...