長年にわたり、GIFの作成方法について多くの質問をいただいています。 GIF は共有しやすく、すべてのブラウザで動作し、ループさせることができるため、私たちは GIF が大好きです。

Recording your screen

There are a few great screen recording tools out there.ここで、人気の高い、2 つのお気に入りの GIF 作成ツールの概要とそれぞれのワークフローを紹介します。 Mac を使用している場合は、完全に無料の Quicktime を使用できます。 この記事では、Telestream の有料アプリである ScreenFlow を使用します。

ScreenFlow は、GIF を詳細に制御できる強力なエディタを備えているので、録画には最適な選択肢です。 ScreenFlow を開くか、録画の設定を押すと、この画面が表示されます。

最初に、画面上にあなたのプロトタイプがあることを確認します。 次に、記録するディスプレイを選択し、赤いボタンを押すと画面全体の記録が始まります。 このチュートリアルでは、Framer で作成したインタラクションを録画しますので、プレビュー・ウィンドウはフル・スクリーンに設定されています。

Create a perfect loop

GIF を完全にループさせるために常に努力することの一つは、GIF の最後のフレームが最初のフレームとまったく同じであることを保証することです。

アニメーションにマウス カーソルが含まれていて、手が安定している場合、マウス カーソルを手で配置することにより、簡単に完全なループを作成することができます。

私の例では、記録する実際のプロトタイプ内で最高の結果を得るために、アニメーションのタッチ カーソルを使用しました。 Framer.

Add effects to spice up

ScreenFlow で録画を行ったので、GIF で取り上げたいものに焦点を合わせて調整したいと思うかもしれません。 これを行うには、ファイル > ドキュメント設定に移動します。 このチュートリアルでは、Web上のDribbbleに共有するため、800×600が最適なサイズです。 先ほど作成した録画の寸法が大きすぎることにお気づきでしょう。 録画のスケールをいじるには、クリップを選択して ScreenFlow の右上をクリックします。

録画が完了したら、クリップをドラッグして最初と最後をトリミングします (完璧なループを作成することを忘れないでください!)。 ScreenFlow では、スムーズなズーム効果を追加して、ビデオの特定の詳細を強調することができます。 これを行うには、ビデオスクラバをズームエフェクトを追加したいポイント上に配置します。 次に、Screenflow の右上隅にあるビデオ アクション ボタンをクリックし、+ Actionをクリックします。 先ほど使用したスケール コントロールを使用して、アクションの開始と終了の状態を適切に選択します。

ヒント: Dribbble などのサイトで GIF を共有する場合、GIF の最初のフレームが投稿のサムネイルとして表示されることを念頭に置き、最も視覚的に興味深いフレームを使用するようにします。 Screenflow には、クリップを GIF として直接エクスポートするプリセットがありますが、GIF は大きく圧縮された大きなファイルになってしまうので、このルートは避けることをお勧めします。 ファイル > エクスポート > プリセット > ロスレス – ProRes with Alpha.

モーション ブラーを有効にすると、特に適用したズーム効果により、GIF がさらに滑らかに感じられることがよくあります。