画面を実装する

トップ画像

まえがき

現代のわたしたちの日常生活には画面が溢れています。SNSやメッセージングアプリケーション、動画配信サイトやニュースサイトなど、映像作品でその画面が映し出されることもすくなくありません。その画面を大きく写したいとき、その画面に演出を介在させるなら、その画面を作らなくてはなりません。

それだけではありません。ゾンビによる市内の汚染シミュレーション、新種の致死性ウィルスの発見、自衛隊の出動が決定された事実、ロケットの打ち上げ、戦術データリンクを駆使した地上戦、人工衛星の支援を受けた遠距離狙撃、弾道ミサイルの迎撃、通信回線の大規模な輻輳、制御対象の通信途絶と暴走等々、娯楽映画にとって必要とされることの多い特殊な状況を描くとき、それを補強し、またはそのすべてを安価に描くために有効なのが、画面に表示される情報とその表示形式です。画面によって状況を描けば、その状況がより現実性をもって表現できるうえ、場合によってはその画面だけで状況を描くことができるため、低予算映画では到底表現しえない状況を作り出すことができ、大変便利です。

この記事では、画面の実装形式と表示方法、その設計手順、実装方法、そしてわたしたちが今まで作ってきた画面について解説します。

画面の実装形式

画面の実装形式には大別して、役者が操作可能な画面と、操作不可能な画面があります。この違いは実装の難易度に直結します。

操作不可能な画面

画面だけが大写しになる、あるいは記録や現在の情報を表示する、もしくは操作可能であるように見せかけているが実際に演技として操作する必要はないなど、利用者役を務める役者が操作する必要のない画面や、役者がタイミングを合わせて動かすことが前提になっている画面が操作不可能な画面です。

こちらは、最低限の場合一枚の画像で済みますし、全体的に実装が比較的簡単です。

操作不可能な画面の例
操作不可能な画面の例

諜報部隊のアジトに光るディスプレイで、常にデータが蓄積されている様子を描く、そういう用途のために操作不可能な画面はあります。

操作可能な画面

役者が直接操作し、演技する画面は操作可能な画面です。

簡単なものだとウェブページを作る程度で実装できますが、アプリケーションとして実装すると相応の労力が必要であり、これがさらにアニメーション等の演技が加えられたりすると難易度は上がります。

操作可能な画面の例
操作可能な画面の例

異常を察知した監視員がキーを叩いて特殊部隊の出動を要請する——そんな緊迫感のある場面に彩りを添えてくれる、それが操作可能な画面です。

画面の表示方法

画面を表示する機器の選択は、見た目にも影響し演出に関わることはもちろん、実装の難易度にも繋がります。

パソコンやテレビの液晶画面等

パソコンの液晶画面を利用した画面の表示
パソコンの液晶画面を利用した画面の表示

一番表示が簡単な表示機器は、パソコンやテレビの液晶画面です。利用者が表示したいものを表示させるための機器であり、その実現も大抵の場合電線を一本繋ぐだけで済みます。今人気のアイドルの姿や、同級生が高校生で活躍する様子の表示を初めに、大統領の暗殺から、開戦が避けられない情勢の悲観的な通告まで、あらゆる用途に使用可能です。正方形の液晶画面は、レーダにもソナーにも使えます。

また、数が揃えやすいのも特長で、どんな場所でも大量の液晶画面を置けば即席の野戦司令室に変化させられます。

スマートフォンやタブレットの画面もまた同様ですが、任意の操作可能な画面を表示するためには手間がかかるかもしれません。しかし現代の日常風景には欠かせませんし、スパイの秘密道具としても適格です。カメラ用などの小さな表示部分をもつ表示機器も、携行機器などの小道具には便利です。

プロジェクタ

ある程度の暗さを確保する必要がありますが、プロジェクタの威力は絶大です。それらしい雰囲気が出るため、司令室などを構築するためには必須の機器といえます。また、液晶画面などにくらべて巨大な画面を簡単に作れるのも特長です。

プロジェクタによる画面の表示
プロジェクタによる画面の表示

