tmkdesign

BLOG POST

【GIPHY Capture】Gifアニメーションが簡単に作れる※MAC専用フリーソフト

画面キャプチャ動画をブログに貼り付けたい

インプットしてもすぐに、ほんと、やばいくらい頭から消えちゃう私は、備忘録としてブログでアウトプットしていってます。

そんな中、自分で書いていたり、いろんなブログを見ていたりして、動画がついているとわかりやすいって思うことが多いです。

実際の手順の流れが、動画であればすごくわかりやすくて、じっくり読む時間がないときでも、文章を読んで理解してやる、ってよりもパッと見てすぐにそのままシャドウイング。時間が足りない現代人、できるだけ時短したい。

ということで、画面キャプチャ動画を「GIPHY Capture」で作成する方法を解説します。

GIPHY Capture

GIPHY Captureアイコン画像

公式サイト

GIPHY Captureのメリット

★無料で使える

★MAC専用ソフト

★画質はある程度選択できる

★キャプチャのサイズ指定が可能

★高い操作性で初心者でもとても使いやすい

★GIF内に簡単にキャプションを入れられる

★公式サイトではアニメーションを共有できる

GIPHY Captureのデメリット

★WINDOWS非対応

★データが重たくなりがちなので、別ソフト(Gfycatなど)で圧縮が必要

★公式サイトがあるが、日本語非対応

GIPHY Captureの使い方

1. app store からダウンロードする

app Storeから「入手ボタン」をクリックしてダウンロードします。

自動的にアプリケーションフォルダに入ってました。同時にLaunchpad内にも入っています。

2. 起動する

アプリケーション内か、Launchpad内のGIPHY CaptureアイコンをWクリックして起動。

するとこのようなガイドが現れます。この緑の部分が録画の範囲です。右下のボタンをドラッグすれば録画範囲の大きさを変えることができます。

黒いバーの真ん中の赤丸が録画・停止ボタンです。

3. 録画する

キャプチャ録画したい範囲に緑の枠を合わせて、赤い丸印をクリックします。それにより録画がスタートします。

緑色の部分がクリアに変化してくれるので、録画されているのがわかりやすいです。再び赤い丸印をクリックすると、録画がストップします。

すると、上図のように今録画したファイルが表示されます。

4. 編集する

ファイルをクリックすると、下図のような編集や保存ができる画面が出現します。

5. キャプションを入れるには、Captionタブ

① Captionタブ・・・キャプションを設定できます。

② 「+ ADD CAPTION」・・・キャプションを追加。⑤のバーが現れます。紫のバーでキャプションを入れるタイミングや長さをお好みに調整できます。

「PAUSE」・・・ピンクのバーが止まったり、動いたりする。キャプションを入れるタイミングを検討するのに便利。

③ キャプションの文章入力エリア

④ キャプションのカラー・サイズ・スタイルを設定

⑤ 一つのキャプションの設定バー・・・③で入力した文字が反映され、調整する。X印で削除。

⑥ キャプション位置・・・ドラッグで位置調整する。

動画の最初に「start!」最後の方に「End」のキャプションを入れてみました。

↑ ちなみに、このGIFアニメーションのデータ容量が大きすぎてアップロードできなかったので、「Gfycat」で変換して出来たコード(レスポンシブIFrame)を、カスタムHTMLブロックにコピペしてます ↑ 驚きのデータ容量:変換前 68.5MB → 変換後 1.8MB!

5. 保存して、ブログに埋め込む

① オプションタブ・・・保存や、公式サイトのアカウント上にアップロードすることができる

② キャプションタブ・・・Gifアニメーションにキャプションをつけたり、簡単な編集ができる

③ ループタイプ・・・「Normal(通常の繰り返し)」「Reverse(逆再生で繰り返し)」「Ping-Pong(通常再生・逆再生を交互に繰り返し)」を選択

④ ピクセルタイプ・・・(640px/480px/320px)

⑤ フレームレート(画質)設定・・・(Standard/HD/High/Low)

⑥ 保存ボタン・・・GIF (.gif) / VIDEO (.mp4) / BATCH(.gif-large , .gif-small , .mp4, .jpeg)

⑦ UPLOAD TO GIPHY・・・公式サイトにアカウントがあればアップロードできる

5. ブログに埋め込む

★動画ブロックに直にメディアをアップロード・・・データが軽ければこれでOK

★圧縮して埋め込む・・・最大アップ容量を超えている場合は「Gfycat」にアップロードして、そこで生成されたコードをカスタムHTMLブロックにコピペする。10分の1以下に圧縮、かつ、GifアニメをWebM形式に変換できるので個人的にはおすすめです。

まとめ

画面キャプチャを録画でき、キャプションもお好みで入れられる、MAC専用フリーソフト「GIPHY Capture」の使い方を解説しました。そして、重たくなりがちなGIFアニメは「gfyCat」を使えば軽くしてブログに貼り付けることができます。

「gfyCat」の使い方は近いうちに公開します。興味がある方はそちらもご覧いただけたら嬉しいです。