ブラウザだけでWebサービスなどの操作動画を作る方法

2012/3/18 ネット関連

Webサービスなどの操作方法などの動画を取りたい場合に、そんなに凝ったことをしないのであれば、こんなサービスがある。

Screencast-O-Matic – Free online screen recorder for instant screen capture video sharing.

このサービス。無料で、しかも何の会員登録なども必要もせずに、任意のデスクトップ領域を動画キャプチャできる。
キャプチャした動画は、そのままYouTubeにアップすることもできるし、MP4でダウンロードすることもできる。
年間$12の有料版だと、編集ツールやネットにつながってない状態でも使えたりと、色々便利な機能やオプションがあるが、無償版でも十分使えるものだ。

今回、このサービスとYouTubeを組み合わせて、以下のような自社サービスの操作マニュアルを作ってみた。動画はScreencast-O-Maticでキャプチャし、それをYouTubeにアップ。動画の中で時折でてくるコメントはYouTubeの管理機能を使ってつけている。この画面サイズだと小さくてわかりにくいけれども、フル画面で見るとアノテーションもちゃんと認識できると思う。
（変な音楽がついてるが、これもYouTubeの機能でつけたもの。実は、Screencast-O-Maticで動画をとった際に、間違ってPCのマイクがONになってて、操作してる際の音まで拾ってしまった。咳払いの音や、他のスタッフの声なども多少入ってて、あまりよろしくないので、無理矢理音楽を入れたという理由だ。）

■Screencast-O-Maticの使い方

使い方はごく簡単。「Start Recording」ボタンをクリックする。

Javaアプレットのプラグインのインストールを許可する。
あとは、キャプチャしたい範囲を指定して、左下部に表示されるプレイヤーで録画ボタンをクリックすればいいだけ。
(下の点線みたいなのが録画範囲。この範囲を自由に変更できる。）

今回、shutto用の利用方法の動画をいくつか作ってみたのだが、あらかじめどんな操作をするのかを事前練習しておけば、非常に簡単に操作ムービーを作ることができた。

■動画へのキャプションをつける
Screencast-O-Maticの無料版ではキャプションや動画の編集機能はない。
しかし、これもちょっとしたキャプションや編集ぐらいならば、YouTubeの管理機能でもなんとかなる。
（ただ、これはMP4形式の動画で保存して、iMovieなどで加工するほうがよほど簡単だけど。ただ、すべてブラウザだけで作業が完結できるというのもこれはこれでどんな環境でも作業できるので便利だ。）

YouTubeの管理機能にはこんな風に「動画加工ツール」「アノテーション」「字幕」などのメニューがある。
動画加工ツールでは、画面の色の補正や、カメラのブレの補正などができる他、動画の「開始」「終了」を調整する「カット」機能などもある。

YouTubeの管理画面にあるアノテーション機能。動画のタイムラインにそって、コメントや注釈を入れていけるようになってる。上に動画が表示され、下部にはタイムラインと、その動画に付与してるアノテーションが表示される。
アノテーションの位置を動かしたりすることで、どのタイミングでどのアノテーションを表示させるかの調整ができる。