← Gallery starwars-design-md ↗

Screen 12 / 14

Sith Order

シス教団の神殿と遺物

マラコアのシス神殿、モラバンドの谷、エクセゴルのシタデル、そしてシス・ホロクロンやウェイファインダーといった遺物の様式です。巨大な神殿から手のひらの遺物まで、同じ三角錐がスケールを変えて繰り返されます。これらには設計者と呼べる存在がなく、道具というより発掘品に近いものです。操作するのではなく、封印を少しずつ剥がしていく — そういう類のデザインです。

Showcaseフルサイズで開く ↗

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

Colors

#08070A
void
#211D1B
stone
#6E655D
ash
#7C6240
bronze
#FF4A22
ember
#4A0F07
ember-deep
#3CC172
relic-green
#A8D8FF
wound-blue

Typography

labelRoboto Slab0.78rem / 400
numericIBM Plex Mono0.86rem / 400

Rounded

none0px

Spacing

xs6px
sm12px
md20px
lg40px
xl88px
DESIGN.md 全文

Overview

Sith Orderは、Malachorの神殿とホロクロン、Morabandの墓所、ExegolのSith Citadel、Sith wayfinder、Ashas Reeの遺物という一次資料を核に、公式Legendsの造形と制作コンセプトを補助線として読む非スクリーン系テーマである。

大原則は 「膨大な暗闇に走る、たったひとつの不規則な光の傷 — 見る者は常にその前で小さい」。マラコアの神殿を見上げる人影は豆粒ほどしかない。その圧倒的な暗闇の質量こそが内容であり、埋めるべき空白ではない。そしてその暗闇のどこかに、必ずひとつだけ不規則な亀裂が走り、そこから光が漏れる — まっすぐな縁取りではなく、稲妻のように幅を変え、時に枝分かれする一本の傷。

第二の原則は 「神殿も、手のひらのホロクロンも、同じ殻を縮尺違いで反復する」。マラコアの神殿、ウェイファインダー、ホロクロン、遺物——建築も携行遺物も、すべて三角錐という同じ聖なる形の相似形である。この様式のUIは、ページ全体の構図からボタンひとつの輪郭まで、同じ形の家族を縮尺を変えて反復させることで一貫性を持つ。ロゴのような単一形状の使い回しではなく、段状ピラミッド・細長いオベリスク・楔形の尖塔・欠けた破片という数個の変種からその都度選ぶ、自然に生まれた反復である。

第三の原則は 「技術と魔術の区別が、そもそも意味を持たない」。亀裂に沿って光る刻線は、溶岩の割れ目か、回路のトレースか、古代の文字か判別できない。これは「有機か無機か」という一軸の話ではなく、遺物そのものの本性が現代的なカテゴリーの外側にあるということである。

このテーマは、high-republic-jedi-orderの対極にある — 「光は公共物である」灯台に対し、こちらは「光は傷としてしか存在しない」墓所である。またvectorscopeやkuat-sienarのような現代の設計主体(造船所・帝国軍・匿名の実用機器)が作ったものでもない — シスの遺物には設計者がいない。これは古すぎて「デザイン」という概念そのものが適用できない工芸である。操作の比喩はダッシュボードではなく、封印を少しずつ剥がしていく発掘作業である。

Colors

