Structural Impossibility Architecture

構造的不可能性アーキテクチャ（SIA）

「事故を検出する」のではなく「事故を不可能にする」

包括的ガイド: より詳細な理論、実装パターン、導入戦略については

SIA包括的ガイド（prevention）を参照してください。

制御依頼用：SIA の内容をコピー

制御・品質の依頼をするときに、Claude Chat 等に貼り付けて使えます。該当ドキュメント全文がコピーされます。

核心原理

従来のアプローチ

1. ルールを定義

2. 違反を検出

3. 修正を要求

→ 検出漏れが起きる → 事故が発生

SIAのアプローチ

1. 違反を型で表現不可能にする

2. 書こうとしても書けない

3. 検出は不要

→ 事故は構造的に起きえない

5層構造

テスラの自動運転安全設計に学び、AI開発環境に適用

Layer 0

型による不可能性

違反を「表現できない」状態にする。絶対に破れない。

// 許可された値のみ型として存在

type GrayScale = 50 | 100 | ... | 900

// blue-500 は型として存在しない

Layer 1

ビルドによる不可能性

型エラーがあるとビルドを止める。開発中に即座にフィードバック。

$ npm run build

error TS2322: Type 'blue-500' is not assignable

Layer 2

デプロイによる不可能性

ビルドが通らないとデプロイを止める。本番環境は常に「正しい状態」。

CI/CD: type-check → 失敗 → デプロイ中止

Layer 3

ガイドライン

なぜこの構造なのかを説明。Layer 0-2が保護するので、忘れても安全。

Layer 4

創造的自由

Layer 0-2の上で自由に創造。「壊せない」安心感の中で実験できる。

テスラ原則との対応

テスラ	SIA	特性
物理的安全	型システム	絶対に破れない
ソフトウェア安全	ビルド/CI	ほぼ破れない
機能制約	ガイドライン	参考情報
運転支援〜自律	Vibe Coding	自由な創造

3ペルソナへの価値

Creative

「制約が創造性を殺す」という恐れ

SIAの答え:

制約は創造性を解放する。「壊せない」安心感の中で、より大胆な実験が可能。

Strategy

「品質管理にコストがかかる」という懸念

SIAの答え:

品質管理部門が不要になる。不良品が「作れない」から。競争優位としての品質。

Technology

「バグは避けられない」という認識

SIAの答え:

バグの「クラス」を排除できる。見つけて直すから、作れなくするへ。

実装状況

Layer 0: 型システム（6カテゴリ完備）

●Colors

モノトーン制約

GrayScale, TextColorProp, BgColorProp

●Spacing

4px基準グリッド

SpacingProp, PaddingClass, GapClass

●Typography

サイズ・ウェイト・行間

FontSizeProp, FontWeightClass

●Shadows

影の深度制約

ShadowProp, ShadowClass, toShadowClass

●Borders

枠線・角丸制約

RadiusProp, BorderWidthProp, BorderStyleProp

●Components

コンポーネントProps

BoxProps, SIAButtonProps, CardProps

// 型による不可能性の例

type TextColorProp = 'gray-50' | 'gray-100' | ... | 'white' | 'black'

// 'blue-500' は型に存在しない → コンパイルエラー

●

Layer 1: TypeScript strict

mirror で strict: true が有効。型エラーでビルド停止。

●

Layer 2: CI/CD Gates

全10プロジェクトでSQA展開完了（5つL4、5つL3）

●

Layer 0: Components Props型

BoxProps, ColorProps, TypographyProps, CardProps, SIAButtonProps

Level 5 達成

6/6

型システム

colors, spacing, typography, shadows, borders, components

○

strict mode

mirror

10/10

SQA展開

全プロジェクト

0

any型

ゼロ達成

スタイリングアプローチの選択

SIAを実現するための技術選択。「許可された値」を構造で強制できるかが判断基準。

採用

●CSS変数- デザインシステム全体
●Tailwind CSS- 高速開発
●rem/em単位- 全体レイアウト

