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

GIFアニメの作り方
キップム
キップム

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

GIF動画の作り方
画像引用元:StickerApp より
キップム
キップム

こういうのなんだけど、知ってる?

yoko
yoko

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

キップム
キップム

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

yoko
yoko

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

キップム
キップム

わぁ。ワクワクする〜♪

スポンサーリンク

この記事はこんな人にオススメ

  • GIFアニメをブログに貼り付けたい人
  • PC上の操作を動画で伝えたい人
  • Macユーザー

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

Macの画面で動画を撮影して、GIFアニメに変換できるようになる!

GIFアニメとは??

自動的にループ再生される動く画像のこと

「音声が入れられない」「クリックレスでループ再生される」「動画よりも容量が軽い」という特徴がある。魅力は、伝えたいことを静止画よりも直感的に一瞬で伝えられるところ。

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

作り方は、3ステップ!

  1. 動画を録画
  2. 「PicGIF Lite」を入手
  3. 録画した動画をGIFに変換
 
yoko
yoko

MacOSによって録画方法が異なるんだけど、それも丁寧に説明するよ。

Step1:動画を録画する

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

MacOSがMojava以降の場合 

1. 動画にしたい画面を開き、キーボードの「Command + Shift + 5」を押す

GIF動画

2.「選択部分を収録」をクリック。点線枠をドラッグ&ドロップし収録範囲を決める

GIF動画

3.「収録」をクリックすると、録画がスタート

GIF動画

4. 画面右上の ボタンか、「command + control + esc」キーを押すと録画が終了。録画した動画はデスクトップ上に自動保存される

GIF動画

MacOSがMojava未満の場合

1. 動画にしたい画面を開き、「QuickTime Player」をクリック

GIF動画の作り方

2. メニューバーから「ファイル」>「新規画面収録」の順に選択

GIF動画の作り方

3.「画面収録」ウインドウが開くので、赤い ボタンをクリック

GIF動画の作り方

4. 下記のような表示が出たら、マウスをドラッグし収録範囲を決める

GIF動画の作り方

5.「画面を収録」ボタンが表示されるので、クリックすると録画がスタート

GIF動画の作り方

6. 画面右上の ボタンか、「command + control + esc」キーを押すと録画が終了

GIF動画の作り方

7. 別ウインドウで録画した動画が表示される。保存する場合は、左上の ボタンをクリック

GIF動画の作り方

8. 下記のようなウインドウが開くので「書き出し名」を入力し、「保存」をクリックする

GIF動画の作り方

Step2:「PicGIF Lite」を入手する

「PicGIF Lite」とは?

動画をGIFアニメーションに変換できる無料アプリ(Mac向け)

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

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

ジフ動画の作り方

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

GIF動画の作り方

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

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

1. 「PicGIF Lite」を起動する

GIF動画の作り方

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

GIF動画の作り方

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

GIF動画の作り方

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

GIF動画の作り方


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

GIF動画の作り方

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

  • サイズ
  • 速度とフレーム数
  • フレーム一覧の整理

サイズ 

GIF動画の作り方


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

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

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

GIF動画の作り方

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

GIF動画の作り方

速度とフレーム数

GIF動画の作り方


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

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

キップム
キップム

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

フレーム一覧の整理

GIF動画の作り方


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

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

GIF動画の作り方

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

GIF動画の作り方

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

表現の幅が広がったこと

伝えたい情報を1枚の画像で簡潔に伝えられるようになったこと

おわりに

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

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

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

GIFアニメの作り方

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

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

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

文章・イラスト: yoko(@_yoko51_

Comment