操作説明は撮り直すより、画面の写真に注釈を重ねたほうが速い

• 画面の写真1枚に、丸と吹き出しを時間差で重ねる
• 座標で書くので、何度やり直しても同じ位置に出る
• 写真と注釈は同じ箱に入れて、一緒に動かす

操作説明の動画を作るとき、画面を録画して編集ソフトで丸を付けるのが普通だ。やり方を変えて、写真1枚に注釈を重ねた。

録画をやめた理由

録画は撮り直しが重い。言い間違えたら最初から、画面に余計なものが写り込んでも最初からだ。

説明する箇所が決まっているなら、動いている必要がない。静止画1枚で足りる。足りないのは「どこを見ればよいか」の指示だけで、それは重ねれば済む。

座標で書くと、やり直しが軽い

丸の位置を数字で指定している。

<Circle x={130} y={245} w={880} h={210} startSec={0.5} />

手で描くと毎回ぶれるが、数字なら同じ位置に必ず出る。「少し右」と思ったら数字を10増やすだけで、他の部分には影響しない。

いちばん大事だった点

最初、写真だけをゆっくり拡大して、注釈は画面に固定で置いた。結果、拡大が進むほど丸が指す場所がずれていった。

写真と注釈を同じ箱に入れて、箱ごと拡大するように直した。これで何倍に拡大しても、丸は同じ場所を指し続ける。当たり前のようだが、作っている最中は気づきにくい。

拡大は入れたほうがよいか

完全に止まった画面は、見ている側の目が離れる。6秒かけて1.07倍まで、ごくゆっくり寄せている。

気づかない程度の動きで十分だった。はっきり分かる拡大は、注釈より動きのほうが目立ってしまう。

丸の出し方

最初から丸があると、どこを見るか迷う。中心から0.45秒かけて広がるようにした。

• 広がる動きで視線が集まる
• 広がりきった時点で吹き出しが出る
• 前の丸は消さずに残す

3つ目は迷ったが、残すことにした。説明が進んでも、前に何を言ったか画面に残っているほうが分かりやすい。消すと、見返したときに情報が足りない。

吹き出しは丸の後に出す

同時に出すと、丸と文字のどちらを先に見るか迷う。丸が描き終わってから0.4秒後に文字を出した。

順番があるだけで、見る側は迷わない。どちらも0.4秒の差だが、同時に出すより明らかに落ち着いて見える。

文字は黒地に白で置く

画面の写真は白っぽいことが多い。白地に黒の文字を置くと、背景に溶ける。

黒い札にして白抜きにした。写真の上に重ねるものは、写真が何色でも読めることを先に決める。半透明の白地も試したが、下の文字が透けて読みにくかった。

向かない場面

これが効くのは、説明する箇所が止まっている画面にあるときだけだ。

• スクロールしながら説明する → 録画のほうがよい
• 入力してボタンを押す一連の流れ → 録画のほうがよい
• 画面のどこに何があるかの説明 → 写真に注釈が速い

全部をこの方法でやろうとすると、かえって手間が増える。止まっている説明だけに使うと割り切ると、作業時間が半分以下になった。

何か所まで入れられるか

6秒で3か所にした。4か所目を入れると、1つあたり1.2秒になって読み切れない。

説明したい箇所が5つあるなら、動画を2本に分けるか、長さを倍にする。詰め込むと、どれも読まれない。実際に4か所版も作ってみたが、最後の2つは記憶に残らなかった。

写真の撮り方

写真はブラウザで撮った。幅1440で撮って、動画では1920幅に引き伸ばしている。

1920で撮れば引き伸ばさずに済むが、1440のほうが実際に見られている画面に近い。文字の大きさの比率が実物と変わらないので、説明として正確になる。

まとめ

操作説明は、動いていないと伝わらないと思い込んでいた。実際には止まった画面に順番を付けるだけで足りる場面が多い。写真と注釈を一緒に動かすことだけ守れば、撮り直しのない説明動画が作れた。