ホバー状態・ドラッグ・マイクロインタラクションを明確に録画する方法

画面録画に関するアドバイスの多くは、大きな要素を扱います。解像度を選び、台本を用意し、無駄な間をカットする。しかし視聴者を最も混乱させるのは、むしろ小さな瞬間です。0.5秒だけ表示されるツールチップ、ボード上をドラッグされるカード、画面の隅で静かに切り替わるトグルなどです。

こうしたマイクロインタラクションにはプロダクトの作り込みが表れますが、同時に録画で最も失われやすい要素でもあります。このガイドでは、あなたが見たものを視聴者にもそのまま届ける方法を紹介します。

マイクロインタラクションの撮影が難しい理由

3つの要因が邪魔をします。

• 短すぎる。 ホバーのツールチップは400ミリ秒しか表示されないこともあります。一瞥しただけでは視聴者はまったく気づきません。
• 小さすぎる。 チェックボックスの状態変化は、1080pフレームのごく一部しか占めません。
• あなたはすでにどこを見るべきか知っている。 自分で操作したので視線は正確に追えていますが、視聴者の目はそうではありません。

以下のテクニックはすべて、この3つのいずれかを解決します。長く見せるか、大きく見せるか、視線の行き先を教えるかです。

まずはフレームレートを上げる

素早いインタラクションを見せるには、そもそもフレーム数が必要です。30fpsでは、画面を横切る素早いドラッグはにじんだ数コマにしかなりません。60fpsなら、同じ動きが追える軌跡を持つ連続した動作として見えます。

ドラッグ＆ドロップ、アニメーション遷移、素早いホバー状態を含む録画は60fpsで撮りましょう。ファイルは大きくなりますが、書き出し時に圧縮できます。最初から記録されていないフレームは後から足せません。

手の動きをゆっくりに

コストゼロで最も効果が大きい改善は、意識してゆっくり動かすことです。0.5秒で画面を横切るマウスの軌跡は追いにくく、同じ軌跡でも1.5秒かければ簡単に追えます。

録画中に守りたいルールです。

• カーソルを目標へ移動させたら、クリック前に止まる
• クリックが画面に反映されてから次へ進む
• 行き過ぎて戻るのではなく、一つの滑らかな弧で目標に近づく
• 説明している間はカーソルを動かさず、その場に置く

ホバー状態には十分な時間を

ツールチップ、ドロップダウンのプレビュー、ホバーで現れるボタンを見せるときは、1.5〜2秒はホバーを保ちましょう。録画中はばかばかしいほど遅く感じますが、再生するとちょうどよく感じられます。

役立つ習慣は、ホバー中に心の中で数を数えることです。「2」まで数えられなければ、動きが速すぎます。

ドラッグ＆ドロップの「3拍子」ルール

ドラッグ＆ドロップは、視聴者が最も誤解しやすい操作です。意図を見ないまま結果だけを見るからです。すべてのドラッグを3つの拍に分けましょう。

1. つかむ — カーソルを対象に置いて押し、つかんだ状態が見えるよう少し止める
2. 運ぶ — 目的地へ向かってゆっくり、読み取りやすい直線で動かす
3. 落とす — ドロップ領域のハイライトが伝わるよう、離す前に対象の上で止まる

各拍の間の短い停止は、ナレーション一文分の働きをします。

カーソル効果で視線を固定する

Recordedのカーソルツールは、まさにこうした瞬間のためにあります。

• カーソルスムージングは、速い動きを追いにくくするブレを取り除きます。多くのデモには中程度が適しています。
• クリックハイライトは、クリックした正確な瞬間をはっきり示します。画面上の変化が微妙なときほど重要です。
• カーソルサイズを大きくすれば、書き出し後も、特にスマートフォンで見る視聴者にもポインタが見やすくなります。

ドラッグの多い録画では、クリックハイライトは必須です。「ボタンがまだ押されたままである」ことを伝える唯一の手がかりだからです。

ズームしても目的地はフレーム内に

ズーム効果は小さな操作を見えるようにしますが、ドラッグには注意点があります。つかむ対象に寄りすぎると、ドロップ先がフレームの外に出てしまい、視聴者は両者のつながりを見失います。

有効な方法は2つあります。

• 両端を入れる。 ズーム倍率を控えめにしてでも、出発点と目的地の両方が入る範囲を切り取ります。
• 拍に合わせてズームする。 つかむ瞬間に寄り、運ぶ間は少し引き、落とす瞬間に再び寄ります。

移動を伴わないトグルやチェックボックス、状態変化なら、好きなだけ寄って構いません。気にすべき第二の場所がないからです。

本当に速い操作にはスローモーション

ゆっくり実行できない操作もあります。スワイプ、キーボードで開くコマンドパレット、独自の速度で再生されるアニメーションなどです。この場合は通常の速度で録画し、編集でクリップを遅くします。

1秒のアニメーションに0.5倍速の区間を当てれば、視聴者には2秒の余裕が生まれ、ナレーションに不自然な空白もできません。同じ区間にズームを重ねれば、200ミリ秒の遷移でも十分読み取れます。

見えない操作は言葉で補う

あなたの操作の一部は画面にまったく現れません。修飾キーを押し続ける、右クリックする、長押しするといった動作です。入力が見えなければ、結果は魔法のように映ります。

2つの方法で補いましょう。

• 声に出す: 「Shiftを押しながらドラッグして範囲全体を選択します」
• テキストオーバーレイを追加: その瞬間にキーやジェスチャーを表示し、音声なしでも伝わるようにします

よくある失敗

• 30fpsで録画しておきながら、ドラッグがカクつく理由に悩む
• UIの反応が終わる前に、クリック後すぐ次へ進む
• すでに離れつつあるカーソルでホバーを見せる
• 寄りすぎて視聴者が位置関係を見失う
• 何度も見ているからとアニメーションは伝わると思い込む

録画前のクイックチェックリスト

マイクロインタラクション中心のデモを録画する前に確認しましょう。

1. フレームレートを60fpsに設定
2. カーソルスムージングとクリックハイライトを有効化
3. 小さい画面向けに書き出すならカーソルサイズを大きく
4. 自然に感じる速度の半分で、ドラッグやホバーを一度リハーサル
5. ズーム区間の配置を計画し、ドロップ先がフレームに残るか確認
6. ナレーションやテキストオーバーレイが必要な隠れた入力をメモ

まとめ

マイクロインタラクションは、ソフトウェアが丁寧に作られていると感じさせるディテールであり、意識して守らなければ録画から消えてしまいます。手の動きを遅くし、ホバーに2秒たっぷり与え、ドラッグを「つかむ・運ぶ・落とす」に分け、残りはカーソル効果とズームに任せましょう。

次にデモを録画するときは、普段なら急いで済ませる操作を一つ選び、主役として扱ってみてください。伝わりやすさの違いは、たいてい最初の再生で分かります。