解説◊◇◇◇◇◇解説◊◇◇◇◇◇

情報科学センター教育用ビデオ制作顛末記

森 田 潤l
高 尾 康 之2r｀

九州工業大学の情報科学センター（戸畑キャンパス）では、初めてコンピュータに触れる授業で、学生はあるビデオを（強制的に？）見て学習することがあるそうです。今回、そのビデオの制作代表のもりじゅんこと森田潤さんと同じく制作した一人である高尾康之さんにお話を伺いました。

1 ビデオ制作のきっかけ
ーもりじゅんさん、高尾さんこんにちは。まずあなた方は何をされているのですか？
もりじゅん（以下「も」と略す）：

なにしているかって、私達は九州工業大学の普通の学生です。ただ、私は九工大のなかにある情報科学センターという施設の夜間操作員を 1回生から 3回生の時までしていました。

r

高尾（以下「た」と略す）：

私も情報科学センターで現役の夜間操作員をしています。

一夜間操作員といいますと？

も：まあ、学生が夜中に情報科学センターの管理、閉館作業等を行っているのですが、それ以外にも、夜な夜なプログラムを作ったり、 W W Wページを作ったりといろいろあやしいことをしていまして…（笑）。

ーさて、もりじゅんさん方は、情報科学センターのなかの授業で使用されているビデオを作成されたそうですが、どういうきっかけで作るようになったのですか？
1情報科学センター戸畑キャンパス夜間操作員， morijun{Q!
isct.
kyutcch.
ac.
jp
2情報科学センター戸畑キャンパス夜間操作員、

takao面 sct.
kyu
tech.
ac.
jp

‑69‑〜

九州工業大学情報科学センター
広報第 11号 1999.
3

解説も：

きっかけは、 2回生の 6、 7月頃だったかな、ある先生から「初めてセンターでコンピュータを使う人に視覚的に使い方を示したら、分かりやすいと思うのだけど、操作員で作ってみない？」みたいなことを言われて、ビデオを作成する苦労なんてそのころは知らなかったので、つい「はい」と返事をしました。それが始まりだったと思います。
今考えると、地獄…、いえ長い道のりの始まりだったのかな（笑）。

―—で、その後どうなさったのですか？

も：操作員の会議がそのころ週 1匝ぐらいであってたので、そこで提案して了承されたので、操作員 5げました。私達はそのときは、ビデオ制作はもとより、ビデオカメラの撮影などなどの経験がほとんど無かったので、何からすればいいか分からないでいましたが、ビデオ制作の経験がある職員の方の手助けで作成に取り掛かることができました。

︒

人ほどと監修として職員の方がついてくださるということで、センタービデオプロジェクトを立ち上

2 初めてのビデオ制作ー失敗の経験
一初めてのビデオ制作は、どのような手順で行ったのでしょうか？
「ビデオを見終わった時点で学生が『オンラインガイド 3』を自分一人で見るようになる」という目も：etscapeを立ち上げて見たい Webページを見るこ
標は始めから決めていました。つまり、一人で Nとができるという目標です。で、初めはどこから始めれば良いか分からなかったのですが、まず流れの案を作ることから始めました。
流れを作るのも簡単にはいかなかったです。私達は、大学に入学して 12年経過していて、コンピュータにもかなり触れていたので、初心者の気持ちをほとんど忘れていたのですね。どう取り上げれば良いかが分からなくなっていました。
大まかな流れを 3項目（導入、作業、その他注意）決めて、その中で細かな項目を出していって組み立てたのですが、今考えると、最初に何を取り上げるかをはっきり決めていなかったのが後の編集で響きました。
そのあと私がビデオ撮影の本を見て、見よう見まねで絵コンテなるものをつくりました。へたくそな絵ですが、これがそのときのものです（図 1)。
これをもとに話を詰めていきました。
一ー撮影はどうでしたか？
も：最初の撮影は、センターの中の会議室で行いました。

