連載
» 2010年05月28日 00時00分 UPDATE

デザイナーのためのWeb学習帳(6):無料ソフトで超入門! 動画キャプチャ→編集→配信

プレゼン活用やマニュアル作成、コンテスト投稿など、動画を活用するための無料ソフトを紹介し、簡単な使い方や手順を説明します

[@IT編集部,@IT]

プレゼン活用やコンテスト投稿などのために

 ネットワークインフラの発達で大容量データ通信が可能になった近年、「YouTube」「ニコニコ動画」「GyaO」などの動画共有・配信サービスがヒットし、Web上で動画を視聴することが当たり前になりました。また、ケータイ電話のカメラやデジカメの普及により、動画撮影も普通の行為として一般的に浸透しています。それどころか最近では、「Ustream」「ニコニコ生放送」を使ったリアルタイムの動画生中継や、Webカメラの映像にインタラクティブにCGや画像、写真、文字などを重ねた「AR(拡張現実)」という技術も広まりつつあります。

 動画が当たり前の現在は、プレゼンテーションでも資料動画やデモ動画を再生して、受け手にインパクトを残そうとすることがよく行われています。Webアプリ/サービスの開発者/デザイナの場合、プロトタイプを動画でクライアントに見せて仕様を詰めたり、ハウツーやマニュアルを動画で作ってエンドユーザーの学習に役立てたりするのも有効です。勉強会やセミナーの様子を撮影してeラーニングコンテンツ・資料としてWeb/社内で共有したり、自分の作成した作品を動画共有サービスやコンテストに投稿するなど、動画の用途は多方面に広がっています。

 本稿では、そんな動画が当たり前の時代に開発者/デザイナだけではなく、一般的にPCを活用する方でも分かるように、動画ファイルの概要、PCのデスクトップの動きを動画で録画する方法、動画を編集する方法、動画をWeb上に配信する方法を説明します。

 動画の撮影は、使う携帯電話端末やデジカメにより異なるので、割愛しますが、編集や配信については参考になると思いますので、ご参照ください。またWeb上にアップロードして配信するのではなく、動画をCDやDVDに書き込んで配布する方法もありますが、そちらも割愛させていただきます。

いろいろあります動画フォーマット

 動画をPC上で扱う場合、動画ファイルのフォーマット(形式)に注意しなければなりません。動画ファイルには、その圧縮形式や再生方式によって、拡張子/フォーマットが変わります。動画再生アプリケーションによって、再生できる拡張子とできない拡張子があるので、注意してください。

 主な拡張子を以下に挙げます。

動画フォーマットを変換する必要があるかも

 動画フォーマットの違いは、再生だけではありません。動画編集するソフトウェアや、DVDに書き込むソフトウェア、さらにアップロードする動画共有サービスによっても、扱えるものと扱えないものが異なります。

 そのため、ソフトウェアやサービスの対応する動画フォーマットに変換する必要があります。変換機能だけのソフトウェアもあれば、変換機能が付いた動画編集ソフトもあります。無料のものから有料のものまでいろいろありますが、多過ぎるので本稿では紹介しません。検査エンジンなどで、「【変換元拡張子】 【変換先拡張子】 変換」という感じで検索すると見つかると思います。さらには、「 無料」と付け加えると、無料のものも見つかるでしょう。

 例えば、.aviファイルを.swfに変換する無料のソフトウェアを探している場合、「avi swf 変換 無料」と検索すればいいわけです。.aviから.swfに変換するソフトウェアだけではなく、.swfから.aviに変換するものが検索候補に挙がることもあるので、注意してください。

無料ソフトでデスクトップを動画キャプチャ

 Windows搭載のPCでは、デスクトップの様子を[PrintScreen]キーで押した瞬間だけ保存できる機能が標準で備わっていますが、これは押した瞬間だけの“画像”ファイルで保存するに過ぎません。

 デスクトップで何か作業をしている様子を“動画”としてファイルで保存するには、そのためのソフトウェアをインストールして使う必要があります。

 いろいろとありますが、本稿では日本語化されていて使いやすく、無料なのにソフトウェアのロゴが動画に取り込まれない「CamStudio日本語版」を紹介します。

CamStudioをダウンロードするには

 上記ページのリンクから「CamStudio20t_jp_20100106.exe」を好きな場所にダウンロードしてください。

図1 赤線で囲んだリンクをクリック 図1 赤線で囲んだリンクをクリック

 ダウンロードした「CamStudio20t_jp_20100106.exe」を解凍すると、以下のようなフォルダが出来上がります。

