双方向統合の概要 - セキュリティ相談資料 × 防衛ライン

1. 何をしたか（概要）

以下の2つのWebリソースを双方向リンクで接続しました。

セキュリティ相談資料新セクション4で防衛ラインを紹介

⇄

防衛ラインウィザード Headerから相談資料へリンク

変更A

security-consultation-deploy/index.html

変更箇所	内容
目次	新項目「AI生成コード品質保証プロセス（防衛ライン）」を追加。旧セクション4〜7を5〜8にリナンバリング
新セクション4	3つの防衛ルール: Rule 1（コード可視化）、Rule 2（異常系）、Rule 3（使い捨て/資産分類） 5ステップ検証フロー図: セルフレビュー → 正常系 → 異常系 → セキュリティ → 分類判定 6つのレッドライン: 禁止事項を表形式で一覧ツールリンク: 防衛ラインウィザードへのURL Claude Code自動化: `/defense-review`, `/defense-classify`, `/defense-security` の紹介
添付資料	7番目に「AI活用開発防衛ラインツール」をリンク付きで追加

変更B

ai-defense-line/src/components/common/Header.tsx

変更箇所	内容
import	`ExternalLink` アイコンを lucide-react から追加
Header右端	`marginLeft: auto` でナビ右端に配置左ボーダー区切り線で内部リンクと視覚的に区別 `opacity: 0.8` で控えめな表示 `target="_blank" rel="noopener noreferrer"` 指定 ExternalLink アイコン（14px）付き

    セキュリティ専門家への相談と、日常の開発プロセス品質管理が一つのストーリーとしてつながりました。
  

#	対象	手順	ホスティング
1	セキュリティ相談資料	`security-consultation-deploy/` を Cloudflare Pages にデプロイ	Cloudflare Pages
2	防衛ラインウィザード	`ai-defense-line/` を git push → Vercel が自動デプロイ	Vercel

ビルド確認済み: npm run build 成功（tsc + vite build）

#	確認項目	方法
1	相談資料の目次に8項目表示されること	ブラウザで開いて目視確認
2	目次「AI生成コード品質保証プロセス」をクリック → セクション4に遷移	リンククリック
3	セクション4の検証フロー図が5ステップで表示	目視確認
4	防衛ラインツールへのリンクが正しく開くこと	リンククリック → 別タブで開く
5	添付資料テーブルに7行目が追加されていること	ページ末尾を確認
6	防衛ラインアプリのHeader右端に「セキュリティ相談資料」リンク	アプリを開いて確認
7	リンクが別タブで相談資料ページを開くこと	リンククリック