デスクトップ上の動きを動画で伝えたいなって思うんだけど、どうやって作ったらいいのかな？
こういうのなんだけど、知ってる？
GIFアニメ(GIF動画)のことだね。
GIFアニメって言うんだ！この言葉がわからなくて検索できなかったの…
それは大変だったね、、、でも、この記事を読めば、念願のGIFアニメが作れるようになるよ！
わぁ。ワクワクする〜♪
この記事はこんな人にオススメ
この記事を読めば、できること
Macの画面で動画を撮影して、GIFアニメに変換できるようになる！
GIFアニメとは？？
自動的にループ再生される動く画像のこと
「音声が入れられない」「クリックレスでループ再生される」「動画よりも容量が軽い」という特徴がある。魅力は、伝えたいことを静止画よりも直感的に一瞬で伝えられるところ。
GIFアニメの作り方、おおまかな流れ
作り方は、3ステップ！
- 動画を録画
- 「PicGIF Lite」を入手
- 録画した動画をGIFに変換
MacOSによって録画方法が異なるんだけど、それも丁寧に説明するよ。
Step1：動画を録画する
まずは、Macで動画を録画する方法をOS別（Mojava以降 / Mojava未満）にご紹介。
MacOSがMojava以降の場合
1. 動画にしたい画面を開き、キーボードの「Command ＋ Shift ＋ 5」を押す
2.「選択部分を収録」をクリック。点線枠をドラッグ&ドロップし収録範囲を決める
3.「収録」をクリックすると、録画がスタート
4. 画面右上の [wp-svg-icons icon=”stop” wrap=”span”] ボタンか、「command + control + esc」キーを押すと録画が終了。録画した動画はデスクトップ上に自動保存される
MacOSがMojava未満の場合
1. 動画にしたい画面を開き、「QuickTime Player」をクリック
2. メニューバーから「ファイル」>「新規画面収録」の順に選択
3.「画面収録」ウインドウが開くので、赤い [wp-svg-icons icon=”radio-checked” wrap=”span”] ボタンをクリック
4. 下記のような表示が出たら、マウスをドラッグし収録範囲を決める
5.「画面を収録」ボタンが表示されるので、クリックすると録画がスタート
6. 画面右上の [wp-svg-icons icon=”stop” wrap=”span”] ボタンか、「command + control + esc」キーを押すと録画が終了
7. 別ウインドウで録画した動画が表示される。保存する場合は、左上の [wp-svg-icons icon=”cancel-circle” wrap=”span”] ボタンをクリック
8. 下記のようなウインドウが開くので「書き出し名」を入力し、「保存」をクリックする
Step2：「PicGIF Lite」を入手する
「PicGIF Lite」とは？
動画をGIFアニメーションに変換できる無料アプリ（Mac向け）
「PicGIF Lite」インストール方法
1. PicGIF Lite から「Mac App Store」にアクセス
2. 「入手」をクリックし、ダウンロードで完了
Step3：録画した動画をGIFに変換する
ラストは、録画した動画をブログに貼り付けられるようGIFアニメにする方法をご紹介。
1. 「PicGIF Lite」を起動する
2. 先ほど録画した動画を「ビデオの追加」にドラッグ&ドロップする
3. 下記のようなウインドウが開く。ここで1秒間のフレーム数を設定する
デフォルトの「ノーマル」→「フレーム・カウント」→「24」でGIF化したら、下記画像のようなスピードになった。説明動画としては、ちょっと動きが早すぎるなと思ったので、
今回は「自動」→「フレーム / 秒（フレーム数）」を「10」に。設定が終わったら「読み込む」をクリック
3. GIF作成の設定画面が現れる。ここで設定するのは、以下の3項目。
サイズ
デフォルトで多くのサイズが用意されている。試しにその1つ 360 × 240 pixel で作って、ブログにアップしたらかなりぼやけて表示された。
GIFアニメをブログに貼り付けたいなと思っている人は、サイズをカスタマイズするのがオススメ。方法は、
① 「サイズ」→「カスタムサイズを管理する」を選択
② 「+」をクリックし、テンプレートの「名前」と「サイズ」を設定する
速度とフレーム数
速度は、「自動」を選択。
フレーム数は、最初に設定したフレーム数に合わせると元の動画と同じ速度になる。数を減らすと動きがゆっくりに、逆に増やすと早くなる。
フレーム数によってかなり印象が変わるので、いろいろ試してみてね！
フレーム一覧の整理
下部にフレーム一覧が表示されるので、不必要なものは「削除」をクリックし消す
4. 設定が完了したら、「再生」をクリックしプレビューを確認。OKだったら「GIFの作成」をクリックし保存する
5. フレーム数を「10」で設定して、完成したのがこちら
GIFアニメを作れるようになって、よかったこと
・表現の幅が広がったこと
・伝えたい情報を1枚の画像で簡潔に伝えられるようになったこと
おわりに
「イラストの一部を動かしてみたいな」と思ったことがある。
今回、「何枚もの画像で説明するより動画の方がわかりやすいから、なんとかして作ってみたい」
と思い調べていたら、イラストも動かせることがわかったので最後に作ってみた（作り方は、「PicGIF Lite」→「写真の追加」に2枚の画像をドラッグ&ドロップしただけ）。
カクカクしているけど…か、かわいい、、、
「やってみたい」という気持ちを行動に移したら、表現の引き出しが増え、以前ふと思ったことまで出来てしまった。嬉しかったので記録としてここに残しておきたいと思う。
GIFアニメ、想像以上に楽しかったので、気になる人はぜひ！
文章・イラスト： yoko（ @_yoko51_）
Comment