1.1 システム名称

1.2 システム目的

本システムは、レガシーITエンジニア「ろひ」の技術的知見と経歴を、サイバーパンク美学とメインフレーム視覚言語を用いて表現する自己紹介サイトである。

主な目的:

1. COBOL、PL/I、JCL、DB2 等のメインフレーム技術の専門性を提示
2. レガシーシステムの開発・保守・移行における28年の経験を可視化
3. 新技術とレガシー技術の架け橋としての立ち位置を表現
4. 単一ファイルアーキテクチャによる技術的実証

1.3 システム構成図

┌─────────────────────────────────────────────────────────────┐
│                    クライアントブラウザ                       │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌───────────────────────────────────────────────────────┐ │
│  │              index.html（単一ファイル）                │ │
│  │                                                       │ │
│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  │ │
│  │  │   HTML構造   │  │  CSS定義    │  │  JS処理     │  │ │
│  │  │   (415行)    │  │  (360行)    │  │  (472行)    │  │ │
│  │  └─────────────┘  └─────────────┘  └─────────────┘  │ │
│  │                                                       │ │
│  └───────────────────────────────────────────────────────┘ │
│                           │                                 │
│                           ▼                                 │
│  ┌───────────────────────────────────────────────────────┐ │
│  │                  外部リソース                          │ │
│  │                                                       │ │
│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  │ │
│  │  │  Three.js   │  │ Google Fonts│  │   CDN       │  │ │
│  │  │  v0.160.0   │  │ IBM Plex    │  │ jsdelivr    │  │ │
│  │  └─────────────┘  └─────────────┘  └─────────────┘  │ │
│  │                                                       │ │
│  └───────────────────────────────────────────────────────┘ │
│                                                             │
└─────────────────────────────────────────────────────────────┘

1.4 動作環境定義

1.4.1 必須環境

1.4.2 推奨環境

1.4.3 対応デバイス

1.5 外部依存モジュール一覧

2.1 デザインコンセプト

本システムのデザインは、以下のコンセプトに基づく。

「メインフレームの回廊」

• 1980年代のメインフレームコンピュータ室を視覚的に再現
• サーバーラックが無限に続く回廊を3D描画
• LEDの点滅によるシステム稼働の表現
• サイバーパンク美学（ネオンカラー、グリッチ、スキャンライン）の融合

2.2 カラーパレット定義書

2.2.1 プライマリカラー

2.2.2 ベースカラー

2.2.3 エフェクトカラー

2.2.4 透過カラー派生

color-mix() 関数を用いて、プライマリカラーから透過バリエーションを生成する。

2.3 タイポグラフィ定義書

2.3.1 フォントファミリー

2.3.2 フォントウェイト

2.3.3 フォントサイズ定義

2.4 レイアウト仕様

2.4.1 グリッドシステム

2.4.2 スペーシング

2.5 レスポンシブ対応仕様

2.5.1 ブレークポイント

2.5.2 モバイル対応

• clamp() 関数による流動的フォントサイズ
• タッチデバイス検出（pointer: coarse）によるカスタムカーソル無効化
• レスポンシブグリッド（auto-fill, auto-fit）

3.1 画面一覧

本システムは単一ページアプリケーションであり、以下のセクションで構成される。

3.2 Hero セクション

3.2.1 構成要素

3.2.2 グリッチエフェクト仕様

• data-text 属性に元テキストを格納
• ::before 疑似要素: 赤色（--glitch-red）、3秒周期
• ::after 疑似要素: 青色（--glitch-blue）、2.5秒周期
• clip-path によるランダム切り抜き

3.3 About セクション

3.3.1 構成要素

3.3.2 アバターボックス仕様

┌─────────────────┐
│                 │
│    <ROHI>       │  ← シンボル（5rem、matrix-green）
│                 │
├─────────────────┤
│ ID: 0xR0H1      │  ← ラベル（0.75rem、text-dim）
│ STATUS: ACTIVE  │
└─────────────────┘

• シャンアニメーション: 4秒周期で光が左から右に通過
• ホバー時: border-color 変化、グロー強化、Y軸-3px移動

3.3.3 タイプライター仕様

• テキスト: > echo "レガシーは死なず。ただ、進化する。"
• 速度: 80ms/文字
• トリガー: IntersectionObserver（threshold: 0.5）
• 実行回数: 1回のみ（observer.disconnect()）

3.4 Stats セクション

3.4.1 統計項目一覧

3.4.2 カウントアップ仕様

• 数値型（data-target）: 2000ms、cubic ease-out、スクランブル文字表示
• 表示型（data-display）: 1200ms、文字数分段階的表示、スクランブル文字表示
• スクランブル文字セット: ｱｲｳｴｵｶｷｸｹｺ0123456789ABCDEF#%+/<>*

