STYLE PROFILE
HUD風UI
HUD
映像や視界の上に、計器の目盛りや数値を重ねる表現です。ここでは航空機のHUDを参照した画面を代表にします。
HUD風UIの代表配色例
| 色 | 役割 | 比 | 文字に使う目安 |
|---|---|---|---|
#CBD6D3 | 文字と構造 | 8.32:1 | 本文の文字にも使える |
#56A276 | 主色 | 4.03:1 | 大きな文字や図形なら使える |
#D9A444 | 強調色 | 5.51:1 | 本文の文字にも使える |
比はWCAG 2.2の計算式で求めた値です。4.5:1以上は本文の文字、3:1以上は大きな文字や図形に使える目安です（達成基準1.4.3・1.4.11）。
HUD風UIのプロンプト例
HUD風UIでデザインしてください。背景の視界を残して重ねる数値、方向や状態を示す目盛りと記号、重要な数値を囲む細い線の枠を取り入れてください。
HUD風UIの主な視覚的特徴
- 背景の視界を残して重ねる数値
景色や映像を覆い隠さず、その上に数値や記号だけを重ねます。航空機のHUDでも、操縦士は透明な板越しに前方を見たまま、飛行情報を読み取ります。
- 方向や状態を示す目盛りと記号
方位や高度を示す目盛りや、機体の向きを表す記号を並べます。航空機のHUDでは、姿勢や飛行経路の記号を外の景色と位置や大きさをそろえて表示します。
- 重要な数値を囲む細い線の枠
速度や高度など、すぐに読み取りたい数値を細い線の枠で囲み、周りの目盛りや記号と区別します。線を細くすると、背景の景色を遮る面積も小さくなります。
HUD風UIが向いている成果物
視界や図の上に目盛り、状態値、細い枠を重ね、位置や計器を監視する用途の画面を構成できる。一般的な業務画面への一律適用はしない。
主題画像に必要な目盛りや数値を添え、計測や技術を扱う動画の題材を伝えられる。
HUD風UIとは
HUD風UIは、航空機のヘッドアップディスプレイ（HUD）の見た目を取り入れた画面表現です。HUDは、姿勢、エアデータ、誘導などの主要な飛行情報を、操縦士の前方の視界にある透明な板（コンバイナー）に映す表示装置です。操縦士は、計器盤の表示に目を移さずに、前方の景色を見ながら飛行情報を使えます。
アメリカ連邦航空局（FAA）の指針では、HUDの記号は、はるか遠くに焦点を結ぶ虚像として示すものとされています。姿勢や飛行経路の記号は、外の景色と位置や大きさをそろえて表示する必要があります。また、HUDは操縦に必要な外の景色を大きく遮ってはならず、重なり合う記号が、操縦士を誤らせるような形で互いを隠したり見え方を妨げたりしないことも求められます。
HUDという言葉は、ゲームの画面にも使われています。ゲームエンジン「アンリアルエンジン」の資料は、HUDを多くのゲームに見られる2Dの画面表示と説明し、体力、弾数、照準を例に挙げています。
映像作品でも、HUDの表現が使われます。テリトリー・スタジオは、ナショナルジオグラフィックの番組『Top Guns: The Next Generation』で、実際の操縦席やHUDのUIに着想を得た飛行中のHUDを設計し、加速度、対気速度、高度を画面の中央に置きました。短編映画『MILES』では、ロボットの目に映る世界をHUDとして描いています。
見分けるときは、次の点を確かめてみてください。
- 背景の景色や映像を残したまま、数値が重ねられている
- 方向や状態を示す目盛りや記号が並んでいる
- 重要な数値が細い線の枠で囲まれている
これらが揃っていると、HUD風UIの特徴を持っていると言えるでしょう。
実例を見る
Google画像検索で「HUD風UI」を見る（新しいタブで開きます）検索結果の画像はこの図鑑には保存しません。出典
- Top Guns: The Next Generation（新しいタブで開きます）Territory Studio
- AC 25-11B: Electronic Flight Displays（新しいタブで開きます）Federal Aviation Administration
- Unreal Architecture: Displaying Information to Players（新しいタブで開きます）Epic Games
- Miles: Robot Vision（新しいタブで開きます）Territory Studio
名称・説明・主な視覚的特徴と「HUD風UIとは」の事実は、上の出典に基づきます。特徴の説明と見分け方は、出典の内容をこの図鑑がまとめたものです。代表配色例・向いている成果物・プロンプト例は、この図鑑の編集上の提案です。制作・編集：小林 秀樹（セカヤサAIブログ）