不採用（理由付き）

○
hardcoded pxレスポンシブ性低下
○
CSS-in-JSランタイム負荷
○
Sass/SCSSビルドステップ必須

アプローチ	採用	SIA適合	メリット	適用領域
CSS変数	●	◎	値の一元管理 / テーマ切り替え容易 / ランタイム調整可能	デザインシステム全体、テーマ、グローバル変数
Tailwind CSS	●	◎	開発速度向上 / デザイン一貫性 / config制限でSIA実現	高速開発、コンポーネントベースUI
rem/em単位	●	○	アクセシビリティ向上 / レスポンシブ / スケーラブル	全体レイアウト、typography、アクセシブルサイト
hardcoded px	○	△	精密制御 / シンプル / 予測容易	固定要素のみ（border、iconサイズ）
CSS-in-JS	○	○	コンポーネント単位のスタイル / propsベース動的スタイル	React/Angularアプリ、動的UI
Sass/SCSS	○	△	変数/関数/ネスト / 複雑計算可能	レガシープロジェクト、大規模CSS管理

SIAとの統合

1. Tailwind configで許可値を制限 → 定義外の値は使用不可

2. CSS変数と型定義を連動 → 一元管理で一貫性保証

3. rem単位でアクセシビリティ確保 → ユーザー設定に追従

CSS実装戦略

SIAの本質はTypeScript型システムであり、CSSの実装方法ではありません。同一の型定義に対して、複数のCSS実装方法が可能です。

2つの実装アプローチ

アプローチ	構成要素	適用場面	特徴
Tailwind版	型定義 + Tailwindクラス	既存のTailwindプロジェクト	既存エコシステムを活用
純粋CSS Variables版	型定義 + CSS Variables + style props	新規プロジェクト、MUIプロジェクト	Tailwind依存なし、軽量

Typography命名規則の違い

Tailwind版: スケール名

8xl, 7xl, 6xl, 5xl, 4xl, 3xl, 2xl, xl, lg, base, sm, xs

→ Tailwindのデフォルト命名規則に準拠

純粋CSS Variables版: セマンティック名

hero, title, h1, h2, h3, body, small, label, caption

→ 用途を明示した命名規則

※ /design-systemページはTailwind版の命名規則を表示。両アプローチの値（px/rem）は同一。

戦略的推奨

新規プロジェクト → 純粋CSS Variables版

● Tailwind依存を導入しない
● バンドルサイズ最小化
● SSRでのスタイル適用が確実
● MUI等の既存UIライブラリと干渉しない

既存プロジェクト → Tailwind版を維持

● 大規模マイグレーションは不要
● 既存のTailwind設定を活用
● チームの学習コストを最小化
● 段階的に純粋CSS化も可能

プロジェクト別実装ステータス

プロジェクト	実装方式	備考
one-portal	純粋CSS Variables	参照実装として完備
mirror	Tailwind版	既存Tailwind設定を活用
seehub / trust / life / pair	Tailwind版	MUI併用、既存を維持
将来の新規プロジェクト	純粋CSS Variables	one-portalパターンを踏襲

本質的な洞察

「SIA = 型システム」であり、CSSの実装方法は交換可能な部品です。

TypeScript型定義（types.ts）が本質であり、これが同一であれば、 Tailwindでもpure CSSでもSIAの効果（デザイン違反の構造的不可能化）は同じです。

→ one-portalの純粋CSS実装は、この「型とCSSの分離」を実証した参照実装です。

Hero Typography標準

全17プロジェクト統一仕様。基準: ROOT（2.25rem → 3.5rem）

タイトル

Mobile (<480px)2.25rem (36px)

Medium (480px+)2.75rem (44px)

Large (640px+)3.5rem (56px)

weight: 800 / tracking: -0.05em / leading: 1.1

サブタイトル

Mobile (<480px)1.125rem (18px)

Medium (480px+)1.25rem (20px)

Large (640px+)1.5rem (24px)

