織田信長の生涯

Read Article

ブログに貼り付けられる3Dグラフアニメを簡単に作る方法

ブログで統計情報を解説した内容を書こうと思っていましたが、静止画を貼り付けるだけではイマイチ目を引かない気がする。

そんなことを考えていたら、「そういえばスティーブ・ジョブズの講演でグラフ動かしてた!」と思い出し、いろいろと調べてみました。

↓↓ いろいろ調べて作ったGIFアニメーション ↓↓

テスト

比較的カンタンにこんなグラフを作ることができました!

その方法をお伝えしますね。

プレゼンソフトkeynoteで3Dグラフアニメを作る

Macで動作するプレゼンテーションソフト「keynote」で3Dグラフを作ると、ブログでも動きのある3Dアニメーションを載せることができました。

3Dグラフを作成する方法

私が使っているkeynoteは「keynote09」です。

少し古いバージョンですが、keynote09で3Dグラフを作る方法をお伝えします。

1 ツールバーから「グラフアイコン」をクリックし作成したい3Dグラフを選択する

keynote3Dグラフ作り1

2 グラフデータ・エディタが表示されるので、データを編集する

keynote3Dグラフ作り2

最初からサンプルデータが入っていますので、表したいデータに変更していきます。

3 3Dのグラフが作成されます

keynote3Dグラフ作り3

上記のグラフはサンプルデータをそのまま表示したものです。

棒グラフの色や3D軸の回転などもできるのでいろいろと試してみてください。

3Dグラフを動かす方法

keynote09で作成した3Dグラフを動かす方法です

 

keynote3Dグラフ作り4

ツールバー右側にある「インスペクタ」を選択すると、上記のようなウィンドウが表示されます。

このウィンドウ上部、左から三番目にあるアイコン「Tの左隣り」を選択すると上記ウィンドウの表示になるはずです。

これがオブジェクト(グラフ)でアニメーションを作成する方法です。

「イン」というのは表示させるときのエフェクトで、今回はグラフを表示する際にアニメーションさせたいので、ここを編集します。

上記キャプチャでは「エフェクト」でグローを選択しています。

これは本記事トップのような3Dグラフが「伸びてくる」表現を表すアニメーション効果です。

これだけでアニメーション設定は完了です!

動画を出力する方法

作成したグラフ3Dアニメーションを動画出力するには、ツールバーから「ファイル」→「書き出す」→「QuickTime」を選択します。

keynoteの動画出力

上記のウィンドウが表示されると思います。

再生設定は「固定タイミング」、繰り返しは「再生の繰り返し」として保存してください。

以上で3Dグラフアニメーションを動画ファイルで出力できたはずです。

動画(movファイル)をアニメーションGIFにする方法

最後に、ブログでも利用できるよう、動画ファイル(movファイル)をアニメーションGIFに変更する方法をお伝えします。

フォトショップでmovファイルを読み込みアニメーションGIFを作る

私が実際に作成した方法はフォトショップ(CS5)を利用したものです。

フリーのアプリなど試したのですがうまくいかず、すこし特殊なアプリですがフォトショップで動画ファイルをアニメーションGIF化する方法をお伝えします。

1 動画ファイルをフォトショップで読み込む

2 「ファイル」→「Webおよびデバイス用に保存」を選択

フォトショップでアニメーションGIF

3 アニメーションGIF作成用設定を施し保存

フォトショップでアニメーションGIF2

プリセットを「GIF32ディザなし」、ループオプションを「無限」として保存。

これで絶えずループするGIFアニメーションが作成されます。

注意点

アニメーションGIFは普通のJPEG画像などと比較し、動画のためファイル容量が非常に大きくなります。

keynoteのデフォルトサイズ1024 x 758 のピクセルサイズだと、このブログトップのGIFはアニメ程度で600KBを超えます。

ブログ記事中には大きくても横幅500ピクセル程度になると思いますので、フォトショップでアニメーションGIFを作るときに画像サイズを50%程度に小さくしておくことをオススメします。

 

まとめ

残念ながらWindowsしかお持ちでないなら使えませんが、Macユーザーなら是非keynoteで3Dグラフアニメ作りにチャレンジしてみて欲しいです。

ブログ記事内に普通の画像と同じように取り込め、動きがでるので見た目がとても良くなりますよ!

URL :
TRACKBACK URL :

Leave a Reply

*
*
* (公開されません)

Return Top