mac-capture-by-gif-brewery-3
公開日: 2021.05.07  | 更新日: 2021.08.29

Macで簡単にGIF動画の画面キャプチャをとる方法

今回は、「GIF Brewery by Gfycat」というアプリを使って、Macの画面をGIFアニメーション動画でキャプチャする方法を紹介します。当ブログでも、Figmaの操作方法やツールの画面を動画でキャプチャーする際に、このツールを活用しています。

また、Mac App Storeからダウンロードできない場合の代替案として、Mac OSの標準機能でGIFではありませんが動画をキャプチャする方法を、最後におまけで紹介いたします。

ユーザーガイドでアプリの操作方法を録画したり、アプリ開発のデバッグ作業などで挙動の確認や不具合の再現を録画して共有する際に大変便利です。

この記事のターゲット

  • Macの画面をGIFアニメーション(.gif)でキャプチャしたい方

  • Macの画面を動画(.mov)でキャプチャしたい方

  • GIFアニメの中に注釈や字幕を入れたり編集をしたい方

単純な静止画のキャプチャをしたいときは、「Skitch」というアプリがおすすめです。以下に使い方を紹介していますので、ご参考まで!

Macで簡単に注釈付きスクリーンショットを撮る方法

今回は、パソコンの画面(特にMac)のスクリーンショットをキャプチャする方法を紹介します。使用するのは、「Skitch」という古くから使い古されているツールです。SkitchはWindowsにも対応していますが、この記事ではMac版を中心に紹介いたします。 ... 続きを読む

screenshot-tool-skitch


1. Mac App Storeからアプリをダウンロードし、インストールする

gif-brewery-3

公式サイトか、Mac App Storeから「GIF Brewery by Gfycat」をダウンロードします。

このアプリは、GIFアニメの提供サービスなどを展開しているGfycatという会社が2016年に買収され、その当時はキャンペーンとして無償提供されていた過去がありますが、現在は610円で購入できます。

2. アプリを起動する

launch-gif-brewery-3

ダウンロードが完了したら、早速起動しましょう。

GIF BreweryはGIFアニメーションの編集に特化したアプリで、機能も豊富です。

  • 動画ファイルからGIFファイルに変換

  • GfycatでホスティングされているGIFファイルをインポートする

  • 画面をキャプチャしてGIFファイルに出力

  • ビデオカメラの映像をGIFファイルに出力

上記が代表的な機能です。今回は「画面をキャプチャしてGIFファイルに出力」の機能を紹介しますので、それ以外の機能についてはぜひダウンロードしてお試しください。

3. 画面をキャプチャする

起動メニューの「Record Screen」をクリックすると、キャプチャするエリアを指定するウインドウが表示されます。キャプチャしたいエリアに設置して、左下の「Record」ボタンをクリックするとキャプチャが開始されます。

recording-gif

録画を終了するときは左下の「Stop」を押します。

すると、録画された動画が確認できるようになります。右上のSettingを開くと、動画の1秒間のコマ数(フレームレート)やGIFファイル内で表現する色数などを調節することができます。

コマ数を増やしたり、色数を増やすとその分ファイルサイズがどんどん大きくなりますので、私は以下の設定でいつも使用しています。この設定だと、1200 x 630px、60秒程度の動画で数MBのファイルサイズになります。

  • Frame Count: 45

  • Frame Delay: 66 ms

  • Frame Per Second: 15

  • Loop Type: 適宜

  • Loop Count: 適宜

  • Loop Delay: 0ms

  • Color Count: 48

  • Algorithm: Ordered

調整したら、「Create」をクリックしてファイルを書き出します。

save-gif

変換が完了すると、設定した内容でGIF動画が再生されるので、問題がないか確認します。よければ、そのまま「Save」をクリックして名前をつけて保存して完了です!

以下が最終的に出力された動画です。

gif-recording-sample

また、このアプリのすごいところが、GIFアニメーション動画内に字幕をつけることもできます。

gif-edit-text

字幕の付け方は、画面上部の「Text」をクリックして字幕に追加したいテキストを入力します。複数表示したい場合は、その数だけTextを追加します。

そのままだと開始から最後まで表示されてしまうので、追加した字幕ごとに表示開始と終了のタイミングを設定します。

  • Overlayを開き、表示開始タイミングを設定したい字幕を選択して、シークバーをその字幕を開始したい位置に合わせて、右下の「Set Start Time」を押すと開始時間がセットされる

  • 終了タイミングを設定したい字幕を選択して、シークバーを終了したい位置に合わせて、右下の「Set End Time」を押すと終了時間がセットされる

これで字幕がつけられます。以下は字幕をつけて出力したGIFです。

gif-add-text

これで字幕付きのGIFが簡単に作成できました。最近はTwitterや各SNSで、GIF動画でFigmaなどの操作方法をアップするのも流行っていますので、ぜひこちらでも試してみてください!


おまけ:Macの画面を標準機能の動画(.mov)でキャプチャする方法

今回は「GIF Brewery by Gfycat」のアプリを使ってGIF動画を作りました。

しかし、「GIF Breweryで録画している様子はどうやって録画しているんだろう?」と疑問に思われた方は鋭いです。

実は、GIFにこだわらなければ、Macで画面を動画でキャプチャする方法があります。それには、Macに標準で搭載されている「Quick Time Player」を利用します。

Quick Time Playerには「新規画面収録」という機能があり、これを起動すると画面全体、指定した部分などを録画することができます。

recording-quick-time-player

ざっくりとした手順は以下の通りです。

  • Quick Time Playerを起動する

  • 「ファイル」メニューから「新規画面収録」をクリック

  • 録画領域を設置して、録画コントロールバーの「収録」をクリックして録画開始

  • 終了はツールバーの右側の「⏹ 」ボタンを押すと録画が停止する

こんな感じです。Quick Time Playerの詳しい使い方は、Appleの公式サイトも参考にしてください。


最新の記事を見る
広告
この記事を書いた人
うえんつ

うえんつ

X a.k.a Twitter
B2B領域のSaaS・アプリケーション開発などを組織で取り組むことが得意なプロダクトデザイナーで、このブログのオーナーです。
今の関心事
Figma・UIデザイン・UXリサーチ・QOL・旅行
広告