【2019年保存版】日本語ガイドGoogle 『Data GIF Maker』作り方注意と解説

Googleが『Data GIF Maker(データーGIFメーカー)』というが面白いツールを公開しています。

簡単にGIFモーションが作れます。日本語で解説作ったので、あなたもやってみて〜。

※日本語だけですが、GIFグラフを書き出すパターンだと『タイトル部分』に文字化けが発生しました。URLで共有するパターンだと。この『タイトル部分』の文字化けは発生していません。

Problems that only occur in Japanese language.
~~~~~~~~~~~~~~
Download data is character corruption.Shared by URL to prevent character corruption.
~~~~~~~~~~~~~~

『Data GIF Maker(データーGIFメーカー)』とは?

数字を簡単に、動きのあるグラフに出来るツールです。

『Data GIF Maker(データーGIFメーカー)』を使えば、伝えたい思いやコンセプトを、想起させるような印象的な動くグラフをいとも簡単に作ることが出来るとGoogleは言っています。

Data GIF Maker の誕生の誕生はいつ?|実は以前からあった!

今年(2019年)の3月にGoogleが、Twitterで下記のようにGIFグラフに関する告知を行ったことで、『Data GIF Maker』への注目が集まりましたが、実はこのGIFメーカー自体は、2017年に誕生して公開されていました。

ただ、この時はまだ四角形のGIFグラフしかなかったようなのです。今回は、サークル形とレース形が追加され発表されたようです。

私も実際に使ってみて感じました。
『Data GIF Maker(データーGIFメーカー)』は、感覚的に数字を『GIFモーショングラフ』にすることが出来るツールです。

ですが、やっぱり日本語で詳しく「手順なり・注意点など」の解説をしているページがあっても良いのではないかな?と思ったので記事にしてみました。

【プチ予習】『Data GIF Maker』のサイトに行く前に

早速、『Data GIF Maker』のサイトに行って、 GIFのグラフを作ってみよう!と言いたいところですが、サイトに行くといきなり説明が開始さるので、びっくりしてしまうかもしれません。

なので、まずはざっくりと下記の解説に目を通してから『Data GIF Maker』のサイト行った方が、理解しやすいかと思います。

『Data GIF Make』のサイトに行くと、このような画面がはじめに表示されます。

Data GIF Make Google news lab guide 01

Google and the Google logo are registered trademarks of Google LLC, used with permission.

するとこのような英文が出てきます。

Easily create and share data visualizations to help bring your stories to life.

これは、『Data GIF Make』についての紹介文です。
『Data GIF Make』は、伝えたい情報のストーリーを魅力的にさせるものですよ。
『Data GIF Make』は、数値を視覚化したグラフ を簡単に作り、共有することができるものですよ。
というような内容が表示されているだけです。

そして、続いて『Data GIF Make』の簡単な使い方の手順が紹介されます。

Data GIF Make Google news lab guide 02

Google and the Google logo are registered trademarks of Google LLC, used with permission.

First, select a theme
まず、テーマを選択してください

Data GIF Make Google news lab guide 03

Google and the Google logo are registered trademarks of Google LLC, used with permission.

Next, title your GIF and choose a value type.
次に、GIFにタイトルを付けて値の種類を選択します。

Data GIF Make Google news lab guide 04

Google and the Google logo are registered trademarks of Google LLC, used with permission.

Then customize each term with a name, value and color.
その後、名前、値、色を使って各用語をカスタマイズします。

Data GIF Make Google news lab guide 05

Google and the Google logo are registered trademarks of Google LLC, used with permission.

Ready to save? Download your GIF or copy a shareable link.
【Get started】
保存する準備はできましたか? GIFをダウンロードするか、または共有可能なリンクをコピーしてください。
【始めましょう】

わかりましたか?
大したことは書いていないのですが、私は説明がいきなり出てきて、画面がコロコロ変ったのでびっくりしてしまいました。

【START 】はじめよう

それでは早速、下記のボタンをクリックして『Data GIF Maker』のサイトに行って、モーション GIF グラフを作ってみよう!(クリックすると別タグが開きます)

先ほど説明した、英文の説明が終わると、下記のような画面になります。
※はじめる前の注意点があります。作業中に保存せず、違うサイトに行くと、とまた1からの作業になっちゃいます。気をつけましょう。

Data GIF Make guide 01

Google and the Google logo are registered trademarks of Google LLC, used with permission.

画面の右側に英文で書かれているのは、まだグラフを1つも作っていない時にだけ表示される英文です。意味は下記の通りです。

No GIFs made yet
Get started by selecting a theme to the left.

