evangelion-design

エヴァンゲリオン風デザイン

エヴァンゲリオンに着想を得たインターフェース表現を、ありきたりなネオン系サイバーパンクや作品の直接的な模倣に陥らずに、ウェブやモバイル製品に取り入れます。原作では、UIが物語の緊張感を生み出します。厳格な幾何学、限定的なカラーシグナル、情報量が多くても読みやすいテレメトリー、そしてストレス下の機械のように動くモーションが特徴です。

クイックスタート

1. まず画面の役割を選びます：hud、command-center、psychograph、sync-ladder、reactor-diagnostic、breach-monitor、またはtitle-card。
2. 画面のアクセントカラーを1系統選びます：amber、red、またはsignal-green。構図を区切る必要がある場合に限り、補助色を1色加えます。
3. 装飾的なテクスチャを加える前に、フレーム、目盛り、リング、バー、マスク、反復する装置群、十字線の幾何学からレイアウトを組み立てます。
4. カウンター、スイープ、トレースの描画、同期ステップ、パネル切り替え、アラートの点滅など、状態を明らかにする形で画面をアニメーションさせます。
5. オリジナル性を保ちます。エヴァンゲリオンの表現言語を想起させつつ、ロゴやタイトルカードをそのまま使ったり、画面構成を一対一で再現したりしないでください。

ワークフロー

1. 演出上の役割を定義する

コンポーネントを選ぶ前に、感情面での役割を決めます。

• hud：映像に重ねる一人称視点のオーバーレイです。幅広のマスク、ターゲット用ブラケット、まばらな目盛り、距離マーカーを使います。
• command-center：複数の独立したモジュール、ステータスレール、テーブル、分析ビューを備えた、黒背景のダッシュボードです。
• diagnostic：チャート、同期トレース、マトリクス、リングアナライザーを配置します。派手さよりも精度と視覚的な階層を重視します。
• psychograph：目盛り、まばらな十字マーカー、ラベルボックス、密度の高い有機的なトレースまたはシグナルトレースを備えた、境界の明確なグラフ領域です。
• sync-ladder：カプセル、バー、スロット付きモジュールを行や斜め方向に沿って反復配置し、1つか2つのラベルを繰り返します。
• reactor-diagnostic：中央の放射状アナライザーを主役に、両脇の領域を意図的にシンプルにした、フレーム付きの三連画またはパノラマボードです。
• breach-monitor：大型タイマー、進捗ブロック、ラック配列、侵入予測バーなど、脅威が迫る状況を示す表示です。
• warning-state：コントラストを高め、ステータスラベル、カウントダウンを繰り返し、テンポを詰めます。
• title-card：ほぼ何もない黒の構図に、大きなタイポグラフィと1つの主役となるアクセントを配置します。

2. 画面を構成する

• 主要なモジュールは、画面の端、対角線、パノラママスク、または大きな外枠に沿わせます。広い余白は緊張感を生み出すのに役立ちます。
• 切り欠きのある四角形、ノッチ付きフレーム、円、リングチャート、ラダー、罫線、ワイヤーフレームの曲線、外部のコールアウトラベルを優先します。
• 1つのビューにつき、主役となる幾何学的なアイデアは1つか2つにします。SF表現の定番をすべて同じ画面に詰め込まないでください。
• 同期、レイヤー、純度、互換性をテーマにする画面では、反復を大胆に使います。同一のモジュールも演出の一部です。
• 手描き風のトレース、ワイヤーフレームの地球儀、円形のリアクター、カウントダウン、カプセルの配列など、主役となる構造を1つ際立たせます。
• 角は鋭く保つか、切り欠きを最小限にします。一般消費者向けアプリのような角丸カードは、この雰囲気を損ないます。
• テクスチャは補助的なものとして扱います。グロー、粒子感、背景画像を加える前でも、フレームワークが明確に読み取れるようにします。

3. タイポグラフィとコピーを設定する

• ラベルや見出しには、幅の狭いサンセリフ体を使います。
• タイマー、テレメトリー、テーブルには、等幅の数字を使います。
• 演出性の高いディスプレイセリフ体は、まれなスプラッシュ画面やチャプターカードに限って使います。
• ラベルは大文字を基本にし、短いフレーズ、システム動作を示す語、明示的な状態表現を使います。
• 小さなマイクロラベルやレジストレーションマークを使うと、大きなキャンバスに計測された印象を与えられます。ただし、現在注目すべきラベルの流れは、ひと目で追える明るさを保ちます。
• 意味があり、正確な場合に限り、二言語のコピーを使います。

4. プロダクト UI に適応させる

• Web では、ワイドスクリーンのオーバーレイ、情報量の多いサイドレール、複数パネルの構成を活用します。
• モバイルでは、同時に表示するモジュールを減らします。画面ごとに主役となる計器を 1 つに絞り、サイドベイは縦積みのレール、タブ、またはスワイプ可能な診断画面にまとめます。
• 超ワイドのフレームは、すべてのモジュールを判読できないほど小さく縮めるのではなく、中央の計器と 1 つの補助ストリップに変換します。
• 高密度のテレメトリーで雰囲気を演出しつつ、主要なアクションはそれがなくても読み取れるようにします。
• 可能であれば、あらゆるプリミティブを作り直すのではなく、既存のデザインシステムを通じてスタイルを表現します。