囁 報 科 学 セ ン タ ー で 作 っ た HTML形式の利用の手引き。 [URL]http://www.tobata.edu.isc.kyutech.ac.jp::8080/tebeki/
九 •I•I•I 工業大学情報科学センター

広報第 11号 1999.
3‑‑70‑゜解説臼~巡2仔;>かう与年心五心{~~~~~~~：~パ~：〗~~汀~~[~~s~~~`’~:.,.9,;`.‘,r',,'

図 1：最初に作成した絵コンテ（一部）

職員の方に手伝っていただき、 X 端末を 1台置いて、部屋を真っ暗にして撮影しました。カメラはHi‑8だったと記憶してます。撮影のときのモデルは高尾が担当しました。
撮影して分かったのですが、端末の画面が縞になるのですね。画面の中に横縞ができて困りました。走査線の影響についてほとんど知らなかったのです。このときは、シャッタースピードを遅くしrて横縞が目立たないようにしました。

た：

また、撮影の手順についてはほとんど話し合っていなかったのでいきあたりばったりの撮影になってしまいました。その結果、後日撮影し直しをしてしまいました。

も：撮影し、編集し終えたところで初めてマウスの持ち方が変なことが分かってあわてたこともあります。

た：

私がその時のモデルだったのですが、撮影の時は夢中で、マウスの持ち方がおかしいことに気付かなかったのですが、実はマウスボタンを 3本指で押えていたのです。後で指摘された時は恥ずかしかったです。

も：ま、モデルにとってはいい経験だったとおもいますが（笑）。

‑ 71‑

九州工業大学情報科学センター
広報第 11号 1
999.
3

解説ーそのあと編集をされたのですね。

も：そうですね。まず、職員の方に編集の例を示していただいて、それを参考に私達で苓扁集をしました。

—編集の機材はどんなものでしたか？

も：編集作業ば情報科学センター内にあるマルチメデイアパソコンを使ってノンリニア編集システム 4を利用しました（表 1)。まず、ビデオ画像を一旦 motionj
peg圧縮した動画としてキャプチャーし:動画編集機材 (PC)
表 1︒

AdobePremier
4.
2Jを使い動画を編成しました。

本体 (EPSONVA520V)の仕様

CPU

Pentium200MHz

主記憶

EDORAM128MB

2次 キ ャ ッ シ ュパイプラインバースト

SRAM512KB
ビデオカードMGAMillem
血 m 220/SMB

OS

M
icrosoftWindows95

内蔵デイスク3GB(FastS
CSI‑2)

CD‑ROM ドライプ

8倍速

ネットワークlOOVG‑AnyLan

サウンド機能SoundBlaster
AWE32AIP/DVu／…へ＼VideoC
aptureボード

C狙 1opusPowerCapturePCI(NTSC入力端子をもち、 NTSC出力が可能。
また、 640X 480のフルモーションキャプチャとプレイバックが可能。）—実際の編集はどうでしたか？

も：編集の手順は、まず、私の音声を取り込み、きたない声だなとがっくりして（笑）、その音声を基準にあらかじめキャプチャーしていた動画やタイトル等をつなぎあわせました。最初に大まかな流れを作っていたのですが、そのとおりにするとつながりがおかしいなどの問題がでてきました。

4ビデオテープを使わず、コンピュータを使ってビデオ画像をデイジタイズし、編集するシステム。ビデオテープベースの編集に比べてデータの劣化が少ない、編集が容易であるなどの特徴がある。
九州工業大学情報科学センター
広報第 11号 1
999.
372

解説

表2
: 動画絹集機材（周辺機器）

已

周辺機器

カメラ

SONYPCカムitc
cLMO‑640r

図2: 動画絹集機材

編集の為に徹夜したこともありました。 P
remier上で編成を終えると、その動画を 1つにまとめたのですが、その作業がまた時間がかかりました。そのあと編集を終えた動画を新しいビデオテープに録画したのですが、確か、完成したのは授業で使うといわれていた当日の朝だったと思います。結局、 2ヵ月ほどかかってしまいました。

r—作品が完成して、どうでしたか？

も：これでおわりだ一つ、と喜びました（笑）。
しかし、改めてできあがったビデオを見ると、あらが目立ちまして、また実際、授業で使っていただいたときの反省もあったので、新たな苦難の道を歩むことにしたのです。

― 第 2弾の制作を決意したのですか？

も：はい。そうですね。

3 第 2弾 の 制 作 ー 前 回 の 反 省 を も と にー 初 め て 制 作 し た ビ デ オ の 反 省 を 生 か し て 第 2弾のビデオを制作されたそうですが、具体的にはどの点にその反省が生きてますか？

‑‑73

九州工業大学情報科学センター

広報第 11号 1
999.
3

解説も：

第 2弾 の ビ デ オ の 制 作 で は 、 図 3のような手順でビデオを作成しました。

大まかな全体計画︒

動画を 1つの movieにまとめる

ビデオテープに録画

図 3: 第 2弾 の ビ デ オ の 制 作 の 流 れ 図

最初に制作したビデオからの変更点についてはいっぱいありすぎて、今すぐに思い出せないのですが・・・。
まず初めに、ビデオで取り上げる内容から変更しました。必要な事柄を加えて、また全体を通して流れがスムーズになるように順番を入れ換えました。
そのあと、前回は作ってなかったシナリオも作りました。シナリオを作ることによって、撮影の必要な部分も絞り込むことができました。

)。
シ ナ リ オ は 、 他 の 方 々 に も 見 る こ と が で き る よ う に HTML形式にしました（図 4ーシナリオ作りで苦労された点などは。

も：やっぱり、ナレーションの部分ですか。大体の流れは計画の段階でつかめていたのですが、その流れを崩さずにナレーションの原稿を作るのが苦労しました。特に初出の言葉の説明をどうするか、どこまで詳しく説明するか、という部分が苦労しました。

一初出の言葉の苦労と申しますと？
九州工業大学情報科学センター
1号 1999.
3
広報第 1‑‑74‑‑︒

も：

解説r

図4
:HTML化したシナリオの一部も：

例えば「login」の説明なのですが、 loginの説明もせずに「login」という単語を使っていて、後でloginの説明をするようになっていた、ということがあります。その時は指摘されて順番の訂正などをしました。
—撮影に関しても工夫されたようですが。

rも：そうですね。まず、シナリオを作っていましたから、そのシナリオをもとに撮影の計画を立てました。
撮影場所は、前回撮影を行った会議室から実際の授業をしている教室に変更しました。少しでも実際の使用場面に近付いた方がいいと思いましたので（笑）。
ビデオカメラも DVカム（図 5)を使うことができました。この DVカムはシャッタースピードやホワイトバランスを細かく設定できて、前回と比べたらかなり高画質になりました。特に前回のデイスプレーの撮影では、横縞が出てしまっていたのですが、DVカムにしてからはほとんど出ることが無くなりました。
前回の撮影と比べて、計画をしっかり立て、効率良く作業できましたが、撮影するシーンが多くなった為、結局は 1日がかりの撮影になりました。
ーいま伺っていると、撮影では、全てうまくいったように聞こえますが、実際はどうでしょうか？