weight: 600 / leading: 1.7

/* globals.css */

--hero-title-size: 2.25rem → 2.75rem → 3.5rem;

--hero-subtitle-size: 1.125rem → 1.25rem → 1.5rem;

/* ユーティリティクラス */

.hero-title, .hero-subtitle

Logo Typography標準

全17プロジェクト統一仕様。基準: LENS（1.875rem = 30px, Montserrat）

仕様

FontMontserrat

Size1.875rem (30px)

Weight800 (Extra Bold)

Letter Spacing-0.02em

Line Height1

配置ルール

• 位置: ヘッダー左上固定

• リンク: トップページへ

• 色: 黒（#000）または白（背景に応じて）

• サイズ変更: 不可（レスポンシブでも固定）

/* globals.css */

--logo-font-family: "Montserrat", system-ui, sans-serif;

--logo-font-size: 1.875rem;

--logo-font-weight: 800;

--logo-letter-spacing: -0.02em;

--logo-line-height: 1;

/* ユーティリティクラス */

.site-logo

プロジェクト構造管理

全17プロジェクトのヘッダー/フッター/ヒーロー有無と、Hero Typography適合状況

16

ヘッダーあり

9

フッターあり

11

ヒーローあり

0

要修正

Project	Header	Logo	Footer	Hero	Hero Size	Security
PRISM	●	○	○	○	-	BASIC
ONE	●	○	○	○	-	BASIC
i2	●	○	○	●	text-4xl→5xl ○	BASIC
MIX	●	○ (orange)	●	●	2.25rem→3.5rem ○	BASIC
SEEHUB	●	○	●	●	2.25rem→3.5rem ○	Clerk+BASIC
LIFE	●	○	●	●	MUI h1 ○	Clerk+BASIC
PAIR	●	○	●	○	-	Clerk+BASIC
MIRRORCurrent	●	○	○	○	-	BASIC
TRUST	●	○	●	●	2.25rem→3.5rem ○	Public
BOND	●	○	●	●	2.5rem ○	BASIC
ROOT	●	○	○	●	2.25rem→3.5rem ○	BASIC
LENS	●	○	●	●	2.25rem→3.5rem ○	BASIC
ICONIQ	●	○	○	○	-	BASIC
LAYER	●	○	●	●	text-4xl→5xl ○	BASIC
LEAP	●	○	●	●	text-4xl→5xl ○	BASIC
TETRIS	●	○	○	●	1.875rem ○	BASIC
LEGACY	○	-	○	○	-	Local

○ = 基準適合△ = 要修正（大きすぎ）- = 該当なし

Hero基準: 2.25rem → 3.5rem (36px → 56px)Logo基準: 1.875rem (30px), Montserrat, weight 800, -0.02em

型の使用例

SIA型を使ったコンポーネント開発の実例。許可されていない値はコンパイル時にエラーになる。

コンポーネントProps

// SIA型をインポート

import type { BoxProps, ColorProps }

from '@seehub/sia-tokens'

// コンポーネントで使用

interface CardProps extends BoxProps, ColorProps {

title: string

}

// OK

// NG - コンパイルエラー

ユーティリティ関数

// ユーティリティ関数をインポート

import { toSpacingValue, toBgClass }

from '@seehub/sia-tokens'

// propから値を取得

const px = toSpacingValue('md')

// → 10 (px値)

// Tailwindクラスを生成

const cls = toBgClass('gray-100')

// → 'bg-surface-raised'

利用可能な型

Colors

TextColorProp
BgColorProp
BorderColorProp
TextColorClass

Spacing

SpacingProp
PaddingClass
MarginClass
GapClass

Typography

FontSizeProp
FontWeightProp
LineHeightProp
FontSizeClass

Components

BoxProps
ColorProps
TypographyProps
SIAComponentProps

ライブデモ

SIA Box/Text コンポーネントの実際の動作。型制約により、許可された値のみ使用可能。

Box コンポーネント