また、あまり日常の中に存在しない、透過スクリーンを使うとより非日常の雰囲気を出すことができます。透過スクリーンは高価ですが、農業用ポリエチレンフィルムや網戸を利用する方法もあり、インターネット上で探せばいくつかの自作方法が解説されています。しかし、空港の管制塔で網戸に管制情報が表示されていては残念なので、うまく誤魔化す必要があります。

さらに、プロジェクタは光量があるので、暗い場面では照明として低予算映画の強い味方になってくれます。

プロジェクタによる照明
プロジェクタによる照明

また、暗い場所でプロジェクタを使うと、使い方によっては撮影された画面全体の色を変化させられるため、それ自体を演出手段として利用することもできます。

プロジェクタによる効果の例1
プロジェクタによる効果の例1
プロジェクタによる効果の例2
プロジェクタによる効果の例2

特殊な作業が必要になる表示機器

市販の携帯ゲーム機などは小さい画面が搭載されており、そのまま使うほかにも携行機器など小道具用の表示機器として向いている上、調達がしやすいという特長がありますが、一方で利用者が好きな画面を好きなように表示させたり、それを操作させたりすると難易度が上がる可能性があります。

電子工作が必要となる表示機器

電子工作を要する表示機器は極めて自由度が高く、様々な用途に用いることができます。特殊戦闘服に埋め込まれた情報画面や、携行対空ミサイルユニットの画面など、使い方は様々です。ですが、電子工作はもちろんその制御にも相応の労力が必要です。一方で、当然その労力に見合うだけの効果を得ることもできます。

合成による表示

天気予報のような簡単なクロマキー合成にはじまり、大怪獣の上陸を報じる街頭ビジョン、諜報組織の作戦会議で使われる未来的な空中表示、介護ロボットの主観映像、宇宙機動艦隊の司令室にあるガラスのテーブルに表示される役者の演技に合わせて動く画面など、後処理での合成を行えば様々な表示が行えますが、状況によってはとてつもない難易度が要求されます。もちろん「これは画面である」という言い訳が効くので、現実の物体として完全に照明や質感を一致させなければならない合成処理よりは難易度が落ちますが、難しいことに変わりはありません。

しかし当然、手の込んだことをすれば、それだけの効果を得ることもできます。

全画面表示

映画の画面全体を画面として表示してしまうのは一番手軽で簡単な方法です。なにより、画面外の美術や役者に気を配らなくてよい、というのが最高です。ゾンビの感染拡大の様子や、未確認飛行物体に対する邀撃管制などを役者が3人の映画で表現することもできます。また、一度なんらかの表示機器に表示したものをカメラで撮影するという一手間をかけることで手に入れる効果も選択肢の一つです。

設計の手順

画面を実装するためには、まず設計が必要です。これにはいくつかの手段があり、単体でも可能ですが、複合して行うこともまた有効です。

現実を模倣する

現実に存在する画面を模倣できるなら、模倣するのは一つの手段です。観客も知っている画面であれば瞬時に状況を理解することができますし、なにより設計の手間が省けます。

一方で、現実に存在する画面は著作権や意匠権などに関わる場合もあるので、注意しなくてはなりません。

雰囲気を作る

雰囲気を重視した通信傍受機器の画面
雰囲気を重視した通信傍受機器の画面

暗い部屋でキーボードを高速で叩く天才プログラマのメガネに写りこむ黒い画面の黄緑色の文字、それはすさまじい勢いで流れて画面の上へと消えていく——実際にプログラマであるならプログラミングという行為がほとんど腕組みして考えていることに費やされるという事実を知っているため噴飯物の場面ですが、雰囲気としては重要です。

そこまでステレオタイプでなくても、背景美術としての画面において、少しずつ流れていく記録画面というものは雰囲気作りに一役買ってくれます。しかし注意しなければならないのは、映像をコマ送りで見てその内容を楽しく仔細に読み解く観客もいるということです。

想像して作る

西暦2015年と言えども本物の汎用人型決戦兵器の制御画面など存在しない(はず)ですし、一般人には見ることのできない画面は世の中にたくさんあります。そういった参考にできるものが乏しい、あるいは新たに画面を設計する際には、想像力がものを言います。

利用者の要求を想像する

主人公は狙撃手で、霧の中、遠く離れたところにいる目標を狙撃しなければならない——そんな場面の主人公が覗く超高性能狙撃ライフルのスコープである画面を実装しなければならない、となれば、あなたが狙撃手としてそれを使うときに必要なものを想像すればいいのです。