図2 ダウンロードしたファイルを解凍した結果 図2 ダウンロードしたファイルを解凍した結果

CamStudioを立ち上げる

 図2の一番下にある「Recoder」がデスクトップを録画するためのソフトウェアの本体です。これをダブルクリックすると、起動します。

図3 CamStudioの「Recoder」が起動したところ 図3 CamStudioの「Recoder」が起動したところ

CamStudioの設定

 メニューの[オプション]→[動画オプション]で録画して書き出すファイルの設定ができます。

図4 [オプション]→[動画オプション] 図4 [オプション]→[動画オプション]

 コーデック(圧縮技術)やフレームレートなど動画の品質が選択できるので、いろいろと設定を変えて試してみるといいと思いますが、面倒だという人はそのままの設定でも十分きれいな動画が作成できると思います。

図5 コーデックも変えられる 図5 コーデックも変えられる

 録画する領域も選択できます。メニューの[領域]→[画面全体]にすると、デスクトップ全体を録画できます。

図6 [領域]→[画面全体] 図6 [領域]→[画面全体]

 メニューの[領域]→[選択領域]にすると、録画開始時に録画する範囲をドラッグ&ドロップした四角形で選択できます。

図7 録画する範囲をドラッグ&ドロップで選択 図7 録画する範囲をドラッグ&ドロップで選択

デスクトップの録画

 赤丸ボタンで録画開始、青四角ボタンで停止です。その間のボタンは一時停止です。赤丸ボタンを押して、作業を開始して作業が終わったところで、青四角ボタンを押してください。

動画書き出し

 すると、動画ファイルを保存するダイアログが出現します。ファイル名を適当に付けて、保存してください。書き出せるフォーマットは、AVIとSWFどちらかを選択できます。通常では、AVI形式で書き出しますが、録画する前にSWFというボタンを押して録画すると、SWF形式で書き出します。

無料ソフトで簡単な動画編集をしてみよう

 動画を編集するソフトウェアには、Windows XPでは標準で「Windows Movie Maker」があり、Mac OS XではiLifeの1つとして「iMovie」があります。ニコニコ動画では、公式の無料の動画編集ツール「ニコニコムービーメーカー」を提供しています。

 プロの動画編集者向けには、アドビ システムズの「Adobe Premiere Pro」やアップルの「Final Cut Pro」などがあります。

「Windows Live ムービーメーカー」とは

 本稿では、例としてWindows 7/Vistaで無料で使える「Windows Live ムービーメーカー」(以下、ムービーメーカー)の使い方を解説します。これは、Windows XP標準の「Windows Movie Maker」の機能強化版です。

 機能概要は、記事『Microsoft、動画編集ソフト「Windows Live Movie Maker」リリース』も参照してください。

ムービーメーカーのダウンロード

 Windows Liveのダウンロードサイトからダウンロードします。サイトの右側にある「いますぐダウンロード」ボタンを押すと、「wlsetup-web.exe」がダウンロードできます。

図8 「いますぐダウンロード」ボタンをクリック 図8 「いますぐダウンロード」ボタンをクリック

ムービーメーカーのインストール

 ダウンロードしたファイル「wlsetup-web.exe」をダブルクリックすると、インストールするための画面が開きます。ここでは、「ムービーメーカー」のみチェックして「インストール」ボタンを押しますが、ほかにも必要なものがあれば、適宜チェックしてインストールしてください。

図9 インストールするソフトウェアを選択 図9 インストールするソフトウェアを選択

 後は、画面の指示に従ってボタンを押して進めてください。最後に、再起動を要求されますが、ムービーメーカーは再起動しないでも使えます。なお、Windows Media Playerがイントールしてある必要があります。

ムービーメーカーを起動する

 インストールしたら、Windowsメニューの[プログラム]→[Windows Live]にあるムービーメーカーを起動してみましょう。

図10 ムービーメーカーを起動したところ 図10 ムービーメーカーを起動したところ

 左側がプレビューで右側が編集作業する領域で、タイムラインが表示されます。