3.5 Skills セクション

3.5.1 スキルカード一覧

3.5.2 スキルカード構造

┌─────────────────────────────────────┐
│ [COB]                               │  ← アイコン
│ COBOL                               │  ← スキル名
│ EXPERT // 95%                       │  ← レベル
│ ████████████████████░               │  ← スキルバー
│ メインフレーム系業務アプリの...     │  ← 説明
└─────────────────────────────────────┘

3.5.3 ホバーエフェクト

• --glow-spread アニメーション: 0px → 40px
• Y軸-5px移動、スケール1.02倍
• 上部スキャンライン: 左から右に通過
• 他カードのぼかし: :has() セレクタで非ホバーカードを opacity: 0.4; filter: blur(2px)

3.6 Contact セクション

3.6.1 構成要素

3.6.2 リンク仕様

• rel="noopener" 設定（セキュリティ）
• ホバー時: 背景色変化、グロー、テキストシャドウ
• プレフィックス: >

3.7 フッター

3.7.1 構成

// END OF TRANSMISSION // ろひ © 2026 // ALL SYSTEMS NOMINAL

• .footer-glitch クラスでマゼンタ色
• 上部ボーダー: --green-10

4.1 Three.js 背景描画処理

4.1.1 処理概要

メインフレームのサーバールームを3D描画し、無限に続く回廊を表現する。

4.1.2 入力

• マウスポインタ位置（state.normX, state.normY）
• フレームカウント（frame）

4.1.3 出力

• #bg-canvas への3Dレンダリング

4.1.4 シーン構成

4.1.5 チャンクシステム

CHUNK_LENGTH = 40
CHUNK_COUNT = 5
総延長 = 200m

[Chunk 0][Chunk 1][Chunk 2][Chunk 3][Chunk 4]
    ↑
カメラ位置（Z軸マイナス方向に移動）

カメラがチャンクを通過すると、前方に再配置

4.1.6 LED点滅パターン

4.1.7 ポストプロセス

RenderPass → UnrealBloomPass → GlitchPass → 出力
                ↓                  ↓
         strength: 0.9      4〜7秒間隔
         radius: 0.5        0.3〜0.5秒バースト
         threshold: 0.25

4.1.8 例外処理

• prefers-reduced-motion: reduce 時: 処理全体をスキップ
• WebGL非対応: 自動的に描画なし

4.2 パーティクル描画処理

4.2.1 処理概要

マウスの動きに追従するネオンパーティクルを描画する。

4.2.2 入力

• マウス位置（state.x, state.y）
• マウス移動状態（state.isMoving）

4.2.3 出力

• #particle-canvas への2Dレンダリング

4.2.4 パーティクル仕様

4.2.5 カラーパレット

const NEON_COLORS = [
  '#00ff41',  // matrix-green
  '#39ff14',  // matrix-green 黄緑
  '#aaffaa',  // matrix-green パステル
  '#00f0ff',  // neon-cyan
  '#ff00aa',  // neon-magenta
]

4.3 カスタムカーソル処理

4.3.1 処理概要

カスタムデザインのカーソルを描画し、ホバー状態やクリックに反応する。

4.3.2 入力

• マウス位置（state.x, state.y）
• ホバー状態（state.isHovering）
• クリックイベント

4.3.3 出力

• #cursor-canvas への2Dレンダリング

4.3.4 カーソル構成

        ┌─────────────┐
        │  外円       │  ← 22px（通常）/ 35px（ホバー）
        │  ┌───────┐  │     matrix-green / magenta
        │  │ 内円  │  │  ← 4px、cyan
        │  └───────┘  │
        └─────────────┘

        トレイル: 12フレーム分

4.3.5 追従アルゴリズム

cursor.x += (target.x - cursor.x) * 0.25
cursor.y += (target.y - cursor.y) * 0.25

4.3.6 クリック爆発

4.3.7 例外処理

• prefers-reduced-motion: reduce 時: 処理全体をスキップ
• タッチデバイス（pointer: coarse）: 処理全体をスキップ

4.4 タイプライター処理

4.4.1 処理概要

テキストを1文字ずつ表示するタイプライターエフェクトを実装する。

4.4.2 入力

• IntersectionObserver（threshold: 0.5）

4.4.3 出力

• #typewriter 要素のテキストコンテンツ更新

4.4.4 処理フロー

1. 要素がビューポートに入る
2. observer.disconnect() で監視終了
3. ループ開始:
   a. text.slice(0, index + 1) を表示
   b. index++
   c. 80ms 待機
   d. index < text.length なら 3-a に戻る
4. 完了

4.4.5 対象テキスト

> echo "レガシーは死なず。ただ、進化する。"

4.5 スクロールリビール処理

4.5.1 処理概要