まず必要なのは距離計です。目標までどれだけの距離があるかを表示してもらわなければ、重力によって落下する弾丸の移動量がわかりません。また風向計、風力計も必要です。風によって弾丸は逸れますから、風の状況は当然必要になります。ところが主人公と目標との間には空間が存在し、この部分についてはどんな状況かわかりません。そこで周辺に設置されたセンサから取得した信号を統合および解析して送ってくる狙撃支援コンピュータとの通信状況と、センサ群の状態も見ておきたいところです。

あるいはセンサはなく、現在の気象状態を人工衛星から取得するしかないかもしれません。温度や湿度も弾丸の行き先に影響を与えますから、これも見ておきたいといえます。現在位置と向き、特に緯度情報と射撃方向はコリオリ力の補正に必要です。また自分の体調、特に心拍と呼吸の状態は引き金を引く時期の決定に関わりますから、これも表示を検討すべきです。当然このライフルは最新の技術を駆使して作られていますから、さまざまな状態を加味して着弾予想地点をリアルタイムで補正して着弾点を示す十字を動かしますが、せわしなく動くために最終段階ではやめていただきたいものです。それを適当な位置で固定して最終的な狙撃の決定を下すのは射手である主人公の役目です。

また仲間からの無線通信の状況、移動する目標の現在位置、銃に装弾された弾薬の種別、その残弾数、安全装置の状態なども表示を検討すべき事項です。

狙撃支援システムの画面例
狙撃支援システムの画面例

この例では、シンプルな内容に絞って表示しています。表示することも大切ですが、表示しないことも重要です。演出家とよく相談することをおすすめします。

つまり、この手段をとるために必要なのは、その作業についてのいくつかの知識です。

開発と製造および利用の状況を想像する

架空の画面とはいえ、その画面もまた架空の誰かが持ち得る技術で設計開発し、製品として世に送り出され、想定した利用環境で利用されることが前提のものであることは確かです。ですから、その開発者がいつ、どんな状態で作ったものかを仔細に想像するだけで架空の画面の現実感は高まります。

表示機器

例えば舞台は1970年なのに、透過液晶ディスプレイに細かな画面がアニメーションして表示されていたら、違和感があります。ブラウン管に表示されて、画面は歪んでいた方が現実味があると言えます。

近未来のハイテク企業ならプレゼンテーションする画面が宙に浮いていてもおかしくありませんし、世界を悪から守る秘密組織の隊長の執務室ならテーブル全体がディスプレイになっており、宙に浮かんだアイコンを掴んでタブレットに投げ落としてファイルをコピーすることも充分あり得ます。

動作環境

80年代に製造された宇宙船の制御画面なら、黒い画面に緑色の文字が出れば充分と言えます。宇宙船ですからそうなのであって、これが銀行のATMならもう少し計算資源に余裕がありますから、4色ぐらい表示できるものとすることもできます。

90年代に開発された鉄道の運行システムなら、色数は16色ぐらいしか使えないかもしれません。文字もアンチエイリアスがかからない縁がギザギザのフォントで、カタカナは強制的に半角文字になってしまうかもしれません。

display-station-anti display-station-nonanti
同じ画面でもアンチエイリアスをかけない場合とかけた場合で印象は変わります。この場合、他の見た目からしてアンチエイリアスをかけない方が、古くさい画面の印象をより強くできると考えられます。
用途

テレビに表示される株価の表示画面と、証券取引所の端末に表示される株価の表示画面は作った人間も見る人間も別種のものですから、前者は比較的見栄えに凝り、後者は最低限の見栄えとするとより現実感が出るものと考えられます。

暗いところで表示される画面は背景色が暗い方が目の疲れを軽減できるかもしれません。

無人航空機制御システムの画面デザイン
無人航空機制御システムの画面デザイン

このシステムは輸入したものをそのまま使っているという設定なので、英語表記にしました。暗いところで長時間見ることが予定されているので黒い背景にしています。また、気温が華氏で表示されています。

実装の手順

本物を使う

