LOGzeudon

名古屋で働いているWebデザイナーのブログです

Macでgifアニメーション画像を無料でつくる方法

f:id:rokuzeudon:20160401133604g:plain

Twitterで投稿できるようになるなど、いろいろな場所で活躍しているGifアニメ。Youtubeのようにいちいち再生しなくても、動画として見れる手軽さが便利です。

Macがあれば無料のアプリを利用してカンタンにつくることができます。
いろいろな方法があり、自分も試してみて便利だった2つのアプリを紹介します。

GifGrabber

GifGrabber

GifGrabber

  • Fast Hatch Apps
  • ビデオ
  • 無料

変なアイコンのこちらのアプリ。

アプリを起動すると、画面上にいきなり「緑色のエリア」が表示されます。

その緑色のエリアが撮影範囲になります。位置・サイズを調整し、赤い「Start Capture」部分をクリックすると撮影開始します。
もう一度クリックして撮影を終了し、表示されたウィンドウにて保存して完了。

オプションで、カーソルを撮影するかどうか選択できます。初期設定だと写りません。
メニューバーにあるアイコンから、一番下にあるチェックボックス「Capture cursor」にて設定します。

ということで、Youtubeの動画や画面操作の様子の動きをgifにしたい時にとても便利です。

PicGifLite

PicGIF Lite

PicGIF Lite

  • PearlMountain Technology Co., Ltd
  • 写真
  • 無料

PC上の動画や写真からGifアニメを作成できます。再生速度やコマの順番など細かい設定もできて便利。

「Mac標準ソフトで画面の撮影を行い、PicGifLiteでGifアニメを作る」というシチュエーションで紹介してみます。

まずQuickTimePlayerで画面を録画する

主に動画を再生するときに使うアプリですが、画面を録画することもできます。

メニューから「新規画面収録」をクリック。

こんなコントローラーが表示されます。(写ってるgifgrabberは関係ないです…)

赤色の録画ボタンを押した後、クリック&ドラッグで撮影範囲を指定することができます。

撮影終了後、できた動画を再生するウィンドウが表示されるので、ここで「保存」します。

次に、iMovieで動画の余分な箇所をカットする

ちょっとした動画加工・調整をかなり手軽に行えるのがiMovieの良いところ。

とりあえず、新しいプロジェクトを作成します。「ムービー」を選択。

色々テーマがありますが、「テーマなし」にします。

メディアが空の状態なので、タイムラインのところに動画ファイルをドラッグして突っ込みます。端を選択して左右に動かすと、動画をトリミングできます。

ウィンドウの右上部より、「ファイル」を選択して書き出します。

最後に、PicGIF Liteで動画をGifアニメに変換する

PicGIF Lite

PicGIF Lite

  • PearlMountain Technology Co., Ltd
  • 写真
  • 無料

Lite版ですがGifアニメを作成するために十分な機能があります。有料版にすると、このアプリ内でトリミングができるようになるみたいなので、iMovieのステップが省略できますね。

アプリを起動するとこんな画面になります。今回は「ビデオの作成」をクリック。

動画を選択すると、こんな画面に。ここで「フレーム」の数を設定します。数値を大きくするほど滑らかなGifになりますが、データ容量も大きくなります。

今回はサイズとフレーム数の設定だけ変更します。フレーム数を変えると、アニメーションのスピードを変えることができます。設定したら、「Gifの作成」をクリック、書き出して完了です。

一番上の画像だけは「写真を追加」から作成しましたが、その他はすべて、PicGIF Liteでこの順序で作成しました。

まとめ

  • 手早くパッと作りたいならGifGrabber!
  • ちょっと作り込みたいならPicGIF Lite!
GifGrabber

GifGrabber

  • Fast Hatch Apps
  • ビデオ
  • 無料
PicGIF Lite

PicGIF Lite

  • PearlMountain Technology Co., Ltd
  • 写真
  • 無料
PicGIF

PicGIF

  • PearlMountain Technology Co., Ltd
  • 写真
  • ¥600