← Gallery starwars-design-md ↗

Screen 07 / 14

Vectorscope

オリジナル・トリロジー期のCRT計器

オリジナル・トリロジーの計器類の様式です。ファルコンの回路図モニタ、Xウイングの照準コンピュータ、デス・スターの戦術画面、ヤヴィン基地の管制卓などに登場します。帝国と反乱軍が区別なく同じ画面を使っているのが特徴で、誰かのブランドではなく、銀河のどこにでもある無銘の量産計器です。作中に映る画面の中では、いちばん古い技術の層にあたります。

Showcaseフルサイズで開く ↗

汎用UIへの適用フルサイズで開く ↗

Colors

#060605
background
#191917
bezel
#43FF64
phosphor-green
#FFA028
phosphor-amber
#FF2D2D
phosphor-red
#3E6DFF
phosphor-blue
#FF4F9E
phosphor-magenta
#EDEDE2
phosphor-white

Typography

readoutVT3231.6rem / 400
labelVT3231rem / 400

Rounded

crt28px
scope999px

Spacing

sm8px
md16px
lg28px
xl48px
DESIGN.md 全文

Overview

Vectorscopeは、オリジナル・トリロジー期(およびローグ・ワン、アンドー等の同時代作品)に遍在するスクリーン様式である。Xウイングの照準コンピュータ、ファルコン号の回路図モニタ、デス・スターの戦術ディスプレイ、ダゴバに向かう探査スコープ — 帝国と反乱軍が同じ様式を共有しており、これは勢力のブランドではなくその時代の計算機技術そのものの見た目である。

大原則は 「一つのスクリーンに、一色のフォスファー」。ブラウン管に電子ビームで直接描いたようなベクター線画が、黒のヴォイドに太く発光する。情報は絵(シルエット、ワイヤーフレーム、クロスヘア)と数字で伝えられ、文章はほぼ存在しない。holonetの精緻な情報密度と正反対の、素朴で図太い、計器の原始語である。

このテーマの本質は「無設計・無銘」であること。 holonet、kuat-sienar、isb、nubianなど他の全テーマは、程度の差はあれ「誰か(通信網の規格、造船所、組織文化、職人)が意図してデザインしたインタフェース」である。Vectorscopeだけは違う — センサーに繋いだ電子ビームがそのまま描いた軌跡であって、UIとして意匠されていない。ブランドが介在する余地がそもそもないからこそ、帝国も反乱軍も同じものを使う。

kuat-sienarとの境界線はここにある。 ISD艦橋の放射扇計器やISBのファセット壁は、造船所や組織が意図して設計したものだからkuat-sienar/isbの管轄。Xウイングの照準コンピュータやファルコンの継ぎ接ぎ回路図のように、誰も設計していない・ブランドの主張がない個人/小型機スケールの計器はVectorscopeの管轄。同じOT期の帝国軍装備でも、意匠の有無で住み分ける。

Colors