プログラマが使うエディタの画面や、ハッキングを行うコンソールなど、実在するものは、各種権利が許す限り本物を使うのが一番手っ取り早いと判断できます。手間も省けますし、なにより現実にあるものですから違和感がありません。テーマファイルを自作できるデスクトップなら、見栄えを変えてちょっと変わった雰囲気を出すこともできます。

*NIX系のシステムなら tail -f /var/log/system.log などのコマンドを叩けば、簡単にそれらしい雰囲気を作り出せます。適当にシェルの設定を加工して色づけしてやることもできます。

内容をよく読まれても困らないように、それなりの内容を嘘でも作れるものなら作ることをおすすめします。

プレゼンテーションソフトウェアで実装する

あまりこの手の用途に使われることはないですが、プレゼンテーションソフトウェアは多くのユーザが保有し、もしくは安価あるいは無償で手に入れやすく、簡単に画面を実装できるため、おすすめです。

操作可能な画面を作るには無理がありますが、操作不可能な画面や、時間差で動く画面作りならこれだけでも充分に使い物になります。

また、ほかのソフトウェアでレンダリングするための素材作りにも向いています。

映像用ソフトウェアなどで実装する

写真編集ソフトウェアやイラスト作成ソフトウェア、映像効果ソフトウェア、3D CGソフトウェア等を駆使して作るのは、操作不可能な画面を作るための一般的な方法です。

低予算映画ですと、高価なこの種のソフトウェアを幾つも手にいれるのは難しいかもしれませんが、例えば3D CGソフトウェアしかなくても、カメラを平行投影にして板ポリゴンにプレゼンテーションソフトウェアで作った色と透明度のテクスチャを貼り付けてアニメーションさせれば、いろいろなことができますし、透視投影にして微妙にカメラを回転させたりすると、画面の情報を一気に増やすことができます。

プレゼンテーションソフトウェアと3D CGソフトウェアを組み合わせて作った画面
プレゼンテーションソフトウェアと3D CGソフトウェアを組み合わせて作った画面

テクスチャを貼り込んで立体的に配置しただけでなく、強烈なレンズ歪みの効果を入れています

双方向性コンテンツ作成用ソフトウェアで実装する

ウェブサイトなどで利用される簡単な双方向性コンテンツ作成用ソフトウェアは、操作可能な画面を作るための一般的な手法です。

わたしたちはこの手のソフトウェアを使ったことがないので、詳しいことは言えませんが、後述する一般的な開発ツールを用いた実装よりはずっと簡単に操作を要求される画面を実装できます。擬似的にネイティヴアプリケーションとして実装することも可能な場合があります。

一般的な開発ツールを用いて実装する

ウェブアプリケーションとして実装する

ウェブアプリケーションは資料が豊富な上、見栄えへの拘りが比較的表現しやすいので、操作可能な画面を一般的な開発ツールを用いて実装するには最良の手段です。

ただし、複数ブラウザへの対応やアニメーションなどを始めると急激に難しくなるうえに、デバッグも難しくなることがあることはよく理解しておく必要があります。

コマンドラインアプリケーションとして実装する

大抵の場合、適当なテキストファイルに表示したい内容を書き込み、*NIX系のシステムならcat <file>をシェルスクリプトにして、パスを通しておくだけで充分ですが、対話操作が必要であるなどの場合は、アプリケーションとして実装する必要があります。プログラミング言語の入門書の最初の部分だけで大体実装できる筈ですから、それほど難易度は高くありません。軽量言語を使うなどして、省エネに努めることをおすすめします。

ネイティヴアプリケーションとして実装する

ネイティヴアプリケーションとして実装すれば、操作可能な画面としては申し分のないものが実装できます。一方で手間がかかることは間違いないので、覚悟して望まれた方が良いと言えます。

手間を軽減する方法はよい開発ツールを使うことです。この手のアプリケーションを実装するのに最も向いているのはMicrosoft WindowsとVisual C#で、WPFを使えばネイティヴアプリケーションを見た目基準で簡単に実装できます。Apple Mac OS XとXcodeの組み合わせでは簡単なことにもMVCアーキテクチャを考慮したり、独特のGUIに苦労しなければならず、すぐにサブクラスの実装を要求されるため、おすすめできません。

その他

