MENU
カテゴリー

【2022年版】XDで円グラフを作る方法を紹介!

【2022年版】XDで円グラフを作る方法を紹介!

takato(@n8takato)です!

XDで円グラフを作る方法が知りたい

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

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

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

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

この記事を読むメリット

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

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー3年目
  • web制作現場で学んだことを発信している人
目次

XDで円グラフを作る方法

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

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

XDでこのような円グラフを作成します。
XDで作成した円グラフ

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

XDで円グラフを作る手順

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

円を作成する

始めに円を作成します。

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

①「楕円形ツール」から円を作成します。
楕円形ツール

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

②円を作成します。
円の作成

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

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

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

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

③「サイズ」から円の太さを調節します。④円の縁が太くなりました。
「サイズ」の調節

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

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

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

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

⑤「線分」から円の割合を調節します。⑥円グラフのベースが完成しました。
「線分」の調節

作成した円を複製する

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

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

  • コピペ
  • オブジェクトを選択した状態で「option」+「ドラッグ」
⑦円グラフを複製します。
円グラフの複製

色を変えて重ねる

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

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

⑧円グラフの色を変更します。
色を変更

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

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

⑨片方の円の色も変更します。⑩円グラフ同士重ねたら完成です。
作成した円グラフを重ねる

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

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

塗りつぶした円グラフも作ることが出来ます。
塗りつぶされた円グラフ

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

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

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

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

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

最後にまとめです。

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

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

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

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

XDに関する他の記事はこちら

あわせて読みたい
【2022年版】AdobeXDで文字を縦書きにする方法を紹介! XDで文字を縦書きにする方法を知りたい。 この記事は上記の課題に向けて作成しております。 現時点ではXDのデフォルト機能で文字を縦書きにする方法はありません。 その...
あわせて読みたい
【簡単】AdobeXDでフローを解除する方法を紹介! XDでフローを解除する方法を知りたい この記事は上記の課題に向けて作成しています。 XDで作業していると不要になったフローを解除する場合があります。 XDでは簡単にフ...
あわせて読みたい
【2022年版】XDで動画を埋め込む方法を紹介! XDで動画を埋め込みたい この記事は上記の課題に向けて作成しています。 XDではデザイン上に動画を埋め込むことが出来ます。 共有することでデザイン上で動画の動きを確...
あわせて読みたい
【簡単】AdobeXDで吹き出しを作る方法を紹介! XDで吹き出しを作る方法を知りたい この記事は上記の課題に向けて作成します。 XDでデザインを作成する際吹き出しを作ることがあると思います。 XDでは簡単に吹き出しを...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次