1. オンライン: インターネット接続が復旧しました

SVG矢印コンポーネント デモページ

復旧トリアージUI改善 Phase 2: SVG矢印可視化（印刷対応）

印刷プレビュー（Ctrl+P / Cmd+P）でSVG矢印の印刷表示を確認できます

1. 復旧戦略タブ - 戦略比較フロー図
TriageStrategySelector.tsx で使用される StrategyFlowDiagram コンポーネント
中核事業優先型1中核事業2関連業務3その他トリアージ型1容易な業務2中程度3困難な業務ハイブリッド型1重要×容易2並行復旧3残り業務
2. 業務マトリクスタブ - 推奨配置SVG矢印
PriorityMatrixGrid.tsx で使用される MatrixRecommendationArrow コンポーネント

推奨配置矢印の例

第2フェーズ第1フェーズ
第3フェーズ第2フェーズ
未配置第1フェーズ

復旧優先順位フロー

最優先
優先
通常
3. 復旧計画タブ - フェーズフロー全体図
RecoveryPhases.tsx で使用される PhaseFlowDiagram コンポーネント

フェーズフロー全体図（詳細版）

1緊急対応0～24時間安否確認被害把握対策本部設置2事業復旧24～72時間代替拠点システム復旧取引先連絡3完全復旧72時間～1週間通常業務復帰被害報告振り返り

フェーズフロー全体図（コンパクト版）

1
緊急対応0 ～ 24時間
2
事業復旧24 ～ 72時間
3
完全復旧72時間 ～ 1週間

フェーズ間遷移矢印（縦方向）

第1フェーズ（緊急対応）
24時間後
第2フェーズ（事業復旧）
72時間後
第3フェーズ（完全復旧）
4. タイムラインタブ - タイムラインフェーズ矢印
RecoveryTimeline.tsx で使用される TimelinePhaseArrow コンポーネント

タイムラインフェーズ矢印（横並び）

1
緊急対応0時間 ～ 24時間
2
事業復旧24時間 ～ 72時間
3
完全復旧72時間 ～ 1週間

フェーズフロー図（コンパクト版 - タイムライン用）

1
緊急対応0 ～ 24時間
2
事業復旧24 ～ 72時間
3
完全復旧72時間 ～ 1週間
印刷プレビューテスト

テスト手順：

  1. ブラウザの印刷機能を開く（Ctrl+P / Cmd+P）
  2. 印刷プレビューで全てのSVG矢印が正しく表示されることを確認
  3. 矢印の色、グラデーション、ラベルが崩れていないことを確認
  4. フロー図全体のレイアウトが崩れていないことを確認

※ 全てのSVGコンポーネントには print: クラスが適用されており、印刷時に最適化されます。

復旧トリアージUI改善 Phase 2: SVG矢印可視化（印刷対応）

2026-02-14 実装完了