動画を取り込む

 ムービーメーカーで取り込める動画フォーマットは[ヘルプ]で参照できますが、以下にも、主なものを抜粋しておきます。音声・画像ファイルや詳細については、[ヘルプ]で、ご確認ください。

  • Windows Media ビデオ(WMV)ファイル(.wmv)
  • Windows Mediaファイル(.asf、.wm)
  • AVCHDファイル(.m2ts、.m2t)
  • Apple QuickTimeファイル(.mov、.qt)
  • DV-AVIファイル(.avi)
  • Microsoft テレビ録画ファイル(.dvr-ms、.wtv)
  • MPEG-4ムービーファイル(.mp4、.mov、.m4v)
  • MPEG-2ムービーファイル(.mpeg、.mpg、.mpe、.m1v、.mp2、.mpv2、.mod、.vob)
  • MPEG-1ムービーファイル(.m1v)
  • Motion JPEGファイル(.avi、.mov)

 取り込む際はメニューにある[ビデオおよび写真の追加]ボタンを押してダイアログで動画ファイルを選択するか、右側の編集領域にファイルをドラッグ&ドロップします。

図11 [ビデオおよび写真の追加]ボタン 図11 [ビデオおよび写真の追加]ボタン
図12 動画ファイルを取り込んだ直後の様子 図12 動画ファイルを取り込んだ直後の様子

動画を分割・トリミングする

 取り込んだ動画は、分割できます。タイムライン上で分割したいポイントに線を合わせ、メニューの[分割]ボタンを押してください。

図13 メニューの説明に隠れているが、分割するポイントに線が合っている 図13 メニューの説明に隠れているが、分割するポイントに線が合っている

 すると、1つだったタイムラインが2つの囲みに分割されます。

図14 分割された直後 図14 分割された直後

 分割されたタイムラインを選択して左右にドラッグ&ドロップすることによって順番を入れ替えることができます。動画ファイルを追加した後も同様に順番を入れ替えられます。

 また、[トリムツール]ボタンで範囲を指定して切り取ることもできます。

図15 [トリムツール]ボタン 図15 [トリムツール]ボタン

 指定した範囲以外は切り捨てられるので、注意が必要です。

図16 [トリムツール]の[開始位置の設定]と[停止位置の設定] 図16 [トリムツール]の[開始位置の設定]と[停止位置の設定]

動画を回転する

 メニューの[右へ90°回転][左へ90°回転]ボタンを押すと、動画を回転できます。デスクトップ動画キャプチャでは使わないと思いますが、デジカメなどで縦に撮影した動画を直すのに便利です。

図17 [右へ90°回転]した動画 図17 [右へ90°回転]した動画

アニメーションや視覚効果を付ける

 アニメーションやエフェクト(特殊効果)を付けることもできます。ちょっとした演出をしたいときに使うといいでしょう。

図18 視覚効果一覧 図18 視覚効果一覧
図19 主なアニメーション 図19 主なアニメーション

文字を重ねる

 [テキストツール]で動画に文字を重ねることもできます。文字の大きさ、色、フォント、レイアウトも自由自在です。

図20 [テキストツール] 図20 [テキストツール]

 [タイトル]メニューを使うと、すでにある動画に文字を重ねるのではなく、文字だけの動画を追加できます。

図21 [タイトル]メニュー 図21 [タイトル]メニュー
図22 文字だけの動画を追加 図22 文字だけの動画を追加

 動画共有サービスによっては、この文字を重ねる作業をWeb上でできるものもあります。例えば、ニコニコ動画やzoomeなどはコメントサービスがあります。

動画を書き出す

 編集した動画を書き出す際は、左上のファイルアイコンのボタンから[ムービーの保存]ボタンで書き出します。

図23 [標準画質で書き出し] 図23 [標準画質で書き出し]

 書き出すフォーマットは、いろいろありますが、ここでは「標準画質」にして、「.wmv」ファイルで書き出しています。

図24 名前を付けて任意の場所に保存 図24 名前を付けて任意の場所に保存

 また、直接YouTubeやにアップロードする機能やDVDに書き込む機能も備わっています。

 ちなみに、動画自体の書き出しとは別に、編集した内容をプロジェクト単位で保存できます。

図25 [名前を付けてプロジェクトを保存]メニュー 図25 [名前を付けてプロジェクトを保存]メニュー

Webの動画共有サービスに配信

 ムービーメーカーには、YouTubeに直接アップロードする機能がありましたが、ほかの動画編集ソフトには、そのような機能がないものもあります。ここでは、「zoome」を例に動画共有・配信サービスに動画ファイルをアップロードする手順を紹介します。zoomeを例にしますが、仕組みとしては似ているものが多いので、ほかのサービスを使う際にも参考になると思います。

