← Hydi ブログ

リモートワーク時代のナレッジ共有術 ─ 操作手順を「動画マニュアル」にする3ステップ

あるWebサービスの開発に携わっています。 リモートワークが当たり前になってから、バグ報告や機能開発提案時に操作手順をテキストで説明する機会が増えました。

オフィスにいた頃なら、画面を見せながら説明する機会がありました。でもリモートだとビデオ会議を開かないといけません。テキストで手順を書いても微妙に伝わらないし、Zoomで画面共有しながら説明するにはお互いの時間を合わせる必要があります。

この問題に対する自分なりの解決策が、操作手順を短い動画マニュアルにして残すことでした。

テキスト vs 動画

テキストマニュアル動画マニュアル
作成スピード手順を言語化するのに時間がかかる操作を録画するだけで完成
正確さ説明を端折りがち・誤解が生じやすい実際の操作がそのまま映るので正確
理解しやすさ読みながら一つずつ操作する必要がある見て真似するだけで直感的
更新コストテキストとスクショの差し替えが手間録り直すだけで済む
検索性テキスト検索しやすい動画内の検索は難しい
閲覧環境どこでも軽量に読める再生環境とファイルサイズに依存

テキストマニュアルの限界

社内Wikiにテキストで手順書を書くのは、ナレッジ共有の基本ではあります。でも正直なところ、テキストの手順書にはいくつか辛い点があります。

まず、書くのが大変です。「○○画面の左上にある△△ボタンをクリック」みたいな記述を何ステップも書くのは骨が折れます。そして説明を無意識に端折らないように注意しなければなりません。スクリーンショットを何枚も貼るのも大変です。

結果として、書くのが面倒で手順書が作られなかったり、作られても説明が大雑把だったりします。これはどのチームでもあるあるだと思います。

動画マニュアルのメリット

ところが、画面録画で操作手順を動画にするとこれらの問題がかなり緩和されます。

まず、作るのが圧倒的に早いです。実際に操作しながら録画するだけなので、テキストで手順を書くよりずっと短時間で済みます。操作の流れがそのまま映像になるので、言葉で説明しにくい「この辺りをドラッグして」みたいな動作も正確に伝わります。

そして、見る側も理解が早いです。テキストの手順書を読みながら一つずつ操作するより、動画を見ながら真似するほうが直感的です。

動画マニュアルを作る3ステップ

動画マニュアルといっても大げさに考える必要はなくて、以下の3ステップでシンプルに作れます。

graph LR
    A["🎬 録画"] --> B["✂️ カット・注釈"]
    B --> C["📤 共有"]

ステップ1 操作を録画する

画面録画アプリを起動して、実際の操作をそのまま録画します。このとき、キー操作とマウスクリックが映像上に表示される設定にしておくと、見る側がどの操作をしたのかを把握しやすくなります。

最初から完璧に録る必要はありません。多少の操作ミスがあっても、後からトリミングすれば問題ないですし、社内に報告する用途なら問題になりません。

ステップ2 不要部分のカットと注釈の追加

録画した映像から、操作に関係ない前後の部分をカットします。必要に応じて、重要なポイントにテキストの注釈や矢印を追加します。たとえば「この設定を必ずオンにすること」のような補足があると、動画だけで完結するマニュアルになります。

細かいUIを見せたい場合は、ズーム機能で拡大表示するのも効果的です。

ステップ3 共有する

完成した動画をチームのSlackチャンネルや社内Wikiに貼ります。MP4で書き出せばほとんどの環境で再生できますし、手順が短い場合はGIF形式にするとプレビューが効いて見てもらいやすくなります。

自分が使っているツール

僕が動画マニュアル作りに使っているのは、Hydiという自分で開発したMac用の画面録画アプリです。

以前はScreenStudioというアプリを使っていましたが、次の機能が欲しくなって自分で作りました。

  • キー入力とクリックの自動表示
  • 画像編集アプリのようにテキスト、矢印、矩形などの注釈機能

操作手順の動画を作るとき、これらの機能があるかないかで説明のしやすさ・伝わりやすさが全然違います。注釈の追加やトリミングもアプリ内で完結するので、録画してそのまま仕上げまで持っていけます。

GIF書き出し機能もあるので、Slackに直接貼れる軽い動画マニュアルを作るのにも重宝しています。

地味に神機能だと思うのは、プレビュー画面でスクリーンショットもできるということです。 動画内に画像として残したい一瞬があれば、そのシーンを画像としても保存できるようにしました。

Mac標準の画面収録(⌘+Shift+5)との違いをまとめるとこんな感じです。

Mac標準の画面収録Hydi
キー入力表示なし自動で映像に表示
クリック表示カーソル周囲に円を表示カーソル周囲に円を表示
注釈(テキスト・矢印・図形)なしアプリ内で追加可能
トリミングQuickTimeで簡易的に可能タイムライン上で直感的に操作
ズーム(部分拡大)なしキーフレームで時間指定して拡大
GIF書き出しなし品質を選んで書き出し可能
スクリーンショット抽出なしプレビューから任意のフレームを画像保存
出力形式MOVMP4 / GIF / PNG / JPEG

標準の画面収録は「とりあえず録る」には十分ですが、操作手順を伝えるための動画を作るとなると、録画した後の編集や補足がどうしても必要になります。Hydiはその「録画→仕上げ→共有」を一つのアプリで完結できるようにしました。

続けるコツ

チームで動画マニュアル作りを習慣にするコツは、完璧を目指さないことだと思います。

ナレーション付きの凝った動画やおしゃれな動画を作ろうとすると、途端にハードルが上がって続かなくなります。 それに、やたら高性能なアプリを導入したところで使いこなすにもスキルが必要になってしまいます。

自分の場合は、操作方法を共有するとき、テキストを打つ代わりにHydiでさっと録画して送るくらいのノリでやっています。1本あたり10秒から30秒くらい。それで十分伝わりますし、次に同じ質問が来たときもそのまま使い回せます。

小さく始めて、チームに少しずつ動画が溜まっていくのが理想だと思います。