ホログラム風UI

ホログラム風UIの代表配色例

• #122A33背景をコピー
• #D6E9DE文字と構造をコピー
• #6EAFA6主色をコピー
• #6EAADE強調色をコピー

比はWCAG 2.2の計算式で求めた値です。4.5:1以上は本文の文字、3:1以上は大きな文字や図形に使える目安です（達成基準1.4.3・1.4.11）。

ホログラム風UIのプロンプト例

ホログラム風UIの主な視覚的特徴

1. 背景が透けて見える表示面

   表示面を半透明にして、後ろの人物や景色が見えるようにします。『シタデル』では、球形の画面を透明なガラス板に映す形で描かれました。

2. 光を帯びた細い図形や文字

   細い線や小さな文字を、内側から光を放つように描きます。実体のない光の像に見せることで、空中に浮かぶ表示らしさを出します。

3. 空間の奥行きに沿って重なる情報

   複数の情報の層を前後にずらして重ね、空間に広がる表示に見せます。『ゴースト・イン・ザ・シェル』では、平らな画面を避けた立体的な表示が構想されました。

ホログラム風UIが向いている成果物

• • イベントサイト
  • 商品・サービス紹介ページ（LP）

  透ける面と発光する細線で情報を層状に配置し、SFや先端技術を扱う企画の世界観を画面へ展開できる。実際の操作と装飾は区別する。

ホログラム風UIとは

ホログラム風UIは、映画やドラマに登場する、空中や透明な面に浮かぶ架空の操作画面をもとにした表現です。名前のもとになったホログラフィーは、奥行きがあるように見える像を作り出す方法で、発明したデニス・ガボールは1971年にノーベル物理学賞を受けました。映像作品では、こうした表示を、撮影した映像に図や文字として合成して描くことがあります。

2002年の映画『マイノリティ・リポート』では、主人公が特殊な手袋をはめ、空中に浮かぶ画像やデータの壁を、大きな身ぶりで操作しました。この操作の仕組みは、MITメディアラボの研究者ジョン・アンダーコフラーが開発していたもので、制作会社イマジナリー・フォーシズは彼と協力して画面を視覚化しました。

テリトリー・スタジオも、こうした表示を多く手がけています。映画『ゴースト・イン・ザ・シェル』では平らな画面を避けるよう求められ、立体的なホログラムの表示を構想しました。『シタデル』では、球形の画面を透明なガラス板に映し、俳優の背後に合成しました。『ガーディアンズ・オブ・ギャラクシー』では、クラゲの形や半透明の質感を参考に、生き物のようなホログラムの操作画面を考えました。短編映画『MILES』では、監視システムや軍用ドローンなどの機械の視覚を参考にして、立体的なホログラムの操作部を映像に合成しました。

見分けるときは、次の点を確かめてみてください。

• 背景が透けて見える面に情報が表示されている
• 光を帯びた細い線や文字で描かれている
• 情報が空間の奥行きに沿って重なっている

これらが揃っていると、ホログラム風UIの特徴を持っていると言えるでしょう。

出典

• Citadel（新しいタブで開きます）Territory Studio
• Miles: Robot Vision（新しいタブで開きます）Territory Studio
• Dennis Gabor – Facts（新しいタブで開きます）NobelPrize.org（Nobel Prize Outreach）
• The Nobel Prize in Physics 1971（新しいタブで開きます）NobelPrize.org（Nobel Prize Outreach）
• The Struggle to Spread the Minority Report Interface（新しいタブで開きます）MIT Technology Review
• Minority Report（新しいタブで開きます）Imaginary Forces
• Ghost in the Shell（新しいタブで開きます）Territory Studio
• Guardians of the Galaxy（新しいタブで開きます）Territory Studio

名称・説明・主な視覚的特徴と「ホログラム風UIとは」の事実は、上の出典に基づきます。特徴の説明と見分け方は、出典の内容をこの図鑑がまとめたものです。代表配色例・向いている成果物・プロンプト例は、この図鑑の編集上の提案です。制作・編集：小林 秀樹（セカヤサAIブログ）