まだGIFはありません
左側のテーマを選択して始めましょう。

説明の通り、左側からクリックでテーマを選びます。

Data GIF Make guide 02

Google and the Google logo are registered trademarks of Google LLC, used with permission.

テーマは、ビジュアルだけでも予想がつきますが、日本語に置き換えると、このようなテーマです。

  • 『 Rectangles 』四角形のグラフ
  • 『 Circles 』円形のグラフ
  • 『 Racetrack 』レース形のグラフ

今回は、四角形のグラフを作ってみましょう。
左上のテーマをクリックすると、下記のような画面になります。

Data GIF Make guide 03

Google and the Google logo are registered trademarks of Google LLC, used with permission.

右側の操作パネルでの『Untitled』に、このグラフのタイトルを入れます。

※このタイトルを入れないと、グラフデータの書き出しができないです。最後に入れようと思って忘れてしまい、あれ??書き出しボタンクリックできない!?ということにならないように注意してくださいね。←やった人

Data GIF Make guide 04

Google and the Google logo are registered trademarks of Google LLC, used with permission.

色は、ペンキマークの部分にカーソルを合わせると、様々な色が表示されます。好きな色をクリックするだけで、色を変更できます。

Data GIF Make guide 05

Google and the Google logo are registered trademarks of Google LLC, used with permission.

ピンク色を黄色に変更してみました。
すると、ペンキマークの部分が黄色に変わります。

Data GIF Make guide 07

Google and the Google logo are registered trademarks of Google LLC, used with permission.

そして、左側のグラフもこんな風に連動して色が変わります。

Data GIF Make guide 06

Google and the Google logo are registered trademarks of Google LLC, used with permission.

同じように、下のグラフの色も緑色から青色に変更してみました。

次は、グラフの要素の名前を入れてみましょう。

Data GIF Make guide 08

Google and the Google logo are registered trademarks of Google LLC, used with permission.

『TERM ONE』の中の『Name 』部分に入れます。カーソルを合わせると文字を入力することができるようになります。
黄色を『朝』、青色を『夜』と入力してみました。

Data GIF Make guide 09

Google and the Google logo are registered trademarks of Google LLC, used with permission.

ここでは何の変化もありません。
次は、グラフの比率を指定します。『Value』の部分に、黄色を『30』・青色を『70』と入力しました。

Data GIF Make guide 10

Google and the Google logo are registered trademarks of Google LLC, used with permission.

すると左のグラフが、このように反映されます。

Data GIF Make guide 11

Google and the Google logo are registered trademarks of Google LLC, used with permission.

試しに、黄色を『30』・青色を『90』にしてみました。

Data GIF Make guide 12

Google and the Google logo are registered trademarks of Google LLC, used with permission.

すると左のグラフの比率は、黄色を『25』・青色を『75』になりました。

Data GIF Make guide 13

Google and the Google logo are registered trademarks of Google LLC, used with permission.

必ず合計が100の数値になるように設定されているようです。

では、グラフを、黄色を『30』・青色を『70』に戻します。

Data GIF Make guide 14

Google and the Google logo are registered trademarks of Google LLC, used with permission.

【確認】GIFグラフを確認してみよう!

完成したGIFグラフが、どんな感じか確認してみましょう。

操作パネルの真ん中上あたりに、『PRVEIEW』と小さいボタンがあるのでクリックしてください。
すると、GIFグラフが動きます。

2つの要素の比較だったらこれで完了です。

保存方法の説明の部分をご覧ください。

【グラフの『要素』を追加する】

2つ以上の比較要素を使ってGIFグラフを作りたい場合は、要素の下の部分にある『+ADD TERM』をクリックすると、新しく要素が下に追加されます。

Data GIF Make guide 15

Google and the Google logo are registered trademarks of Google LLC, used with permission.

先ほどと同じように、新要素に名前と数値を入力すれば、このようになります。

Data GIF Make guide 15

Google and the Google logo are registered trademarks of Google LLC, used with permission.

青色の項目を端にして、真ん中をオレンジ色にしてみました。

Data GIF Make guide 16

Google and the Google logo are registered trademarks of Google LLC, used with permission.

一つ一つのグラフの要素を、ドラッグで入れ替えたりとか出来たらいいのになと、作業していて思いました。理由としては、その方がもっと感覚的に、操作出来るようになるからです。

Data GIF Make guide 17

Google and the Google logo are registered trademarks of Google LLC, used with permission.

タイトル名に間違いがないか、確認して

いよいよGIFグラフデータを保存します。

Data GIF Make guide 18

Google and the Google logo are registered trademarks of Google LLC, used with permission.