padding="md" bg="gray-100"

Box with medium padding and gray background

padding="lg" bg="gray-200" gap="sm"

Item 1

Item 2

Item 3 (gap=sm between items)

paddingX="xl" paddingY="sm" bg="gray-50"

Horizontal and vertical padding separately

padding="lg" textColor="gray-900" bg="gray-100"

Text color inherited from Box

Text コンポーネント

fontSize="xs"Extra small text

fontSize="sm"Small text

fontSize="base"Base text

fontSize="lg"Large text

fontSize="xl"Extra large text

fontSize="2xl" fontWeight="bold"Bold heading

fontWeight="medium" lineHeight="relaxed"Medium with relaxed line height

型安全性の実証

○ OK: 許可された値

<Box padding="md" bg="gray-100">
 ...
</Box>

<Text>
 ...
</Text>

✗ NG: コンパイルエラー

// Error: Type '"huge"' is not assignable
<Box padding="huge" bg="blue-500">

// Error: Type '"red-600"' is not assignable
<Text textColor="red-600">

不正な値はtscでコンパイルエラーになり、ビルドが通らない = 本番環境に到達しない。

InfoCard コンポーネント

Box/Text を組み合わせた実践的なカードコンポーネント。3つのバリアントで異なるユースケースに対応。

variant="default"

デフォルトカード

標準的な情報表示に使用

variant="highlight"

ハイライトカード

重要な情報を強調

variant="subtle"

サブトルカード

補足情報の表示に

children と footer 付き

詳細カード

追加コンテンツとフッターを含む例

カスタムコンテンツをchildren経由で渡せます

最終更新: 2025-12-31

Button コンポーネント

型安全なバリアントとサイズを持つボタン。モノトーンデザインに準拠。

Variants

Sizes

fullWidth + disabled

Badge コンポーネント

ステータス表示用のバッジ。モノトーン階調で状態を表現。

Variants

DefaultSuccessWarningErrorInfo

Sizes

SmallMedium

Section コンポーネント

ページセクションの構造化コンポーネント。タイトル・説明・バリアントを型安全に指定。

Section Example

variant='subtle' spacing='sm' の例

Section内のコンテンツ。contained=true で最大幅が制限されます。

DesignSystem定義

SIAで許可された値の具体的な定義。スペーシング、カラー、タイポグラフィ、など。

北極星との接続

「分け隔てなく、友達だと気づく世界へ」

事故ゼロ = 信頼の基盤

信頼がないと、友達にはなれない。AIと人間が信頼し合うには、「壊れない」という確信が必要。

SIAは、信頼を「仕組み」で保証する。人間もAIも、安心して協働できる。

Structural Impossibility Architecture

制御依頼用：SIA の内容をコピー

核心原理

従来のアプローチ

SIAのアプローチ

5層構造

型による不可能性

ビルドによる不可能性

デプロイによる不可能性

ガイドライン

創造的自由

テスラ原則との対応

3ペルソナへの価値

Creative

Strategy

Technology

実装状況

Layer 0: 型システム（6カテゴリ完備）

Level 5 達成

スタイリングアプローチの選択

採用

不採用（理由付き）

SIAとの統合

CSS実装戦略

2つの実装アプローチ

Typography命名規則の違い

戦略的推奨

新規プロジェクト → 純粋CSS Variables版

既存プロジェクト → Tailwind版を維持

プロジェクト別実装ステータス

本質的な洞察

Hero Typography標準

タイトル

サブタイトル

Logo Typography標準

仕様

配置ルール

プロジェクト構造管理

型の使用例

コンポーネントProps

ユーティリティ関数

利用可能な型

ライブデモ

Box コンポーネント

Text コンポーネント

型安全性の実証

InfoCard コンポーネント

デフォルトカード

ハイライトカード

サブトルカード

詳細カード

Button コンポーネント

Badge コンポーネント

Section コンポーネント

Section Example

Form コンポーネント

DesignSystem定義

北極星との接続

参照