‑
‑75‑
‑

九州工業大学情報科学センター
広報第 11号 1
999.
3

解説

図5
: 撮影で用いた DVカム

も：いえいえ、そんな事はありません。前回の撮影より知識が増えていたのですが、その分失敗も多くなりました。
撮影はオートフォーカスで行ったのですが、後で確認すると、ピントが思うようにあってくれてな〇

くて使いものにならない映像になっていたものもありました。
また、ファインダーぎりぎりいっぱいにデイスプレーの画面を撮影した為、後で編集し終わってビデオに録画する時になって画面の端が切れていることに気付きもしました。
―そうですか。撮影もまだまだ奥が深いですね。そういえば、ナレーションは女性の声になっていたのですが。
も：第 2弾のビデオでは、印象を少しでもよくする為に少しでも声の良い人にお顧いしようと思っていたのです。女性の声の方が軟らかい感じで教育用にはいいのではないかと思ったのです。で、お願いしました。私の妹に（笑）。
ただ、ここでまた問題がでてきたのですが、マイクの質があまりよくなく、また録音時にマイクと口との距離が録音の機会毎に変化してしまった為、音質がバラバラになってしまい、あとでつなげてみると、違和感がありました。

一撮影後の編集についてはどうですか？

も：そうですね。第 2弾では、編集に力をいれました。まず、作業をタイトルと 3次元 CG、総合的なhotoshop 、 3次元 CGには LightWave3D編集と大きく 3つに分担して、タイトル等は AdobePを使い、編集には前回同様 AdobePremier4.
2.
Jを使いました。
一編集で、前回のビデオとどのような変更をしましたか？
も：要所要所に音楽をいれました。ジングルみたいなものですか。音楽をいれることにより、映像にメリハリがついたような気がします。また、取り上げる事柄毎にタイトルをつけて、これから説明することをはっきりさせる工夫もしました。テロップも積極的につけるようにしました。

