使えるのか？AdobeXDで作るグラフ
最近WebデザインにAdobeXDをよく使うようになり、他のことにも使えるのではと思っていたところ、パワポとしても使う人がいると、風の便りを耳に。パワポとして使うのなら、やはりグラフ作成は必須だよなと思っていたところ、プラグインを入れると簡単にグラフを作れるらしいと小耳に挟んだといことで...。
「見せて貰おうか、XDのプラグインの性能とやらを」
プラグインを入れる
今回使用するプラグインは「VizzyCharts」。
VizzyCharts
VizzyChartsは、Adobe XD CCのデータ視覚化プラグインです。 実際のデータを使用してチャートをすばやく生成することができます。
（公式の翻訳引用）
● 作れるグラフは、縦棒グラフ、折れ線グラフ、ドーナッツグラフの3種類
● 読み込めるファイルは形式はCSVのみ
では、さっそく入れ方を見ていきましょう。
１．まずはパネルの①でプラグインを選択
２．②の＋を選択
３．③の虫眼鏡を選択
４．参照を選択して「VizzyCharts」と入力。
５．後はVizzyChartsを選択して、インストールして完了
準備は以上で完了。
プラグインを使う
それではプラグインを使っていこう。
（今回は1列目に項目名、2列目に数値を記載したファイルを使用）
１．プラグインのパネルに追加された、VizzyChartsを選択
２．グラフを載せるボートを作ろう。（大きさはお好みで）
Column（縦棒グラフ）
１．importでcsvファイルを読み込みましょう
２．SIZEのW,Hはグラフのサイズ。キャンバスの大きさより小さくすると余白できて綺麗に見えるよ。
３．下は縦棒の幅と間隔。間隔はある程度とると綺麗に見えるよ。
４．LABELS AND FONTS でラベル文字のフォントサイズ、フォントカラーを調整可能。
５．COLORSでは棒グラフのカラーを選択可能。標準では青になる。
６．調整が終わったら、Createボタンを押せばあとは勝手に生成してくれる。
こんな感じの棒グラフができた。やったね！
幾つものパーツに分かれているので、レイヤーパネルから、調整もできるよ。
Line（折れ線グラフ）
１．手順は縦棒グラフとあまり変わらないよ
２．STYLEでは直線がStraight、Curvedが曲線になるよ
３．Strokeで線の太さを、Mark Sizeで点のサイズを変更できる。
４．後はCreateボタンを押せばよし！
そして、こんなのができる。
レイヤーから、線の色を変えたり、ラベル文字の被りを修正したりと、調整可能。
Ring（ドーナツグラフ）
残念ながらドーナツグラフではCSVは読み込めないらしい...
１．DATAに％数値を入力していく。手入力(ノД`)・゜・。コピペしよう。
２．入力順は、時計回りになるので、右から順に
３．SIZE AND STYLEでは、左上でグラフの幅、右上でドーナッツの幅、左下でドーナツを切ったときの各間隔幅、右下でドーナッツを切ったときにの切れ端の丸みを調整できる。
４．LABELでグラフタイトルを付けられる。初期値ではドーナッツの丸の中に置かれる。
５．後はお馴染みCreateボタンをポチっと押すだけ。
グラフ完成サンプル
調整した縦棒グラフ
棒上の数値やタイトルなどは後付け
調整したドーナッツグラフ
初期だと中央にタイトルと一番最初の数値が大きく入る
ラベルと数値は後付け
折れ線グラフは調整してない．．．（めんどい．．．）
他にも
AdobeXDにはプロタイプの機能が、これを使って作ったグラフ同士を、繋げることが可能。ボードを選択して、トリガーをタップにして繋げていく。
右上の再生ボタンをおすとパワポのスライドのように！
共有機能を使うと．．．
AdobeのCreative Cloud（有料）に入っていると、オンラインで共有が可能。
共有を選択して、表示選択でプレゼンテーションを選択、リンクを発行すれば、リンクを知っている人のみが見れるようになります。
ぱっと作ってさくっと共有ができる！凄い楽！
後は、adobefontが使えたりなど、他のadobeサービスと連携すると力が増す。
共有機能以外は無料（アカウント登録有）なので、興味がある人は下の関連リンクにAdobeXDのリンクを張っておくのでどうぞ。
最後に
肩が痛くて書くのめんどくなってきたのでメリット、デメリット書いて終わるね。(;´･ω･)
メリット
● シンプルなグラフは簡単にできる。
● 直感的な操作でグラフを調整できる。
● 調整可能範囲が広いため、視覚的に伝えやすいグラフ作成にも繋がるかも
● 状況によってはパワポより最強（かもしれない）
デメリット
● メモリを付けたり、複数の項目を入れたりなど、複雑なグラフ作成には弱い
● ドーナッツグラフの数値入力がだるい
● 項目ごとの数値入力もだるい
● Excelのようなしっかりとしたグラフ作成、公的資料には向かない
一応作れないこともないけど、BtoBとかのしがらみが厳しとこでは絶対に使わない方がよい！ライトなとこで使う分にはあり！
要するに状況によって左右する！以上閉廷！（適当すぎる...）
やっぱExcelには勝てねーわ…（当たり前）
今回使用したCSVのデータは下のサービスのです。良かったらこっちも見てね(´▽｀*)
関連リンク
SNS
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？