Adobe XDに簡単にチャートを挿入できるプラグインOdin Chart

Adobe XDに簡単にチャートを挿入できるプラグインOdin Chart

  • このエントリーをはてなブックマークに追加

Odin Chartとは?

Odin Chartは、Tyler Wolf氏によって提供されているAdobe XD用のチャート作成プラグインです。

Odin Chartの公式サイトはこちら。
https://odinchart.com/

プラグインのインストール

Odin Chartを使うにはユーザー登録をする必要がありますので、まずは下記URLにアクセスしてユーザー登録を行います。

https://app.odinchart.com/signup

メールアドレス、パスワード、確認用パスワードを入力し、利用規約「I have read …」にチェックを入れて「Sign UP」クリックです。
ODIN Chartにユーザー登録

ユーザー登録が完了するとActivation Keyが発行されますので、表示したままにしておきます。
ODIN ChartのActivation Key

続いてはブラウザで下記ページにアクセスします。
https://xd.adobelanding.com/en/xd-plugin-download/?pluginId=88864a42

アクセスすると「Adobe XDを開きますか?」と画面案内が表示されますので、「Adobe XDを開く」を選択して開きます。

Adobe XDのプラグイン画面が表示されますので、「インストール」をクリックしてインストールします。
Adobe XD用プラグインOdin Chartのインストール

インストールが終わったらプラグイン画面から開きます。
Adobe XD用プラグインOdin Chartを開く

Activation Key入力を求められますので、登録したメールアドレスと先程のActivation Keyを入力して、「Active」をクリックします。これで一通りの準備は終わりです。
Odin ChartのActivation Key入力

Odin Chartの使い方

チャートの挿入

初期設定ではプラグイン画面で、「Create Chart」をクリックすれば折れ線グラフが簡単に作成できるようになっています。

  1. Select chart type
    チャートタイプを選択
  2. Select color scheme
    カラースキームを選択
  3. Create Chart
    「Create Chart」クリックでチャートを作成

Odin Chartの使い方

こんな感じで簡単にチャートが挿入できます。
Adobe XDに挿入されたOdin Chartのチャート

もちろん、チャートの先は色の変更や太さ、点線などを編集でき、ポイントを選択&ドラッグでチャートを変更することも可能です。
XDに挿入されたチャートの編集

チャートの種類

サンプルのチャートです。折れ線チャート、バーチャート、円チャート、テーブルチャート、散布図が挿入できます。
Odin Chartのサンプルチャート

世界地図も挿入できます。
Adobe XDに世界地図を挿入

データの挿入

CSVデータをインポートしてチャートを表示することもできます。下記サンプルのようにデータは行ごとに改行したシンプルなデータをインポートできます。

156
160
170
148
182
136
172

インポート自体は、「Select data source」の「Change」をクリックしてCSVファイルを読み込み、「Create Chart」で作成ができます。
Adobe XDのOdin ChartにCSVデータをインポート

実際に読み込んでみたサンプルです。
Adobe XDのOdin Chartでチャートデータを読み込み

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

マーツ(その他)

SONICMOOVでは、Webデザイナー、コーダーの経験を経て、Webディレクターに。様々なWeb制作・アプリ開発に関わり、その後、便利な用務員に。

関連するSONICMOOVのサービス

Webデザイナー募集!

イラストーレーター募集!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter

Webデザイナー募集!

新着の記事

mautic is open source marketing automation