注釈付きの製品デモ GIF を手早く作る方法
短い録画を用意し、矢印と説明文で重要な操作を示し、そのまま GIF として書き出す流れをまとめています。
動画 GIF 変換
録画を読み込み、矢印や説明文を加えて、製品の操作を一目で伝える GIF を作れます。
ステップ 1
画面録画などで、説明したい 1 つの操作だけを短く撮ります。
ステップ 2
矢印と短いテキストで、クリックする場所と結果を順番に示します。
ステップ 3
GIF を書き出し、必要ならアップロード先に合わせて圧縮します。
このガイドでは GIF Master の動画 GIF 変換を使います
録画をトリミングし、矢印や文字を加え、見せたくない情報を隠してから GIF に書き出せます。
まず短い録画を用意する
製品デモ GIF は 1 つの操作や流れだけを見せるほうが伝わりやすくなります。
録画をエディターに読み込む
タイムラインのハンドル、または入力欄で開始位置と終了位置を設定できます
書き出し時には、ここで選択した範囲だけが GIF に使われます。
推定フレーム数: 52
推定 GIF 長さ: 00:04.3
まだ録画がない場合は
短い操作を録画してから読み込むと、デモ GIF をわかりやすくまとめられます。
矢印と説明文で順番に見せる
ボタンや結果に矢印を付け、短い説明文で見てほしいポイントを明確にします。
矢印、説明文、モザイクを追加する
テキストレイヤーを追加したら、プレビュー上で直接ドラッグして配置できます
書き出し時には、ここで選択した範囲だけが GIF に使われます。
短いラベルを操作位置の近くに置くと、ループ再生でも理解しやすくなります。
矢印で次にクリックする場所を明確に示せます。
強調枠は見てほしい UI 範囲だけを囲みます。
アカウント、メール、管理画面の機密情報を隠せます。
画像レイヤーはロゴ、ステッカー、ヘルプ記事の目印に使えます。
設定の目安
- 1 つのシーンで伝える操作は 1 つにします。
- 説明文は矢印の先に近づけ、画面の操作を隠さない位置に置きます。
- 顧客名、メールアドレス、注文情報、内部 URL はモザイクで隠します。
GIF を書き出して必要なら圧縮する
GIF を書き出したあと、サイズが大きい場合は GIF 圧縮ツールでアップロードしやすい容量まで調整します。
GIF の容量が大きい場合は
完成したデモ GIF を圧縮し、メール、ドキュメント、SNS に載せやすいサイズに調整できます。
注釈付きのデモ GIF を作る
短い録画に矢印と説明文を加え、重要な操作だけが伝わる GIF にしましょう。
動画 GIF 変換を開く関連コンテンツ
この記事は下の主要ツールページとあわせて使う内容です。流れを確認したら、該当するツールを開いて続けて作業できます。
GIF を作る
動画 GIF 変換
動画を GIF に変換し、同じエディター内でテキスト、画像、矢印、絵文字、図形、モザイクを追加できます。
動画 GIF 変換GIF に文字を追加
GIF に文字を追加
アニメーション GIF に文字を重ね、フォント、色、位置、表示時間を調整してブラウザで書き出せます。
GIF に文字を追加HEVC 動画変換
HEVC を MP4 に変換
HEVC または H.265 動画を互換性の高い H.264 MP4 に変換し、利用可能な音声も保持します。
HEVC を MP4 に変換GIF を最適化
GIF 圧縮
目標サイズ、幅・高さ変更、フレーム間引きで GIF を圧縮し、アップロードしやすい容量に調整できます。
GIF 圧縮録画して GIF にする
画面録画
ブラウザでタブ、ウィンドウ、画面全体を録画し、そのまま保存または GIF 作成へ進めます。
画面録画透過 GIF
GIF背景透過
ブラウザ内で単色のGIF背景を除去し、必要なフレームを手動で修正して透過GIFとして書き出せます。
GIF背景透過