ブログで統計情報を解説した内容を書こうと思っていましたが、静止画を貼り付けるだけではイマイチ目を引かない気がする。
そんなことを考えていたら、「そういえばスティーブ・ジョブズの講演でグラフ動かしてた！」と思い出し、いろいろと調べてみました。
↓↓ いろいろ調べて作ったGIFアニメーション ↓↓
比較的カンタンにこんなグラフを作ることができました！
その方法をお伝えしますね。
プレゼンソフトkeynoteで3Dグラフアニメを作る
Macで動作するプレゼンテーションソフト「keynote」で3Dグラフを作ると、ブログでも動きのある３Dアニメーションを載せることができました。
3Dグラフを作成する方法
私が使っているkeynoteは「keynote09」です。
少し古いバージョンですが、keynote09で3Dグラフを作る方法をお伝えします。
１ ツールバーから「グラフアイコン」をクリックし作成したい3Dグラフを選択する
２ グラフデータ・エディタが表示されるので、データを編集する
最初からサンプルデータが入っていますので、表したいデータに変更していきます。
３ 3Dのグラフが作成されます
上記のグラフはサンプルデータをそのまま表示したものです。
棒グラフの色や３D軸の回転などもできるのでいろいろと試してみてください。
3Dグラフを動かす方法
keynote09で作成した3Dグラフを動かす方法です
ツールバー右側にある「インスペクタ」を選択すると、上記のようなウィンドウが表示されます。
このウィンドウ上部、左から三番目にあるアイコン「Tの左隣り」を選択すると上記ウィンドウの表示になるはずです。
これがオブジェクト（グラフ）でアニメーションを作成する方法です。
「イン」というのは表示させるときのエフェクトで、今回はグラフを表示する際にアニメーションさせたいので、ここを編集します。
上記キャプチャでは「エフェクト」でグローを選択しています。
これは本記事トップのような３Dグラフが「伸びてくる」表現を表すアニメーション効果です。
これだけでアニメーション設定は完了です！
動画を出力する方法
作成したグラフ３Dアニメーションを動画出力するには、ツールバーから「ファイル」→「書き出す」→「QuickTime」を選択します。
上記のウィンドウが表示されると思います。
再生設定は「固定タイミング」、繰り返しは「再生の繰り返し」として保存してください。
以上で３Dグラフアニメーションを動画ファイルで出力できたはずです。
動画(movファイル)をアニメーションGIFにする方法
最後に、ブログでも利用できるよう、動画ファイル（movファイル）をアニメーションGIFに変更する方法をお伝えします。
フォトショップでmovファイルを読み込みアニメーションGIFを作る
私が実際に作成した方法はフォトショップ（CS5）を利用したものです。
フリーのアプリなど試したのですがうまくいかず、すこし特殊なアプリですがフォトショップで動画ファイルをアニメーションGIF化する方法をお伝えします。
１ 動画ファイルをフォトショップで読み込む
２ 「ファイル」→「Webおよびデバイス用に保存」を選択
３ アニメーションGIF作成用設定を施し保存
プリセットを「GIF32ディザなし」、ループオプションを「無限」として保存。
これで絶えずループするGIFアニメーションが作成されます。
注意点
アニメーションGIFは普通のJPEG画像などと比較し、動画のためファイル容量が非常に大きくなります。
keynoteのデフォルトサイズ1024 x 758 のピクセルサイズだと、このブログトップのGIFはアニメ程度で600KBを超えます。
ブログ記事中には大きくても横幅500ピクセル程度になると思いますので、フォトショップでアニメーションGIFを作るときに画像サイズを50％程度に小さくしておくことをオススメします。
まとめ
残念ながらWindowsしかお持ちでないなら使えませんが、Macユーザーなら是非keynoteで3Dグラフアニメ作りにチャレンジしてみて欲しいです。
ブログ記事内に普通の画像と同じように取り込め、動きがでるので見た目がとても良くなりますよ！