フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

技術系ブログにあると分かりやすいGif動画をMacで作成する方法

スポンサーリンク

スポンサーリンク

Gif動画 作成

仕事がら技術系ブログや記事を見る機会が多いんだけど、gif動画があると圧倒的にわかりやすい!!

 

コードと説明でも十分に伝わるんだけど

gif動画があるとどんな風に動くかわかるので直感ですごい伝わる!!

 

このブログでも技術系記事を扱ってるのでgif動画を作成する方法を学んでみた!!

 

 

動画を撮影

 まずQuitckTimePlayerを起動して「ファイル」メニューから「新規画面収録」を選択する。

f:id:ksakae1216:20180307213027p:plain

そしてこの「画面収録」画面の録画ボタン(真ん中赤色)を押下すると「クリックすると画面全体を収録します」というのがが画面中央に出てくるので全画面を収録する場合はそのボックスをクリックします。

 

一部のウィンドウでいい場合は、撮影したい部分だけをドラッグ&ドロップする。

f:id:ksakae1216:20180307213615p:plain

 

すると、こんな風に「収録を開始」と出るのでこれを押すと動画撮影を開始します。

 

動画撮影を停止したい場合は、メニューバーにある停止ボタン(赤枠)を押下して下さい。

f:id:ksakae1216:20180307213918p:plain

 

動画を編集

次に撮影した動画を編集します。

動画撮影後に見直すと分かりますが動画の最初と最後に無駄な時間があったりするのでスッキリさせるためにトリミングします。

 

QuitckTimePlayerの「編集」メニューに「トリム」を選択して下さい。

f:id:ksakae1216:20180307214812p:plain

黄色の部分を前後に調整して不要な部分をトリム(削除)します。

そして最後に「ファイル」メニューから保存してください。

 

Gifに変換(PicGIF Lite)

さあ、いよいよGifに変換します。

 

PicGIF LiteをMacにインストールして下さい。

PicGIF Lite

PicGIF Lite

  • PearlMountain Technology
  • 写真
  • 無料

 

起動するとこんな感じ。

f:id:ksakae1216:20180307215731p:plain

「ビデオの追加」で編集した動画を選択して下さい。

そして画面右下のフレームを6にして読み込むボタンを押下。

f:id:ksakae1216:20180307221024p:plain

 

次の画面で調整したいところがあれば設定を変更しOKだったら「GIFの作成」ボタン押せば無事Gif動画作成です!!

 

Gifを圧縮

さて作成されたGif動画ですがそのままだとサイズが大きいので圧縮します。

 

下記サイトにGif動画をアップロードすると圧縮してくれます。

https://www.iloveimg.com/ja/compress-image

 

今回私が作成したGif動画は8.42MB→1.43MBへ83%圧縮されました!! 

 

ブログに貼り付ける

 あとはブログに貼り付ければ完了です!!

f:id:ksakae1216:20180307223413g:plain

 

 

最後に

f:id:ksakae1216:20180307225343g:plain