九州工業大学情報科学センター
広報第 11号 1999.
3‑ 76 ‑0解説—具体的にどのようなことをされましたか？

も：動画中のテロップ、図 6でいうと「クリック」というテロップですが、これは Premier上のタイトル作成機能を使いました。

r
図 7: ホストと端末の関係図: クリックの説明
図 6も：)や、最後のスタッフロールの縦スクロールの動きは Premier
また、ホストと端末の関係の図（図 7上のイメージパンというフィルタを用いました。

r

図9: イメージパンの設定

図8: スタッフロールの元になった画像

77

九州工業大学情報科学センター
広報第 11号 1999.
3解説ー紺スクロールにイメージパンという機能を使ったそうですが、具体的にはどのようになされたのですか？
スタッフロールの例で説明しますと、まず、縦スクロール分の縦長の画像を Photoshopで作り（図も：8)、それを Premierに持っていった上で、 Premierプロジェクトウインドゥ 5に配置して、イメージパンというフィルタをかけました（図 9)。

‑ 3次元 C Gを使ったそうですが、どの場面で使ったのですか？
も：ウインドゥの説明のところです。
0)のようなウインドゥの重なりのウインドゥの概念は、説明が難しいところでした。この図（図 1ightWave3Dの説明をするときに、立体的にウインドゥの配置を表現できたらと考えました。で、 Lオブジェクトの配置とアニメーションを利用してみました。その時の作業画面がこれです（図 11)。
このようにしたら、重なりが分かりやすくなりました（図 12)。ただ、そのため担当者には負担をか。

けましたか。

― 高 尾 さ ん は Photoshopで X 端末の説明の部分を担当したそうですが、どのようになさったのですか？

私は、ビデオ作成の中で P
hotos
hopを用いて画像にテロップを貼り付ける作業を担当しました。

た：

x端末の説明の部分の例（図 13)で説明しますと、まず、動画中から説明したい部分の静止画を切り取り、その静止画に Photoshopをつかってテロップを貼り付けた訳です。
—具体的にはどのような機能を使って作業されたのですか？

文字及び塗り潰した背景を貼る位置を自由に調整したいという考えから、今回の作業では、 P
hoto‑

た：shopのレイヤーという機能を使いました。
Premier上で作業するウインドゥをプロジェクトウインドゥというう

九州工業大学情報科学センター
広報第 11号 1
999.
3‑78 ‑︒

0: ウインドゥの制作での 3次元 CGの元になった映像
図 1

解説r

図 11:LightWave3Dの作業画面

r

図1
3: 端末の各名称

図 1
2:LightWave3Dによるウインドゥの説明

79

九州工業大学情報科学センター
広報第 11号 1
999.
3

解説

レイヤーとは、アニメーションの制作に使われる澄明なフィルムのようなもので透明なレイヤー上に画像を作成し、その画像を背景画像の上に重ねていくことで画像を合成していく機能のことです。
レイヤーを用いるとテロップを 1つのレイヤーとして扱う事ができ、修正作業が容易にできます。最後に、レイヤーを統合し、1つの画像としてまとめれば完成です。

