【XD】円グラフをプラグイン無しで作る方法を紹介！

この記事は上記の課題に向けて作成しています。

XDでは円グラフを簡単に作ることが出来ます。

プラグインを使わずに作成出来るためXDが重くなることもありません。

XDで円グラフを作ったことが無い方は読んでみてください。

この記事を読むメリット

• プラグインを使わずにXDで円グラフを作る方法がわかる

XDで円グラフを作る方法

早速XDで円グラフを作る方法を紹介します。

XDでは下記のような円グラフが作成出来ます。

XDで円グラフを作る方法は下記の通りです。

XDで円グラフを作る手順

1. 円を作成する
2. 「サイズ」から円の太さを調節する
3. 「線分」から円の割合を調節する
4. 作成した円を複製する
5. 色を変えて重ねる

円を作成する

始めに円を作成します。

円はXD左側のメニューにある「楕円形ツール」から作成出来ます。

今回は「直径300px」の円を作成します。

「サイズ」から円の太さを調節する

続いて円の太さを調節します。

XDメニュー右側にある「サイズ」の数値で調節出来ます。

※数値が大きくなるほど太くなります。

「線分」から円の割合を調節する

次は円の割合を調節します。

XDの右側メニューにある「線分」から円の割合を調節出来ます。

数値を増やすと徐々に円の割合が調節出来るようになります。

作成した円を複製する

作成した円を複製します。

XDの複製は下記の2通りがあります。

• コピペ
• オブジェクトを選択した状態で「option」＋「ドラッグ」

色を変えて重ねる

複製した円の色を変更します。

「線」から円の色を変更することが出来ます。

最後に円の向きを変えて重ねます。

これで円グラフの完成です。

Illustratorで円グラフを作る方法も紹介しています。

あわせて読みたい

Illustratorで円グラフを作成する方法を紹介！ Illustratorで円グラフを作成する方法を知りたい この記事は上記の課題に向けて作成しています。 Illustratorでは簡単に円グラフを作成することが出来ます。 円グラフを...

他の形の円グラフも作ることが出来る

先ほどとは異なる形のした円グラフを作ることも出来ます。

上記のように円の中を塗りつぶした円も作成出来ます。

円の中を塗りつぶすには「サイズ」の値を円の半径まで増やします。

※「300px 300px」の円の場合は「サイズ」の値は150になります。

先ほどと同様に複製して重ねれば完成です。

未経験でwebデザイナーになれるの？

webデザイナーを目指してXDを勉強している方がいると思います。

多くの人が未経験でwebデザイナーを目指しているはずです。

僕自身未経験でwebデザイナーになりました。

僕がwebデザイナーになるまでに行ったことを記事にまとめました。

あわせて読みたい

未経験からwebデザイナーになるためにやったことを紹介！ 未経験でwebデザイナーになるには何をすれば良いの？ この記事は上記の課題に向けて作成しています。 未経験でwebデザイナーを目指している方が多いかと思います。 僕自...

XDでは簡単に円グラフが作成出来る！

最後にまとめです。

XDで円グラフを作成する手順

1. 円を作成する
2. 「サイズ」から円の太さを調節する
3. 「線分」から円の割合を調節する
4. 作成した円を複製する
5. 色を変えて重ねる

XDではプラグインを使わなくても円グラフが作成出来ます。

まだ作ったことの無い方は是非やってみてください。