月と東京タワー

Piktochartの使い方 ドーナツグラフを作ってみる

      2016/04/01

Piktochartは、インフォグラフィックを簡単に作成できる(という触れ込みになっている)オンラインツールです。

が、なにせこちらはど素人です。
簡単なものからちょっとずつ…というわけで、まず単独のグラフを作ってみます。

Piktochartにログイン

なにはともあれログインです。

アカウントの作り方はこちらに
【PiktoChart】アカウントの作り方

ログインページに行って、アカウントにログインします。

テンプレートを選択する

一番最初はこのページが開くと思います。

今は、グラフを一枚作りたいだけなので、なにもデザインされていない白紙のテンプレートを選びます。

少し下にスクロールしてください。
Create your own infographic」というテンプレートがあります。
マウスオーバーすると「PREVIEW」「CREATE」と表示されるので、「CREATE」をクリック。

TOOLSでグラフを選択する

「CREATE」を選ぶと、白っぽい作成用フィールドが出てきます。
「Create Your Own Infographic」など、親切なガイドが淡く表示されますが、今はいらないので消してしまいます。

文字の書かれている箇所をドラッグで囲うように選択して「Delete」を押せば消せます。

データからグラフを作るときは、左のアイコンの「TOOLS」をクリックします。

ターゲットブロック(図表を入れるブロックです。クリックすると画面が黒く変化して選択できたことが分かります)を選んだ状態にして、左の「TOOLS」をクリック。

左側に出る3つのアイコンから「CHARTS」をクリック

サンプルデータの入った画面が表示されます。

右側のエクセル状のシートに直接データを入れれば左側にグラフが出来ますが、これは当たり前なので、ここではデータをインポートしてグラフにする方法でやってみます。

2008年アメリカ大統領選、ウィスコンシン州総選挙でオバマとロムニーがそれぞれどれだけ得票したかのグラフを作ることにします。

データをインポート

保存してあるエクセルファイルを読み込む場合

画面右上に見える「IMPORT YOUR DATA」をクリックしてください。
ドライブからファイルを選ぶおなじみの窓が出るので、任意のエクセルファイルを選びます。

Piktochart_ファイル選択

Piktochartにエクセルのデータが表示されました。

Googleスプレッドシートを読み込む場合

まず上の「Dynamic Data」をクリックして下の画面に遷移します。

ここで、「Past Google Spread Sheet Link」に読み込ませたいシートのURLを入れるのですが、このシートは公開されている必要があります。

googleスプレッドシート公開の方法

スプレッドシートを設定します。

シートの「ファイル」から「ウェブに公開

Piktochart_Googleスプレッドシート公開1

開いたダイアログで、「公開」をクリック。
この時、特定のシートだけを公開対象とする場合は、「ドキュメント全体」とあるボタンから公開するシートを選びます。右側は「ウェブページ」で。

スプレッドシートと連携してグラフが更新するようにしたいときは、下の「変更が加えられると自動的に再公開する」にチェックを入れてください。

Piktochart_Googleスプレッドシート公開2

そうすると、「ドキュメント全体」「ウェブページ」とある下にリンクが表示されます。

それが、Piktochartの「Dynamic Data」で指示するリンクになります。

スプレッドシートのリンクを入力して「LINK」をクリック

PiktochartにGoogleスプレッドシートのデータが表示されました。

ドーナツグラフ作成!

これで材料は揃ったので、いよいよドーナツグラフを作ります。

ドーナツを作りたいのでグラフの種類を変えます。
左に並んでいるアイコンにマウスオーバーしていくとグラフの種類(名称)が表示されます。

「Doughnut」をクリック

グラフを整える

ドーナツ型のグラフになりました。
でもなんか変。順に調整していきます。

グラフのスタート地点を調整

通常、円グラフやドーナツグラフでは、一番数値の大きい要素(ここでは53%のオバマ)が12時の方向からはじまってぐるっと一周するもの…ですよね。
なぜかオバマが9時にスタートしているので、これを12時に変えます。

右上の「Settings」をクリックしてください。

右下「Advanced」のAngleが「West」になっているので、これを「North」に変えます。

ドーナツが、12時からのスタートに変わりました。
Piktochartの世界では、時計の12時を方角の北と呼ぶようです。

色を調整

グラフの色を変えます。

右にある「Individual Color Setting」で、要素ごとに好きな色を選びます。
また、フォントの色はデフォルトでグレーなのですが、どうも薄いのでこれをタイトル、テキスト(凡例等です)ともに黒に変えました。

タイトルを入力する

出来ているチャートの上の「Click to Edit Title」あたりをクリックすると上にタイトル入力用の窓が出現します。

そこにグラフのタイトルを入力します。

タイトルを移動

右の「General」の「Title Position」を「Top」から「Bottom」に変えるとタイトルが下に移動します。同じ要領で凡例(Legend)を上に変えることも出来ます。

「Legend」ボタンのON/OFFで凡例を消すこともできますが、ここでは残します。

チャートをテンプレートに入れる

残すはサイズの調整のみとなったら、右上の「INSERT CHART」を押します。
(キャプチャをとり損ねました。一度インサートしてから編集に戻るとボタンが下の画像のように「UPDATE CHART」になります。一度目は「INSERT CHART」のはずです。)

するとテンプレートに戻ります。

ここで、グラフの周囲をクリックすると下図のような枠が見えるようになるので、枠をドラッグしてサイズを調整しながらグラフとタイトルのバランスを整えてください。

ブロックもドラックで縦に広げられます。

不要なBLOCKを削除する

ここではグラフ一枚だけがあればいいので、テンプレートの下に続くBLOCKは必要ありません。
このBLOCKを消してしまいます。

不要なBLOCKにマウスオーバーして、BLOCKが暗くなったら上でクリックします。

左側にあるツールボックスが、選んだBLOCKのほうへ移動してきます。

ツールボックスの「2」は、上から2番目のBLOCKですよの意味のようです。

この「2」を消したいので、ツールボックスの「×」をクリックします。

選んでいたBLOCKが消えて次のBLOCKが出てくるので、同じ要領で消していきます。

チャート部分だけのシートになりました。
ドーナツグラフはこれで完成です。

下にPiktochartのロゴが入っているのは無料プランだからです。
$29/月の有料プランを契約するとこれは消せます。

Piktochartウィスコンシン2008総選挙

再度編集したいときは、チャートの近くにカーソルを持っていくと右上に鉛筆のアイコンが出るので、そこをクリックすれば編集用の画面に戻れます。

出来上がったグラフをダウンロードしたり、サイトに埋め込んだりの作業についてはこちらに
Piktochartの使い方 インフォグラフィックのダウンロード・公開・共有

スポンサーリンク


 - Infographics