簡単にインフォグラフィックスを作れるツール infogr.am

データを視覚的に見せることをインフォグラフィックスと言い、数字をビジュアルでイメージさせることで、見る人にインパクトを与える効果があります。算数の時間で習う棒グラフや円グラフなどもその一例ですが、最近デザイン的に面白いものをよく見かけるようになりました。Tripadviserの「Tripgraphics」なんか、すごく分かりやすく、見ているだけで楽しいですね。

2014-09-19_05h06_08

そうしたインフォグラフィックスをWeb上で簡単に作るサービスの1つがinfogr.amです。infogr.amを使うと、使用したいインフォグラフィックスの種類とデザインテンプレートを選択し、Excelで作成したデータをアップロード、または貼り付けするだけで簡単にインフォグラフィックスを作成できます。基本的なサービスは無料で使用できますが、作成したグラフ等を画像(png)やPDFに出力するためには月額制の使用料を支払う必要があります。

ちょうど、infogr.amの中の人が来日し、9月27日12:30から渋谷でユーザーズミートアップを行いますので、関心がある方はぜひ足を運んでみてください。

以下に使用方法を簡単に説明していきます。最初の画面から「join now」をクリックし、ユーザー登録をします。

2014-09-20_21h09_48

登録は、自分でユーザー名やパスワードを決めてもよいですし、FacebookやTwitter、Google+のアカウントと紐付けることもできます。

2014-09-20_21h10_18

ログインするとこの画面になります。「Create」でインフォグラフィックを作成、既に作成したものを閲覧、使用するときは「My Library」、「Upgrade to Pro」は有料ユーザーへの移行を表します。まずは、Createからインフォグラフィックスを作ってみます。

2014-09-20_21h10_51

まずは、デザインテンプレートとグラフの種類を選択しますが、作成中でもテンプレート/グラフのチェンジはできますので、あまり真剣に選ぶ必要はないでしょう。テンプレートを選ぶと編集画面に移ります。上部に「infographics」と「Charts」があり、infographicsでテンプレート、Chartsでグラフを選択します。

2014-09-20_21h13_17

Chartsで選べるインフォグラフィックスのバラエティの豊富さがinfogr.amのよい点の1つで、14パターンもあります。

2014-09-19_05h05_58

編集画面では、「Charts」で何も選択しなかった場合、デフォルトで折れ線グラフにサンプルデータが入っています。タイトル、グラフ、説明文の各部分をダブルクリックして編集しますが、グラフの種類は変更できないので、折れ線グラフ以外のインフォグラフィックスを選択する場合は、いったん左上の「☓」で削除してから、画面右側にある「Add Chart」で新たなグラフを作成します。

2014-09-20_21h13_41

左上の歯車マークをクリックすると設定画面が現れ、デザインテンプレートやグラフの幅などが変更できます。無料版だとロゴの変更などはできません。

編集画面右側にはグラフ、地図、テキスト、写真などを追加するためのボタンが用意されています。

2014-09-19_04h31_07  2014-09-19_04h33_49

まずは、デフォルトの折れ線グラフを加工してみましょう。サンプルデータが入っているので、グラフ部分をダブルクリックしてデータの加工ウィンドウを出します。

Googleスプレッドシートのような感覚でデータを入力、貼り付けします。Excel,CSVデータのロードも可能です。サンプルとして日本の婚姻・離婚件数のデータを貼り付けてみました。

2014-09-19_04h29_56

グラフの加工を終え、編集画面でタイトル、下部テキストを加工するだけで折れ線グラフの完成です。プレビュー表示させてみましょう。

2014-09-19_04h40_01

しかし、折れ線グラフや棒グラフならExcelを使ったほうが見栄えも使いやすさも断然上です。せっかくinfogr.amを使うのであれば、Excelでは作れないものにすべきでしょう。

というわけで、続いてピクトグラムを作ってみましょう。折れ線グラフを削除し、Chartsから「Pictoral」を選択します。グラフ部分をダブルクリックして編集します。分かりやすく2012年の婚姻・離婚件数をピクトグラム化してみましょう。
※婚姻・離婚件数は足して100になるものではないので、比率というタイトルは間違ってましたね。このピクトグラムには不適切なデータでした。スイマセン

2014-09-19_04h51_26

infogr.amでは、ピクトグラムで時系列のデータを表示する場合、上部に表示される年をクリックすると、グラフ部分がその年に対応した内容に切り替わります。

2014-09-19_05h14_17

これは、Treemapのサンプル。デフォルトのサンプルデータに日本人の姓が入っていました。

2014-09-19_05h10_17

作成したインフォグラフィックは、「Share」から「Publish」することでFacebookやTwitter、Pinterestに出力できます。Webでの公開も選択できますが、あくまでinfogr.amのサイト内での公開で、自分のサイトへのグラフの埋め込みは有料オプションのようです。

基本的な使用方法の説明は以上です。有料版にアップグレードするとインフォグラフィックの保存などの機能が使用できるようになります。しかし、月額課金制なので個人ユーザーを対象にしているようには思えませんね。

2014-09-19_05h11_04

いかがでしょうか?個人ユーザーが無料版を使用する範囲ですと、そもそも作ったインフォグラフィックをどう使うかというところで迷ってしまいそうですが…ここでやっているようにスクリーンキャプチャして見せるしかないんでしょうかね。

まだスタートしたばかりのサービスで、これから進歩するものと思います。少し使ってみて改善してほしい点を列記しておきます。

  • タイトルなどで、文字のフォント・サイズを変えられるようにしてほしい
  • 無料で画像、埋め込みソースを出力できるようにするか、課金方法を月額制ではなく1回数ドルにしてほしい
  • 保存は自動でないほうがいい

手軽にピクトグラムやTreemap,Wordcloudなどユニークなインフォグラフィックスを作成できるツールとして使ってみてはいかがでしょうか。

Comments