配色、書体、レイアウト、モーション、実装トークンについては references/style-guide.md をお読みください。 デザインの背景にある意図や、分析したソースの手がかりについては references/source-signals.md をお読みください。

よくある落とし穴

エヴァンゲリオンのデザイン言語を適用する際に最もよくある失敗例を紹介します。

忠実すぎる：原則を抽出せず、フレームを模倣する

落とし穴： アニメのスクリーンショットをそのままプロダクトに反映し、AT フィールドの境界線、LCL タンクの正確なレイアウト、ブリッジコンソールのパネル配置まで再現してしまうことです。

なぜ失敗するのか：

• ライセンス対象のアセットや直接的な模倣は、独自性を損ないます。
• アニメの構成は 16:9 の物語の進行に合わせて設計されており、レスポンシブなプロダクトの操作には適していません。
• 盲目的な模倣は、規律あるデザイン言語ではなく、表面的なテーマパーク風の演出に見えます。

代わりに有効な方法：

• 形状ではなく、原則（例：「状態を示す、透明なリングを重ねた表現」）を抽出します。
• プロダクト固有のデータ密度やユーザーのワークフローに合わせて、スケールとリズムを調整します。
• まずインターフェース自体の課題を解決し、エヴァンゲリオンの言語は雰囲気として活用します。テンプレートとして使うのではありません。

例： NERV は、複数層の状態を示すためにリングを入れ子にしたアナライザーを使います。この原則を実際のプロダクトに応用するなら、ネットワーク遅延の階層、キャッシュ階層、同時リクエストの状態などを示すように調整できます。構造は共鳴させつつ、内容はプロダクト固有のものにします。

---

階層のない情報過多

落とし穴： 「エヴァンゲリオンは情報量が多いから」と、すべてのデータ、ラベル、装飾的な軌跡を同じ黒い画面に詰め込んでしまうことです。

なぜ失敗するのか：

• エヴァンゲリオンの情報量の多さは、階層構造を支えています。重要な状態のシグナルは大きく、鮮やかで、補助的なテレメトリーは小さく、寒色系です。
• 明確な焦点がなければ、ユーザーはあてもなく視線を走らせ、実際に必要なデータを見落とします。
• すべての要素に不透明度、発光、アニメーションを盛り込むと、明快さではなく視覚的なノイズが生まれます。

代わりに有効な方法：

• 明確なシグナル階層を定めます。ユーザーが今すぐ行動するために必要な情報は何か？ それを最も目立つサイズにし、鮮やかな色で示します。
• 診断用テレメトリー、トレースの傾向、背景のメトリクスは、より小さく、彩度とコントラストを抑えた領域に配置します。
• 余白を大胆に活用します。主役となるシグナルの周囲にある空白の黒い領域が、緊張感と焦点を生み出します。

例： 同期モニターの画面に 3 つの LCD を表示します。現在の同期率は太字のアンバーで示し、その下に薄いグリーンで傾向を表示し、過去最高値は端に極小のテキストで置きます。視線はまず同期率に向かいます。よくある間違いは、3 つすべてを同じサイズにして、重要な指標を埋もれさせてしまうことです。

コンテキストの手がかりが不足している：複雑さの中でユーザーが迷う

落とし穴： 美しいコマンドセンターダッシュボードを構築しながら、複雑な画面をユーザーが把握するための視覚的な目印、つまりラベル、セクションの区切り、状態マーカーを省いてしまうことです。

うまくいかない理由：

• エヴァンゲリオンの UI は情報量が多い だけでなく、操作しやすい設計です。AT フィールドの輪郭は「ここはステータス領域」と示し、タイトルカードは左上に表示され、カプセルの階段は左から右へ進みます
• こうした手がかりがないと、ユーザーは空間認識を失い、ひと目で目的の情報を見つけられません
• コンテキストのない高密度な情報は、安心感を与えるどころか圧倒してしまいます

代わりに効果的な方法：

• 枠線、切り欠きのある縁、セクションラベルを使って、画面をひと目で確認できる領域に区分します
• 一貫した参照ラベルと方向マーカーを配置し、「人員同期ではなく、原子炉の診断を見ている」とユーザーが把握できるようにします
• 幾何学的な構造によって、どこを見てインターフェース内をどう移動すればよいかをユーザーに 伝えます

例： 診断用の 3 分割画面では、中央の大きな分析装置を左右のステータス領域が挟みます。中央には「CORE THERMAL」、左右にはそれぞれのタイトルを付けます。ラベルがなければ、ユーザーは原子炉の状態を見ているのか、人員データを見ているのかわかりません。

---

機能よりスタイルを優先：見た目はよくても、使いにくい

