/**
* WorldStandardSection — 世界基準対比診断セクション
* Palette: Deep Navy (#0D1B2A) + Teal (#00C2A8) + Amber (#F5A623)
* Typography: Space Grotesk (headings) + DM Sans (body)
*/
import { useState } from "react";
const STANDARDS = [
{
id: "ieee29148",
code: "IEEE 29148:2018",
name: "要件定義書（SRS）",
before: 68,
after: 95,
color: "#00C2A8",
gap: "ステークホルダー要件仕様・トレーサビリティマトリクス不足",
fix: "StRS・SyRS・SRS の3層構造 + トレーサビリティマトリクス追加",
},
{
id: "iso25010",
code: "ISO 25010:2023",
name: "非機能要件（9品質特性）",
before: 55,
after: 92,
color: "#F5A623",
gap: "セキュリティ・パフォーマンスの2特性のみ。保守性・柔軟性・信頼性の定量基準なし",
fix: "9品質特性（機能適合性〜安全性）の定量的受入基準を全て追加",
},
{
id: "ieee1016",
code: "IEEE 1016:2009",
name: "設計記述（SDD）",
before: 55,
after: 92,
color: "#00C2A8",
gap: "論理ビューのみ。プロセス・データ・物理の3ビューが欠落",
fix: "4設計ビュー（論理・プロセス・データ・物理）を完全追加",
},
{
id: "googlesre",
code: "Google SRE PRR",
name: "本番移行チェックリスト",
before: 45,
after: 96,
color: "#F5A623",
gap: "3領域のみ対応。容量計画・監視・フェイルオーバーが完全欠落",
fix: "10領域（アーキテクチャ〜ドキュメント）の完全チェックリスト追加",
},
{
id: "anthropic",
code: "Anthropic公式 SDD",
name: "CLAUDE.md テンプレート",
before: 70,
after: 93,
color: "#00C2A8",
gap: "スペックドリフト対策・コンテキスト枯渇対策・スペック検証プロセスが不足",
fix: "ドリフト検出プロンプト3種 + CLAUDE.md 8項目完全版テンプレート追加",
},
{
id: "ieee829",
code: "IEEE 829:2008",
name: "テスト計画書（TP）",
before: 72,
after: 94,
color: "#F5A623",
gap: "テスト終了基準・中断基準・責任分担が欠落",
fix: "IEEE 829 準拠の12セクション構造（開始/終了/中断基準付き）を追加",
},
];
const OVERALL = { before: 67, after: 93 };
function ScoreBar({ value, max = 100, color }: { value: number; max?: number; color: string }) {
return (
<div className="relative h-3 rounded-full overflow-hidden" style={{ background: "rgba(255,255,255,0.08)" }}>
<div
className="h-full rounded-full transition-all duration-700"
style={{ width: `${(value / max) * 100}%`, background: color }}
/>
</div>
);
}
export default function WorldStandardSection() {
const [active, setActive] = useState<string | null>(null);
return (
<section
id="world-standard"
style={{ background: "#0D1B2A", borderTop: "1px solid #1E3A5F" }}
className="py-24"
>
<div className="max-w-6xl mx-auto px-6">
{/* Header */}
<div className="mb-16">
<p
className="text-xs font-semibold tracking-[0.2em] uppercase mb-4"
style={{ color: "#00C2A8" }}
>
WORLD STANDARD AUDIT
</p>
<h2
className="text-4xl md:text-5xl font-black mb-6"
style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8" }}
>
世界基準との
<br />
<span style={{ color: "#00C2A8" }}>対比診断レポート</span>
</h2>
<p className="text-lg max-w-2xl" style={{ color: "#8BA3BC", fontFamily: "'DM Sans', sans-serif" }}>
IEEE 29148 / ISO 25010 / IEEE 1016 / Google SRE / Anthropic公式SDD の5基準と照合。
既存体系の重大ギャップを特定し、全て補完した。
</p>
</div>
{/* Overall Score */}
<div
className="rounded-2xl p-8 mb-12"
style={{ background: "rgba(0,194,168,0.06)", border: "1px solid rgba(0,194,168,0.2)" }}
>
<div className="flex flex-col md:flex-row md:items-center gap-8">
<div className="flex-1">
<p className="text-sm font-semibold mb-2" style={{ color: "#8BA3BC" }}>総合スコア（補完前 → 補完後）</p>
<div className="flex items-end gap-4 mb-4">
<span className="text-5xl font-black" style={{ color: "#F5A623", fontFamily: "'Space Grotesk', sans-serif" }}>
{OVERALL.before}点
</span>
<span className="text-3xl mb-1" style={{ color: "#8BA3BC" }}>→</span>
<span className="text-5xl font-black" style={{ color: "#00C2A8", fontFamily: "'Space Grotesk', sans-serif" }}>
{OVERALL.after}点
</span>
</div>
<div className="flex gap-4 text-sm" style={{ color: "#8BA3BC" }}>
<span
className="px-3 py-1 rounded-full text-xs font-semibold"
style={{ background: "rgba(245,166,35,0.15)", color: "#F5A623" }}
>
C+（補完前）
</span>
<span
className="px-3 py-1 rounded-full text-xs font-semibold"
style={{ background: "rgba(0,194,168,0.15)", color: "#00C2A8" }}
>
A（補完後）
</span>
</div>
</div>
<div className="flex-1">
<div className="space-y-3">
<div>
<div className="flex justify-between text-xs mb-1" style={{ color: "#8BA3BC" }}>
<span>補完前</span><span>{OVERALL.before}/100</span>
</div>
<ScoreBar value={OVERALL.before} color="#F5A623" />
</div>
<div>
<div className="flex justify-between text-xs mb-1" style={{ color: "#8BA3BC" }}>
<span>補完後</span><span>{OVERALL.after}/100</span>
</div>
<ScoreBar value={OVERALL.after} color="#00C2A8" />
</div>
</div>
</div>
</div>
</div>
{/* Standard Cards */}
<div className="grid md:grid-cols-2 gap-4 mb-12">
{STANDARDS.map((s) => (
<div
key={s.id}
className="rounded-xl p-6 cursor-pointer transition-all duration-200"
style={{
background: active === s.id ? "rgba(0,194,168,0.08)" : "rgba(255,255,255,0.03)",
border: active === s.id ? "1px solid rgba(0,194,168,0.4)" : "1px solid rgba(255,255,255,0.06)",
}}
onClick={() => setActive(active === s.id ? null : s.id)}
>
<div className="flex items-start justify-between mb-4">
<div>
<span
className="text-xs font-semibold tracking-wider px-2 py-1 rounded"
style={{ background: "rgba(0,194,168,0.12)", color: "#00C2A8" }}
>
{s.code}
</span>
<h3
className="text-base font-bold mt-2"
style={{ color: "#F0F4F8", fontFamily: "'Space Grotesk', sans-serif" }}
>
{s.name}
</h3>
</div>
<div className="text-right">
<div className="flex items-center gap-2">
<span className="text-sm" style={{ color: "#F5A623" }}>{s.before}</span>
<span className="text-xs" style={{ color: "#8BA3BC" }}>→</span>
<span className="text-xl font-black" style={{ color: s.color, fontFamily: "'Space Grotesk', sans-serif" }}>
{s.after}
</span>
</div>
<div className="text-xs mt-1" style={{ color: "#8BA3BC" }}>/ 100点</div>
</div>
</div>
<div className="space-y-2 mb-3">
<div>
<div className="flex justify-between text-xs mb-1" style={{ color: "#8BA3BC" }}>
<span>補完前</span><span>{s.before}点</span>
</div>
<ScoreBar value={s.before} color="#F5A623" />
</div>
<div>
<div className="flex justify-between text-xs mb-1" style={{ color: "#8BA3BC" }}>
<span>補完後</span><span>{s.after}点</span>
</div>
<ScoreBar value={s.after} color={s.color} />
</div>
</div>
{active === s.id && (
<div
className="mt-4 pt-4 space-y-3"
style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }}
>
<div>
<p className="text-xs font-semibold mb-1" style={{ color: "#F5A623" }}>
❌ 補完前のギャップ
</p>
<p className="text-sm" style={{ color: "#8BA3BC", fontFamily: "'DM Sans', sans-serif" }}>
{s.gap}
</p>
</div>
<div>
<p className="text-xs font-semibold mb-1" style={{ color: "#00C2A8" }}>
✅ 補完した内容
</p>
<p className="text-sm" style={{ color: "#8BA3BC", fontFamily: "'DM Sans', sans-serif" }}>
{s.fix}
</p>
</div>
</div>
)}
<p className="text-xs mt-2" style={{ color: "rgba(0,194,168,0.6)" }}>
{active === s.id ? "▲ 閉じる" : "▼ 詳細を見る"}
</p>
</div>
))}
</div>
{/* Top 5 Critical Gaps */}
<div
className="rounded-2xl p-8"
style={{ background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.06)" }}
>
<h3
className="text-2xl font-black mb-6"
style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8" }}
>
重大ギャップ TOP 5
</h3>
<div className="space-y-4">
{[
{
rank: 1,
title: "SDD に IEEE 1016 準拠の4設計ビューが存在しない",
detail:
"「何を作るか」は書かれていたが、「どう動くか（プロセス）」「データはどう流れるか」「どのサーバーで動くか（物理）」の記述がなかった。Claude Code が実装時に設計の意図を誤解するリスクが高い。",
severity: "最重大",
},
{
rank: 2,
title: "本番移行チェックリストが Google SRE 基準の半分以下",
detail:
"Google SRE は10領域を要求するが、現体系は3領域のみ。容量計画・監視設定・障害時の自動フェイルオーバーが完全に欠落していた。",
severity: "重大",
},
{
rank: 3,
title: "ISO 25010:2023 の9品質特性が要件定義に反映されていない",
detail:
"セキュリティ・パフォーマンスの2特性のみで、保守性・柔軟性・信頼性の定量的な受入基準が存在しなかった。「動けばいい」から「品質が保証されている」への転換が必要。",
severity: "重大",
},
{
rank: 4,
title: "トレーサビリティマトリクスが存在しない",
detail:
"「この要件はどのテストで検証されるか」を追跡できる仕組みがなかった。テストが通っても要件を満たしているかどうかが確認できない状態だった。",
severity: "重大",
},
{
rank: 5,
title: "Anthropic公式SDDの「ドリフト検出」が未実装",
detail:
"Anthropic の公式調査によると Claude Code は CLAUDE.md の指示を無視するケースが文書化されている。現体系にはドリフトを検出・修正するプロセスが存在しなかった。",
severity: "重大",
},
].map((g) => (
<div
key={g.rank}
className="flex gap-4 p-4 rounded-xl"
style={{ background: "rgba(245,166,35,0.04)", border: "1px solid rgba(245,166,35,0.1)" }}
>
<div
className="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-sm font-black"
style={{ background: "rgba(245,166,35,0.15)", color: "#F5A623", fontFamily: "'Space Grotesk', sans-serif" }}
>
{g.rank}
</div>
<div>
<div className="flex items-center gap-2 mb-1">
<h4 className="text-sm font-bold" style={{ color: "#F0F4F8" }}>
{g.title}
</h4>
<span
className="text-xs px-2 py-0.5 rounded"
style={{
background: g.severity === "最重大" ? "rgba(239,68,68,0.15)" : "rgba(245,166,35,0.15)",
color: g.severity === "最重大" ? "#EF4444" : "#F5A623",
}}
>
{g.severity}
</span>
</div>
<p className="text-sm" style={{ color: "#8BA3BC", fontFamily: "'DM Sans', sans-serif" }}>
{g.detail}
</p>
</div>
</div>
))}
</div>
</div>
</div>
</section>
);
}
サイトセクション: 世界基準との対比診断レポート
元ファイル: システム要件定義の分析と汎用化方法/WorldStandardSection.tsx
要約
IEEE 29148/ISO 25010/IEEE 1016/Google SRE PRR/Anthropic公式SDD/IEEE 829の各基準に対し、補完前後のスコアを比較表示するReactセクション。総合67点→93点(C+→A)への改善を示し、各基準のギャップと補完内容をカード展開で提示する。
要点
- 6基準それぞれにbefore/afterスコアとスコアバーを表示
- 総合スコア 67→93(C+→A)を可視化
- IEEE 29148はStRS/SyRS/SRS 3層+トレーサビリティで補完
- ISO 25010は9品質特性の定量受入基準を追加
- Google SRE PRRは10領域の完全チェックリストで45→96へ