操作手順をGIFで見せる方法
「設定画面を開いて、左のメニューから…」と文章で書くより、 3秒動かして見せたほうが速い。 画面録画からGIFを作る手順と、容量を抑えるコツを説明します。
なぜ動画ではなくGIFなのか
「動画を貼ればいいのでは」と思われるかもしれませんが、 マニュアルやチャットではGIFのほうが向いています。理由は3つです。
| 勝手に動く | 再生ボタンを押す必要がありません。読み手が何もしなくても内容が伝わります |
|---|---|
| 繰り返される | 自動でループするので、見逃しても次の周で確認できます |
| どこにでも貼れる | 画像として扱えるので、チャット・wiki・Word・メールどこでも表示されます |
とくに「押す必要がない」のが効きます。 手順書に貼った動画は、多くの場合再生されないまま読み飛ばされます。
手順
- 画面を録画する——Windowsなら Win+G、Macなら ⌘+Shift+5 で標準機能が使えます
- 動画→GIF変換に読み込ませる
- 開始位置と長さを指定する——10秒以内が目安
- 幅・フレームレート・色数を決めて変換する
設定の決め方
GIFの容量は、この3つでほぼ決まります。効く順に並べます。
| ① 長さ | 最も効きます。10秒を5秒にすれば容量はおよそ半分。 1つの操作につき1つのGIF、と割り切るのがコツです |
|---|---|
| ② 幅 | 600px前後が実用的。画面全体を録るのではなく、 操作している部分だけを録画したほうが小さくて分かりやすくなります |
| ③ フレームレート | 10fpsで十分。操作の説明に滑らかさは不要です。 15を超えると容量が急に増えます |
| 色数 | GIFは最大256色。操作画面はもともと色数が少ないので、 128色に下げてもほとんど分かりません |
分かりやすいGIFを作るコツ
- 1つのGIFに1つの操作——「メニューを開く」と「設定を変える」は分ける
- 操作の前後に1秒ずつ余裕を持たせる——ループしたとき、どこが始まりか分かりやすくなります
- マウスをゆっくり動かす——普段の速さだと、見ている側は追えません
- クリックの前に一瞬止まる——どこを押したのかが伝わります
- 録画範囲を絞る——画面全体ではなく、ウィンドウだけ・領域だけを録る
- 文字が読める大きさを保つ——幅を下げすぎると、メニューの文字が潰れて意味がなくなります
画面録画には何が映っているか
ここが実務でいちばん事故が起きるところです。 画面録画には、意図していないものが写り込みます。
- 通知のポップアップ——メールやチャットの通知が録画中に出ることがあります
- ブラウザのタブ名——他の業務のページ名が読み取れることがあります
- ブックマークバー——社内システムのURLが並んでいます
- タスクバー・Dock——使用中のアプリが分かります
- テスト用のデータ——実在の顧客名で試していませんか
作ったGIFは、貼る前に一度通しで見てください。 GIFは配布された後の回収が困難です。 録画前に通知をオフにし、ダミーデータで操作するのが安全です。
その画面、外部に上げてよいものですか
オンラインのGIF変換サイトを使うということは、その画面録画を他社のサーバーに送るということです。 社内システムの操作手順なら、画面構成そのものが社外秘にあたることもあります。
当サイトのツールはファイルを送信せず、すべてブラウザの中で処理します。 詳しくはファイル変換サイトは安全かをご覧ください。
よくある質問
音声も入れたいのですが
GIFに音声は入りません。音声での説明が必要なら動画のままにしてください。その場合は動画圧縮で軽くしてから共有するのが現実的です。
色がにじんだような見た目になります
GIFは最大256色しか使えないため、グラデーションや写真は苦手です。操作画面なら問題になりにくいですが、写真が大きく映る場面では動画のほうが適しています。
ループを止めることはできますか？
当サイトのツールは繰り返し再生で書き出します。手順を見せる用途ではループするほうが便利なためです。
スマホの操作画面も録れますか？
iPhoneやAndroidにも画面収録の機能があります。録画したファイルをパソコンに移せば、同じ手順でGIFにできます。縦長になるので、幅は400px程度で十分です。
まとめ
- GIFは押さなくても動くので、手順書で読み飛ばされない
- 容量に効くのは長さ＞幅＞フレームレート
- 1つのGIFに1つの操作。まとめない
- 10fps・600px・10秒以内が実用的な目安
- 貼る前に映り込みを確認する