診断士ロードマップ

機能仕様書

中小企業診断士合格ロードマップ v1.0.0

最終更新: 2024年1月

1. システム概要

目的

中小企業診断士試験受験者の学習進捗を管理し、効率的な合格をサポートする。

主要コンセプト

  • 中小企業診断士試験の7科目管理
  • 試験日からの逆算による学習計画自動生成
  • 進捗の可視化と分析機能

ターゲットユーザー

  • 診断士試験の受験予定者・受験者
  • 独学で学習を進める人
  • 学習進捗を可視化したい人
  • 効率的な時間管理を求める社会人

2. 機能一覧

✅ 実装済み機能

学習計画機能

  • 試験日の設定
  • 1日の学習可能時間設定（0.5〜12時間）
  • 残り日数の自動計算
  • 科目別必要学習時間の自動配分

進捗管理機能

  • 科目別進捗の記録
  • レーダーチャートによる可視化
  • 学習履歴の保存（日時、科目、時間）
  • 進捗率の自動計算

統計ダッシュボード

  • 総学習時間の表示
  • 総学習日数の計算
  • 平均進捗率の表示
  • 最終学習日の記録（科目別）

UI/UX機能

  • レスポンシブデザイン（PC/タブレット/スマホ）
  • ダークモード対応
  • アニメーション効果（5種類）
  • 多言語対応（日本語/英語）
  • アクセシビリティ対応
  • 共通ヘッダー・ナビゲーション
  • フォントサイズ調整機能

データ管理

  • localStorageによるデータ永続化
  • データリセット機能
  • エラーハンドリングの実装

PWA機能

  • Service Worker実装（オフライン対応）
  • Web App Manifest（アプリインストール対応）
  • ファビコン・アプリアイコン完備
  • パッシブイベントリスナー最適化

SNS連携

  • 進捗シェア機能（Web Share API対応）
  • クリップボードコピー機能（フォールバック）
  • エラーハンドリング完備
  • 重複実行防止機能

詳細進捗分析

  • 科目別詳細統計（学習時間、目標達成率、残り時間）
  • 週次学習時間推移グラフ
  • 学習履歴タイムライン（最新20件）
  • 複合グラフ（進捗率＋学習時間）
  • 必要学習時間/日の自動計算
  • タブ切り替えによる分析視点の変更
  • モーダルウィンドウでの詳細表示

ランディングページ

  • サービス紹介と価値提案
  • 6つの主要機能の詳細説明
  • 統計情報（合格率、必要学習時間等）
  • 従来サービスとの比較表
  • 利用者の声・体験談
  • FAQ（よくある質問）
  • CTA（コール・トゥ・アクション）
  • スムーススクロール機能

過去問演習機能

  • 7科目対応の過去問データベース（各科目3問以上収録）
  • 科目選択機能（全科目・個別科目選択可能）
  • 問題数設定（10問・20問・50問・全問から選択）
  • 出題モード（ランダム・順番・間違えた問題のみ）
  • 制限時間設定（30分・60分・90分・120分）
  • 問題ナビゲーション（前の問題・次の問題・問題一覧）
  • マーク機能（後で見直す問題の管理）
  • リアルタイム進捗表示・タイマー機能
  • 詳細結果分析（正答率・科目別統計・間違えた問題の解説表示）
  • 演習履歴管理（過去50件の記録保存）
  • レスポンシブ対応（PC・タブレット・スマホ）
  • オフライン対応（Service Worker）

🚧 開発中機能

データインポート/エクスポート

  • JSON形式でのエクスポート機能
  • JSONファイルのインポート機能
  • CSV形式でのエクスポート機能

3. 技術仕様

使用技術

カテゴリ 技術 バージョン/詳細
言語 HTML5, CSS3, JavaScript ES6+
CSSフレームワーク Tailwind CSS v2.2.19 (CDN)
アイコン Font Awesome v6.4.0
チャート Chart.js 最新版 (CDN)
フォント Noto Sans JP Google Fonts
データストレージ localStorage Web Storage API

対応ブラウザ

  • Chrome 90以上
  • Firefox 88以上
  • Safari 14以上
  • Edge 90以上
  • モバイルブラウザ（iOS Safari, Chrome）

4. データ構造

データ形式

{
  "examDate": "2024-08-01",
  "dailyHours": 2,
  "subjects": {
    "economics": {
      "progress": 45,
      "hours": 30,
      "lastStudied": "2024-01-15"
    },
    // ... 他の6科目
  },
  "studyRecords": [
    {
      "date": "2024-01-15",
      "subject": "economics",
      "hours": 2.5,
      "memo": "マクロ経済学の基礎",
      "timestamp": "2024-01-15T10:00:00.000Z"
    }
  ],
  "quizResults": []
}

科目コード

コード 科目名 カラー
economics 経済学・経済政策 ■ red
finance 財務・会計 ■ orange
management 企業経営理論 ■ yellow
operations 運営管理 ■ green
legal 経営法務 ■ cyan
it 経営情報システム ■ blue
policy 中小企業経営・政策 ■ purple

5. UI/UX仕様

レスポンシブ対応

デバイス ブレークポイント レイアウト
モバイル 〜639px 1カラム表示、スタック配置
タブレット 640px〜1023px 2カラムグリッド
デスクトップ 1024px〜 サイドバー表示、4カラムグリッド

アクセシビリティ

  • キーボードナビゲーション対応（Tab/Shift+Tab/Enter/Space）
  • 適切なコントラスト比の確保
  • 適切なaria-label属性の設定
  • フォーカスインジケーターの明示

パフォーマンス最適化

  • CDN利用による高速読み込み
  • 遅延読み込みによるJavaScript最適化
  • 最小限のDOM操作
  • 適切なキャッシュ設定

6. セキュリティ

データ保護

  • すべてのデータはクライアント側（localStorage）に保存
  • サーバーへのデータ送信なし
  • 個人情報の収集なし
  • HTTPSによる通信暗号化（GitHub Pages）

プライバシー

  • ユーザー登録不要
  • Cookieの使用最小限
  • Google Tag Manager使用（アクセス解析のみ）

7. 今後の開発計画

Phase 2（2024年Q2）

  • 過去問演習機能の実装
  • データエクスポート/インポート機能
  • 詳細な統計分析機能

Phase 3（2024年Q3）

  • PWA完全対応（オフライン機能）
  • 学習リマインダー機能
  • AI学習アドバイザー機能

Phase 4（2024年Q4）

  • コミュニティ機能
  • 学習グループ機能
  • 成績予測機能