パレットは「黒+フォスファー6色」。ただし6色は同時に使う色ではなく、スクリーン(ビューポート)ごとに1色を選ぶ排他的なインクである。

  • background (#060605): CRTの消灯面。純黒にわずかな暖かみ。画面の85%以上を占める。
  • bezel (#191917): ハードウェアの黒。CRTの太い縁、筐体。
  • phosphor-green (#43FF64): 回路図、スケマティック(ファルコンのモニタ)。
  • phosphor-amber (#FFA028): 照準グリッド、レンジ数値(Xウイング照準コンピュータ)。
  • phosphor-red (#FF2D2D): クロスヘア、警告、標的(ファルコン砲座、帝国戦術画面)。
  • phosphor-blue (#3E6DFF): ティック扇形、座標系、ブリーフィング線画(ヤヴィン作戦室)。
  • phosphor-magenta (#FF4F9E): センサーの反応ブロブ、異常検知。
  • phosphor-white (#EDEDE2): 星図の点描、最小限のハイライト。

1ビューポート1色 + 対比1色まで。例:アンバーの照準グリッドに赤のクロスヘア、青のティック扇にマゼンタの標的。3色目は存在しない。色相の中間色、グラデーション、パステルは技術的に存在し得ない。

Typography

  • 文字はほぼ登場しない。登場するときはドットマトリクス/セグメント風の数字(レンジ「2523」のような読み出し値)が主役。
  • readout(数値)は大きく、丸で囲われることがある。label は極小の略号(3〜4文字)まで。
  • 単語より記号、記号より図形。文が必要な情報はこの様式では表示できない — それが正しい。
  • すべて発光色そのまま。文字色に階調はない。

Layout

  • 1スクリーン=1計器。 現代のダッシュボードのように1画面へ多数のウィジェットを詰めない。ページやカードの概念すらなく、ビューポートが並ぶだけ。
  • ビューポートの中身は中央に1つの主題(グリッド、スコープ、シルエット)。周縁に目盛りとレンジ数値。
  • 余白は「未走査領域」。埋める発想がそもそもない。
  • 複数ビューポートを並べる場合、それぞれが独立したCRT筐体(bezel)を持つ。

Elevation & Depth

  • 深度はゼロ。すべての描画は同一平面のガラス面上にある。
  • 代わりに存在するのはフォスファーの発光強度:主線は太く明るく強いグロー、補助線は細く暗い。
  • CRTらしさの残滓 — 走査線(scanline)、わずかなブルーム、残光、ジッター — は様式の一部。ただし常時ではなく、かすかに。
  • 透視図法のグリッド(トレンチの奥行き)は線の収束のみで表現する。フォグ、ブラー、影は存在しない。

Shapes

  • CRTの角丸(rounded.crt = 28px)。 holonetのチャンファーと正反対に、ビューポートの角は大きく丸い。ブラウン管の物理形状がそのまま様式である。
  • 円形スコープ(scope-circular)。 完全な円のビューポート。縁に沿ってティックの扇形(tick-fan)が並ぶ。
  • 線は太い(3px主線/1.5px補助線)。 holonetの精緻なヘアラインではなく、電子ビームの図太いストローク。
  • ドットマトリクス。 面を塗る唯一の方法は点描(惑星、デス・スターのシルエット)。ベタ塗りは数字の背景丸など極小要素のみ。
  • クロスヘア、収束グリッド、同心円、シルエット図。曲線は円弧のみ。

Components

  • crt-viewport: 太いbezel(10px+)と大きな角丸を持つ黒のブラウン管面。内側にフォスファー1色で枠線(3px)を描くことがある(アンバーの照準フレーム)。この内側フレームも必ず角丸矩形の二重線で描く — 45°に落とした角や八角形の枠はこの様式に存在しない(実装時に混入しやすいので注意)。
  • scope-circular: 円形の計器面。縁に沿った目盛りティックの列、中心にクロスヘアまたは反応ブロブ。
  • gauge-segmented: 離散セグメントの分割バーゲージ。点灯はそのビューポートのフォスファー色、消灯はbezel近似の暗色。連続的なプログレスバーは使わない。2色分割バー(温度計式)も正当な変種:1本のバーを赤/青の2フォスファーで領域分割し、白(phosphor-white)の測量目盛りルーラーを添える(対比1色ルールの範囲内)。
  • stroke(線の文法): 主線3px+同色グロー、補助線1.5px。破線は等長ダッシュ。
  • dot-matrix: 点描によるシルエット・面表現。3pxドット、2pxギャップ目安。
  • readout-digits: ドットマトリクスの大きな数値。重要値は丸や枠で囲う。
  • 押下要素(ボタン等): 塗らない。フォスファー色の太い輪郭+グローで描き、活性状態はグロー強度と内側の細い随伴線で示す(ベタ塗りのボタンは「面の塗りは点描のみ」の禁則に抵触する)。

Do's and Don'ts

Do:

  • 1ビューポートにフォスファー1色(+対比1色まで)を厳守する
  • 線を太く、図形を素朴に、情報を図と数字だけに絞る
  • CRTの物理性(大きな角丸、太い縁、走査線の気配、グロー)を残す
  • 点描で面を描く
  • 余白を恐れない — 未走査の黒こそこの様式の地

Don't:

  • 多色を混在させない(3色目が現れたらこの様式ではない)。汎用UIのステータス3色(正常/注意/警告)はそのまま持ち込めない — 状態は塗り/輪郭/消灯で描き分け、対比色は最重要状態(警告など)一つだけに割り当てる
  • 長いテキスト、小さな文字、精緻なヘアラインを持ち込まない
  • チャンファーや鋭角の切り欠きを使わない(それはholonet)
  • グラデーション、半透明パネル、ドロップシャドウを使わない
  • 情報密度を上げない — 詰め込みたくなったらビューポートを分ける
DESIGN.md on GitHub ↗