パレットは意図的に狭い。無彩色3つ(void / stone / ash)+ 金属1つ(bronze)+ 発光4つ(ember系2つ+稀少な代替2つ)。近似した暗い中間色を何段も置かない — それは輪郭を曖昧にし、CSSの説明図になる原因である。

  • void (#08070A): 支配的な地。画面の85%以上。星のない虚空であり、装飾的なグラデーションを持たない。
  • stone (#211D1B): 石・金属・布が環境光を受けて浮かぶ唯一の中間面。voidとの差は小さく、輪郭よりも「そこに質量がある」という気配で存在を示す。
  • ash (#6E655D): 摩耗し露出した縁、静かな本文の文字色。純白は決して使わない。
  • bronze (#7C6240): 遺物の外殻・留め具・封印帯。艶のある金ではなく、燻んだ金属。
  • ember (#FF4A22) / ember-deep (#4A0F07): 既定の発光。emberが亀裂そのもの、ember-deepはその滲みと消えかけた残光。
  • relic-green (#3CC172): 稀少な代替光。ウェイファインダーのような経路解読・探索の文脈、またはexposure-stateの遷移を示す一瞬にのみ予約する。「成功」の色として汎用化しない。
  • wound-blue (#A8D8FF): 稀少な代替光。Exegolのような巨大建築・冷たい大気の文脈にのみ。操作色にしない。

1構成につき発光色は1つだけ(vectorscope/kuat-sienarの「1画面1色相」と同じ規律だが、理由が違う——あちらは設計者の統一規格、こちらは一つの傷は一つの色でしか燃えないという物理的な事実)。侵食・汚れは全面へノイズを撒くのではなく、上端に煤が溜まる・接合部が酸化する・下端が土に埋もれるといった、原因を持つ2〜3箇所の堆積として置く。

Typography

  • この様式に「見出し用の華麗な書体」は存在しない。 主役は常にfracture-glowrelic-formであり、文字がドラマを持ってはならない。大きな装飾セリフ(優美なエディトリアル)も、コンデンスドの全大文字(軍用ラベル)も、どちらもこの様式の失敗の最短距離であり禁止する。
  • labelは控えめなスラブセリフ(Roboto Slab系)、小さく、通常の大文字小文字混在(全大文字トラッキングにしない)。金属に刻印されたような、静かで実務的な文字。
  • numericは等幅。座標・年代・深度などの数値に。
  • incised-glyph(亀裂に沿う刻線)は非ラテンの手続き的グリフで生成し、装飾専用——意味のある情報を単独で担わせない。読めないことが正しい。
  • 文字サイズの序列で情報の重要度を語らない。重要度はexposure-state(露出段階)とfracture-glowの有無で語る。

Layout

  • voidが多数派、コンテンツは少数派。 要素を画面に均等に配らない。1〜2個の大きなrelic-formに情報を集約し、残りは意図的な虚空にする。マラコアの人影のように、コンテンツは常に画面の中で小さく、非対称な位置に置かれてよい。
  • 中心軸への引力はあるが、左右を鏡像複製しない。完全な対称はfracture-glowが露出する最深部(コアの三角形)だけに許される特権であり、外殻・レイアウト全体には適用しない。
  • 均等なカードグリッドを避ける。情報は1〜3個の大きなrelic-formへ束ね、小項目はその表面の刻印や帯として従属させる。
  • レスポンシブでは層を縦に重ねる。非対称な欠損・汚れをミラーコピーしない。

Elevation & Depth

  • 深度は石・金属・布を浅く重ねて作る。柔らかいドロップシャドウ、ガラスの浮遊カード、ぼかしは存在しない。
  • fracture-glowだけが例外的に強い発光(ブルーム)を持つ。他のすべての面は反射せず、鈍く沈む。
  • 侵食は表面に乗せたテクスチャではなく、構造の履歴として描く(欠けた角の内側から別の層が見える、後から留め具を足した、等)。
  • relic-formの完全な幾何(正確な三角形・均整の取れた稜線)はexposure-stateawakened(核が露出した状態)のときだけ現れる。それ以外は殻に覆われ歪んで見えてよい。

Shapes

  • relic-formは4つの変種——段状ピラミッド、細長いオベリスク、楔形の尖塔、欠けた破片——から選ぶ。厳密に同一の三角形をロゴのように使い回すと、逆に「デザインされた」ブランドに見えてしまうので避ける。
  • 角丸・ピル・滑らかな曲面は一切使わない。曲線が必要な場合は、封印環や埋葬跡のような不完全な弧としてのみ許可する(high-republic-jedi-orderの完全な後光にしない)。
  • fracture-glowの経路は不規則——幅が変化し、途切れ、多くて一度だけ枝分かれする。まっすぐな縁取りネオンには絶対にしない。
  • 生物的な気配は直接描写せず、類似で暗示する程度に留める(平行な帯が肋骨に見える、重なる薄板が皮膜に見える)。One Sith固有の角・棘・甲殻・全身刺青をこの様式全体の語彙にはしない。

Components

  • void-field: 支配的な暗い地。85%以上の画面占有率。テクスチャはごく淡いか、無地。
  • relic-form: 4変種の三角錐系シルエット。ページの主要構図からボタンの輪郭まで、同じ形の家族をスケール違いで反復させる基本単位。
  • fracture-glow: 1構成に1本、不規則な経路を持つ発光の亀裂。既定色はember。稀少な文脈でrelic-green/wound-blueに差し替え可(同時使用は不可)。
  • incised-glyph: 亀裂に沿う非ラテンの装飾刻線。手続き的に生成し、意味のある情報の代替にしない。
  • bronze-ward: 封印・無効化・拒否状態を表す燻んだ金属の帯や留め具。塗りつぶしの警告色を使わない代替。
  • exposure-state: buried(埋没・未着手)→ bound(拘束・待機)→ incised(刻印露出・進行中)→ awakened(核露出・完了/選択)の4段階。色相の切り替えではなく、殻がどれだけ剥がれているかで状態を語る。汎用UIの成功/警告/エラーはこの4段階へ写像し、緑黄赤の直結色に頼らない。
  • data-seam: チャート・データ表示。ひとつの暗い基線から不揃いな高さの発光する亀裂が立ち上がる形で値を示す。色の変化ではなく高さが真実を語り、最大値または選択値だけがember-deepではなくemberの芯を見せてよい。

Do's and Don'ts

Do:

  • voidを85%以上にし、コンテンツを画面の中で小さく非対称に置く(見る者が常に小さい者であるように)
  • fracture-glowを不規則な一本の傷として描く——幅を変え、時々枝分かれさせる
  • relic-formの4変種を、ページ全体からボタン一つまで同じ形の家族として反復させる
  • 侵食・汚れに原因と方向を与える(上端に煤、接合部に酸化、等)
  • 実際に読ませる文字は小さく静かに扱い、ドラマは光と形だけに持たせる
  • 状態変化はexposure-state(埋没→拘束→刻印→露出)で語り、色相の切り替えに頼らない

Don't:

  • コンデンスドの全大文字・均一グリッド・鏡像パネルで組まない——それは帝国の管制端末に見える最短距離
  • 大きく優美なセリフ見出しを主役にしない——それは現代の高級エディトリアル/オカルトブランドに見える最短距離
  • 暗闇を説明的な線画(肋骨・腱・回路図のベクター)で埋めない。空白そのものが内容である
  • 発光色を1構成で2色以上同時に使わない
  • ランダムなノイズ・グランジフィルタで古さを代用しない。汚れは構造の履歴であること
  • One Sithの角・棘・甲殻・全身刺青、ダークパープル、魔女の渦巻き、儀式布、フェイスペイントをこの様式全体の語彙にしない(一時代・一勢力の固有意匠であり普遍規則ではない)
  • 頭蓋骨・牙・悪魔角・五芒星・ブラックレターで一般的なオカルトへ寄せない
  • relic-formを厳密に同一の図形として使い回さない(ロゴ化すると「設計された」印象に転じる)
  • スクリーン計器を作中のシス技術として捏造しない。これは物理世界の建築・遺物・装束の系譜を汎用UIへ翻訳するテーマである
DESIGN.md on GitHub ↗