映画から想像するVR・AR時代のGUIデザイン

ここ最近(というか数週間)、Build 2015でのMicrosoftの発表の攻めっぷりがすごかったよね。「Visual Studio Code」でクロスプラットフォーム対応したり、顔画像の年齢推定エンジンを「How Old Do I look?」で無料で試せるようにしたり。
その中でもちょっと未来的な「HoloLens」というHMDが個人的にワクワクした。
https://wired.jp/2015/05/08/new-hololens-features/



UnityがこのHoloLensに対応するそうですよ。
この手のジャンルはVRとかARとか言われたりとまちまちだけど、まあ両方の要素を含むんだろうね。

このデバイスを装着したユーザーから見ると、現実空間上で仮想オブジェクトを操作できるような感覚になる。まあ、それでもまだ触覚が無く、あくまで視覚情報の拡張なので、ユーザーインターフェイス全般というより、グラフィカルユーザーインターフェイスの領域の話だ。


スポンサーリンク


この手のデバイスが当たり前のようになると、当然GUIのデザインパラダイムもそれに合わせたものへ進化していくこととなる。新しい技術が普及すれば、旧来のインターフェイスのデザイン思想が立ち行かなくなるはずだ。

映画アイアンマンのGUI

新たなUIデザイン思想を考えるヒントは映像作品の中にあるとオイラは思っている。アメコミヒーローを実写化した2008年の映画「アイアンマン」は、その後の映画の中の3D GUI表現にもかなり影響を与えたんじゃ無いかと思う。

アイアンマン [Blu-ray]

この映画では、天才発明家の主人公トニー・スタークの発明したハイテクスーツの性能や、人工知能のアシスタント「ジャーヴィス」とのやりとりを視覚的に表現するために様々なGUIがデザインされている。

メイキング映像を見ると、アイアンマンのヘルメット内のHead-Up DisplayのUIデザインチームが編成されていたようだ。確か「トニー・スタークなら、iPhoneのような洗練されたデザインのUIを好むはず」と言っていた気がする。(うろ覚え)
時代の先端を行く、洗練されたイメージの例にiPhoneが出てくることは多い。こうしたデザインパラダイムの流行にiPhoneが与えた影響は非常に大きい。iPhone登場は2007年だったな。

アイアンマンスーツを装着したトニー・スタークの主観映像には、現実空間上に様々な情報が追加投影されている。そう、HoloLensを通して見たような仮想オブジェクトを重曹表示した光景だ。ジャーヴィスとの、白を主色とした3Dの文字・線画が空中に投影される。



さらに2010年の続編「 アイアンマン2」では、トニー・スタークが空中に投影される3Dのオブジェクトをタッチ、ピンチ、スワイプといった操作で整理し、父親の残した模型から洞察を得る過程が描かれている。この辺はiPhoneの影響なのか、観客としてもそのUI操作に疑問を抱かずにすんなり受け入れられる。



アイアンマン2 [Blu-ray]

その後、アイアンマンに限らず、この手のヒーロー物やSF映画作品に登場するGUIのデザイントレンドとして、明度の高い輪郭線と半透明な濃度を持った3Dオブジェクトが空間上に投影される描画が当たり前のように用いられている気がする↓
http://akiras.seesaa.net/article/366945676.html

この手のフィクションに登場するUIはFUIと呼ばれたりもする。
フィクションに登場するUIデザインのまとめサイト
映画などに登場するやや未来的な情報ビジュアリゼーションやユーザーインターフェイスは大好物です。この手のフィクションインターフェイスが登場するに作品情報のまとめサイトがあるらしい↓Kit FUIFUIとは?Fantasy U...


スポンサーリンク

現在の3D GUI開発環境

今時の3D開発環境に目を向けると、Unityがバージョンアップと共に、uGUIといった2DのGUI開発ツールの拡充をはかっているのが興味深い。現状、たとえ3D開発ツールといえども、開発者達にとって2DのGUI開発の需要が高いのだろう。作る側のデザインパラダイムはそうそう変わらない。もちろん、使う側もなかなか変われない。

UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダード

他分野の知見の応用

個人的には、GUIが3Dになっていくことで、もっと現実空間のデザインの知見が活きてくるのではないかと思っている。建築やインテリアなどの空間デザインの知見だ。3次元空間での光や色による演出は、建築の分野では古くから行われてきたはずだ。そっちの分野の知識が乏しいので、建築物がどういうプロセスで、どういう分担で完成に至るのかはわからないけど、様々なデザイン思想が培われていると想像する。

映画は総合芸術

最近たまたまNHKで「ハリウッド白熱教室」が再放送されていて、映画のビジュアルデザインについての講義をやってる第2回を見たんだけど、映像でも光・色による演出の理論体系があるようだ。(南カリフォルニア大学には映画を専門に教える学科がある)

この講義では、セット・照明・衣装も含む映画中の色彩デザインが、どのような効果を上げているかを理論的に紐解いていた。特に色のコントラストが観客に与える意味の重要性についての話が印象的だった。映画とは、様々な分野の理論体系や手段を駆使した娯楽なのだと、改めて実感する。映画においては、情報はより直観的、感覚に訴える方法であることが求められる。観客にとって無意識であっても、様々な意図・手段が隠されている。

そして、気づけば映画は座席が揺れる4D上映など、画に限らず、様々な五感に訴えるマルチモーダルなメディアとなりつつある。次世代のUIを考えるうえで、これほど示唆に富んだコンテンツも珍しいなぁ、と思うわけです。未来の情報デザインのヒントは映画にある気がする。


スポンサーリンク

関連記事

ガメラ生誕50周年
ハードルの下げ方を学べば続けられる
ZBrushでアヴァン・ガメラを作ってみる 腕の作り込み
『シン・ゴジラ』観ました (ネタバレ無し)
Pix2Pix:CGANによる画像変換
4Kニューマスター版『バック・トゥ・ザ・フューチャー』を観た
触れば分かる ユニバーサルデザインな腕時計『The Bradley』
『スターウォーズ フォースの覚醒』の最新予告編
写真に3Dオブジェクトを違和感無く合成する『3DPhotoMagic』
中学3年生が制作した短編映像作品『2045』
CLO:服飾デザインツール
ゴジラ(2014)のディティール制作の舞台裏
PS4用ソフト『スター・ウォーズ バトルフロント』を購入
MRenderUtil::raytrace
PythonでBlenderのAdd-on開発
瞬発力の時代
マジョーラ
Oculus Goを購入!
ZBrushのTranspose Masterでポーズを付ける
D3.js:JavaScriptのデータビジュアライゼーションライブラリ
UnityのTransformクラスについて調べてみた
ハリウッド版ゴジラ 最新クリップ
Raspberry Pi 2のGPIOピン配置
Webサイトのワイヤーフレームが作成できるオンラインツール
SIGGRAPH論文へのリンクサイト
libigl:軽量なジオメトリ処理ライブラリ
実写版『進撃の巨人』の後篇を観た(ネタバレあり)
頭蓋骨からの顔復元と進化過程の可視化
PythonでMayaのShapeノードプラグインを作る
ラクガキの立体化 1年半ぶりの続き
自分を育てる技術
ZBrushでアヴァン・ガメラを作ってみる 口のバランス調整
素敵なパーティクル
トランスフォーマー :リベンジのメイキング (デジタルドメイン)
ZBrushのZScript入門
アニゴジ関連情報
MB-Lab:Blenderの人体モデリングアドオン
物理ベースレンダリングのためのマテリアル設定チートシート
実写版『進撃の巨人』を観た (ネタバレあり)
映画『仮面ライダーアマゾンズ THE MOVIE 最後ノ審判』を観た (ネタバレ無し)
ヒーローに変身なりきりアーケードゲーム『ナレルンダー』
映画『ジュラシック・ワールド/炎の王国』のVFXブレイクダウン まとめ

コメント