落とし穴： 視認性や操作へのフィードバックよりも、視覚的な演出（光る走査線、画面を横切るアニメーション、霧のエフェクト）を優先することです。

うまくいかない理由：

• 何が起きているか、どう操作するかを明確に示せない美しいインターフェースは、印象的ではなく、ストレスの原因になります
• エヴァンゲリオンの動きには機能的な役割があります。画面を横切るアニメーションは状態の遷移を示し、点滅するアラートは危険を示し、トレースのプロットは時系列データを表示します。常に何かを 伝えています
• 見た目のためにクリック領域、操作できることを示す手がかり、状態のフィードバックを犠牲にすると、使いやすさが損なわれます

代わりに効果的な方法：

• すべてのアニメーションは、状態の変化を伝えるか、ユーザーの注意を導くものであるべきです
• クリック、スワイプ、展開が想定されるすべての要素に、明確な操作の手がかりを持たせます
• 光彩、粒子感、色といった見た目の選択は、主要な操作や重要なデータを際立たせるために使い、見えにくくしないようにします

例： カウントダウンタイマーが 10 から 0 へ滑らかにアニメーションすると見た目はよいですが、緊急性は伝わりません。同じタイマーでも、背景を赤く点滅させ、太字のセリフ体の数字を使い、残り 2 分を切った瞬間に値を急に変えると、危険を伝え、行動を促せます。

---

アクセシビリティを無視する：色とコントラストの問題

落とし穴： エヴァンゲリオンの見た目が「暗く、ムーディー」だからといって、コントラストが低くても問題ないと考え、暗い背景に赤を重ねたり、赤と緑の組み合わせを主要なシグナルに使ったりすることです。

うまくいかない理由：

• 約 8％の人にとって、赤と緑の組み合わせは見分けられません（色覚異常）
• コントラストが低いと WCAG の基準を満たせず、モバイル端末や明るい場所では読みにくくなります
• エヴァンゲリオンでは赤と緑が使われていますが、意味を区別するために、常に 形、位置、ラベルの手がかり も併用しています
• アクセシビリティに配慮しないデザインはユーザーを排除し、コンプライアンス上のリスクを招きます

代わりに効果的な方法：

• 色は補助的なシグナルとして使い、主要な識別手段にはしません。必ずラベルのテキスト、アイコン、または形の違いも加えます
• 公開前に、色覚シミュレーター（Coblis、Contrast Ratio）でカラーパレットをテストします
• テキストと操作可能な要素が WCAG AA のコントラスト比（通常のテキストは 4.5:1、大きなテキストは 3:1）を満たすようにします
• エヴァンゲリオンの幾何学的な表現を活用します。赤が「アラート」を意味するなら、感嘆符アイコンや枠線の処理も加え、2 型色覚のユーザーにもシグナルが伝わるようにします

例： 赤い丸だけのステータス表示では、色覚異常のユーザーには伝わりません。同じ表示に警告マークと「ALERT」というラベルも加えれば、すべてのユーザーに伝わり、ラベルを多用するエヴァンゲリオンらしいデザインにもなります。

---

NERV の UI は機能しますが、ありきたりな SF は機能しません

本格的な Evangelion の言語と、ありきたりなネオン・サイバーパンクの違いは、多くの場合、規律と具体性にあります。

NERV の UI（機能する）	ありきたりな SF（機能しない）
フラットな黒、アンバー、シグナルグリーン	虹色のグラデーション、紫やシアンのネオン
明確な状態動詞を使った、縦長で幅の狭いサンセリフ体のラベル	曖昧に浮かぶテキストや装飾的な記号
モジュール化された反復配列（同期ラダー、カプセルラック）	どの要素も独自で、装飾過剰
状態を明らかにする動き：スイーププロット、パネルの切り替え、アラートの点滅	動きのためだけの動き：絶えず漂う発光
余白が緊張感と焦点を生み出す	すべてのピクセルがテクスチャと発光で埋まっている
アクセシブルな階層構造と幾何学的なガイド	印象的に見えても操作しにくい、過密なカオス
タイポグラフィと形状が主役で、発光は控えめ	弱い基礎デザインを隠すために、発光とぼかしに頼る

重要なのは、Evangelion のデザインが、その選択において厳格であり、具体的であることです。「SF らしく見せる」のではなく、「すべての要素に存在意義を持たせる」のです。

ガードレール

• 紫のグラデーション、グラスモーフィズム、柔らかなぼかし、遊び心のあるスプリングモーションを安易に使わないでください。
• すべての表面を発光させないでください。画面の大部分は、つや消しで暗く、制御されている印象にしてください。
• 日本語のテキストやフランチャイズのシンボルを装飾として使わないでください。
• 密度を高めるためにアクセシビリティを犠牲にしないでください。モーションを無効にしても、階層構造が明確に伝わるようにしてください。
• Evangelion のアセットやレイアウトをそのままコピーしないでください。同じ緊張感と厳密さを持つ、独自の解釈を生み出してください。