パソコンやアプリの操作方法を説明するとき、静止画だけでは「どこをクリックして、そのあと何が変わるのか」が伝わりにくいことがあります。
一方、数秒の簡単な操作のために動画を埋め込むと、再生ボタン、音量、シークバーなどが表示され、読み手にとって少し重い説明になります。そんな場面では、短い動きを自動で繰り返すGIFやアニメWebPが便利です。
操作説明で、こんな困りごとはありませんか？
スクリーンショットに矢印を入れても、その後の画面変化まで説明できない。
1つの操作を説明するために、操作前・クリック中・操作後の画像が何枚も必要になる。
数秒の操作なのに、動画を編集してアップロードし、プレイヤーを埋め込んでいる。
読み手が動画の再生ボタンを押さず、重要な操作を見ないまま先へ進んでしまう。
操作を始める前の待ち時間や、終わったあとのマウス移動まで入ってしまう。
画面録画をそのままGIFにしたら容量が大きく、ページ表示が遅くなってしまう。
必要なのは長い解説動画ではなく、操作の直前から結果が分かるところまでを、短い動く画像として見せることです。
そんなときに活躍するのが「くるくる。」
画面録画の必要な数秒だけを動く画像に
「くるくる。」は、動画の開始位置と終了位置を指定し、GIF・アニメWebP・APNGへ変換するWindows用ツールです。画像サイズ、fps、繰り返し回数も、掲載する場所に合わせて選べます。
- プレビューを見ながら必要な範囲だけを指定
- GIF・アニメWebP・APNGで保存
- 横320・480・720pxからサイズを選択
- 5・10・12・15・20fpsから選択
- 繰り返し回数を設定
- 元動画を変更せず、ファイルを外部へ送信しない
↓
操作の直前から結果までを選択
↓
GIFまたはアニメWebPへ変換
↓
文章の手順と一緒にブログへ掲載
動く操作説明を作る基本手順
- 説明したい操作だけを、Windowsの画面録画機能などで録画します。
- 録画前に通知や個人情報が映らない状態へ整えます。
- 「くるくる。」へ録画した動画を追加します。
- 操作が始まる少し前を開始位置、結果が分かるところを終了位置にします。
- 掲載先に合わせてGIFまたはアニメWebP、画像サイズ、fpsを選びます。
- 変換後の動き、文字の読みやすさ、容量を確認します。
- ブログやマニュアルでは、文章の手順と動く画像をセットで掲載します。
GIFとアニメWebP、どちらを使う？
| 形式 | 向いている場面 | 確認したいこと |
|---|---|---|
| GIF | 幅広い環境で扱いやすくしたい、掲載先の対応形式が分からない | 最大256色のため、細かな文字やグラデーションの色が変わる場合がある |
| アニメWebP | ブログやWebマニュアルで画質と容量のバランスを取りたい | 掲載先と閲覧環境がアニメWebPの再生に対応しているか確認する |
| APNG | フルカラーや透明表現が必要で、掲載先がAPNGに対応している | 容量と掲載先の対応条件を確認する |
迷った場合は、まず短いGIFを作って掲載先で確認します。容量が重い、色の変化が気になる場合は、アニメWebPも作って見た目と容量を比べると選びやすくなります。
録画するときに気をつけたいこと
個人情報や通知を隠す
デスクトップ、ユーザー名、メールアドレス、ファイルパス、ブラウザのお気に入り、通知などが映り込んでいないか確認します。録画中だけ通知を止め、説明に必要なウィンドウだけを表示すると安全です。
マウスをゆっくり動かす
普段どおりの速さで操作すると、短い動く画像ではクリック位置を見失いやすくなります。目的のボタンへゆっくり移動し、クリック前後で少し止めます。
文字を読める大きさにする
パソコン画面全体を小さなGIFにすると、メニューや文字が読めなくなります。説明するアプリを大きく表示し、不要な画面領域を録画へ入れないようにします。
- 録画前に通知を止めた
- 名前、メール、ファイルパスが映っていない
- 説明したいウィンドウを大きく表示した
- クリック前後で少し止まっている
- 操作が終わったあとに余分な動きがない
容量を軽くしてページを見やすくする
動く画像を何枚も掲載すると、ページ全体の読み込みが重くなります。まずは動画の範囲を短くし、そのうえでサイズとfpsを調整します。
| 調整 | 軽くなる理由 | 下げすぎた場合 |
|---|---|---|
| 再生時間を短くする | 保存するコマ数そのものが減る | 操作の結果まで入らなくなる |
| 画像サイズを小さくする | 1コマごとのピクセル数が減る | 文字やボタンが読みにくくなる |
| fpsを下げる | 1秒間に保存するコマ数が減る | マウスや画面変化がカクつく |
最初は、説明に必要な最短範囲と、本文幅を超えない画像サイズから試します。fpsは、画面の切り替えやクリック位置が追える範囲で少しずつ下げます。
動く画像だけに頼らず、文章も残す
閲覧環境によってはアニメーションが動かなかったり、最初の1枚だけが表示されたりすることがあります。また、動きの速い画像を見づらい人もいます。
- 画像の前後に、操作内容を文章で書く
- 画像が動かなくても手順を進められるようにする
- 代替テキストには、画像の役割を短く記載する
- 点滅や激しい動きを避ける
- 長い説明は無理にGIF化せず動画や複数手順へ分ける
こんな説明に使えます
ファイル追加、設定変更、保存ボタンなど、1つの操作を短く見せる。
メニューの開き方、入力欄、設定画面への移動を繰り返し表示する。
毎回質問されやすい操作を、文章と動きの両方で残す。
画面の変化、ボタンの動き、短い演出を動画プレイヤーなしで見せる。
よくある質問
画面録画の全部を変換したほうがよいですか？
必要な操作の直前から結果が分かるところまでに絞るのがおすすめです。長くすると要点が分かりにくくなり、容量も増えます。
ブログにはGIFとアニメWebPのどちらがよいですか？
扱いやすさを優先するならGIF、掲載環境が対応していて画質と容量を重視するならアニメWebPが候補です。実際のブログへテスト掲載して確認してください。
操作音やナレーションも残せますか？
残せません。動く画像には音声が入らないため、音声も必要ならMP4動画を使用します。
同じページに何枚くらい載せられますか？
一律の枚数では決められません。各ファイルの容量、ページ全体の重さ、同時に動く画像の見づらさを確認し、重要な操作だけに絞ってください。
関連記事
数秒の操作を、見れば分かる説明に
画面録画から必要な部分を選び、GIF・アニメWebP・APNGへ変換。「くるくる。」なら、ブログやマニュアルへ載せる短い操作説明を、本格的な動画編集ソフトを開かずに作れます。