利用者による自由な利用が想定されていない携帯ゲーム機や自作の表示機器などの特殊な表示機器を使う場合などは、それに応じた技術力と手段が必要になります。

作例

記録監視

記録監視システムのスクリーンショット
記録監視システムのスクリーンショット

INTERCEPTORのために作った、記録監視として実装した画面です。

Borland Delphiを使って実装されています。この種類の画面のログなどは、適当に取得したものを使うか、実際の情報をリアルタイムに出しています。

記録監視 - 新型

記録監視システムのスクリーンショット
記録監視システムのスクリーンショット

INTERCEPTORのために作った、記録監視として実装した画面です。

こちらもBorland Delphiを使って実装されています。

戦術データリンク

戦術データリンクシステムのスクリーンショット
戦術データリンクシステムのスクリーンショット

INTERCEPTORのために作った、戦術データリンクシステムとして実装した画面です。本編中では緊急事態を確認した監視班がこれを使って特殊部隊の出動要請をかけていました。

キー操作によって画面が変化するソフトウェアで、Borland Delphiを使って実装されています。

情報部隊なのに名前ダダ流しでいいのかと思いますが、画面がさびしいので書いてしまいました。本編では一瞬、しかもカメラが動いているので問題ないだろうという判断です。

下記の発注書を元にデザイナ兼プログラマが仕上げています。

階級の数字は漢数字 部隊の数字はアラビア数字
状態はRED YELLOW GREENの順に丙乙甲
各種英語名称を知りたければそれは調べるか訊いてください。
作り込みたくて、素材が足りなければ言ってください。
タイトル系
防衛省統合防衛インターネット
Ministry of Defense General Defense Internet
陸上自衛隊中央即応集団
Japan Groud Self-Defense Force: Central Readiness Force
対特殊脅威作戦群
Counter Special Menace Group
ウィンドウ系
第二中隊
第四監視小隊
第五通信小隊
第六装備小隊
第四監視小隊
官姓名       所属      備考      通信  状態
大森良美三佐    第一分隊    第四監視小隊長   切断  甲
牛込高徳一尉    第一分隊            切断  甲
吾妻繁樹三尉    第一分隊            切断  甲
葛西理沙三尉    第一分隊            切断  甲 ←乙(黄色文字)に変わるようによろしく
結城秀雄三佐    第二分隊長         切断  甲
浦賀政則一尉    第二分隊            切断  甲
辻田義男二尉    第二分隊            切断  甲
袴田清吾三尉    第二分隊            切断  甲 
                        ↑この欄が「発呼」とか「接続」とか、呼び出した時にウィンドウが開くとかカッコいいぞ
緊急要請
第一種対応要請(これらはボタン)
第二種対応要請
第三種対応要請
こういうウィンドウが開くようにしてほしい
緊急制圧対応要請
状況 現在要請中(現在移動中→緊急制圧中→状況終了)
出動部隊    中央即応集団
            特殊作戦群第1中隊
            第1ヘリコプター団
                UH-60JA多用途ヘリコプター
                UH-60JA多用途ヘリコプター(2機いるので)
        東部方面航空隊
            第4対戦車ヘリコプター隊
                AH-64D対戦車ヘリコプター

電話傍受

電話傍受システムのスクリーンショット
電話傍受システムのスクリーンショット

INTERCEPTORのために作った、電話傍受システムとして実装した画面です。

キー操作によって画面が変化するソフトウェアで、Borland Delphiを使って実装されています。本編中ではヒロインと友人の電話を傍受するシーンで使われました。

実在の電話番号と被ると厄介なので、電話番号は16進数にしてあります。波形データは実際のデータをCで書いたプログラムで出力した筈です。

電話傍受システムの発注用モック
電話傍受システムの発注用モック

通信傍受

通信傍受システムのスクリーンショット
通信傍受システムのスクリーンショット

INTERCEPTORのために作った、通信傍受システムとして実装した画面です。

記憶装置管理

記憶装置管理システムのスクリーンショット
記憶装置管理システムのスクリーンショット

INTERCEPTORのために作った、記憶装置管理システムとして実装した画面です。

Borland Delphiを使って実装されており、ランダムにアニメーションします。

作戦状況

作戦状況画面
作戦状況画面

