スクリーンキャプチャを超簡単にGifアニメーションにする方法

Pocket
LINEで送る

先日公開したこちらの記事(Sketchでの素材の書き出しを10倍早くする3つの小技)を読んでくれた知人から、スクリーンムービーをどのように撮影したのか聞かれたので、この際自分自身もわからなかったことも含めて共有したいと思います。

credit: giphy.com

画面をGifで録画する

QuickTimePlayerでスクリーンムービーをmp4ファイルで撮影し、それをPhotoshopでGifに変換する、なんて手間はGiphy Captureがあれば必要ありません。

credit: Giphy Capture

ダウンロードして起動したら、こんな画面が立ち上がるので、あとは中央の撮影ボタンを押すだけ。薄いグリーンの領域が撮影されます。必要なサイズにリサイズしてから撮影しましょう。

撮影を終了するにはもう一度先程のボタンを押します。撮影が終わると、撮影した動画のサムネイルがグリーンの撮影領域の下に出現するので、ダブルクリックしましょう。Saveを.gifでスクリーンのキャプチャを保存することが出来ます。

マウスカーソルごと撮影する

僕も昨日まで知りませんでした。Toolbar > Preference(⌘,)から、Giphy Captureの設定画面を開きます。下の方にある”Capture Cursor”にチェックマークをつければ、マウスカーソルを含むスクリーンムービーを撮ることが出来ます。

キーボード入力を可視化する

静止画+テキストよりもときにパワフルな情報になりうるGifアニメーションですが、画面の外で起きていることを伝えることができないという欠点があります。キーボードで入力したキーをスクリーン上に表示させるためのツールがこちらのmouseposéです。

Boinx Software – Mousepose

¥1,000ほどする有料アプリですが、個人的にはとても重宝しています。主な機能は3つ。

キーボード入力の表示

カーソルへの注目を集める

ショートカットでの切り替えも可能。

クリックも可視化

クリック音なども出せるようです。Gifでは使いませんが、動画だと便利そうです。

ブログに掲載する

せっかく手間を掛けてGifアニメーションをブログに掲載しても、アニメーションは常に動いているため、スクロールのタイミングによってはアニメーションに気づかないことも。GiffferというJavascriptライブラリを使えば、カンタンにGifアニメーションに再生ボタンを設置することが出来ます。

gifffer.jsを使おう

ダウンロードしてきたフォルダの中のgifffer.js、もしくはgifffer.min.jsを、自分のブログに読み込ませます。

以下を記述します。

これで準備完了です。あとは再生ボタン付きGifアニメーションを設置したい場所にイメージタグを置くだけです。この時、”src”ではなく、”data-gifffer”を使います。

軽く確認したい方用にサンプルを用意してます。 Codepen Gifffy Test

再生ボタンをつけることで、アニメーションを見逃すのをふせぐ事ができる上に、注目して欲しいコンテンツへの注意をGIFアニメーションが奪ってしまうということもなくなりますね。

まとめ

今回はGifアニメーションで、カンタンにわかりやすいスクリーンキャプチャを撮る方法と、それにユーザーの任意のタイミングで再生させるためのボタンを付ける方法を説明しました。テキストと静止画だと說明がもどかしいときにぜひ使ってみて下さい!!


Pocket
LINEで送る