スキル: インダストリアル・ブルータリズム＆タクティカル・テレメトリーUI
1. スキルメタ
名前: インダストリアル・ブルータリズム＆タクティカル・テレメトリー・インターフェースエンジニアリング 説明: ミッドセンチュリーのスイス・タイポグラフィックデザイン、産業製造マニュアル、そしてレトロフューチャリスティックな航空宇宙/軍事端末インターフェースを統合するウェブインターフェースを設計する高度な熟練度。この分野では、厳格なモジュラグリッド、極端なタイポグラフィのスケールコントラスト、純粋に実用的なカラーパレット、そしてアナログ劣化（ハーフトーン、CRTスキャンライン、ビットマップディザリング）のプログラム的シミュレーションに対する絶対的な習熟が必要です。目的は、従来の消費者向けUIパターンを意図的に破棄し、生の機能性、機械的な精度、高いデータ密度を投影するデジタル環境を構築することです。
2. ビジュアルアーキタイプ
デザインシステムは、2つの異なるが非常に互換性の高いビジュアルパラダイムを統合することで動作します。プロジェクトごとに1つを選択し、それにコミットしてください。同じインターフェース内で両方のモードを交互に使用したり、混在させたりしないでください。
2.1 スイス・インダストリアルプリント
1960年代のコーポレートアイデンティティシステムと重機のブループリントに由来。
- 特徴: ハイコントラストなライトモード（新聞印刷紙/オフホワイトの下地）。一枚岩で重厚なサンセリフ書体への依存。可視の分割線で輪郭付けられた容赦のない構造グリッド。巨大な、ビューポートからはみ出す数字や文字形によって強調された、攻撃的で非対称なネガティブスペースの使用。警告/アクセントカラーとしての原色赤の多用。
2.2 タクティカル・テレメトリー＆CRT端末
機密軍事データベース、レガシーメインフレーム、航空宇宙用ヘッドアップディスプレイ（HUD）に由来。
- 特徴: ダークモード専用。高密度な表形式データの表示。モノスペース書体の絶対的な支配。技術的なフレーミングデバイス（ASCIIブラケット、照準器）の統合。シミュレートされたハードウェア制限（リン光物質の輝き、スキャンライン、低ビット深度レンダリング）の適用。
3. タイポグラフィアーキテクチャ
タイポグラフィは、主要な構造的かつ装飾的なインフラストラクチャです。イメージは二次的です。システムは、スケール、ウェイト、スペーシングにおける極端なばらつきを要求します。
3.1 マクロタイポグラフィ（構造ヘッダー）
- 分類: ネオグロテスク / ヘビーサンセリフ
- 最適なウェブフォント: Neue Haas Grotesk (Black)、Inter (Extra Bold/Black)、Archivo Black、Roboto Flex (Heavy)、Monument Extended
- 実装パラメータ:
- スケール: 流体タイポグラフィを使用して大規模に展開（例:
clamp(4rem, 10vw, 15rem)）。 - トラッキング（文字間隔）: 非常にタイトで、しばしばマイナス（
-0.03emから-0.06em）。グリフを強制的に固体の建築ブロックにします。 - リーディング（行の高さ）: 高度に圧縮（
0.85から0.95）。 - ケーシング: 構造的なインパクトのために排他的に大文字。
- スケール: 流体タイポグラフィを使用して大規模に展開（例:
3.2 ミクロタイポグラフィ（データ＆テレメトリー）
- 分類: モノスペース / テクニカルサンセリフ
- 最適なウェブフォント: JetBrains Mono、IBM Plex Mono、Space Mono、VT323、Courier Prime
- 実装パラメータ:
- スケール: 固定で小さい（
10pxから14px/0.7remから0.875rem）。 - トラッキング: 余裕がある（
0.05emから0.1em）。機械式タイプライターの字間や端末マトリックスをシミュレートします。 - リーディング: 標準からタイト（
1.2から1.4）。 - ケーシング: 排他的に大文字。すべてのメタデータ、ナビゲーション、ユニットID、座標に使用されます。
- スケール: 固定で小さい（
3.3 テクスチャコントラスト（芸術的破壊）
- 分類: ハイコントラストセリフ
- 最適なウェブフォント: Playfair Display、EB Garamond、Times New Roman
- 実装パラメータ: 非常に控えめに使用します。美しいサンセリフに対するテクスチャの並置を生み出すために、ベクターの完全性を低下させる後処理（ハーフトーンフィルター、1ビットディザリング）を必ず施さなければなりません。
4. カラーシステム
カラーアーキテクチャは妥協を許しません。グラデーション、ソフトドロップシャドウ、モダンな半透明は固く禁止されています。色は物理メディアまたは原始的な発光ディスプレイをシミュレートします。
重要: インターフェースごとに1つの基板パレットを選択し、一貫して使用してください。同じインターフェース内でライトとダークの基板を混在させないでください。
スイス・インダストリアルプリント（ライト）の場合:
- 背景:
#F4F4F0または#EAE8E3（艶消し、未漂白のドキュメント用紙）。 - 前景:
#050505から#111111（カーボンインク）。 - アクセント:
#E61919または#FF2A2A（航空/危険赤）。これが唯一のアクセントカラーです。取り消し線、太い構造用分割線、または重要なデータハイライトに使用されます。
タクティカル・テレメトリー（ダーク）の場合:
- 背景:
#0A0A0Aまたは#121212（非アクティブCRT。純粋な#000000は避けてください）。 - 前景:
#EAEAEA（白リン光）。これが主要テキストカラーです。 - アクセント:
#E61919または#FF2A2A（航空/危険赤）。同じ赤、同じルール。 - 端末グリーン (
#4AF626): オプション。単一の特定のUI要素（例: 1つのステータスインジケーターまたは1つのデータ読み出し）にのみ使用してください。一般的なテキストカラーとしては決して使用しないでください。明確な目的を果たさない場合は、完全に省略してください。
5. レイアウトと空間工学
レイアウトは数学的に設計されたように見えなければなりません。従来のウェブパディングを拒否し、代わりに可視の区画化を採用します。
- ブループリントグリッド: CSS Gridアーキテクチャへの厳格な準拠。要素は浮遊せず、グリッドのトラックと交点に正確に固定されます。
- 可視の区画化: 情報の異なるゾーンを区切るための、ソリッドボーダー（
1pxまたは2px solid）の広範な利用。水平ルール（<hr>）は、操作ユニットを分離するためにコンテナ全体の幅に頻繁にまたがります。 - バイモーダル密度: レイアウトは、極度のデータ密度（密に詰められたモノスペースメタデータのクラスター）と、マクロタイポグラフィをフレーミングする計算された広大なネガティブスペースとの間で振動します。
- ジオメトリ:
border-radiusの完全な拒否。すべての角は、機械的な剛性を強制するために正確に90度でなければなりません。
6. UIコンポーネントとシンボロジー
標準的なウェブUIの慣例は、実用的で工業的なグラフィック要素に置き換えられます。
- シンタックス装飾: データポイントをフレーミングするためのASCII文字の利用。
- フレーミング:
[ DELIVERY SYSTEMS ]、< RE-IND > - 方向性:
>>>、///、\\
- フレーミング:
- 工業マーカー: 登録商標（
®）、著作権（©）、商標（™）記号の顕著な統合。これらは法的なテキストとしてではなく、構造的な幾何学的要素として機能します。 - 技術資産: グリッド交点への照準器（
+）の統合、反復する垂直線（バーコード）、太い水平警告ストライプ、および能動的な機械プロセスをシミュレートするためのランダム化された文字列データ（例:REV 2.6、UNIT / D-01）。
7. テクスチャおよび後処理効果
デザインが純粋にデジタルに見えるのを防ぐために、シミュレートされたアナログ劣化がCSSおよびSVGフィルターを介してフロントエンドに組み込まれます。
- ハーフトーンと1ビットディザリング: 連続階調の画像や大きなセリフ書体をドットマトリックスパターンに変換します。前処理、またはCSSの
mix-blend-mode: multiplyオーバーレイとSVG放射状ドットパターンを組み合わせて実現します。 - CRTスキャンライン: ターミナルインターフェースの場合、背景に
repeating-linear-gradientを適用して水平電子ビームスイープをシミュレートします（例:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)）。 - メカニカルノイズ: DOMルートに適用される、低不透明度のグローバルSVGスタティック/ノイズフィルター。ダークモードとライトモードの両方にわたって、統一された物理的な粒子感を導入します。
8. ウェブエンジニアリングディレクティブ
- グリッド決定性:
display: grid; gap: 1px;を、コントラストのある親子背景色と共に利用して、複雑なボーダー宣言なしに数学的に完璧で剃刀のように薄い分割線を生成します。 - セマンティック剛性: 正確なセマンティックタグ（
<data>、<samp>、<kbd>、<output>、<dl>）を使用してDOMを構築し、テレメトリーの技術的性質を正確に反映させます。 - タイポグラフィクランピング: マクロタイポグラフィにのみCSS
clamp()関数を実装して、ビューポート全体で構造的完全性を維持しながら、巨大なテキストスケールを積極的に行えるようにします。