操作パネルの右上にある『SAVE GIF』にカーソルを合わせて下さい。
すると、HQとLQ 2つの保存方法が表示されます。

HQとLQでは、HQの方が保存に時間がかかります。

Data GIF Make guide 19

Google and the Google logo are registered trademarks of Google LLC, used with permission.

クリックすると、このように保存作業が始まります。
私は比較の為に、HQとLQ の両方書き出しました。

時間のかかるHQの方は、このようにエラーっぽくなるかもしれません。でも、そのまましばらく待っていると、私の場合は無事に書き出し保存されました。なので、焦らず待ってみましょう。

Data GIF Make guide 20

Google and the Google logo are registered trademarks of Google LLC, used with permission.

LQの方を先に保存ボタン押したのですが、HQの方が保存作業しているマークがまだ表示されていました。最終的にはこのように、無事両方とも保存が完了しました。

Data GIF Make guide 21

Google and the Google logo are registered trademarks of Google LLC, used with permission.

【リンク先を知る方法】

完成したGIFの右端に クリップマーク と雲のマークが表示されています。

Data GIF Make guide 21

Google and the Google logo are registered trademarks of Google LLC, used with permission.

このクリップマークをクリックすると、自分が作ったGIFグラフの共有ページに移動します。URLを選択してコピーすればよいです。

コピーペーストの方法

ちなみにコピーは、マウスだと右クリックで『コピー』でき、貼り付けは、マウスだと同じように右クリックで『ペースト』出来ます。

キーボードだと『Ctrl+C(Windows)』『Command+c (MAC)』でコピーできます。
URLの貼り付けは、『Ctrl+V(Windows)』『command+option+V(MAC)』で行います。

『Data GIF Maker』で作った円形GIFグラフ(リンクは文字化けしてない)

【ダウンロード方法】

完成したGIFの右端に クリップマーク と雲のマークが表示されています。

この雲マークの方を押すとダウンロードすることが出来ます。

Google の『Data GIF Maker』で作った円形GIFグラフ

Google の『Data GIF Maker』で作った四角型グラフ(日本語文字化けしてる)

★【corruption】ダウンロードの注意点

ダウンロードしたGIFグラフは、タイトルの日本語部分が文字化けしてしまっていました。

ちなみに、共有ページのGIFグラフは日本語でも文字化けしていません。

なので、ダウンロードして使用する場合は、英文表記にしておくのが無難と言えます。

これが完成したGIFグラフです。ね。『1日の分類』と入力したはずなのに『1・・ぐじゃぐじゃ・』となっています。

Google の『Data GIF Maker』で作った円形GIFグラフ

Google の『Data GIF Maker』で作った四角型グラフ(日本語文字化けしてる)

こちらが、GIFグラフの共有ページです。
『Data GIF Maker』で作った円形GIFグラフ(リンクは文字化けしてない)

Problems that only occur in Japanese language.
~~~~~~~~~~~~~~
Download data is character corruption.
~~~~~~~~~~~~~~
~~~~~~~~~~~~~~
Shared by URL to prevent character corruption.
~~~~~~~~~~~~~~

まとめ

いかがでしたか?結構簡単にできましたね。
『Data GIF Maker』を使う時の注意点は下記の3つでしたね。気を付けて活用していきましょう。

  • 作業の途中でどこかのリンクに行かない(別ウィンドウは大丈夫です)
  • グラフの数値は合計で100になるようになっている。
  • GIFグラフをダウンロードして使用する場合は、タイトルを英文表記にする。

プレゼンの時に、グラフをGIFモーションで見せると、見てる人はもちろんなんだけど、プレゼンしている方も楽しいです。

だから、アニメーションの使いすぎには、注意しないとなとも感じました。アニメーションを多用し過ぎると、そっちにばかり目がいってしまいますからね。みて欲しいのは数字。グラフのアニメーションは主役ではなく、数字を効果的に見せるサポート役な訳です。

ですが、『Data GIF Maker(データーGIFメーカー)』を使うと、エンターテイメント性は明らかにアップすると感じました。ここぞというタイミングで、効果的に使いたいものです。

おすすめ記事

猫イラスト一覧|イラスト作品集

ネコ好き!イラストを描くことが好き!そんなグラフィックデザイナーが、同じ猫好きの方の為に、猫イラストを不定期で描いています。

猫イラスト一覧|グラフィックデザイナー のイラスト作品集

猫イラスト一覧|グラフィックデザイナー のイラスト作品集

Instagramは@illustration cat boxでイラストを公開中。
Twitterでも、@mad365day で、皆さんに猫イラストをお届けしています。

コメントしてみる