INTERCEPTORのために作った、作戦状況を表示する画面として実装した画面です。本編中では、平常時緑色、警戒を要する場合は黄色、危険時は赤、状況の終了には青く画面全体を変化させて、記号的に物語を表現する演出装置としても使われました。

この表示はキー操作で切り替えることができ、演技することができます。これはすべてApple Xcodeを使いObjective-Cで実装されています。

本来の用途からして英語表記は不要と思われますが、ないと画面が寂しいのでつけてあります。この手の話はよくあることです。大体、自分たちの道具なのにわざわざステルスとか書いちゃってるところが現実味がありません。

もっと凝った画面にする予定でしたが、撮影前日の深夜突貫工事で作ったため、シンプルな作りになりました。

呼量監視

呼量監視画面
呼量監視画面

INTERCEPTORSのために作った、電話会社の呼量監視システムの画面です。本編中ではパニック状態に陥ったため、呼量が増大して輻輳を起こす場面で使われました。

プレゼンテーションソフトウェアであるApple Keynoteで文字などの素材を作り、最終的に3D CGソフトウェアであるmodoを用いてレンダリングしています。

駅管理

駅管理システムのスクリーンショット
駅管理システムのスクリーンショット

INTERCEPTORSのために作った、自動運転の新交通システムの運転司令室で利用されている駅管理システムの画面として実装したものです。

実装に使われたのはプレゼンテーションソフトウェアであるApple Keynoteで、業務用途で開発が94年という設定からアンチエイリアスをかけない明朝体で色数もあまり使わないものとしました。

また、他に路線監視もありましたが、本編では使われませんでした。

路線監視システムの素材
路線監視システムの素材

弾道ミサイル迎撃

弾道ミサイル迎撃画面
弾道ミサイル迎撃画面

INTERCEPTORSのために作った、弾道ミサイルの迎撃画面として実装した画面です。本編中では外宇宙から侵入した未確認飛行物体の迎撃場面で使用されました。

プレゼンテーションソフトウェアであるApple Keynoteで文字などの素材を作り、最終的に3D CGソフトウェアであるmodoを用いてレンダリングしています。

こちらにもないと寂しいという理由だけで、英語表記が付加されています。

弾道ミサイル迎撃画面の素材
弾道ミサイル迎撃画面の素材

邀撃管制

邀撃管制画面
邀撃管制画面

INTERCEPTORSのために作った、邀撃管制画面として実装した画面です。本編中では上記の迎撃行程を突破した未確認飛行物体の邀撃場面で使用されました。

プレゼンテーションソフトウェアであるApple Keynoteで文字などの素材を、航空機のアイコンはドット絵エディタであるPixenを 使って作り、最終的に3D CGソフトウェアであるmodoを用いてレンダリングした映像をさらにテクスチャとして架空のスクリーンに貼り込み、これをレンダリングしています。

邀撃管制画面の素材
邀撃管制画面の素材
邀撃管制画面の素材
邀撃管制画面の素材

車輛監視

車輛監視画面
車輛監視画面

復活の水平線大怪獣奪還計画 撮影試験映像のために作った、輸送車を監視しているシステムの画面として実装した画面です。

プレゼンテーションソフトウェアであるApple Keynoteで文字などの素材を作り、最終的に3D CGソフトウェアであるmodoを用いてレンダリングしたものを、液晶画面に表示してそれをカメラで撮影しました。

主観映像

主観映像
主観映像

復活の水平線大怪獣奪還計画 撮影試験映像のために作った、強化戦闘服の主観映像として実装した画面です。

メイキング用に撮影していたビデオを元に、貼り込み素材はプレゼンテーションソフトウェアであるApple Keynoteで作成して、映像編集ソフトウェアであるFinal Cut Pro Xのタイトル機能などを使って仕上げました。

この拡大したい部分のみ拡大されるという効果の元ネタは「攻殻機動隊STAND ALONE COMPLEX」のサイトーが使う鷹の目です。

むすび

この記事では画面の実装における二つの形式について解説し、次にその表示方法としてとれる手段について述べ、続いて設計の手順を解説し、実装の方法を記した後に、わたしたちが今まで作ってきた画面を作例として紹介すると同時に簡単な解説を記しました。