数秒のGIFアニメをブログに貼り付けたい人、必見！作り方を27枚の画像で徹底解説

モモ

デスクトップ上の動きを動画で伝えたいなって思うんだけど、どうやって作ったらいいのかな？こういうのなんだけど、知ってる？

エミリ

GIFアニメ(GIF動画)のことだね。

モモ

GIFアニメって言うんだね！この言葉がわからなくて検索できなかったの…

エミリ

それは大変だったね、、、でも、この記事を読めば、念願のGIFアニメが作れるようになるよ！

モモ

わぁ。ワクワクする〜♪

この記事を読めば、できること

GIFアニメとは？？

• 音声が入れられない
• クリックレスでループ再生される
• 動画よりも容量が軽い

という特徴があります。

エミリ

魅力は、伝えたいことを静止画よりも直感的に一瞬で伝えられるところだよ。

GIFアニメの作り方、おおまかな流れ

作り方は、3ステップ！

MacOSによって録画方法が異なりますが、それも丁寧に説明していきます。

Step1：動画を録画する

まずは、Macで動画を録画する方法をOS別（Mojava以降 / Mojava未満）にご紹介。

エミリ

あなたのMacはどっち？ 当てはまるOSに合わせてクリックすると、詳細が出るよ！

Step2：「PicGIF Lite」を入手する

「PicGIF Lite」とは？

「PicGIF Lite」インストール方法

PicGIF Lite から「Mac App Store」にアクセス

「PicGIF Lite」をインストールする

「入手」をクリックし、ダウンロードで完了

Step3：録画した動画をGIFに変換する

ラストは、録画した動画をブログに貼り付けられるようGIFアニメにする方法をご紹介。

「PicGIF Lite」を起動する

先ほど録画した動画を「ビデオの追加」にドラッグ&ドロップする

下記のようなウインドウが開く。ここで1秒間のフレーム数を設定する

デフォルトの「ノーマル」→「フレーム・カウント」→「24」でGIF化したら、下記画像のようなスピードになりました。説明動画としては、ちょっと動きが早すぎるなと思ったので、

今回は「自動」→「フレーム / 秒（フレーム数）」を「10」に。設定が終わったら「読み込む」をクリックします。

GIF作成の設定画面が現れる。ここで設定するのは、以下の3項目。

1. サイズ
2. 速度とフレーム数
3. フレーム一覧の整理

❶ サイズ

デフォルトで多くのサイズが用意されています。試しにその1つ 360 × 240pixel で作って、ブログにアップしたらかなりぼやけて表示されました。

GIFアニメをブログに貼り付けたいなと思っている人は、サイズをカスタマイズするのがオススメです。方法は↓

① 「サイズ」→「カスタムサイズを管理する」を選択

② 「+」をクリックし、テンプレートの「名前」と「サイズ」を設定する

❷ 速度とフレーム数

速度は、「自動」を選択。

フレーム数は、最初に設定したフレーム数に合わせると元の動画と同じ速度になります。数を減らすと動きがゆっくりに、逆に増やすと早くなります。

エミリ

フレーム数によってかなり印象が変わるので、いろいろ試してみてね！

❸ フレーム一覧の整理

下部にフレーム一覧が表示されるので、不必要なものは「削除」をクリックし消します。

設定が完了したら、「再生」をクリックしプレビューを確認。OKだったら「GIFの作成」をクリックし保存する

フレーム数を「10」で設定して、完成したのがこちら

GIFアニメを作れるようになって、よかったこと

おわりに

「イラストの一部を動かしてみたいな」と思ったことがあります。

今回、「何枚もの画像で説明するより動画の方がわかりやすいから、なんとかして作ってみたい」

と思い調べていたら、イラストも動かせることがわかったので最後に作ってみました（作り方は、「PicGIF Lite」→「写真の追加」に2枚の画像をドラッグ&ドロップしただけ）。

カクカクしているけど…か、かわいい……

「やってみたい」という気持ちを行動に移したら、表現の引き出しが増え、以前ふと思ったことまで出来てしまいました。嬉しかったので記録としてここに残しておきたいと思います。

GIFアニメ、想像以上に楽しかったので、気になる人はぜひ！

エミリ

ロジカル・クリエイター

Contact

主な生息地は、おうち。暮らしの中で良いなと思ったことを、女性目線でじっくり調べてお届けします。