扱う動画フォーマット・サイズを確認

 サービスによって取り込める動画フォーマットが異なるので、アップロードする前にサービス内にある動画フォーマットのページを確認する必要があります。例えば「zoome」の場合は、AVI、3gpp、3gpp2、AMC、MPEG1、MPEG2、MPEG4、MOV、FLV、WMV7、WMV9、H.264、Motion-JPG、DVがアップロードできる動画フォーマットです(参考:zoomeのよく聞かれる質問)。

 ファイルサイズや再生時間も重要です。特に動画の場合、ファイルサイズ大きいものが多いのでサービスによって一ファイルの容量や再生時間を制限していることがほとんどです。

 ほかにも、さまざまな制限事項や推奨事項があるので、FAQや利用規約など確認してから仕様することをお勧めします。

会員登録・ログイン

 zoomeのIDやYahoo! JapanのIDがある場合は、そのままログインできますが、ない場合は、画面に従い個人情報などを登録してIDを作成します。

図26 zoomeのTOP画面、赤枠で囲んだところからログインか、新規登録ができる 図26 zoomeのTOP画面、赤枠で囲んだところからログインか、新規登録ができる

 会員登録には、さまざまな個人情報の入力を求められますが、これはどのサービスでもよくあることです。指示に従って会員登録を済ましてIDを取得してログインしてください。

図27 zoomeのログイン後のマイページ 図27 zoomeのログイン後のマイページ

アップロード

 動画をアップロードするには、まず動画のタイトルや説明を記載して・タグ付けなどを行ってからアップロードする動画ファイルを選択します。アップロードボタンを押すと、以下の画面が現れるので、入力してください。

図28 動画のタイトルや説明を記載 図28 動画のタイトルや説明を記載

 タグ付けや、動画に対して視聴者にコメントや投票をしてもらうかどうかの設定もできます。タグは動画を広めたい場合に、視聴者が動画を探すヒントになるものなので、できるだけ付けておいた方がいいでしょう。

図29 タグを付けて[次へ]ボタンを押す 図29 タグを付けて[次へ]ボタンを押す

 次の画面で、アップロードするファイルを選択します。アップロードできる動画のフォーマットなどが記載されているので、よく確認してからファイルを選んでください。

図30 アップロードするファイルを選択 図30 アップロードするファイルを選択

 さらに、投稿した動画をブログパーツとして貼り付けて使ってもらうかどうかの設定や、投稿するサークルの設定をして「投稿する」ボタンを押すと、投稿完了です。

図31 投稿完了画面 図31 投稿完了画面

試聴して確認

 図31で「今の投稿を確認する」ボタンを押すと、投稿した動画を確認できます。

図32 投稿した動画を確認 図32 投稿した動画を確認

 ちなみに、キャプチャ動画の題材になっているアプリは下記記事のものです。

r12icon.gif

jQueryとTwitterのAPIを使ったWindows 7アプリ
楽しいWindows 7アプリ作成入門(5) Webデザイナ/プログラマでもテキストエディタとWebブラウザで簡単に作成できる、Windows 7デスクトップガジェットの作り方を紹介します
デザインハックリッチクライアント 2010/5/14

Web公開時は、著作権や肖像権などの侵害に注意!

 デスクトップの様子を録画して、その動画を編集して共有するまでを無料で行う、ごく簡単な手順を説明しましたが、いかがでしたでしょうか。今回紹介した、ソフトウェアやサービスはあくまで、一例ですので、ほかにも使い勝手がよいものはありますので、いろいろと試してみてはいかがでしょうか。基本的な使い方仕組みは大きく変わので、参考にしていただければと思います。

 最後に、動画に限らず、画像や音声などもWebに公開する際の注意点ですが、自分で作成または、撮影/録音したものではなく、もともと公開されている動画や画像、音声などを編集して作品を公開する場合は、著作権や肖像権などの侵害に注意してください。また、編集したものをCDやDVDなどにして販売するのも大抵は許されてはいないでしょう。

 また本稿は、公序良俗に反する動画の配信を促す記事ではありません。録画・撮影、そしてアップロードする“内容”は、各自の責任に基づいて選択してください。本稿が、読者の動画活用に少しでも役立てば幸いです。


Copyright© 2014 ITmedia, Inc. All Rights Reserved.

TechTargetジャパン

メルマガ購読キャンペーン

コメント

ツイート

ホワイトペーパー(TechTargetジャパン)

注目のテーマ

転職/派遣情報を探す

【転職サーチ】SIer/Web企業/新規事業 スマホ開発で、あなたのキャリアを生かす

「派遣・フリーで働くメリット」とは? 活躍する派遣エンジニアの本音

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。