要素がビューポートに入った際に、フェードインとスライドアップのアニメーションを適用する。

4.5.2 入力

• IntersectionObserver（threshold: 0.15）

4.5.3 出力

• .reveal 要素に .visible クラスを追加
• .skill-fill 要素の width を data-fill 値に設定

4.5.4 アニメーション仕様

4.6 カウントアップ処理

4.6.1 処理概要

数値を0から目標値までカウントアップする。スクランブル文字を表示しながら最終値に収束する。

4.6.2 入力

• IntersectionObserver（threshold: 0.5）
• data-target（数値型）または data-display（表示型）

4.6.3 出力

• .stat-number 要素のテキストコンテンツ更新

4.6.4 処理フロー（数値型）

1. 要素がビューポートに入る
2. start = performance.now()
3. updaters に登録
4. フレーム毎:
   a. elapsed = now - start
   b. progress = min(elapsed / 2000, 1)
   c. eased = 1 - pow(1 - progress, 3)  // cubic ease-out
   d. 表示値 = floor(eased * target) + suffix
   e. progress >= 1 なら完了、updaters から削除

4.6.5 処理フロー（表示型）

1. 要素がビューポートに入る
2. start = performance.now()
3. updaters に登録
4. フレーム毎:
   a. elapsed = now - start
   b. progress = min(elapsed / 1200, 1)
   c. revealCount = floor(progress * display.length)
   d. 表示済み文字 + スクランブル文字で構成
   e. progress >= 1 なら完了、updaters から削除

4.7 グリッチエフェクト処理

4.7.1 処理概要

Three.js の GlitchPass を用いて、ランダムなタイミングで画面全体にグリッチエフェクトを適用する。

4.7.2 入力

• タイマー（4〜7秒間隔）

4.7.3 出力

• glitchPass.enabled の切り替え

4.7.4 処理フロー

scheduleGlitchBurst():
  1. nextDelay = 4000 + random() * 3000  // 4〜7秒
  2. burstDuration = 300 + random() * 200  // 0.3〜0.5秒
  3. nextDelay 後:
     a. glitchPass.enabled = true
     b. burstDuration 後:
        - glitchPass.enabled = false
        - scheduleGlitchBurst() を再帰呼び出し

4.7.5 例外処理

• visibilitychange イベントでタブ非表示時にタイマー停止
• タブ再表示時に scheduleGlitchBurst() を再開

4.8 スムーススクロール処理

4.8.1 処理概要

ページ内リンクのクリック時に、スムーススクロールと View Transitions API を適用する。

4.8.2 入力

• a[href^="#"] のクリックイベント

4.8.3 出力

• 対象要素へのスクロール

4.8.4 処理フロー

1. クリックイベントを捕捉
2. href === '#' なら早期リターン
3. e.preventDefault()
4. target = document.querySelector(href)
5. if (document.startViewTransition):
     startViewTransition(() => target.scrollIntoView({ behavior: 'smooth' }))
   else:
     target.scrollIntoView({ behavior: 'smooth' })

5.1 CSS カスタムプロパティ一覧

5.1.1 デザイントークン

5.1.2 @property 定義

5.2 HTML データ属性一覧

5.2.1 グリッチエフェクト

5.2.2 カウントアップ

5.2.3 スキルバー

5.3 JavaScript 定数・状態定義

5.3.1 共有状態（state）

5.3.2 Three.js 定数

5.3.3 パーティクル定数

5.3.4 カーソル定数

6.1 パフォーマンス仕様

6.1.1 レンダリング最適化

6.1.2 リソース最適化

6.2 アクセシビリティ仕様

6.2.1 prefers-reduced-motion 対応

6.2.2 ARIA 属性

6.2.3 タッチデバイス対応

• pointer: coarse 検出時、カスタムカーソルを無効化
• cursor: none を @media (hover: hover) and (pointer: fine) に限定

6.3 SEO / OGP 仕様

6.3.1 メタタグ

6.3.2 OGP タグ

6.3.3 Twitter Card

6.3.4 ファビコン

• インライン SVG data URI
• デザイン: [R] マーク（matrix-green on deep-black）
• フォント: monospace、700 weight

6.4 セキュリティ考慮事項

6.4.1 外部リンク

• 全外部リンクに rel="noopener" を設定
• target="_blank" は未使用（同一タブで遷移）

6.4.2 CSP（Content Security Policy）

本システムはインラインスクリプト・インラインスタイルを含むため、CSP 導入時は以下の対応が必要:

• script-src: nonce または unsafe-inline を許可
• style-src: nonce または unsafe-inline を許可
• img-src: data: を許可（ファビコン用）

7.1 ブラウザ互換性

7.2 既知の制限

B.1 CSS アニメーション

B.2 JavaScript アニメーション