Paper's Program Note

今回は、仕事でサービスの操作の説明動画(ナレーション付き)を作成しました。

これまでも、いくつか作成しましたが、比較的効率の良い方法だとは思います。

STEP1)
まずは、操作の動画をキャプチャーして保存しておく。
音声もなにも入れず、操作も多少間違ったり、うろうろしててもOK
間違ったところなどは、録画を止めずに、やり直しておく。

STEP2)
動画の編集をして、スムーズな操作の動画にしておく。
編集ソフトは好きなものを使えばいいかと。
必要なのは、タイムラインの分割くらいです。
ボカシを入れるところなどがあれば、処理しておきます。

STEP3)
BGMの音楽を小さく入れます。あまり刺激的な音楽でない方が、実際は音楽が前に出すぎす、よいと思います。

STEP4)
動画に合わせて、ナレーション原稿を書きます。
動画を一時停止しながら、動画の時間に当てはまる程度の原稿にします。
原稿が動画よりも短いのは、ベターです。
長いのは、結局収まりきれず、原稿の書き直しになります。

STEP5)
原稿を読んでナレーション音声の録音をします。
自分で読む、他の人に読んでもらう、人口音声などを使うなどがあります。
人口音声は、気に入った声質のものを見つける必要があります。

TIPS

原稿の構成ごとに、小休止をいれて音声録音しましょう。音声ファイルを切る時にやりやすいです。

STEP6)
音声を、元の動画に入れてみます。
音声の方を分割したりして、動画に合わせていきます。

STEP7)
以上でほぼ完成していますが、ヘッド画像、フッター画像などを入れておくと締まりますね。
あとは、必要なら字幕も入れます。
それらを入れて、完成です。

効率的と言っても、最初は、何時間かはかかるかと思います。

動画編集ソフトは、「POWER DIRECTOR」を使っています。
動画編集だけでなく、操作画面のキャプチャーツールのついているので、これだけで
十二分にできます。

最終的に、mp4ファイルにして、videoタグで、HTMLに入れます。

videoタグの仕様は、以下です。

<video preload=”auto” controls autoplay=”false” loop=”false” src=”abc.mp4″></video>

• preload属性: ページの読み込み時に動画を読み込むかどうかを設定します。autoを指定すると、ブラウザが適切なタイミングで読み込みます。
• controls属性: 動画のコントロールバー(再生/一時停止ボタンなど)を表示するかどうかを設定します。
• autoplay属性: ページが読み込まれた時に自動的に再生するかどうかを設定します。falseを指定すると自動再生しない。
• loop属性: 動画が終了した時に再生を繰り返すかどうかを設定します。falseを指定すると再生を繰り返さない。
• src属性: 動画のURLを指定します。

※audio属性は、音声ありの設定ですが、<video>タグにはaudio属性は存在しません。自動で音声が再生されるため不要です。

jqueryなどで、動画を制御するのも便利かと思います。
以下参考

    //動画再生
    $("#video-mp4").hide();
    $("#video-button").click(function(){
        $("#video-mp4").show();
        var video = $("#video-mp4 video")[0];
        video.load();
        video.play();
        $(this).hide();
        $("#video-exp").hide();
        
    })