‑ Photoshopで作業して失敗した点などありましたらお聞かせ下さい。
た：

テロップを作成して、貼り付けるという比較的、簡単な作業でしたが、ビデオ録画の時に画像の端に貼り付けていたテロップの一部が切れていることに気がつきました。

一何が原因だったのですか。
た：NTSC安全領域を考慮に入れてないことが原因でした。

‑NTSC安全領域とは何ですか。
た：NTSC安全領域6とは、 NTSCの画面でタイトルや動きのある映像が安全に収まる標準的な範囲の4)。
ことです（図 1゜

フルフレームテレピフレーム

BEGIN-- ——タイトル安全フレーム

全領域の 80%I

全領域の 90 85%

゜／,I

図 1
4
:NTSCの領域の規格

図 1
5: タイトル

文字を画像の安全フレームに収めれば、ビデオモニタで再生した時に作成した画像（テロップ）が欠けることはなかったのです。
6日本におけるピデオの規格を :'{TSC(.
¥'ationalT（>.
levisionStai
1dardsConnnit.
pe)という。ビデオ信号がモニター上で表示される領域全てをフルフレームという。このうち、実際のテレビ上では全てが見ることができるわけではなく、また、見ることの出来る領域はそれぞれのテレビによって個体差がある。これをテレビフレームという。最近のモニターの場合、

85‑90％と考えてよし％更にタイトル安全フレームと言うものがあり、これは、領域に表示されているものはどのテレビにも必ず表示されることが保証0％である。
されている。タイトル安全フレームはフルフレームの 8
九州工業大学情報科学センター
広報第 11号 1
999.
380解説吐センターの注意争項
青較科学センターでば飲食,t
および、喫煙を禁止していままた、静粛を守って頂きまようお願いしますむ
で退出する前には必ずトして、 9蓄末の電源をさい滋

図 17: 章のタイトル

図16: 注意事項

rーなるほど、画像をブラウン管に表示する際、見えなくなる領域がある訳ですね。
た：はい。上記の問題は P
hotoshopでの作業中、全く想像がつきませんでした。ビデオ組集を担当されたもりじゅんとの連絡が不十分であった為だと反省しています。

も：そうですね。高尾がいうとおりです。先程話しましたように撮影で画角ぎりぎりまでデイスプレーrernierで編成し終わった動画をの画面を撮影したため、高尾のいう NTSC安全領域からはずれ、 P新しいビデオに録画する時はじめて画像が切れていることに気付いたこともありました。

も：その他にもタイトルや注意事項の説明でも Photoshopで作業をしてもらいましたが、基本的には高7)。
尾の作業と一緒です（図 15 1r 4 反省とこれから、一編集でも、いろいろあったみたいですが、作品が完成して、どう思われましたか？

も：これでおわりだ一つ、と喜びました（笑）。
あれ、さっきも同じことを言った気がしますが、まあ、同じ気分だったと思います。
ただ、頑張ったつもりでも問題点は結構あって、授業で使っていただいたときの反省がいろいろでてきました。

7分もかかってしまい長
テキストとの用語の統一が取れていない、内容を盛り込みすぎで時間が 1すぎた、音が割れた、などです。
音に関しては、ナレーションの録音状態が悪かったのが原因ですが、内容については、 2部構成にして最低限の部分と、その他必要な部分とに分けた方がよかったという意見がありました。

‑81

九州工業大学情報科学センター
広報第 11号 1
999.
3

解説

私個人としても、授業で使う前に実際に使う教室でビデオ上映のリハーサルをすべきだったと思います。実際に上映したときに起こった音声の問題もありましたから。

一 次 回 作 、 と い う か 第 3弾は出しますか？
も：私は、もう夜間操作員を引退しましたのでなんともいえませんが、きっと後輩がもっといいものをつくつてくれると信じています。

—今日はどうもありがとうございました。

゜︒

九州工業大学情報科学センター
1号 1
999.
3
広報第 1‑ 82‑‑